@font-face{font-family:DidotBrand;src:url('DidotLH-Roman.woff2') format('woff2');font-display:swap}@font-face{font-family:BaskervilleBrand;src:url('BaskervilleCyr-Upright.woff2') format('woff2');font-display:swap}
:root{--ink:#191919;--cream:#eeebe2;--gold:#bf995a}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--ink);color:var(--cream);font:15px/1.7 Helvetica,Arial,sans-serif}a{color:inherit;text-underline-offset:5px}a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:6px}.skip{position:absolute;left:24px;top:-80px;z-index:20;background:var(--ink);padding:12px}.skip:focus{top:12px}header{position:absolute;inset:0 0 auto;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:30px 5%}header:before{content:'';position:absolute;inset:0 0 -65px;z-index:-1;background:linear-gradient(#000b,transparent);pointer-events:none}.logo{display:block;width:190px;height:auto}nav{display:flex;gap:32px;align-items:center}nav a{text-decoration:none;font-size:13px}.book{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;background:var(--gold);color:#191919;text-decoration:none;font-size:13px;border-radius:2px}.hero{position:relative;min-height:760px;height:94svh;isolation:isolate;display:flex;align-items:flex-end;padding:150px 8% 130px;overflow:hidden}.film,.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:-3}.film{opacity:0}.film.playing{opacity:1}.hero:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#191919 0%,#191919a8 18%,#0000 65%),linear-gradient(90deg,#0005,transparent 65%);pointer-events:none}.hero-text{max-width:650px}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:10px;margin:0 0 22px}.hero h1{font-size:clamp(38px,4.4vw,66px);font-weight:400;letter-spacing:-.035em;line-height:1.1;text-transform:uppercase;margin:0 0 24px}.hero-text>p:not(.eyebrow){font-size:16px;max-width:360px;margin:0 0 30px}.hero .book{background:var(--cream)}.play-control{position:absolute;right:5%;bottom:95px;border:0;background:#191919b3;color:var(--cream);display:grid;place-items:center;width:44px;padding:0;min-height:44px;font:12px Helvetica,Arial,sans-serif;cursor:pointer;border-radius:50%}.signature{font:normal clamp(58px,7vw,100px)/1.15 DidotBrand,Didot,serif;color:var(--gold);white-space:nowrap;letter-spacing:normal;margin:0 0 30px}.signature .j{font-family:BaskervilleBrand,serif;font-size:.9em;position:relative;top:-.06em}.craft{max-width:1180px;margin:auto;padding:25px 7% 100px;display:grid;grid-template-columns:.9fr 1.1fr;gap:10%;align-items:center}.craft .eyebrow{color:var(--gold)}h2{font-weight:400;font-size:38px;line-height:1.2;letter-spacing:-.035em;margin:0 0 30px}.service{margin:28px 0}.service h3{font-size:19px;font-weight:400;margin:0 0 8px}.service p{font-size:14px;color:#ccc8bf;margin:0;max-width:330px}.text-link{font-size:13px}.visit{max-width:1180px;margin:auto;padding:15px 7% 80px;display:flex;justify-content:space-between;align-items:flex-end;gap:45px}.visit .signature{font-size:56px}.visit p{font-size:14px;line-height:1.9}.visit .book{margin-bottom:24px}footer{max-width:1180px;margin:auto;padding:0 7% 45px;font-size:11px;color:#bbb6aa;display:flex;gap:30px;justify-content:space-between}.mobile-book{display:none}.review-link{color:#bbb6aa}
@media(max-width:700px){header{padding:25px 24px}.logo{width:155px}nav{gap:18px}nav a{font-size:11px}nav .salon,nav .visit-link,nav .book{display:none}.hero{height:100svh;min-height:620px;padding:130px 26px 115px}.hero h1{font-size:39px;max-width:320px}.hero-text>p:not(.eyebrow){font-size:14px;max-width:260px}.hero .eyebrow{font-size:9px}.hero .book{display:none}.hero:after{background:linear-gradient(0deg,#191919,#1919198c 38%,#0000 80%)}.poster,.film{object-position:50% 50%}.play-control{right:24px;bottom:52px;min-height:44px}.signature{font-size:min(61px,14vw);margin-bottom:26px}.craft{display:flex;flex-direction:column-reverse;gap:35px;padding:0 26px 60px}.craft>div{width:100%}h2{font-size:34px}.service{margin:24px 0}.visit{display:block;padding:0 26px 30px}.visit .signature{font-size:min(50px,14vw)}.visit .book{margin-top:15px}footer{padding:0 26px 120px;flex-direction:column;gap:10px}.mobile-book{position:fixed;z-index:10;right:20px;bottom:calc(18px + env(safe-area-inset-bottom));display:flex;min-height:52px;border-radius:28px;box-shadow:0 5px 25px #0005;padding:0 25px}.hero .play-control{bottom:95px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Existing salon motifs, woven into the photography and service text. */
.brand-mark{position:absolute;bottom:5px;left:-65px;width:210px;height:64px;object-fit:cover;pointer-events:none}.service{display:flex;align-items:flex-start;gap:22px}.service-illustration{width:64px;height:100px;object-fit:contain;flex:0 0 64px;filter:brightness(0) invert(.91);opacity:1;margin-top:4px}.service>div{min-width:0}.service p{max-width:360px;line-height:1.85}.instagram-link{display:inline-flex;align-items:center;gap:18px;min-height:60px;text-decoration:none;color:var(--cream)}.instagram-icon{color:var(--gold);flex-shrink:0}.instagram-label{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#bbb6aa}.instagram-handle{display:block;font-size:20px;line-height:1.6}.instagram-link:hover .instagram-handle{text-decoration:underline;text-underline-offset:6px}.instagram-link svg{transition:transform .2s ease}.instagram-link:hover svg{transform:scale(1.06)}

@media(max-width:700px){.brand-mark{left:0;bottom:4px;width:175px;height:58px}.service{gap:20px;margin:30px 0}.service-illustration{width:36px;height:58px;flex-basis:36px}.instagram-link{min-height:60px}}
@media(prefers-reduced-motion:reduce){.instagram-link svg{transition:none}.instagram-link:hover svg{transform:none}}

/* Keep the signature artwork with the cinematic headline. */
.brand-mark{position:static;display:block;object-fit:cover;object-position:center;pointer-events:none}
.hero-text .brand-mark{width:145px;height:44px;margin:0 0 22px}.hero-text>.eyebrow{margin-bottom:18px}
@media(max-width:700px){.hero-text .brand-mark{width:125px;height:38px;margin-bottom:18px}.hero{padding-bottom:140px}.hero h1{font-size:36px}}

/* Original photo pairings in stationary frames. */
.photo-story{max-width:1120px;margin:0 auto;padding:30px 48px 55px}.story-introduction{display:grid;grid-template-columns:1fr 1fr;gap:85px;align-items:center;margin:0 0 64px}.story-text{min-width:0}.story-text .signature{font-size:clamp(54px,5.2vw,76px);margin-bottom:30px}.story-text .eyebrow{font-size:10px;color:var(--gold)}.story-text p:not(.eyebrow){font-size:15px;line-height:1.85;margin:0 0 20px;max-width:400px}.story-text .text-link{display:inline-block;margin-top:8px}.story-photo{margin:0;overflow:hidden;line-height:0}.story-photo>img{display:block;width:100%;height:auto;transform:none}.story-introduction>.story-photo{width:100%;max-width:390px;justify-self:end}.paired-sequence{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}.photo-column{display:flex;flex-direction:column;gap:28px;min-width:0}.photo-column:last-child{padding-top:64px}.craft{grid-template-columns:1fr;max-width:900px;padding-top:40px}.craft .service p{max-width:560px}.craft h2{max-width:550px}
@media(max-width:700px){.photo-story{padding:15px 26px 30px}.story-introduction{grid-template-columns:1fr;gap:28px;margin-bottom:38px}.story-text .signature{font-size:min(56px,14vw)}.story-text p:not(.eyebrow){font-size:15px}.story-introduction>.story-photo{width:86%;max-width:none;justify-self:end}.paired-sequence{gap:16px}.photo-column{gap:16px}.photo-column:last-child{padding-top:32px}.story-photo>img{will-change:auto}.craft{padding-top:20px}}
@media(prefers-reduced-motion:reduce){.story-photo>img{transform:none;will-change:auto}}

/* Open service columns on desktop, stacked services on phones. */
.craft{display:block;max-width:1120px;padding:40px 48px 85px}.craft h2{max-width:none;margin-bottom:38px}.service-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px;margin-bottom:35px}.craft .service{display:block;margin:0}.craft .service-illustration{display:block;width:76px;height:104px;object-fit:contain;margin:0 0 23px;flex:none}.craft .service h3{font-size:22px;margin:0 0 14px}.craft .service p{font-size:14px;line-height:1.85;max-width:none}.craft .text-link{display:inline-block;min-height:44px;padding:10px 0}
@media(max-width:800px){.craft{padding:25px 26px 55px}.service-columns{grid-template-columns:1fr;gap:32px;margin-bottom:24px}.craft h2{margin-bottom:30px}.craft .service{display:flex;gap:20px}.craft .service-illustration{width:42px;height:65px;flex:0 0 42px;margin:4px 0 0}.craft .service h3{font-size:20px;margin-bottom:9px}}


/* Shared photographic finish for contact and booking. */
.appointments-scene{position:relative;isolation:isolate;margin-bottom:45px;overflow:hidden}
.appointments-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
.appointments-scene:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--ink),#1919199e 40%,#191919b8 85%,var(--ink));pointer-events:none}
.appointments-scene .visit{padding-top:110px;padding-bottom:100px;min-height:430px}
@media(max-width:700px){.appointments-scene .visit{padding-top:75px;padding-bottom:60px;min-height:400px}.appointments-scene{margin-bottom:20px}}

/* Recognisable contact actions, with text labels retained for clarity. */
.contact-action{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.contact-action:hover>span{text-decoration:underline;text-underline-offset:5px}
.contact-icon{display:block;flex:0 0 21px;color:var(--gold)}
.contact-phone.contact-action{display:flex}

/* Original gold brand mark closes each page without repeating the social promotion. */
.site-footer{justify-content:center;align-items:center;padding-bottom:35px}
.footer-brand{display:inline-flex;align-items:center;min-height:44px}
.footer-brand img{display:block;width:176px;height:auto}
@media(max-width:700px){.site-footer{padding-bottom:115px}.footer-brand img{width:150px}}

/* Compact desktop navigation stays available; phones retain the floating booking action. */
@media(min-width:701px){
  html{scroll-padding-top:94px}
  body>header,body.services-page>header,body.contact-page>header{position:sticky;top:0;z-index:15;padding:14px 4%;min-height:72px;background:rgba(25,25,25,.96)}
  body>header:before{display:none}
  body>header .logo{width:170px}
  body>header nav{gap:24px}
  body>header .book{min-height:44px;padding:0 18px}
  body:not(.services-page):not(.contact-page)>header{margin-bottom:-72px}
}

/* The homepage header gains its background as the film leaves the navigation area. */
@media(min-width:701px){
  body:not(.services-page):not(.contact-page)>header{transition:background-color .4s ease}
  body:not(.services-page):not(.contact-page)>header:before{display:block;opacity:0;transition:opacity .4s ease}
  body.header-over-hero>header{background:transparent}
  body.header-over-hero:not(.services-page):not(.contact-page)>header:before{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  body:not(.services-page):not(.contact-page)>header,body:not(.services-page):not(.contact-page)>header:before{transition:none}
}

/* Match the original site's horizontal flip on the haircutting illustration. */
.service-illustration[src$="haircutting.svg"]{transform:scaleX(-1)}

/* Original student offer, paired openly with the services link. */
.service-actions{display:flex;align-items:center;justify-content:space-between;gap:35px}
.student-offer{display:flex;align-items:center;gap:20px;max-width:380px}
.discount-symbol{flex:none;font:normal 64px/1 DidotBrand,Didot,serif;color:var(--gold)}
.student-offer h3{font-size:17px;font-weight:400;margin:0 0 4px}
.student-offer p{font-size:14px;line-height:1.7;margin:0;color:#ccc8bf;max-width:265px}
@media(max-width:700px){.service-actions{flex-direction:column;align-items:flex-start;gap:25px}.student-offer{gap:18px}.discount-symbol{font-size:56px}}

/* Reconnect the services overview with the salon's original symbol mark. */
.services-brand-mark{display:block;width:135px;height:42px;object-fit:cover;object-position:center;margin:0 0 24px}
@media(max-width:700px){.services-brand-mark{width:120px;height:38px;margin-bottom:22px}}

/* Quiet footer information, original business copyright and local navigation. */
.site-footer{flex-direction:column;gap:14px}
.footer-details{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%;font-size:11px;line-height:1.7;text-align:center}
.footer-details p{margin:0}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;align-items:center;order:-1}
.footer-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:12px;text-decoration:none}
.footer-nav a:hover{text-decoration:underline}
.footer-credit{color:#bbb6aa}
@media(max-width:700px){.footer-details{flex-direction:column;justify-content:center;text-align:center;gap:5px}.footer-nav{order:-1;justify-content:center;gap:24px}.site-footer{gap:4px}}

/* Content enters once, without changing its resting layout. Visible by default. */
.scroll-reveal{transition:opacity .85s ease,transform .85s cubic-bezier(.22,1,.36,1)}
.scroll-reveal.is-pending{opacity:0;transform:translateY(20px)}
@media(prefers-reduced-motion:reduce){.scroll-reveal,.scroll-reveal.is-pending{opacity:1;transform:none;transition:none}}
@media print{.scroll-reveal.is-pending{opacity:1;transform:none}}

/* Two visible destinations keep phone navigation direct and consistent. */
.mobile-navigation{display:none}
@media(max-width:700px){
  body>header{flex-direction:row;align-items:center;justify-content:space-between;gap:14px;padding:22px 24px}
  body>header .logo{width:142px}
  header .desktop-navigation{display:none}
  body>header nav.mobile-navigation{display:flex;align-items:center;gap:18px;flex-wrap:nowrap}
  body>header nav.mobile-navigation a.mobile-page-link{display:inline-flex;align-items:center;min-height:44px;min-width:44px;font-size:13px;text-decoration:none}
  body>header nav.mobile-navigation a[aria-current="page"]{color:var(--gold)}
}

@media(max-width:360px){body>header .logo{width:128px}}

/* Phones already have a persistent booking action beside the closing scene. */
@media(max-width:700px){.appointments-scene .visit>.book{display:none}}

/* Match the quiet carousel playback icons while keeping contrast over the film. */
.play-control .film-play-icon,.play-control.is-paused .film-pause-icon{display:none}
.play-control.is-paused .film-play-icon{display:block}

/* Identify the public learning preview separately from the salon's live website. */
.demo-notice{max-width:1120px;margin:0 auto;padding:24px 48px 36px;color:#ccc8bf;font-size:12px;line-height:1.7}
.demo-notice strong{display:block;color:var(--gold);font-size:13px;font-weight:400;margin-bottom:5px}
@media(max-width:700px){.demo-notice{padding:22px 26px 30px}}