/* Booking page and diagnosis form. Same look and motion as the scroll pages (PRU/WEBSITE/site).
   Red is never faded with opacity: over light it would show pink (C6). It is wiped, slid or clipped. */
:root{--red:#7D0000;--deep:#6A0000;--ink:#1A1A1A;--slate:#555555;--fog:#E5E5E5;--paper:#F8F8F8;--white:#FFFFFF;--serif:"Playfair Display",Georgia,serif;--sans:"DM Sans",system-ui,sans-serif;--side:max(16px,calc(50vw - 590px));--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}
html,body{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
p,h1,h2,h3,h4{margin:0}
a{color:inherit;text-decoration:none}
main{position:relative;z-index:1}

/* The band */
.band{position:sticky;top:0;z-index:30;height:88px;background:var(--paper);display:flex;align-items:center;justify-content:space-between;padding:0 var(--side)}
.band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--fog);opacity:var(--line,0)}
.wm{display:block;transform-origin:0 50%}
.wm b{display:block;font:600 26px/1.1 var(--serif)}.wm b span{color:var(--red)}
.wm small{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);margin-top:3px}
.links{display:flex;align-items:center;gap:clamp(20px,3vw,38px)}
.links a{position:relative;padding:6px 0;white-space:nowrap}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease)}
.links a:hover::after{transform:scaleX(1)}
.links .free{color:var(--red);font-weight:700}.links .free::after{background:var(--red)}
.burger{display:none;width:44px;height:44px;border:0;background:none;padding:12px 10px;cursor:pointer}
.burger i{display:block;height:2px;background:var(--ink);margin:5px 0;transition:transform .35s var(--ease)}
.band-open .burger i:first-child{transform:translateY(3.5px) rotate(45deg)}.band-open .burger i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.band-sheet{position:fixed;inset:0;z-index:25;background:var(--paper);padding:100px 16px 24px;display:flex;flex-direction:column;gap:6px;visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .5s var(--ease),visibility 0s .5s}
.band-open .band-sheet{clip-path:inset(0);visibility:visible;transition:clip-path .5s var(--ease)}
.band-sheet a{font:400 32px/1.5 var(--serif)}.band-sheet a.free{color:var(--red)}

/* Fog top holds while the white sheet slides over it */
.top{position:sticky;top:64px;z-index:0;overflow:hidden;background:var(--fog);padding:56px var(--side) 84px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
h1{font:600 clamp(34px,5.4vw,52px)/1.15 var(--serif);margin:10px 0 12px}h1 em{font-style:italic;font-weight:400;color:var(--red)}
.top>*{transform-origin:0 0;position:relative;z-index:1}
.top p.l{font-size:clamp(17px,2vw,20px);color:var(--slate);max-width:660px}
.top p.s{font-size:14px;color:var(--slate);max-width:660px;margin-top:10px}.top p.s a{text-decoration:underline}
.top .fig{position:absolute;z-index:0;right:max(8px,calc(50vw - 600px));bottom:-120px;height:470px;width:auto;transform-origin:50% 100%}
.grid{position:relative;z-index:1;margin-top:-32px;border-radius:32px 32px 0 0;background:var(--white);padding:44px var(--side) 64px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.flow{grid-column:2;grid-row:1;min-width:0}.what{grid-column:1;grid-row:1}
.what .eyebrow{font-size:12px;margin-bottom:14px}
.rows{position:relative;padding-top:3px;border-bottom:1px solid var(--fog)}
.rows::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--ink);transform:scaleX(var(--d,1));transform-origin:0 50%}
.what .row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px 14px;padding:24px 0;border-top:1px solid var(--fog)}.rows .row:first-child{border-top:0}
.what .n{font:600 44px/1 var(--serif);color:var(--red);font-variant-numeric:lining-nums}
.what .row b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--red);margin-bottom:4px}

/* Cards */
.card{background:var(--paper);border:1px solid var(--fog);border-radius:18px;padding:32px 28px}
.card h2{font:600 clamp(22px,2.6vw,26px)/1.3 var(--serif);margin-bottom:6px}
.card .lead{color:var(--slate);margin-bottom:18px}
.prog{height:3px;background:var(--fog);border-radius:2px;margin-bottom:24px;overflow:hidden}.prog i{display:block;height:100%;background:var(--red);transform-origin:0 50%}
.note{color:var(--slate);font-size:14px}.empty{color:var(--slate);padding:18px 4px}

/* Picking a time */
.days{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin:16px -2px 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}.days::-webkit-scrollbar{display:none}
.day{flex:1 0 64px;min-width:64px;border:1.5px solid var(--fog);border-radius:12px;background:linear-gradient(var(--red),var(--red)) 50% 100%/100% 0 no-repeat var(--white);padding:10px 6px;text-align:center;cursor:pointer;font:inherit;color:var(--ink);transition:border-color .2s,background-size .45s var(--ease),color .2s}
.day small{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);transition:color .2s}.day b{display:block;font:600 24px/1.25 var(--serif)}
.day:hover{border-color:var(--ink)}.day.on{border-color:var(--red);background-size:100% 100%;color:var(--white)}.day.on small{color:var(--white)}
.times{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;margin-top:6px}
.t{min-height:50px;border:1.5px solid var(--fog);background:var(--white);border-radius:12px;padding:0 6px;font:700 15px var(--sans);color:var(--ink);cursor:pointer;transition:border-color .2s,transform .2s}.t:hover{border-color:var(--red)}.t:active{transform:scale(.97)}
.pick{background:var(--fog);border-radius:12px;padding:14px 16px;margin:14px 0 20px;font-weight:700}

/* Fields */
label.f,div.f{display:block;margin:0 0 16px}label.f>span{display:block;font-size:14px;font-weight:700;margin-bottom:6px}label.f small{display:block;color:var(--slate);font-size:13px;margin-top:4px}
input:not([type=checkbox]):not([type=radio]),select{font:inherit;font-size:16px;width:100%;min-height:52px;padding:12px 14px;border:1.5px solid var(--fog);border-radius:12px;background:var(--white);color:var(--ink);outline:0;transition:border-color .2s}
input:not([type=checkbox]):not([type=radio]):focus,select:focus{border-color:var(--red)}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts label{flex:1;min-width:110px;min-height:52px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--fog);border-radius:12px;padding:8px 12px;cursor:pointer;background:linear-gradient(var(--red),var(--red)) 50% 100%/100% 0 no-repeat var(--white);font-weight:700;transition:border-color .2s,background-size .45s var(--ease),color .2s}
.opts label:hover{border-color:var(--ink)}.opts label.on{border-color:var(--red);background-size:100% 100%;color:var(--white)}.opts input{display:none}
.peso{position:relative}.peso:before{content:"₱";position:absolute;left:14px;top:14px;color:var(--slate);font-weight:700}.peso input:not([type=checkbox]){padding-left:30px}
.consent{display:flex;gap:10px;align-items:flex-start;margin:6px 0 10px;font-size:14px;line-height:1.45;color:var(--slate)}.consent input{width:24px;height:24px;margin:2px 0 0;flex:none;accent-color:var(--red)}.consent a,.card details a,.done a:not(.cta){text-decoration:underline}
details{margin:10px 0;font-size:14px;color:var(--slate)}summary{cursor:pointer;color:var(--red);font-weight:700}details p{margin:8px 0}
.nav{display:flex;gap:10px;margin-top:20px}
.next,.back{min-height:56px;border-radius:14px;font:600 17px var(--serif);cursor:pointer;transition:background .25s,transform .2s}
.next{flex:1;padding:0 18px;border:0;background:var(--red);color:var(--white)}.next:hover{background:var(--deep)}
.back{flex:none;padding:0 20px;border:1.5px solid var(--red);background:none;color:var(--red)}.back:hover{background:var(--fog)}
.next:active,.back:active{transform:scale(.98)}
.next[disabled]{background:var(--slate);cursor:wait}.back[disabled]{border-color:var(--slate);color:var(--slate);cursor:wait}
.err{color:var(--deep);font-size:14px;margin:10px 0 0;min-height:20px}.hp{position:absolute;left:-5000px;opacity:0;height:0;overflow:hidden}
.done{text-align:center}.done p{margin:0 0 12px}.done .big{font:italic 400 clamp(36px,5vw,46px)/1.15 var(--serif);color:var(--red);margin-bottom:14px}
.cta{display:flex;align-items:center;justify-content:center;min-height:60px;border-radius:14px;background:var(--red);color:var(--white);font:600 18px var(--serif);margin-top:18px;transition:background .25s}.cta:hover{background:var(--deep)}

/* Diagnosis form steps */
.grid.form{grid-template-columns:248px minmax(0,1fr);gap:48px}.form .flow{grid-column:2}
.rail{position:sticky;top:96px;grid-column:1;grid-row:1}.rail[hidden]{display:none!important}
.rail h3{font:700 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin:0 0 14px}
.rail ol{list-style:none;margin:0;padding:0;border-top:3px solid var(--ink)}
.rail li{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--fog);color:var(--slate);font-size:15px}
.rail .n{flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--fog);display:grid;place-items:center;font-size:13px;font-weight:700;background:var(--white)}
.rail li.cur{color:var(--ink);font-weight:700}.rail li.cur .n{background:var(--red);border-color:var(--red);color:var(--white)}
.rail li.ok{color:var(--ink)}.rail li.ok .n{background:var(--ink);border-color:var(--ink);color:var(--white);font-size:0}.rail li.ok .n:after{content:"\2713";font-size:14px}
#progress{display:none}
.bar{height:3px;background:var(--fog);border-radius:2px;margin:0 0 6px;overflow:hidden}.bar i{display:block;height:100%;width:20%;background:var(--red);transition:width .7s var(--ease)}
.steplabel{font-size:13px;font-weight:700}

/* Closing panel */
.tail{position:relative;z-index:1;background:var(--white)}
.closing{background:var(--red) url(pattern-red.svg) center/280px;color:var(--white);text-align:center;padding:clamp(72px,11vw,120px) 16px}
.closing .eyebrow{color:var(--white)}
.closing h2{font:600 clamp(32px,5.4vw,56px)/1.15 var(--serif);margin-top:12px}

/* Footer */
.site-foot{bottom:0;z-index:0;background:var(--ink);color:var(--fog);padding:48px var(--side) 28px;font-size:15px}
.site-foot a:hover{text-decoration:underline}
.site-foot .g{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:32px 24px}
.site-foot .brand img{height:42px;display:block;margin-bottom:18px}.site-foot .tagline{font:400 22px/1.3 var(--serif);color:var(--white);max-width:300px}.site-foot .pl{font-size:13px;margin-top:10px}
.site-foot h4{margin-bottom:12px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--white)}
.site-foot ul{list-style:none;margin:0;padding:0}.site-foot li{margin-bottom:7px}
.site-foot .legal{margin-top:36px;padding-top:18px;border-top:1px solid var(--slate);font-size:12px;line-height:1.6}.site-foot .legal p+p{margin-top:8px}.site-foot .legal a{text-decoration:underline}

@media (max-width:860px){
  .band{height:76px}.links a{display:none}.burger{display:block}.wm b{font-size:20px}.wm small{font-size:8.5px}
  .top{padding-top:36px;padding-bottom:64px}
  .grid,.grid.form{grid-template-columns:minmax(0,1fr);gap:36px;padding-top:32px;padding-bottom:44px}.flow,.what,.form .flow{grid-column:auto;grid-row:auto}
  .rail{display:none}
  .card{padding:24px 18px}
  #progress{display:block;position:sticky;top:64px;z-index:20;background:var(--white);margin:-8px -16px 14px;padding:10px 16px 8px;border-bottom:1px solid var(--fog)}
  .top .fig{right:-14px;bottom:-34px;height:236px}
  .book-top h1,.book-top p.l{max-width:66%}
  .site-foot{padding-top:40px}.site-foot .g{grid-template-columns:1fr 1fr;gap:24px 16px}.site-foot .brand,.site-foot .reach{grid-column:1/-1}.site-foot .legal{margin-top:24px}
}
@media (max-width:520px){form .row{grid-template-columns:1fr;gap:0}}
@media (max-height:620px){.top{position:relative;top:auto}}

/* First paint and step changes. Fill is backwards only, so the scroll motion takes over afterwards. */
@keyframes hs-mk{from{transform:translateY(70%);clip-path:inset(0 0 100% 0)}to{transform:none;clip-path:inset(0 0 -25% 0)}}
@keyframes hs-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -5% 0 0)}}
@keyframes hs-in{from{transform:translateY(22px);opacity:0}to{transform:none;opacity:1}}
@keyframes hs-card{from{transform:translateY(40px) scale(.97)}to{transform:none}}
@keyframes hs-small{from{transform:translateY(16px)}to{transform:none}}
@keyframes hs-fig{from{transform:translateY(70px)}to{transform:none}}
@keyframes hs-pop{from{transform:scale(.3)}to{transform:none}}
@keyframes hs-grow1{from{transform:scaleX(0)}to{transform:none}}
@keyframes hs-grow2{from{transform:scaleX(.5)}to{transform:none}}
@keyframes hs-grow3{from{transform:scaleX(.66)}to{transform:none}}
@media (prefers-reduced-motion:no-preference){
  .top>.eyebrow{animation:hs-wipe .9s var(--ease) .05s backwards}
  .top>h1{animation:hs-mk 1.1s var(--ease) .12s backwards}
  .top>p.l,.top>p.s{animation:hs-in 1s var(--ease) .32s backwards}
  .top .fig{animation:hs-fig 1.3s var(--ease) backwards}
  .flow>.card,section[data-step],.rail{animation:hs-card .8s var(--ease) backwards}
  .what .eyebrow,.what .row{animation:hs-card .9s var(--ease) .3s backwards}
  .done .big{animation:hs-mk 1s var(--ease) .2s backwards}
  .day,.t{animation:hs-small .55s var(--ease) backwards}
  .day:nth-child(2),.t:nth-child(2){animation-delay:.05s}.day:nth-child(3),.t:nth-child(3){animation-delay:.1s}.day:nth-child(4),.t:nth-child(4){animation-delay:.15s}.day:nth-child(5),.t:nth-child(5){animation-delay:.2s}.day:nth-child(6){animation-delay:.25s}.day:nth-child(7){animation-delay:.3s}
  section[data-step] label.f,section[data-step] div.f{animation:hs-small .6s var(--ease) .08s backwards}
  .rail li.cur .n{animation:hs-pop .5s var(--ease)}
  #s1 .prog i{animation:hs-grow1 1s var(--ease) .25s backwards}#s2 .prog i{animation:hs-grow2 1s var(--ease) .1s backwards}#s3 .prog i{animation:hs-grow3 1s var(--ease) .1s backwards}
}
.still .top{position:relative;top:auto}.still .site-foot{position:static}
@media (prefers-reduced-motion:reduce){.links a::after,.burger i,.band-sheet,.day,.opts label,.bar i{transition:none}}