:root{--black:#141411;--gold:#bea477;--cream:#f2eee6;--gray:#aaa398}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:var(--cream);font:300 15px 'DM Sans',sans-serif}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-weight:400}h1,h2,.rows strong,.team h3,.bookcard h3{font-family:'Italiana',Georgia,serif}em{font-style:normal;color:var(--gold)}.top{text-align:center;padding:10px;background:#27241e;color:#d2c4ad;font-size:9px;letter-spacing:2.5px}.top span{color:var(--gold);margin:0 20px}header{height:94px;padding:0 6%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #343129;background:#131310;position:relative;z-index:3}.logo{display:flex;gap:13px;align-items:center;font:30px Georgia,serif;color:var(--gold)}.logo b{color:#f0e8d9;font-weight:400;font-size:21px;letter-spacing:2px}.logo small{display:block;font:9px 'DM Sans',sans-serif;letter-spacing:7px;text-align:center;margin-top:5px}nav{display:flex;gap:30px}nav a,.btn,.kicker,.index,.actions>a:last-child,.under{font-size:10px;font-weight:600;letter-spacing:1.9px}nav a:hover,.visit a:hover{color:var(--gold)}.btn{background:var(--gold);color:#15130f;padding:20px 23px;display:inline-block}.btn:hover{background:#d2b788}.menu{display:none}.hero{position:relative;height:760px;min-height:600px;overflow:hidden}.heroimage{position:absolute;inset:0;background:url('./salon-interior-wide.jpeg') center/cover;filter:brightness(.65) saturate(.75)}.herooverlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,9,.95),rgba(10,10,9,.76) 42%,rgba(10,10,9,.1)),linear-gradient(0deg,rgba(10,10,9,.65),transparent 30%)}.herotext{position:absolute;top:23%;left:9%;max-width:720px}.kicker,.index{color:var(--gold)}h1{font-size:clamp(70px,7.5vw,125px);line-height:1.02;letter-spacing:-2px;margin:30px 0}.herotext p{max-width:410px;line-height:1.9;color:#ddd5c8}.actions{display:flex;align-items:center;gap:34px;margin-top:40px}.actions>a:last-child{border-bottom:1px solid #b2a083;padding:16px 0}.scroll{position:absolute;bottom:34px;left:9%;right:9%;display:flex;justify-content:space-between;font-size:9px;letter-spacing:2px}.intro{display:grid;grid-template-columns:1fr 2.1fr;gap:50px;background:var(--cream);color:#26231d;padding:120px 9%}h2{font-size:clamp(57px,5.8vw,93px);line-height:1.06}.intro h2{margin-bottom:42px}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:45px}.twocol p,.sectionhead>p,.book>div>p{line-height:1.9;color:#645e53}.under{display:inline-block;border-bottom:1px solid #b3a17e;padding:17px 0;margin-top:23px}.widephoto{height:460px;background:linear-gradient(0deg,#141411bd,transparent),url('./salon-styling-stations.jpeg') center/cover;position:relative}.widephoto>div{position:absolute;left:9%;bottom:50px}.widephoto span{font-size:10px;letter-spacing:2px;color:var(--gold)}.widephoto h2{font-size:52px;margin:15px 0}.dark{background:#1b1b18}.services,.team{padding:115px 9%}.sectionhead{display:flex;justify-content:space-between;align-items:end;gap:70px;margin-bottom:45px}.sectionhead h2{margin:25px 0 0}.sectionhead>p{max-width:350px;color:#aea79a}.rows{border-top:1px solid #49443a}.rows a{display:grid;grid-template-columns:55px 1fr 150px 25px;align-items:center;gap:18px;padding:28px 10px;border-bottom:1px solid #49443a}.rows a:hover{background:#26251f}.rows span,.rows b,.rows label{font-size:11px;letter-spacing:1px;color:var(--gold)}.rows strong{display:block;font-size:38px}.rows small{display:block;color:#aaa397;margin-top:5px}.rows b{font-size:23px;font-weight:400}.fine{font-size:11px;color:#948c7e;line-height:1.8;margin-top:25px}.team{background:#25231f}.teamgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}.team article{min-width:0}.portrait{aspect-ratio:4/4.1;display:grid;place-items:center;font:140px 'Italiana',serif;color:#ad946a7d;background:radial-gradient(circle at 80% 20%,#736049,transparent 50%),#38322a;border:1px solid #5b503f}.p2{background:linear-gradient(130deg,#61574c,#25231f)}.p3{background:radial-gradient(circle at 10% 80%,#a18c69,transparent 50%),#302a22}.p4{background:linear-gradient(40deg,#33302b,#6e6657)}.p5{background:radial-gradient(circle at 70% 90%,#79664f,transparent 65%),#27231f}.p6{background:linear-gradient(145deg,#665943,#23221e)}.team h3{font-size:35px;margin:20px 0 3px}.team article p{font-size:12px;color:#b9b0a4;margin-bottom:15px}.team article a{font-size:10px;letter-spacing:1.5px;color:var(--gold);border-bottom:1px solid #675a46;padding-bottom:8px}.statement{text-align:center;padding:130px 20px;background:#baa376;color:#1c1914;letter-spacing:2px;font-size:11px}.statement h2{font-family:'Italiana',serif;letter-spacing:0;font-size:clamp(51px,6.5vw,100px);margin:38px 0}.statement em{color:#fff6e8}.book{display:grid;grid-template-columns:1fr 1fr;gap:10%;padding:125px 9%;background:#151512}.book h2{margin:30px 0}.book>div>p{color:#b2aa9d;max-width:380px}.bookcard{background:#292720;border:1px solid #51483a;padding:38px}.bookcard h3{font-size:39px}.bookcard>a{display:block;border-bottom:1px solid #50483a;padding:20px 0;font-size:15px}.bookcard>a span{float:right;color:var(--gold);font-size:22px}.bookcard small{display:block;margin-top:7px;font-size:11px;color:#b5a996}.visit{display:grid;grid-template-columns:1fr 1fr;background:#f0eadf;color:#25221b}.visit>div{padding:105px 15%}.visit h2{margin:28px 0}.visit p{line-height:1.8;font-size:18px}.visit a{display:block;margin:17px 0;font-size:13px}.visit small{display:block;margin-top:30px;color:#7c7468}.visit aside{background:#312b23;color:#c4ad83;display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:480px}.visit strong{font:155px 'Italiana',serif}.visit sup{font:30px Georgia,serif}.visit aside span{font-size:10px;letter-spacing:3px}footer{padding:65px 9% 35px}.foothead,.footbottom{display:flex;justify-content:space-between;align-items:center;gap:20px}.foothead>div{display:flex;gap:30px;font-size:11px;letter-spacing:1px}.footbottom{border-top:1px solid #3e392f;margin-top:60px;padding-top:24px;color:#968e81;font-size:9px;letter-spacing:1px}details{margin-top:30px;border-top:1px solid #39362e;padding-top:20px;color:#b8ad9a;font-size:13px;line-height:1.7}summary{cursor:pointer;color:var(--gold)}@media(max-width:1050px){nav{gap:14px}.navbtn{display:none}}@media(max-width:700px){.top{font-size:7px;letter-spacing:1px}header{height:75px}.logo b{font-size:17px}.menu{display:block;border:0;background:none;color:var(--gold);font-size:28px}nav{display:none;position:absolute;top:75px;left:0;right:0;background:#1e1d19;flex-direction:column;padding:25px;gap:25px}nav.open{display:flex}.hero{height:690px}.heroimage{background-position:62% center}.herooverlay{background:linear-gradient(90deg,#080807d9,#08080744),linear-gradient(0deg,#080807a8,transparent)}.herotext{left:7%;right:7%;top:24%}h1{font-size:clamp(60px,13vw,85px)}.herotext p{font-size:13px}.actions{gap:18px;flex-wrap:wrap}.scroll span{display:none}.intro{display:block;padding:75px 7%}.intro .index{margin-bottom:40px}.intro h2,.sectionhead h2,.book h2,.visit h2{font-size:59px}.twocol{display:block}.widephoto{height:320px}.widephoto h2{font-size:40px}.services,.team{padding:80px 7%}.sectionhead{display:block}.sectionhead>p{margin-top:25px}.rows a{grid-template-columns:30px 1fr 20px;gap:10px}.rows strong{font-size:29px}.rows label{grid-column:2;grid-row:2}.rows b{grid-column:3;grid-row:1}.teamgrid{grid-template-columns:repeat(2,1fr);gap:22px}.portrait{font-size:90px}.team h3{font-size:28px}.statement{padding:90px 7%}.book{display:block;padding:85px 7%}.bookcard{margin-top:45px;padding:25px}.visit{display:block}.visit>div{padding:80px 7%}.visit aside{min-height:300px}.visit strong{font-size:110px}footer{padding:55px 7%}.foothead,.footbottom{align-items:flex-start;flex-direction:column}}

.logo small{color:var(--gold);letter-spacing:3px}
header .logo{gap:clamp(6px,1vw,13px)}
header .logo b{font-size:clamp(17px,2.25vw,32px);letter-spacing:clamp(.4px,.12vw,1.5px)}
header .logo small{font-size:10px}

.herotext .hero-brand{font-size:clamp(15px,2.1vw,28px);letter-spacing:.12em;line-height:1.35}
.hero-brand span{display:block;margin-top:6px;font:italic clamp(22px,3vw,38px)/1.15 Georgia,serif;letter-spacing:normal;text-transform:none}

header .logo{position:relative}

header .logo .brand-logo{width:72px;height:72px;object-fit:contain}
.foothead .logo .brand-logo{width:90px;height:90px;object-fit:contain}
header .logo{gap:10px}
header .logo b{font-size:clamp(15px,1.5vw,22px);letter-spacing:.6px}
@media(max-width:700px){
  header .logo .brand-logo{width:52px;height:52px}
  header .logo b{font-size:14px;letter-spacing:.3px}
  header .logo small{font-size:8px;letter-spacing:2px}
  .foothead .logo b{font-size:17px}
}

.logo b{font-family:'Italiana',Georgia,serif}
.logo small{font-family:'DM Sans',sans-serif}

.hero-brand{animation:welcome-fade 4s ease-out .4s both}
@keyframes welcome-fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.hero-brand{animation:none}}

.herotext .hero-brand{font-family:'Great Vibes',cursive;font-size:clamp(30px,3.8vw,49px);font-weight:400;letter-spacing:.02em;text-transform:none;line-height:1.25}

.hero-brand{animation:none}
.hero-brand .written-word{display:inline-block;margin:0;font:inherit;letter-spacing:inherit;text-transform:inherit;clip-path:inset(-25% 100% -25% -8%);animation:write-word 1.1s linear var(--write-delay) both}
.hero-brand .written-word:nth-child(2){animation-duration:.4s}
.hero-brand .written-word:nth-child(3){animation-duration:.7s}
@keyframes write-word{to{clip-path:inset(-25% -8% -25% -8%)}}
@media(prefers-reduced-motion:reduce){.hero-brand .written-word{animation:none;clip-path:none}}

.welcome-handwriting{display:block;width:100%;max-width:620px;height:auto;overflow:visible;color:var(--gold)}
.welcome-handwriting path{fill:currentColor;fill-opacity:0;stroke:currentColor;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:pen-stroke var(--pen-duration) linear var(--pen-delay) forwards,pen-ink .3s ease calc(var(--pen-delay) + var(--pen-duration)) forwards}
@keyframes pen-stroke{to{stroke-dashoffset:0}}
@keyframes pen-ink{to{fill-opacity:1;stroke-width:0}}
@media(prefers-reduced-motion:reduce){.welcome-handwriting path{animation:none;fill-opacity:1;stroke-dashoffset:0;stroke-width:0}}

.welcome-handwriting{max-width:710px}
@media(max-width:700px){.welcome-handwriting{width:108%;max-width:none;margin-left:-4%}}

.link-arrow{display:inline-block;font-family:Arial,sans-serif!important;font-size:1em;font-weight:400;line-height:1;letter-spacing:0;vertical-align:baseline}

.rows .clear-ampersand{font-family:'DM Sans',sans-serif;font-size:.78em;font-weight:400}

.top{display:flex;justify-content:space-between;align-items:center;gap:10px 24px;padding:12px 6%;font-size:10px;letter-spacing:1.5px;flex-wrap:wrap}
.top .top-phone{color:var(--cream);font-size:13px;font-weight:500;letter-spacing:1px;white-space:nowrap}
.top-phone:hover{color:var(--gold)}
@media(max-width:700px){
  .top{padding:10px 7%;font-size:9px;letter-spacing:.5px;gap:8px;justify-content:center}
  .top span{margin:0 8px}
  .top .top-phone{font-size:12px}
}

.menu-contact{display:none}
@media(max-width:700px){
  header{height:140px;align-items:flex-start;padding-top:10px}
  header .logo{height:55px}
  header .menu{margin-top:4px}
  .menu-contact{display:block;position:absolute;right:7%;bottom:14px;text-align:right;font-size:12px;line-height:1.7}
  .menu-contact>span{color:var(--gold);letter-spacing:.3px}
  .menu-contact a{color:var(--cream);font-size:13px}
  .menu-contact a:hover{color:var(--gold)}
  header nav{top:140px}
  .top .top-phone{display:none}
}

.menu-contact>span{font-family:'Italiana',Georgia,serif;font-size:18px;font-weight:400}

.hero-contact{position:absolute;top:24px;right:7%;z-index:1;text-align:right;line-height:1.7;color:var(--cream);text-shadow:0 1px 5px #000}
.hero-contact>span{font-family:'Italiana',Georgia,serif;font-size:22px;color:var(--gold)}
.hero-contact a{font-size:14px}
.hero-contact a:hover{color:var(--gold)}
@media(max-width:700px){
  header{height:75px;align-items:center;padding-top:0}
  header .menu{margin-top:0}
  header nav{top:75px}
  .hero-contact{top:18px}
  .hero-contact>span{font-size:20px}
  .hero-contact a{font-size:13px}
}

.hero-contact{top:36px}
@media(max-width:700px){.hero-contact{top:30px}}