/* hero slider */
.hero{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;background:radial-gradient(ellipse at 15% 60%,#8E7F76 0%,transparent 60%),linear-gradient(100deg,var(--stone) 0%,var(--stone-2) 55%,#BBAEA5 100%);color:#fff}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s,visibility .9s}
.slide.on{opacity:1;visibility:visible;z-index:1}
.slide .photo{position:absolute;right:0;top:0;height:100%;width:min(80%,calc(100svh*1.4));object-fit:cover;object-position:center 25%;filter:saturate(1.12) contrast(1.04) brightness(.4);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 12%,rgba(0,0,0,.8) 24%,#000 34%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 12%,rgba(0,0,0,.8) 24%,#000 34%)}

.slide .copy{z-index:2}

/* slide change: photo drifts in with a slow zoom, text rises in step by step */
@media (prefers-reduced-motion:no-preference){
  .slide .photo{transform:scale(1.08) translateX(3%);transition:transform 7s cubic-bezier(.2,.6,.3,1)}
  .slide.on .photo{transform:scale(1) translateX(0)}
  .slide .copy > *{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
  .slide.on .copy > *{opacity:1;transform:none}
  .slide.on .copy > :nth-child(1){transition-delay:.35s}
  .slide.on .copy > :nth-child(2){transition-delay:.55s}
  .slide.on .copy > :nth-child(3){transition-delay:.75s}
  /* keep the button hover sweep instant while its entrance stays delayed */
  .slide .copy > .btn{transition-property:opacity,transform,background-size,color,box-shadow;transition-duration:.7s,.9s,.45s,.3s,.3s}
  .slide.on .copy > .btn{transition-delay:.75s,.75s,0s,0s,0s}
}
.slide .copy{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:88px 32px 0;height:100%;display:flex;flex-direction:column;justify-content:center}
.slide h1,.slide h2{font:500 clamp(36px,4.8vw,66px)/1.12 var(--serif);text-transform:uppercase;letter-spacing:.12em;max-width:11em;text-shadow:0 2px 30px rgba(45,28,18,.28)}
.slide p{margin:20px 0 36px;font:500 13px/1.7 var(--sans);letter-spacing:.22em;text-transform:uppercase;max-width:40em;color:var(--cream);text-shadow:0 1px 12px rgba(45,28,18,.3)}
/* softer palette for the copy: warm white heading, muted cream subtitle, light veil behind the text */
.slide::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 50% 55% at 24% 55%,rgba(23,28,34,.32),transparent 72%)}
.slide h1,.slide h2{color:#FBF6F2}
.slide p{color:#DCCBBF}
.slide .btn{background-color:var(--cream);color:var(--ink);border-radius:2px;padding:16px 30px;box-shadow:0 8px 24px rgba(45,28,18,.18)}
.arrows{position:absolute;left:max(32px,calc((100vw - 1240px)/2 + 32px));bottom:36px;display:flex;gap:10px;z-index:3}
.arrows button{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.08);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;cursor:pointer;display:grid;place-items:center;padding:0;transition:background .25s,border-color .25s}
.arrows svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.arrows button:hover{background:rgba(255,255,255,.22);border-color:#fff}
.arrows svg{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
#prev:hover svg{transform:translateX(-3px)}
#next:hover svg{transform:translateX(3px)}
.dots{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);display:flex;gap:8px;z-index:3}
.dots button{position:relative;overflow:hidden;width:44px;height:3px;border-radius:2px;border:0;background:rgba(255,255,255,.35);padding:0;cursor:pointer}
/* the current bar fills up as a timeline until the next photo */
.dots button::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.dots button.run::after{animation:fill var(--slide-dur,6000ms) linear forwards}
.hero.paused .dots button.run::after{animation-play-state:paused}
@keyframes fill{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.dots button[aria-current="true"]::after{transform:scaleX(1);animation:none}}

/* welcome */
.welcome{position:relative;overflow:hidden;background:var(--mist);padding:96px 0}
/* salon interior behind the welcome text: centred, faded out at the sides, kept faint for legibility */
.welcome .bgph{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,1500px);height:100%;object-fit:cover;object-position:center 55%;opacity:.3;filter:grayscale(.15);pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 78%,transparent 100%)}
.welcome .wrap{position:relative;z-index:1}
/* soft light veil behind the text so it stays readable over the photo */
.welcome::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 48% 75% at 50% 50%,rgba(242,237,232,.72),rgba(242,237,232,.35) 70%,rgba(242,237,232,.2));pointer-events:none}
/* everything centred in one column */
.welcome .wrap{display:block;max-width:820px;text-align:center}
.welcome h2{margin-bottom:28px}
.welcome h2::after{content:"";display:block;width:48px;height:2px;margin:22px auto 0;background:var(--red)}
.welcome p{margin-left:auto;margin-right:auto}
.welcome h2{text-shadow:0 0 18px rgba(242,237,232,.95)}
.welcome h2,.sec h2,.price h2{font:500 clamp(26px,2.8vw,36px)/1.3 var(--serif);text-transform:uppercase;letter-spacing:.16em;color:#3E3430}
.welcome p{color:#2F2825;font-size:17px;font-weight:500;margin-bottom:28px;max-width:38em;text-shadow:0 0 10px rgba(242,237,232,.95),0 0 2px rgba(242,237,232,.9)}
.sig{font:400 40px/1 var(--script);color:var(--ink);margin:-8px 0 24px;text-shadow:0 0 12px rgba(242,237,232,.95)}

/* services */
.sec{padding:96px 0}
.sec .head{text-align:center;margin-bottom:52px}
.sec .head p{color:var(--mute);margin-top:10px;font-size:13px;letter-spacing:.22em;text-transform:uppercase}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.card{display:flex;flex-direction:column;background:#fff;text-decoration:none;color:inherit;box-shadow:0 1px 0 rgba(60,40,30,.06);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.card:hover,.card:focus-visible{transform:translateY(-6px);box-shadow:0 24px 44px rgba(60,40,30,.13)}
.card .pic{position:relative;margin:0;overflow:hidden;aspect-ratio:4/5}
.card .pic img{width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.card:hover .pic img{transform:scale(1.05)}
.card .t{display:flex;flex-direction:column;flex:1;padding:30px 30px 32px}
.card h3{font:500 21px/1.2 var(--sans);text-transform:uppercase;letter-spacing:.16em}
.card p{color:var(--mute);font-size:15.5px;line-height:1.7}
.card .card-price{margin:10px 0 14px;font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--red)}

.more-svc{display:flex;align-items:stretch;flex-wrap:wrap;gap:16px;margin-top:32px}
.more-svc span{flex:1 0 100%;font:600 11.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.more-svc a{flex:1 1 300px;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 26px;background:#fff;text-decoration:none;color:var(--ink);box-shadow:0 1px 0 rgba(60,40,30,.06);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.more-svc a::after{content:"";flex:none;width:9px;height:9px;border-top:2px solid var(--red);border-right:2px solid var(--red);transform:rotate(45deg);transition:transform .3s}
.more-svc a:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(60,40,30,.1)}
.more-svc a:hover::after{transform:translateX(4px) rotate(45deg)}
.more-svc b{font:500 16px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.more-svc i{font-style:normal;color:var(--mute);font-size:14.5px;margin-left:auto;text-align:right}

/* price band */
/* quiet line icons in each price panel corner */
.price{position:relative;overflow:hidden}
.price .wrap{position:relative;z-index:1}
.price .panel{position:relative;overflow:hidden;background-color:rgba(31,37,45,.88);backdrop-filter:blur(2px)}
.price .panel::after{content:"";position:absolute;right:-90px;top:-110px;width:min(560px,48vw);height:auto;aspect-ratio:1;background:center/contain no-repeat;opacity:.025;pointer-events:none;transform:rotate(14deg)}
.price .panel>*{position:relative;z-index:1}
.price .ic-dam::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M30%2033.6Q37%2018%2046.2%203.4Q41.8%2020.5%2034.6%2035.4Z%22%20fill%3D%22white%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M34%2033.6Q27%2018%2017.8%203.4Q22.2%2020.5%2029.4%2035.4Z%22%20fill%3D%22white%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M31.2%2035.6%2024.8%2043.6M32.8%2035.6%2039.2%2043.6%22%20stroke-width%3D%222.4%22%2F%3E%3Cellipse%20cx%3D%2220.5%22%20cy%3D%2250%22%20rx%3D%226.6%22%20ry%3D%226%22%2F%3E%3Cellipse%20cx%3D%2243.5%22%20cy%3D%2250%22%20rx%3D%226.6%22%20ry%3D%226%22%2F%3E%3Cpath%20d%3D%22M49.4%2053.2Q55%2054.6%2056.4%2060%22%2F%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2234.4%22%20r%3D%221.9%22%20fill%3D%22%231F252D%22%2F%3E%3C%2Fsvg%3E");right:auto;top:50%;left:50%;transform:translate(-50%,-50%) rotate(14deg)}
.price .ic-pan::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%228%22%20y%3D%2222%22%20width%3D%2248%22%20height%3D%2210%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%2032v16M17%2032v16M22%2032v16M27%2032v16M32%2032v16M37%2032v16M42%2032v16M47%2032v16M52%2032v16%22%2F%3E%3C%2Fsvg%3E")}
.price .ic-pece::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M32%208C24%2020%2016%2029%2016%2039a16%2016%200%200%200%2032%200c0-10-8-19-16-31Z%22%2F%3E%3Cpath%20d%3D%22M24%2040a8%208%200%200%200%208%208%22%2F%3E%3C%2Fsvg%3E")}

.price{background:var(--bar);color:#fff;padding:96px 0}
.price h2{color:#fff !important}
.price .top{display:flex;justify-content:center;text-align:center;margin-bottom:44px}
.price .top p{color:#B2A69F;font-size:14px;margin-top:8px}
.price .group{margin-bottom:56px}
.price h3{display:flex;align-items:center;gap:14px;font:600 19px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#fff;margin:0 -34px 22px;padding:0 34px 22px;border-bottom:1px solid #2C343E}
.price h3::before{content:"";width:4px;height:22px;border-radius:2px;background:var(--red)}
.ptable{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ptable th{font:500 11.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#B2A69F;text-align:center;padding:0 16px 14px;width:18%;vertical-align:bottom}
.ptable th:first-child{text-align:left;width:auto}
.ptable td{padding:20px 16px;border-top:1px solid #2C343E;text-align:center;vertical-align:middle;font:500 18px/1 var(--sans);color:#fff;white-space:nowrap}
.ptable td:first-child{text-align:left;font:500 14px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;white-space:normal}
.ptable tbody tr td{transition:background .25s}
.ptable tbody tr:hover td{background:rgba(255,255,255,.05)}
.ptable tbody tr:hover td:first-child{border-radius:4px 0 0 4px}
.ptable tbody tr:hover td:last-child{border-radius:0 4px 4px 0}
.ptable td small,.plist small{font:500 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#B2A69F;margin-right:6px}
.len{display:none;gap:4px;padding:4px;margin-bottom:18px;border:1px solid #2C343E;border-radius:999px}
.len button{flex:1;border:0;background:transparent;color:#D9CEC7;font:500 11.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:11px 8px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s}
.len button[aria-pressed="true"]{background:var(--red);color:#fff}
.pcols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.plist{list-style:none;padding:0}
.plist li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 16px;border-top:1px solid #2C343E;border-radius:4px;transition:background .25s}
.plist li:hover{background:rgba(255,255,255,.05)}
.plist li:last-child{border-bottom:1px solid #2C343E}
.plist li>span:first-child{font:500 14px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.plist li>span:first-child em{display:block;font-style:normal;text-transform:none;letter-spacing:0;font-size:13px;color:#B2A69F;margin-top:4px}
.plist li>span:last-child{font:500 18px/1 var(--sans);white-space:nowrap;font-variant-numeric:tabular-nums}
.terms{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.terms div{display:flex;gap:14px;align-items:flex-start;padding:20px 22px;border:1px solid #2C343E;border-radius:4px}
.terms svg{flex:none;width:22px;height:22px;stroke:var(--red);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.terms b{display:block;font:500 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:4px}
.terms span{font-size:14px;color:#B2A69F;line-height:1.5}
.price .panel{background:#1F252D;border:1px solid #29313A;border-radius:6px;padding:30px 34px 12px}
.price .panel .plist li:last-child{border-bottom:0}
.price .u{margin-left:5px;font:500 11px var(--sans);letter-spacing:.08em;color:#9C908A}
.price .group.panel{margin-bottom:24px}
.pcols{margin-bottom:32px}
.pcols .group.panel{margin-bottom:0}
.ptable tbody tr:first-child td{border-top-color:#38424D}
.ptable thead th:first-child{padding-left:16px}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;background:var(--mist)}
.contact .t{display:flex;flex-direction:column;justify-content:center;padding:96px clamp(32px,5vw,96px)}
.contact .inner{width:100%;max-width:620px;margin:0 auto}
/* the text decides the height; the photo just fills its half */
.contact .ph{position:relative;min-height:560px}
.contact .photo-s{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.contact h2{font:500 clamp(26px,2.8vw,36px)/1.3 var(--serif);text-transform:uppercase;letter-spacing:.16em;color:#3E3430}
.contact .map{margin:24px 0 28px;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:#E4DCD5;box-shadow:0 10px 30px rgba(60,40,30,.08)}
.contact .map iframe{display:block;width:100%;height:100%;border:0}
.contact .info{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:28px}
.contact .info b{display:block;font:600 11.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin-bottom:10px}
.contact address,.contact .info p{font-style:normal;color:var(--mute);font-size:16px;line-height:1.7}
.contact .info a{color:var(--mute);text-decoration:none;border-bottom:1px solid #D3C7BF;transition:color .25s,border-color .25s}
.contact .info a:hover{color:var(--red);border-color:var(--red)}
.contact .cta-row{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px}
.contact .social{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.contact .social svg{width:44px;height:44px;padding:11px;border-radius:50%;background:var(--bar);fill:#fff;transition:transform .3s,background .3s}
.contact .social:hover svg{background:var(--red);transform:translateY(-2px)}
.contact .social span{position:relative;padding-bottom:4px}
.contact .social span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:center;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.contact .social:hover span::after{transform:scaleX(1)}

@media (max-width:980px){
  .slide .photo{width:100%;-webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 45%);mask-image:linear-gradient(0deg,transparent 0%,#000 45%);opacity:.9}
  .slide h1,.slide h2{font-size:clamp(28px,8.4vw,38px);letter-spacing:.08em}
  .slide .copy{padding:0 16px;justify-content:flex-end;padding-bottom:120px}
  .arrows{left:16px;bottom:28px}
  .arrows button{width:42px;height:42px}
  .dots{left:auto;right:16px;bottom:47px;transform:none}
  .welcome .wrap,.contact{grid-template-columns:1fr}
  .contact .ph{min-height:0;aspect-ratio:4/3}
  .contact .t{padding:40px 16px 64px}
  .contact .info{grid-template-columns:1fr}
  .welcome .wrap{gap:24px}
  .cards{grid-template-columns:1fr;gap:24px}
  .card .pic{aspect-ratio:4/4.2}
  .pcols{grid-template-columns:1fr}
  .pcols .group{margin-bottom:0}
  .price .panel{padding:22px 18px 6px}
  .price h3{margin:0 -18px 18px;padding:0 18px 18px;font-size:16px}
  .ptable td,.ptable th{padding-left:10px;padding-right:10px}
  .plist li{padding:16px 10px}
  .terms{grid-template-columns:1fr}
  .len{display:flex}
  .ptable th:not(:first-child),.ptable td:not(:first-child){display:none}
  .ptable[data-len="0"] th:nth-child(2),.ptable[data-len="0"] td:nth-child(2),.ptable[data-len="1"] th:nth-child(3),.ptable[data-len="1"] td:nth-child(3),.ptable[data-len="2"] th:nth-child(4),.ptable[data-len="2"] td:nth-child(4){display:table-cell}
  .welcome,.sec,.price{padding:64px 0}
}
@media (prefers-reduced-motion:reduce){.card,.card .pic img{transition:none}.card:hover{transform:none}.card:hover .pic img{transform:none}.slide,.btn,.book,.arrows svg{transition:none}.btn:hover,.book:hover{transform:none}}