:root{--ink:#202222;--muted:#565354;--rose:#f1d8dc;--accent:#783e4c;--paper:#fcfbfb;--line:#d8cecf;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}.skip{position:absolute;top:-100px;background:white;padding:15px;z-index:20}.skip:focus{top:0}.preview{background:var(--ink);color:#fff;padding:9px 5%;font-size:10px;letter-spacing:.13em;display:flex;justify-content:space-between}.preview span{letter-spacing:0;font-size:11px}header{height:88px;margin:auto;max-width:1440px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;gap:24px}.wordmark{font-size:45px;font-weight:600;letter-spacing:-4px;line-height:1}.wordmark span{display:block;font-size:9px;letter-spacing:2.2px;font-weight:500;margin-top:9px}nav{display:flex;gap:35px;font-size:13px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:45px;background:var(--ink);color:white;padding:19px 25px;font-size:14px;border:1px solid var(--ink);border-radius:0;white-space:nowrap;transition:background .2s,transform .2s}.button:hover{background:var(--accent);border-color:var(--accent)}.button:active{transform:scale(.98)}.button span{font-size:20px}.button.small{padding:11px 18px;gap:28px}.hero{display:grid;grid-template-columns:1fr 1fr;min-height:590px;max-width:1440px;margin:auto;padding:0 5% 38px;gap:5%}.hero-copy{padding:66px 0 40px;align-self:center}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2px;margin:0 0 29px}h1{font-size:clamp(60px,7.7vw,110px);letter-spacing:-6px;line-height:.98;margin:0 0 28px;font-weight:500}p{line-height:1.7}.hero-copy>p:not(.eyebrow){max-width:320px;font-size:16px;color:var(--muted);margin-bottom:28px}.actions{display:flex;align-items:center;gap:28px}.text-link{display:inline-flex;gap:24px;align-items:center;border:0;border-bottom:1px solid currentColor;background:none;padding:10px 0;font-size:13px;color:var(--ink)}.hero-photo{position:relative;margin:0;background:var(--rose);min-height:560px;overflow:hidden}.hero-photo img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center 38%}.hero-photo figcaption{position:absolute;bottom:0;left:0;background:rgba(255,255,255,.92);padding:7px 12px;font-size:10px}.photo-label{position:absolute;right:18px;top:24px;text-align:right;line-height:.9;font-size:22px;letter-spacing:-1px;color:#fff;text-shadow:0 1px 5px #333}.ribbon{display:flex;justify-content:space-around;background:var(--rose);padding:23px 5%;font-size:13px}.ribbon span+span:before{content:'+';margin-right:9vw;color:var(--accent)}.section{max-width:1440px;margin:auto;padding:96px 5%}h2{font-size:clamp(34px,4vw,56px);font-weight:500;letter-spacing:-2px;line-height:1.1;margin:0 0 24px}.intro{color:var(--muted);max-width:520px;font-size:15px;margin-bottom:36px}.service-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:22px}.service{padding:40px;min-height:340px;position:relative;overflow:hidden}.service.hair{background:var(--ink);color:white}.service.nails{background:var(--rose)}.number{font-size:10px;letter-spacing:1.4px}h3{font-size:22px;font-weight:500;margin:0 0 10px}.service h3{font-size:42px;letter-spacing:-1.6px;line-height:1.07;margin:35px 0 18px}.service p{max-width:330px;font-size:14px}.service .text-link{color:inherit}.pending{font-size:12px!important;color:var(--muted);border-left:2px solid var(--accent);padding-left:12px}.hair .pending{color:#d6cdd0;border-color:#d6a5b1}.experience{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:8%}.steps{list-style:none;margin:0;padding:0}.steps li{display:flex;gap:30px;padding:26px 0;border-bottom:1px solid var(--line)}.steps li:first-child{padding-top:0}.steps li>span{font-size:12px;color:var(--accent);padding-top:5px}.steps p{font-size:14px;color:var(--muted);margin:0}.area{background:#eeebec;display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center}.area p{max-width:420px;font-size:15px}.area-graphic{background:var(--rose);aspect-ratio:1.25;display:grid;place-content:center;text-align:center;font-size:35px;letter-spacing:-1.8px;line-height:1.1;position:relative;background-image:linear-gradient(#ffffff55 1px,transparent 1px),linear-gradient(90deg,#ffffff55 1px,transparent 1px);background-size:48px 48px}.area-dot{width:25px;height:25px;background:var(--accent);border-radius:50%;justify-self:center;margin-bottom:24px;outline:15px solid #783e4c14}.work-slots{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}.work-slots>div{border:1px dashed #b5a5a9;min-height:160px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;font-size:13px;color:var(--muted)}.work-slots span{font-size:11px}.faq{display:grid;grid-template-columns:1fr 1.2fr;gap:8%;border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line);padding:24px 0}details:first-child{padding-top:0}summary{cursor:pointer;font-size:16px;line-height:1.5}details p{font-size:14px;color:var(--muted)}.booking{background:var(--rose);display:grid;grid-template-columns:1fr 1fr;gap:10%}.booking>div>p{font-size:14px;max-width:360px}.booking-status{border-top:1px solid #c4a7ad;padding-top:20px;font-size:12px!important}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}label{display:block;font-size:12px;margin:0 0 9px}label span{color:var(--muted)}input,select,textarea{width:100%;min-height:47px;background:#fcfbfb;border:1px solid #a98f96;padding:12px;margin:0 0 19px;color:var(--ink);border-radius:0}textarea{resize:vertical}textarea::placeholder{color:#6b6063}.form-help{font-size:11px;line-height:1.6;margin:0 0 20px}#result{border:1px solid var(--accent);padding:18px;margin-top:20px;font-size:13px}#result p{white-space:pre-wrap;overflow-wrap:anywhere}footer{max-width:1440px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:25px;padding:45px 5%}footer p{font-size:13px}footer>span{font-size:10px;color:var(--muted)}.mobile-book{display:none}@media(min-width:1600px){.hero-photo{min-height:620px}}@media(max-width:767px){.preview{padding:8px 5%;font-size:9px}.preview span{max-width:200px;text-align:right;font-size:9px}header{height:78px;gap:10px}nav{display:none}.wordmark{font-size:38px}.hero{grid-template-columns:1fr;gap:25px;padding-bottom:26px;min-height:0}.hero-copy{padding:34px 0 0}h1{font-size:70px;letter-spacing:-4px}.hero-copy>p:not(.eyebrow){font-size:15px;max-width:310px}.eyebrow{margin-bottom:21px}.hero-photo{min-height:390px}.actions{gap:22px}.ribbon{font-size:11px;padding:19px 5%}.ribbon span+span:before{margin-right:4vw}.section{padding:62px 5%}.service-grid,.experience,.area,.faq,.booking{grid-template-columns:1fr;gap:32px}.service{padding:28px;min-height:320px}.service-grid{gap:16px}.service h3{font-size:39px}.work-slots{grid-template-columns:1fr}.work-slots>div{min-height:110px}.area-graphic{aspect-ratio:1.6}.form-row{grid-template-columns:1fr;gap:0}h2{font-size:39px}.steps li{gap:22px}.faq{gap:10px}.booking{gap:25px}footer{align-items:flex-start;flex-wrap:wrap;padding-bottom:110px}footer>span{width:100%}.mobile-book{display:flex;position:fixed;bottom:16px;left:5%;right:5%;z-index:5;padding:14px 22px;box-shadow:0 3px 20px #783e4c30}#booking{scroll-margin-top:10px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}@media(max-width:360px){h1{font-size:60px}.actions{gap:16px}.button{gap:26px}.text-link{gap:12px}}

.owner{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center;border-top:1px solid var(--line)}.owner figure{margin:0}.owner img{display:block;width:100%;height:auto}.owner figcaption{font-size:10px;padding-top:10px;color:var(--muted)}.owner p{max-width:390px;font-size:15px}@media(max-width:767px){.owner{grid-template-columns:1fr;gap:30px}}
.service-choices{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0}.service-choices button{background:transparent;color:inherit;border:1px solid #aaa;padding:12px;font-size:13px}.service-choices button:hover{background:#ffffff22}dialog{width:min(610px,94vw);max-height:90dvh;padding:30px;border:1px solid var(--line);background:var(--paper);color:var(--ink);overflow:auto}dialog::backdrop{background:#20222299}.dialog-header{display:flex;align-items:start;justify-content:space-between;gap:18px}.dialog-header h2{font-size:30px;letter-spacing:-1px}.dialog-header button{background:none;border:1px solid var(--line);padding:10px;white-space:nowrap}fieldset{border:0;padding:0;margin:0 0 22px}legend{font-size:14px;margin-bottom:12px}.choice{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);margin-bottom:8px;font-size:14px}.choice input{width:18px;min-height:18px;height:18px;margin:0;accent-color:var(--accent)}.booking-open{overflow:hidden}[hidden]{display:none!important}@media(max-width:767px){dialog{width:100%;max-width:100%;max-height:92dvh;margin:auto 0 0;padding:24px 20px 35px;border-bottom:0;animation:sheet-in .2s ease-out}.dialog-header h2{font-size:27px}dialog .form-row{grid-template-columns:1fr}}@keyframes sheet-in{from{transform:translateY(25px);opacity:0}to{transform:translateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){dialog{animation:none}}
/* Continuous decorative hair backdrop. Single decorative layer spans the document with no repeated seams. */
body{position:relative;isolation:isolate;background:var(--paper)}
body::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(90deg,rgba(252,251,251,.88),rgba(252,251,251,.72) 55%,rgba(252,251,251,.58)),url('assets/long-hair-background.jpg');background-size:100% 100%;background-position:center top;background-repeat:no-repeat}
.area{background:rgba(238,235,236,.75)}
.booking,.ribbon{background:rgba(241,216,220,.84)}
.service.nails{background:rgba(241,216,220,.9)}
.work-slots>div{background:rgba(252,251,251,.74)}
@media(max-width:767px){body::before{background-position:64% center;background-image:linear-gradient(90deg,rgba(252,251,251,.9),rgba(252,251,251,.77) 65%,rgba(252,251,251,.67)),url('assets/long-hair-background.jpg')}}
@media print{body::before{display:none}}
/* Motion: restrained, once-only reveals and a slow decorative hair drift. */
@keyframes hair-breathe{0%,100%{opacity:.8}50%{opacity:1}}
body::before{animation:hair-breathe 16s ease-in-out infinite}
.motion-ready .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.65,.3,1);transition-delay:var(--reveal-delay,0ms)}
.motion-ready .reveal.is-visible{opacity:1;transform:none}
.hero-photo img{animation:portrait-arrive 1.1s cubic-bezier(.2,.65,.3,1) both}
@keyframes portrait-arrive{from{opacity:.6;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}
.button,.service-choices button,.text-link{transition:background-color .2s ease,color .2s ease,transform .2s ease,border-color .2s ease}
.button span,.text-link span{display:inline-block;transition:transform .2s ease}
@media(hover:hover){.button:hover span,.text-link:hover span{transform:translate(3px,-2px)}.service-choices button:hover{transform:translateY(-2px)}}
dialog[open]{animation:dialog-arrive .22s ease-out}
@keyframes dialog-arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){body::before,.hero-photo img,dialog[open]{animation:none}.motion-ready .reveal{opacity:1;transform:none;transition:none}.button span,.text-link span{transition:none;transform:none!important}}
@media print{.motion-ready .reveal{opacity:1;transform:none}}
/* Rounded interactive controls; content sections retain their existing shape. */
.button,.button.small,.service-choices button,.dialog-header button{border-radius:999px;justify-content:center;gap:0}
button.text-link{border:1px solid currentColor;border-radius:999px;padding:11px 22px}
.text-link{gap:0}.button span,.text-link span{display:none}
/* Approved combing footage can replace the decorative still through config.js. */
.hair-motion{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hair-motion video{width:100%;height:100%;object-fit:cover;object-position:center}
.hair-motion::after{content:"";position:absolute;inset:0;background:rgba(252,251,251,.8)}
body.has-hair-video::before{display:none}
@media(max-width:767px){.hair-motion::after{background:rgba(252,251,251,.86)}}

/* A deliberately small static portfolio: three real video stills, no embeds. */
.work{background:#252627;color:#fcfbfb;padding-top:75px;padding-bottom:65px;margin-top:25px;margin-bottom:25px}
.work .intro{color:#d4ced0;max-width:540px}.portfolio-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;align-items:start;margin:42px 0 32px}.portfolio-grid figure{margin:0}.portfolio-grid figure:nth-child(2){padding-top:45px}.portfolio-grid img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 32%;background:#3c3c3e}.portfolio-grid figcaption{padding:18px 0;color:#f1d8dc;font-size:13px}.portfolio-grid figcaption span{font-size:10px;color:#beb5b9;margin-right:14px}.portfolio-footer{display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid #535052;padding-top:26px}.portfolio-source{font-size:12px;color:#e0d8db;text-decoration:underline;text-underline-offset:5px}.work .button{background:var(--rose);color:var(--ink);border-color:var(--rose)}.work .button:hover{background:#fff;color:var(--ink)}@media(max-width:767px){.portfolio-grid{grid-template-columns:1fr;max-width:370px;margin:30px auto;gap:28px}.portfolio-grid figure:nth-child(2){padding-top:0}.portfolio-footer{align-items:flex-start;flex-direction:column}.work{padding-top:55px;padding-bottom:45px}.portfolio-grid img{aspect-ratio:4/5}}

/* Background-free portfolio photos; retain the full-page hair backdrop. */
.work{background:#eeebec;color:var(--ink)}.work .intro{color:var(--muted)}
.portfolio-grid img{background:#e2dddf;object-fit:contain;object-position:center bottom;height:440px;aspect-ratio:auto}
.portfolio-grid figcaption{color:var(--ink)}.portfolio-grid figcaption span{color:var(--muted)}
.portfolio-footer{border-color:var(--line)}.portfolio-source{color:var(--muted)}
.work .button{background:var(--ink);color:white;border-color:var(--ink)}.work .button:hover{background:var(--accent);color:white}
@media(max-width:767px){.portfolio-grid img{height:420px}}

.portfolio-note{font-size:11px;color:var(--muted);margin:0 0 22px}

/* Actual client portrait replaces the generated hero. Keep the hairstyle visible. */
.hero-photo img{object-fit:contain;object-position:center bottom}

/* Keep actions compact: grid children must not stretch into oversized circles. */
.button{min-height:48px;width:fit-content;max-width:100%;align-self:start;justify-self:start;padding:15px 26px;line-height:1.2}
.button.small{min-height:42px;padding:11px 20px}.mobile-book.button{width:auto;justify-self:auto}
.booking{grid-template-columns:1fr}.booking>div{max-width:650px}.booking>div>p{max-width:520px}
@keyframes title-enter{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}
@keyframes portrait-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes hair-drift{0%,100%{transform:translateX(-.4%);opacity:.85}50%{transform:translateX(.4%);opacity:1}}
.hero-copy h1{animation:title-enter .9s cubic-bezier(.2,.65,.3,1) both}
.hero-copy .actions{animation:title-enter 1s .2s cubic-bezier(.2,.65,.3,1) both}
.hero-photo img{animation:portrait-float 6s ease-in-out infinite}
body::before{animation:hair-drift 12s ease-in-out infinite}
.motion-ready .reveal{transform:translateY(38px);transition-duration:.9s}
.motion-ready .reveal.is-visible{transform:none}
.portfolio-grid figure{transition:transform .35s ease}
@media(hover:hover){.portfolio-grid figure:hover{transform:translateY(-9px)}}
@media(max-width:767px){.mobile-book.button{justify-content:center}}
@media(prefers-reduced-motion:reduce){.hero-copy h1,.hero-copy .actions,.hero-photo img,body::before{animation:none!important}.motion-ready .reveal{transform:none;opacity:1}.portfolio-grid figure{transition:none;transform:none!important}}
/* Editorial card choreography: alternating scroll depth plus pointer tilt. */
.motion-shell{min-width:0;perspective:1100px;position:relative}
.motion-shell>.moving-card{width:100%;height:100%;transform-origin:center;transition:transform .32s cubic-bezier(.2,.65,.3,1),box-shadow .35s ease;backface-visibility:hidden}
.motion-shell.card-pending{opacity:0;translate:0 65px;rotate:1.5deg;transition:opacity .8s ease,translate 1s cubic-bezier(.16,1,.3,1),rotate 1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--card-index)*110ms)}
.motion-shell.card-arrived{opacity:1;translate:0 0;rotate:0deg}
.service-grid{gap:32px;padding:24px 0}.service-grid .service{min-height:390px}
.portfolio-grid{gap:38px;padding:24px 0 18px}
.portfolio-grid .motion-shell:nth-child(2){margin-top:48px}
.portfolio-grid .motion-shell>figure{padding:0!important;margin:0;background:#e2dddf;border-radius:18px;overflow:hidden}
.portfolio-grid .moving-card img{background:transparent;transition:scale .6s cubic-bezier(.2,.65,.3,1);transform-origin:50% 75%}
.portfolio-grid figcaption{padding:20px 22px}
.moving-card.card-engaged{box-shadow:0 24px 45px -20px rgba(80,51,61,.34)}
.moving-card.card-engaged img{scale:1.035}
@media(hover:hover){.portfolio-grid figure:hover{transform:none}}
@media(max-width:767px){.service-grid{gap:32px}.portfolio-grid{gap:35px;padding-top:12px}.portfolio-grid .motion-shell:nth-child(2){margin-top:0}.service-grid .service{min-height:340px}}
@media(prefers-reduced-motion:reduce){.motion-shell.card-pending{opacity:1;translate:none;rotate:none;transition:none}.motion-shell>.moving-card{transform:none!important;transition:none}.moving-card img{transition:none;scale:1!important}}
/* Nail inspiration lives within the service card, keeping the gallery focused. */
.nail-inspiration{margin:25px -40px -40px;position:relative;overflow:hidden;background:#e9cbd2}
.nail-inspiration img{width:100%;height:230px;object-fit:cover;display:block;transition:scale .6s ease}
.nail-inspiration figcaption{position:absolute;bottom:12px;left:16px;background:rgba(252,251,251,.93);padding:6px 10px;font-size:10px;color:var(--muted)}
@media(hover:hover){.nails:hover .nail-inspiration img{scale:1.04}}
@media(max-width:767px){.nail-inspiration{margin:25px -28px -28px}.nail-inspiration img{height:220px}}
@media(prefers-reduced-motion:reduce){.nail-inspiration img{transition:none;scale:1!important}}
/* Header action aligns with the wordmark and navigation rather than the top edge. */
header{min-height:88px;height:auto;padding-top:16px;padding-bottom:16px;align-items:center}
header>.button.small{align-self:center;justify-self:auto;flex-shrink:0;margin:0}
.hero-copy .actions{align-items:center;flex-wrap:wrap}
@media(max-width:767px){header{min-height:82px;padding-top:14px;padding-bottom:14px}header>.button.small{font-size:12px;min-height:42px;padding:11px 17px}.hero{padding-top:8px}}
@media(max-width:360px){header>.button.small{font-size:11px;padding:10px 13px}.wordmark span{font-size:8px;letter-spacing:1.5px}}
/* QA 2 Nov 2026: background drift must not widen the page; legible hero label; larger tablet nav targets. */
html,body{overflow-x:clip}
.photo-label{text-shadow:0 1px 3px rgba(32,34,34,.7),0 0 14px rgba(32,34,34,.45)}
nav a{padding:12px 0}