:root { color-scheme:light; --ink:#2d1837; --purple:#5b326b; --purple-dark:#3e204d; --pink:#d99aae; --pink-soft:#efd4dc; --paper:#fbf7f4; --cream:#f4ece8; --line:rgba(65,34,76,.16); --white:#fffdfb; font-family:"Helvetica Neue",Arial,sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--paper); line-height:1.5; }
a { color:inherit; }
.booking-header { min-height:88px; padding:0 clamp(24px,4vw,64px); position:sticky; z-index:20; top:0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--line); background:rgba(251,247,244,.9); backdrop-filter:blur(15px); }
.booking-brand { width:max-content; display:flex; align-items:center; gap:12px; text-decoration:none; }
.booking-brand > span:last-child { display:grid; gap:2px; }
.booking-brand strong { font:500 14px/1.2 Georgia,"Times New Roman",serif; }
.booking-brand small { color:rgba(45,24,55,.48); font-size:8px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.brand-mark { width:34px; height:34px; position:relative; display:grid; place-items:center; border:1px solid var(--purple); border-radius:50%; }
.brand-mark::before,.brand-mark::after { content:""; position:absolute; width:15px; height:21px; border-radius:50%; }
.brand-mark::before { left:6px; background:var(--pink); }
.brand-mark::after { right:6px; border:1px solid var(--purple); }
.brand-mark i { position:relative; z-index:1; width:1px; height:24px; background:var(--purple); transform:rotate(34deg); }
.booking-header > p { margin:0; color:rgba(45,24,55,.45); font-size:8px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.close-booking { width:37px; height:37px; justify-self:end; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--purple); font:300 24px/1 Arial,sans-serif; text-decoration:none; }
.booking-page { width:min(1180px,calc(100% - 48px)); margin-inline:auto; padding:55px 0 45px; }
.booking-progress { max-width:760px; margin:0 auto 62px; display:flex; align-items:center; justify-content:center; }
.booking-progress span { display:flex; align-items:center; gap:9px; color:rgba(45,24,55,.35); font-size:8px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.booking-progress span i { width:27px; height:27px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; font-style:normal; }
.booking-progress span.active { color:var(--purple); }
.booking-progress span.active i { border-color:var(--purple); color:var(--white); background:var(--purple); }
.booking-progress em { width:clamp(25px,5vw,70px); height:1px; margin:0 12px; background:var(--line); }
.booking-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr); align-items:start; gap:clamp(45px,7vw,90px); }
.booking-form-card { padding:clamp(35px,5vw,62px); border:1px solid var(--line); background:var(--white); box-shadow:0 22px 65px rgba(62,32,77,.07); }
.section-number { margin-bottom:45px; display:flex; align-items:center; justify-content:space-between; color:rgba(45,24,55,.4); font-size:8px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.section-number span { color:var(--pink); font:500 11px/1 Georgia,serif; }
.section-number p { margin:0; }
.eyebrow { margin:0 0 18px; display:flex; align-items:center; gap:13px; color:var(--purple); font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.eyebrow span { width:30px; height:1px; background:var(--pink); }
.booking-form-card h1 { margin:0; font:400 clamp(48px,5vw,69px)/.94 Georgia,"Times New Roman",serif; letter-spacing:-.045em; }
.booking-form-card h1 em { color:var(--purple); font-weight:400; }
.booking-form-card header > p:last-child { max-width:570px; margin:25px 0 0; color:rgba(45,24,55,.58); font:400 15px/1.7 Georgia,"Times New Roman",serif; }
form { margin-top:43px; display:grid; grid-template-columns:1fr 1fr; gap:23px 16px; }
.field--wide,.consent { grid-column:1/-1; }
.field label { margin-bottom:8px; display:block; color:rgba(45,24,55,.58); font-size:8px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.field input,.field select,.field textarea { width:100%; border:1px solid var(--line); border-radius:0; outline:0; color:var(--ink); background:var(--paper); font:400 13px/1.5 Arial,sans-serif; transition:border-color .2s,background .2s; }
.field input,.field select { height:50px; padding:0 14px; }
.field textarea { min-height:105px; padding:13px 14px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--purple); background:var(--white); }
.field input::placeholder,.field textarea::placeholder { color:rgba(45,24,55,.34); }
.consent { margin-top:2px; display:grid; grid-template-columns:17px 1fr; align-items:start; gap:10px; cursor:pointer; }
.consent input { position:absolute; opacity:0; }
.consent > span { width:17px; height:17px; margin-top:2px; border:1px solid var(--line); background:var(--paper); }
.consent input:checked + span { border:4px solid var(--paper); background:var(--purple); box-shadow:0 0 0 1px var(--purple); }
.consent p { margin:0; color:rgba(45,24,55,.5); font-size:9px; line-height:1.6; }
.consent a { color:var(--purple); }
.booking-summary { display:grid; gap:20px; }
.summary-card { padding:31px 28px; color:var(--cream); background:var(--purple-dark); }
.summary-label { margin:0 0 24px; color:var(--pink); font-size:8px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.therapist-row { padding-bottom:24px; display:flex; align-items:center; gap:12px; border-bottom:1px solid rgba(244,236,232,.14); }
.therapist-row > span { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(239,212,220,.35); border-radius:50%; color:var(--pink); font:400 13px/1 Georgia,serif; }
.therapist-row > div { display:grid; gap:3px; }
.therapist-row strong { font:400 14px/1.2 Georgia,"Times New Roman",serif; }
.therapist-row small { color:rgba(244,236,232,.4); font-size:7px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.summary-card dl { margin:8px 0 0; }
.summary-card dl > div { padding:16px 0; display:grid; grid-template-columns:.7fr 1.3fr; gap:12px; border-bottom:1px solid rgba(244,236,232,.1); }
.summary-card dt { color:rgba(244,236,232,.4); font-size:7px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.summary-card dd { margin:0; color:rgba(244,236,232,.78); font:400 12px/1.4 Georgia,"Times New Roman",serif; text-align:right; }
.online-note { margin-top:24px; display:grid; grid-template-columns:28px 1fr; gap:10px; }
.online-note > span { width:28px; height:28px; display:grid; place-items:center; border:1px solid rgba(239,212,220,.2); border-radius:50%; color:var(--pink); }
.online-note p { margin:0; color:rgba(244,236,232,.46); font-size:9px; line-height:1.6; }
.online-note strong { margin-bottom:3px; display:block; color:var(--pink-soft); font-size:7px; letter-spacing:.1em; text-transform:uppercase; }
.next-step-preview { padding:26px; border:1px solid var(--line); background:var(--pink-soft); }
.next-step-preview > span { color:var(--purple); font-size:8px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.mini-calendar { margin:21px 0; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.mini-calendar i { height:22px; border:1px solid rgba(91,50,107,.15); background:rgba(255,253,251,.45); }
.mini-calendar i:nth-child(6),.mini-calendar i:nth-child(10) { border-color:var(--purple); background:var(--purple); }
.next-step-preview p { margin:0; color:rgba(45,24,55,.57); font:400 12px/1.65 Georgia,"Times New Roman",serif; }
.booking-actions { margin-top:32px; padding-top:24px; display:flex; align-items:center; justify-content:space-between; gap:30px; border-top:1px solid var(--line); }
.booking-actions > a { color:rgba(45,24,55,.52); font-size:8px; font-weight:700; letter-spacing:.12em; text-decoration:none; text-transform:uppercase; }
.booking-actions > a span { margin-right:10px; color:var(--pink); }
.booking-actions > div { display:flex; align-items:center; gap:22px; }
.booking-actions p { margin:0; color:rgba(45,24,55,.4); font-size:8px; letter-spacing:.05em; }
.booking-actions button { min-height:51px; padding:0 19px; border:0; display:flex; align-items:center; gap:35px; color:var(--white); background:var(--purple); font-size:8px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.booking-actions button span { font-size:15px; }
@media(max-width:900px){.booking-layout{grid-template-columns:1fr}.booking-summary{grid-template-columns:1fr 1fr}.booking-progress span b{display:none}.booking-progress em{width:40px}.booking-actions>div{align-items:flex-end;flex-direction:column}}
@media(max-width:650px){.booking-header{min-height:74px;padding:0 18px;grid-template-columns:1fr auto}.booking-header>p{display:none}.booking-brand small{display:none}.booking-page{width:min(100% - 28px,1180px);padding-top:38px}.booking-progress{margin-bottom:38px}.booking-progress em{width:17px;margin:0 5px}.booking-progress span i{width:24px;height:24px}.booking-form-card{padding:31px 20px}.booking-form-card h1{font-size:48px}form{grid-template-columns:1fr}.field--wide,.consent{grid-column:1}.booking-summary{grid-template-columns:1fr}.booking-actions{align-items:flex-start;flex-direction:column}.booking-actions>div{width:100%;align-items:flex-start}.booking-actions button{width:100%;justify-content:space-between}}
.patient-flow { margin-top:42px; }
.flow-radio { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.patient-type-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.patient-type-options label { min-height:78px; padding:14px 15px; display:grid; grid-template-columns:38px 1fr 14px; align-items:center; gap:12px; border:1px solid var(--line); color:rgba(45,24,55,.58); background:var(--paper); cursor:pointer; transition:border-color .2s,background .2s,color .2s; }
.patient-type-options label:hover { border-color:rgba(91,50,107,.4); }
.type-icon { width:37px; height:37px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--pink); font:400 17px/1 Georgia,"Times New Roman",serif; }
.patient-type-options label > span:nth-child(2) { display:grid; gap:4px; }
.patient-type-options strong { font:400 14px/1.2 Georgia,"Times New Roman",serif; }
.patient-type-options small { color:rgba(45,24,55,.42); font-size:7px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.patient-type-options label > i { width:12px; height:12px; border:1px solid rgba(91,50,107,.28); border-radius:50%; }
#new-patient:checked ~ .patient-type-options label[for="new-patient"],#returning-patient:checked ~ .patient-type-options label[for="returning-patient"] { border-color:var(--purple); color:var(--ink); background:var(--pink-soft); }
#new-patient:checked ~ .patient-type-options label[for="new-patient"] > i,#returning-patient:checked ~ .patient-type-options label[for="returning-patient"] > i { border:3px solid var(--pink-soft); background:var(--purple); box-shadow:0 0 0 1px var(--purple); }
.flow-panel { display:none; margin-top:38px; padding-top:34px; border-top:1px solid var(--line); }
#new-patient:checked ~ .flow-panel--new,#returning-patient:checked ~ .flow-panel--returning { display:block; }
.flow-panel-heading { margin-bottom:25px; display:grid; grid-template-columns:34px 1fr; gap:9px; }
.flow-panel-heading > span { padding-top:5px; color:var(--pink); font:500 9px/1 Georgia,"Times New Roman",serif; }
.flow-panel-heading h2 { margin:0 0 4px; font:400 24px/1.15 Georgia,"Times New Roman",serif; }
.flow-panel-heading p { margin:0; color:rgba(45,24,55,.46); font-size:9px; }
.flow-panel form { margin-top:0; }
.referral-box { margin:8px 0 2px; padding:23px; border:1px solid rgba(91,50,107,.18); background:rgba(239,212,220,.42); }
.referral-box legend { padding:0 8px; color:var(--purple); font-size:8px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.referral-heading { margin-bottom:21px; display:grid; grid-template-columns:28px 1fr; gap:10px; }
.referral-heading > span { width:27px; height:27px; display:grid; place-items:center; border:1px solid rgba(91,50,107,.2); border-radius:50%; color:var(--pink); }
.referral-heading strong { display:block; font:400 15px/1.25 Georgia,"Times New Roman",serif; }
.referral-heading p { margin:4px 0 0; color:rgba(45,24,55,.48); font-size:9px; line-height:1.5; }
.referral-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.referral-fields .field input,.referral-fields .field select { background:rgba(255,253,251,.72); }
.returning-card { min-height:365px; padding:35px; position:relative; overflow:hidden; border:1px solid rgba(91,50,107,.18); background:var(--pink-soft); }
.returning-card::after { content:""; position:absolute; width:250px; height:250px; right:-155px; bottom:-170px; border:1px solid rgba(91,50,107,.11); border-radius:50%; }
.returning-symbol { position:absolute; right:32px; top:30px; width:56px; height:56px; display:grid; place-items:center; border:1px solid rgba(91,50,107,.22); border-radius:50%; }
.returning-symbol span { color:var(--purple); font:400 13px/1 Georgia,"Times New Roman",serif; }
.returning-symbol i { position:absolute; width:1px; height:68px; background:rgba(91,50,107,.15); transform:rotate(42deg); }
.returning-card .flow-panel-heading { max-width:420px; padding-right:75px; }
.patient-number-field { max-width:390px; margin-top:48px; }
.patient-number-field > label { margin-bottom:9px; display:block; color:rgba(45,24,55,.58); font-size:8px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.patient-number-field > div { height:58px; display:grid; grid-template-columns:auto 1fr; align-items:center; border:1px solid rgba(91,50,107,.28); background:var(--white); }
.patient-number-field > div > span { padding:0 0 0 16px; color:var(--pink); font:400 16px/1 Georgia,"Times New Roman",serif; }
.patient-number-field input { width:100%; height:56px; padding:0 16px 0 5px; border:0; outline:0; color:var(--ink); background:transparent; font:400 17px/1 Arial,sans-serif; letter-spacing:.12em; }
.patient-number-field input::placeholder { color:rgba(45,24,55,.3); }
.patient-security { max-width:430px; margin:15px 0 0; display:flex; gap:9px; color:rgba(45,24,55,.48); font-size:9px; line-height:1.6; }
.patient-security span { color:var(--pink); font-size:14px; }
.help-link { margin-top:28px; padding-bottom:5px; display:inline-block; border-bottom:1px solid var(--pink); color:var(--purple); font-size:8px; font-weight:700; letter-spacing:.11em; text-decoration:none; text-transform:uppercase; }
.help-link span { margin-left:15px; }
@media(max-width:650px){.patient-type-options{grid-template-columns:1fr}.referral-fields{grid-template-columns:1fr}.returning-card{min-height:400px;padding:28px 20px}.returning-symbol{right:20px;top:22px}.patient-number-field{margin-top:38px}.flow-panel-heading{padding-right:50px}}
