:root{--ink:#19352b;--green:#1d6b4a;--lime:#ddec84;--paper:#f7f7f2;--sand:#eceae0;--line:#dcded5;--muted:#67736d}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,sans-serif}
main{max-width:1180px;margin:auto;padding:0 34px}
nav{height:68px;display:flex;align-items:center;justify-content:space-between}
.brand{font:600 15px ui-monospace,SFMono-Regular,monospace;letter-spacing:1.5px;color:var(--ink);text-decoration:none}
.brand span{color:#78a02d}
.quiet{color:var(--muted);font-size:14px;text-decoration:none}
.hero{position:relative;isolation:isolate;padding:48px 0 68px;max-width:900px}
.tennis-ball{position:absolute;z-index:-1;right:24px;top:18px;width:210px;height:210px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 32% 25%,#f5ffb0 0,#dceb68 36%,#bfd743 70%,#91ad26 100%);box-shadow:inset -18px -22px 28px #5e7e163d,inset 10px 9px 17px #fff7,0 28px 44px #66791e30;transform:rotate(-18deg)}
.tennis-ball:before,.tennis-ball:after,.ball:before,.ball:after{content:"";position:absolute;border-style:solid;border-color:#faf9e7;border-top-color:transparent;border-bottom-color:transparent;border-radius:50%}
.tennis-ball:before{width:138px;height:248px;left:-73px;top:-25px;border-width:7px}
.tennis-ball:after{width:138px;height:248px;right:-73px;top:-25px;border-width:7px}
.eyebrow{color:#66813d;letter-spacing:1.45px;font:11px ui-monospace,SFMono-Regular,monospace;margin:0 0 16px}
.hero h1,.booking h2,.success h2,.login h1,.dashhead h1{font:600 clamp(42px,6vw,76px)/.99 Georgia,serif;letter-spacing:-2.5px;margin:0}
.hero h1 em{color:var(--green)}
.intro{font-size:19px;line-height:1.55;max-width:550px;margin:29px 0 26px;color:#456055}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:34px}
.pills span{background:#fff;border:1px solid var(--line);padding:8px 11px;border-radius:99px;font-size:13px}
.button,.outline,.whatsapp{display:inline-flex;justify-content:center;align-items:center;gap:18px;border:0;border-radius:4px;padding:15px 20px;font:600 14px Inter,ui-sans-serif,sans-serif;cursor:pointer;text-decoration:none;transition:transform .18s,background .18s}
.button{background:var(--ink);color:white}
.button:hover{background:var(--green);transform:translateY(-2px)}
.button i{font-style:normal;font-size:18px}
.booking{border-radius:12px 12px 0 0;background:#fff;padding:72px;box-shadow:0 -10px 60px #dfe1d833}
.stephead h2{font-size:42px;letter-spacing:-1.5px}
.stephead>p:last-child{color:var(--muted);margin:10px 0 38px}
.booking #flow{display:grid;grid-template-columns:1.25fr .9fr;gap:50px;border-top:1px solid var(--line);padding-top:33px}
.calendar-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:23px}
.calendar-top button{background:none;border:1px solid var(--line);width:34px;height:34px;border-radius:50%;color:var(--ink);cursor:pointer}
.calendar-top button:disabled{opacity:.25}
.weekdays,.days{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;text-align:center}
.weekdays{font:11px ui-monospace,SFMono-Regular,monospace;color:var(--muted);margin-bottom:7px}
.days button,.days i{height:42px;border:0;background:transparent;border-radius:50%;font:500 14px Inter,ui-sans-serif,sans-serif}
.days button{cursor:pointer;color:var(--ink)}
.days button:hover:not(:disabled){background:#edf3d2}
.days button.selected{background:var(--ink);color:#fff}
.days button:disabled{color:#cbd0ca;cursor:not-allowed}
.slots-panel{border-left:1px solid var(--line);padding-left:42px}
.slots-panel h3{font:600 20px Georgia,serif;margin:0 0 21px;text-transform:capitalize}
.slots{display:grid;gap:7px}
.slot{border:1px solid var(--line);border-radius:4px;background:#fff;text-align:left;padding:12px 14px;color:var(--ink);font:14px Inter,ui-sans-serif,sans-serif;cursor:pointer}
.slot:hover:not(:disabled),.slot.selected{border-color:var(--green);background:#eff6e9}
.slot:disabled{color:#929b95;background:#f6f6f3;cursor:not-allowed}
.muted{color:var(--muted);font-size:14px}
.error{color:#ad3b35;font-size:14px}
form{margin-top:65px;border-top:1px solid var(--line);padding-top:38px}
.formhead h2{font-size:38px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:19px;margin:30px 0}
label{display:grid;gap:8px;font-size:13px;font-weight:600}
input,select,textarea{font:15px Inter,ui-sans-serif,sans-serif;border:1px solid var(--line);border-radius:4px;padding:13px;background:#fff;color:var(--ink);outline:0}
input:focus,select:focus,textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px #dfeecf}
textarea{resize:vertical;min-height:100px}
.wide{grid-column:1/-1}
.summary{display:grid;gap:5px;background:#f1f4e8;padding:17px 19px;border-left:3px solid #8dab51;margin:0 0 21px;font-size:14px}
.summary span{color:#52645b}
.success{text-align:center;padding:45px 0 10px}
.success h2{font-size:45px}
.success>p:not(.eyebrow){line-height:1.65;color:#4f6257;margin:20px auto;max-width:410px}
.ball{position:relative;overflow:hidden;width:64px;height:64px;background:radial-gradient(circle at 32% 24%,#f4ffad,#c7df4b 65%,#8da727);border-radius:50%;display:grid;place-items:center;margin:auto auto 24px;box-shadow:inset -6px -8px 12px #627e173d,0 10px 18px #71872b32}
.ball:before{width:40px;height:76px;left:-24px;top:-12px;border-width:3px}
.ball:after{width:40px;height:76px;right:-24px;top:-12px;border-width:3px}
.ball span{position:relative;z-index:1;width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:white;font-size:15px}
.actions{display:grid;gap:10px;max-width:350px;margin:30px auto}
.outline{border:1px solid var(--line);color:var(--ink);background:white}
.whatsapp{background:#e3f4dd;color:#1d5a2b}
footer{padding:35px;text-align:center;color:var(--muted);font:11px ui-monospace,SFMono-Regular,monospace}
footer a{color:inherit}
.location{display:grid;grid-template-columns:.8fr 1.2fr;gap:42px;align-items:center;padding:72px;background:var(--ink);color:white;border-radius:0 0 12px 12px}
.location h2{font:600 42px/1.05 Georgia,serif;letter-spacing:-1.5px;margin:0 0 16px}
.location-copy>p:not(.eyebrow){color:#c6d2cb;line-height:1.6;margin:0 0 25px}
.location .outline{background:transparent;color:white;border-color:#70837a}
.map{height:340px;border-radius:8px;overflow:hidden;background:#dfe5db;box-shadow:0 18px 38px #071a1238}
.map iframe{border:0;width:100%;height:100%;display:block}
.admin{background:#f4f5ef}
.login{max-width:420px;margin:85px auto}
.login h1{font-size:55px;margin-bottom:35px}
.login form{border:0;padding:0;margin:0;display:grid;gap:16px}
.dashhead{display:flex;justify-content:space-between;align-items:end;margin:45px 0 34px}
.dashhead h1{font-size:50px}
.counts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:28px}
.counts div{background:white;border:1px solid var(--line);padding:21px}
.counts b{font:600 36px Georgia,serif;display:block}
.counts span{font-size:13px;color:var(--muted)}
.tablewrap{overflow:auto;background:white;border:1px solid var(--line);border-radius:6px;margin-bottom:50px}
table{border-collapse:collapse;width:100%;min-width:920px;font-size:13px}
th{text-align:left;background:#f6f7f1;color:#6d766f;font:11px ui-monospace,SFMono-Regular,monospace;letter-spacing:.6px;padding:15px}
td{padding:17px 15px;border-top:1px solid var(--line);vertical-align:top;line-height:1.45}
td a{color:var(--green)}
.status{background:#e7f2df;color:#3c753d;padding:5px 7px;border-radius:99px;font-size:11px}
@media(max-width:700px){main{padding:0 20px}
nav{height:60px}
.hero{padding:34px 0 48px}
.tennis-ball{width:112px;height:112px;right:-15px;top:20px;opacity:.42}
.tennis-ball:before{width:72px;height:132px;left:-38px;top:-12px;border-width:4px}
.tennis-ball:after{width:72px;height:132px;right:-38px;top:-12px;border-width:4px}
.hero h1{font-size:46px;letter-spacing:-1.6px}
.intro{font-size:17px}
.booking{margin:0 -20px;padding:42px 20px;border-radius:0}
.booking #flow{grid-template-columns:1fr;gap:34px}
.slots-panel{border-left:0;border-top:1px solid var(--line);padding:31px 0 0}
.fields{grid-template-columns:1fr}
.wide{grid-column:auto}
.stephead h2,.formhead h2{font-size:35px}
.actions{max-width:none}
.counts{grid-template-columns:1fr}
.dashhead{align-items:start;gap:15px}
.dashhead h1{font-size:39px}
.days button,.days i{height:39px}
.location{grid-template-columns:1fr;margin:0 -20px;padding:42px 20px;gap:28px;border-radius:0}
.location h2{font-size:35px}
.map{height:290px}
}