:root{--c:#f7f1e7;--iv:#fffdf9;--b:#e9dcc6;--s:#cdb99a;--k:#111;--m:#4a443a;--serif:"Cormorant Garamond",Georgia,serif;--sans:"Jost",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}[hidden]{display:none!important}
body{margin:0;background:var(--c);color:var(--k);font:300 17px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}img{max-width:100%}
.w{width:min(1120px,90%);margin:0 auto}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.05;margin:0 0 .45em}
h1{font-size:clamp(3rem,11vw,6.6rem)}h2{font-size:clamp(2.2rem,6.5vw,3.9rem)}h3{font-size:1.8rem}
em{font-style:italic;font-weight:400}
p{margin:0 0 1.1em;color:var(--m)}
.eb{display:block;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;margin-bottom:1.3rem}
.hd{position:sticky;top:0;z-index:20;background:rgba(247,241,231,.9);backdrop-filter:blur(10px)}
.hd .w{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.4rem 1.5rem;padding:.9rem 0}
.logo{font:600 1.9rem var(--serif);letter-spacing:.08em;text-decoration:none}
nav{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem 1.5rem}
nav a{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid transparent}
nav a:hover,nav a[aria-current]{border-color:var(--k)}
nav a.nb{border:1px solid var(--k);padding:.55rem 1.1rem}nav a.nb:hover{background:var(--k);color:var(--c)}
.btn{display:inline-block;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;padding:1.1rem 2rem;background:var(--k);color:var(--c);border:1px solid var(--k);transition:.25s}
.btn:hover{background:transparent;color:var(--k)}.btn.gh{background:transparent;color:var(--k)}.btn.gh:hover{background:var(--k);color:var(--c)}
.ac{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}
.hero,.ph,.cta{position:relative;overflow:hidden}
.hero{text-align:center;padding:clamp(5rem,15vw,10.5rem) 0 clamp(4.5rem,11vw,8rem);background:radial-gradient(ellipse at 50% 35%,var(--iv),var(--c) 65%)}
.hero .w,.ph .w,.cta .w{position:relative;z-index:1}
.lead{font-size:1.2rem;max-width:40rem}.hero .lead,.cta p{margin-left:auto;margin-right:auto}.hero .ac,.cta .ac{justify-content:center}
.ring{position:absolute;left:50%;top:50%;border:1px solid var(--s);border-radius:50%;transform:translate(-50%,-50%);animation:pl 9s ease-in-out infinite}
.r1{width:min(92vw,640px);height:min(92vw,640px)}.r2{width:min(125vw,900px);height:min(125vw,900px);animation-delay:-3s;opacity:.7}.r3{width:min(160vw,1200px);height:min(160vw,1200px);animation-delay:-6s;opacity:.45}
@keyframes pl{50%{transform:translate(-50%,-50%) scale(1.05)}}
.ph{background:var(--b);padding:clamp(4rem,10vw,7rem) 0 clamp(3rem,7vw,5rem)}.ph .ring{left:90%;top:20%}
.crumbs{font-size:.78rem;letter-spacing:.1em;margin-bottom:1.2rem}.crumbs a{text-decoration:none;border-bottom:1px solid var(--s)}
.mq{background:var(--k);color:var(--c);overflow:hidden;white-space:nowrap;padding:1.1rem 0}
.mq div{display:inline-block;animation:mq 30s linear infinite}.mq span{font:italic 1.7rem var(--serif);margin:0 1.5rem}.mq span:nth-child(even){color:var(--s)}
@keyframes mq{to{transform:translateX(-50%)}}
section{padding:clamp(4rem,10vw,7rem) 0}.band{background:var(--iv)}.tint{background:var(--b)}
.sv{display:grid;grid-template-columns:auto 1fr auto;gap:1rem 2.5rem;align-items:center;padding:2.2rem 1rem;border-top:1px solid var(--s);text-decoration:none;transition:.3s}
.sv:last-child{border-bottom:1px solid var(--s)}.sv:hover{background:var(--k);color:var(--c)}.sv:hover p{color:var(--s)}
.sv b{font:italic 400 3rem var(--serif);color:var(--s)}.sv h3{margin:0 0 .2em}.sv p{margin:0}.sv>span{font-size:2rem}
.st{background:var(--k);color:var(--c);padding:clamp(3rem,7vw,5rem) 0}
.g3{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));text-align:center}
.st strong{display:block;font:500 clamp(2.8rem,7vw,4.6rem) var(--serif);line-height:1}.st p{color:var(--s);margin:.4rem 0 0}
.big{font:400 clamp(1.8rem,4.4vw,3rem)/1.22 var(--serif);color:var(--k)}
.two{display:grid;gap:3rem;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));align-items:start}
.cd{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:2rem 0}
.cd div{background:var(--iv);border:1px solid var(--s);padding:2rem}.cd h3{font-size:1.7rem}.cd p{margin:0}
.pairs{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:2rem}
.cmp{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--b)}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.cmp .bf{clip-path:inset(0 50% 0 0)}
.cmp .ln{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff}
.cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.tg{position:absolute;top:1rem;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;background:rgba(17,17,17,.75);color:var(--c);padding:.3rem .7rem}.tg.l{left:1rem}.tg.r{right:1rem}
.prose{max-width:46rem}
details{border-bottom:1px solid var(--s);padding:1.1rem 0}summary{cursor:pointer;font:500 1.5rem var(--serif)}details p{margin:.7rem 0 0}
.cta{text-align:center;background:var(--b)}
footer{background:var(--k);color:var(--c);padding:3.5rem 0 2rem}
.ft{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
footer a{display:block;color:var(--c);text-decoration:none;margin-bottom:.5rem;font-size:.95rem}footer a:hover{color:var(--s)}footer .logo{font-size:2rem}footer p{color:var(--s)}
.lg{border-top:1px solid #3a352d;margin-top:2.5rem;padding-top:1.3rem;font-size:.82rem;color:#a99f8d}
.js .rv{opacity:0;transform:translateY(30px);transition:opacity .9s,transform .9s}.js .rv.in{opacity:1;transform:none}
@media(max-width:640px){body{font-size:16px}.hd .w{justify-content:center}nav{justify-content:center;gap:.3rem 1rem}.sv{grid-template-columns:1fr;gap:.2rem}.sv>span{display:none}.btn{width:100%;text-align:center}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .rv{opacity:1;transform:none}}
/* v3: more white and black contrast, less beige; logo lockup */
:root{--c:#fff;--iv:#fff;--b:#efe7d8}
.hero{background:#fff}
.hd{background:rgba(255,255,255,.93);border-bottom:1px solid #e8e1d4}
.logo{display:inline-flex;flex-direction:column;line-height:1;font:500 2.2rem var(--serif);letter-spacing:.1em}
.logo small{font:400 .58rem var(--sans);letter-spacing:.34em;text-transform:uppercase;align-self:flex-end;margin-top:.3rem}
footer .logo{font-size:2.4rem}
.ph{background:var(--k);color:#fff}.ph p,.ph .crumbs{color:#d8cfbd}.ph .ring{border-color:#4a443a}.ph .crumbs a{border-color:#4a443a}
.ph .btn,.tint .btn{background:#fff;color:var(--k);border-color:#fff}.ph .btn:hover,.tint .btn:hover{background:transparent;color:#fff}
.tint{background:var(--k);color:#fff}.tint p{color:#d8cfbd}
.cta{background:var(--b)}
@media(max-width:640px){.logo{font-size:1.9rem}}
/* v4: logo lockup recreated as inline SVG */
.logo{display:block;font-size:0;line-height:0;letter-spacing:0}
.logo svg{display:block;width:150px;height:auto;overflow:visible}
footer .logo svg{width:190px}
.mark{display:block;width:min(310px,74vw);height:auto;margin:0 auto 1.6rem;overflow:visible}
@media(min-width:641px){.logo svg{width:170px}footer .logo svg{width:210px}}
/* v5: service price lists */
.pl{max-width:52rem;border-top:1px solid var(--s);margin-top:2rem}
.pl>div{display:grid;grid-template-columns:1fr auto;gap:.4rem 2rem;padding:1.5rem 0;border-bottom:1px solid var(--s);align-items:start}
.pl h3{font-size:1.5rem;margin:0 0 .3rem}.pl p{margin:0;font-size:.96rem}
.pl b{font:500 1.3rem var(--serif);white-space:nowrap}
@media(max-width:560px){.pl>div{grid-template-columns:1fr}.pl b{order:-1}}
/* v6: home service cards */
.sc{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:2.5rem}
.cx{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:2.4rem 2rem;border:1px solid var(--k);text-decoration:none;background:#fff;transition:transform .3s}
.cx::after{content:"";position:absolute;right:-70px;top:-70px;width:200px;height:200px;border:1px solid var(--s);border-radius:50%;pointer-events:none}
.cx:hover{transform:translateY(-4px)}
.cx:first-child{background:var(--k);color:#fff}.cx:first-child p{color:#d8cfbd}
.cx h3{font-size:2rem;position:relative}
.cx ul{list-style:none;padding:0;margin:0 0 1.8rem;border-top:1px solid var(--s)}
.cx li{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--s);font-size:.95rem}
.cx li i{font-style:normal;white-space:nowrap}
.cx:first-child ul,.cx:first-child li{border-color:#4a443a}
.cx .go{margin-top:auto;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase}
/* v7: black and white, menu-inspired */
:root{--b:#fff;--wide:"Lexend Giga","Jost",sans-serif}
.hd{background:#fff;border-bottom:6px double #111}
.cta{background:#fff;border-top:6px double #111}
.mq span:nth-child(even){color:#fff;opacity:.55}
.st p,footer p{color:#cfcfcf}footer a:hover{color:#fff;text-decoration:underline}
.eb{font-family:var(--wide);font-weight:300}
.pl,.pl>div,details,.cx li{border-color:#111}.cx:first-child li{border-color:#555}
.pl h3{font:400 1rem/1.35 var(--wide);letter-spacing:.02em}.pl b{font:500 .95rem var(--wide)}
.vl{position:relative}.vl .w{padding-left:clamp(3.2rem,10vw,8rem)}
.vl::before{content:attr(data-l);position:absolute;left:3%;top:clamp(2.5rem,6vw,4rem);writing-mode:vertical-rl;transform:rotate(180deg);font:400 clamp(2rem,6.5vw,4.4rem)/1 "Italiana",var(--serif);text-transform:uppercase;letter-spacing:.14em;white-space:nowrap;pointer-events:none}
@media(max-width:560px){.vl::before{left:2%;font-size:2rem}.vl .w{padding-left:3rem}}
/* v8: keep phone browsers from enlarging the small logo text */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.mark text,.logo text{-webkit-text-size-adjust:none}
/* real logo image */
.logo img{display:block;height:auto;width:150px;max-width:100%}
footer .logo img{width:200px;filter:invert(1)}
img.mark{display:block;height:auto;width:min(440px,88%);margin:0 auto}
@media(max-width:600px){.logo img{width:124px}}

/* v9: before/after photos */
.pairs{max-width:54rem}
.cmp,.solo{aspect-ratio:3/4}
.cmp img,.solo img{object-position:50% 28%}
.solo{position:relative;overflow:hidden;margin:0;background:var(--b)}
.solo img{display:block;width:100%;height:100%;object-fit:cover}
.cmp .ln::after{content:"";position:absolute;top:50%;left:50%;width:40px;height:40px;border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);background:rgba(17,17,17,.3)}
/* v10: before/after captions */
.pr{margin:0}
.pairs{align-items:start}
.pr figcaption{margin-top:1rem;font-size:.95rem;line-height:1.55;color:var(--m)}
.pr figcaption b{display:block;font:400 .74rem/1.4 var(--wide);letter-spacing:.18em;text-transform:uppercase;color:var(--k);margin-bottom:.35rem}
/* v11: Invisible Bead feature */
.ib{background:#fff;border-bottom:6px double #111}
.ib-top{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:repeat(auto-fit,minmax(290px,1fr));align-items:center}
.ib-top .pr{max-width:30rem;width:100%;justify-self:center}
.ib-sub{margin:clamp(3.5rem,8vw,5.5rem) 0 1.6rem}
.ib-sub h3{font-size:clamp(1.9rem,4.5vw,2.8rem);margin:0}
.ib-flip,.ib-done{display:grid;gap:1rem}
.ib-flip{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.ib-done{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));max-width:52rem}
.ib-flip figure,.ib-done figure{position:relative;margin:0;overflow:hidden;background:#f3f0ea}
.ib-flip figure{aspect-ratio:2/3}.ib-done figure{aspect-ratio:3/4}
.ib-flip img,.ib-done img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.ib .cmp img{object-position:50% 25%}
.ibt{background:var(--k);color:#fff}
.ibt p{color:#d8cfbd;max-width:38rem}
.ibt-hd{margin-bottom:2rem}
.ibt .ac{margin-top:2rem}
.ibt .btn{background:#fff;color:var(--k);border-color:#fff}.ibt .btn:hover{background:transparent;color:#fff}
.ibt figure{background:#222}
/* v12: Invisible Bead side-by-side before/after */
.ba{margin:0;display:grid;grid-template-columns:2fr 3fr;gap:.8rem;align-items:end;width:100%;max-width:36rem;justify-self:center}
.ba>div{position:relative;overflow:hidden;background:#f3f0ea;aspect-ratio:3/4}
.ba img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
/* v13: Invisible Bead slider + feature after */
.ibm{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;width:100%;max-width:38rem;justify-self:center;align-items:start}
.ibm .pr{margin:0}
.ibm .solo img{object-position:50% 25%}
/* v14: two-photo flip-up gallery */
.ib .ib-flip{max-width:52rem}

/* v15: homepage cycling showcase */
.sh{background:var(--k);color:#fff}
.sh-g{display:grid;gap:clamp(2rem,5vw,4.5rem);grid-template-columns:repeat(auto-fit,minmax(290px,1fr));align-items:center}
.sh p{color:#d8cfbd;max-width:30rem}
.sh .btn{background:#fff;color:var(--k);border-color:#fff}.sh .btn:hover{background:transparent;color:#fff}
.sh-f{position:relative;aspect-ratio:4/5;width:100%;max-width:30rem;justify-self:center;overflow:hidden;background:#1d1d1d}
.sh-f figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.4s ease}
.sh-f figure.on{opacity:1}
.sh-f img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.sh-f figcaption{position:absolute;left:1rem;bottom:2.6rem;font:400 .7rem/1.3 var(--wide);letter-spacing:.16em;text-transform:uppercase;background:rgba(17,17,17,.72);color:#fff;padding:.4rem .75rem}
.sh-d{position:absolute;left:0;right:0;bottom:1rem;display:flex;justify-content:center;gap:.45rem;z-index:2}
.sh-d button{width:8px;height:8px;padding:0;border:1px solid #fff;border-radius:50%;background:transparent;cursor:pointer}
.sh-d button[aria-selected="true"]{background:#fff}
@media(max-width:640px){.sh-t{text-align:center}.sh-t p{margin-left:auto;margin-right:auto}.sh-t .ac{justify-content:center}}
/* v16: taller showcase frame so full hair length shows */
.sh-f{aspect-ratio:2/3;max-width:27rem}

/* v17: direct contact details */
.ci{list-style:none;padding:0;margin:2.4rem auto 0;max-width:40rem;display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.ci li{border-top:1px solid #111;padding-top:.8rem;font-size:.95rem;color:var(--m)}
.ci span{display:block;font:400 .68rem/1.4 var(--wide);letter-spacing:.18em;text-transform:uppercase;color:var(--k);margin-bottom:.3rem}
.ci a{text-decoration:none;border-bottom:1px solid var(--s);color:var(--k);word-break:break-word}
.cta .cr{margin-top:1.8rem;font-size:.85rem}.cta .cr a{color:var(--m)}

/* v18: About photo */
.ab{display:grid;gap:clamp(2rem,5vw,4.5rem);grid-template-columns:repeat(auto-fit,minmax(290px,1fr));align-items:center}
.ab-p{margin:0;width:100%;max-width:28rem;justify-self:center;aspect-ratio:2/3;overflow:hidden;background:#f3f0ea}
.ab-p img{display:block;width:100%;height:100%;object-fit:cover;object-position:60% 55%}
.ab .big{margin-top:1.6rem}
/* v19: fine-hair feature */
.fh{background:var(--k);color:#fff;text-align:center}
.fh-in{max-width:44rem;margin:0 auto}
.fh p{color:#d8cfbd;margin-left:auto;margin-right:auto}
.fh p strong{color:#fff;font-weight:500}
.fh .lead{color:#fff;font:italic 400 clamp(1.5rem,3.5vw,2rem)/1.3 var(--serif);margin-bottom:1.2rem}
.fh .ac{justify-content:center}
.fh .btn{background:#fff;color:var(--k);border-color:#fff}.fh .btn:hover{background:transparent;color:#fff}
.fh .btn.gh{background:transparent;color:#fff;border-color:#fff}.fh .btn.gh:hover{background:#fff;color:var(--k)}
.tint p strong{color:#fff;font-weight:500}
.tint .btn.gh{background:transparent;color:#fff;border-color:#fff}.tint .btn.gh:hover{background:#fff;color:var(--k)}
/* v20: fine & thinning hair page */
.steps{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.steps figure{margin:0}
.steps .sp{aspect-ratio:2/3;overflow:hidden;background:#f3f0ea}
.steps img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.steps figcaption{margin-top:1rem;font-size:.95rem;line-height:1.55;color:var(--m)}
.steps figcaption b{display:block;font:400 .74rem/1.4 var(--wide);letter-spacing:.18em;text-transform:uppercase;color:var(--k);margin-bottom:.35rem}
nav{gap:.3rem 1.2rem}
/* v21: lighter look: big black blocks become soft stone; black kept for type, buttons, rules and footer */
:root{--stone:#f3f0eb;--stone2:#e9e4dc}
.ph,.tint,.sh,.fh,.ibt{background:var(--stone);color:var(--k)}
.ph p,.ph .crumbs,.tint p,.sh p,.fh p,.ibt p{color:var(--m)}
.ph .crumbs a{border-color:var(--s)}
.ph .ring{border-color:#d8d0c3}
.tint p strong,.fh p strong{color:var(--k)}
.fh .lead{color:var(--k)}
.ph .btn,.tint .btn,.sh .btn,.fh .btn,.ibt .btn{background:var(--k);color:#fff;border-color:var(--k)}
.ph .btn:hover,.tint .btn:hover,.sh .btn:hover,.fh .btn:hover,.ibt .btn:hover{background:transparent;color:var(--k)}
.tint .btn.gh,.fh .btn.gh,.sh .btn.gh{background:transparent;color:var(--k);border-color:var(--k)}
.tint .btn.gh:hover,.fh .btn.gh:hover,.sh .btn.gh:hover{background:var(--k);color:#fff}
.sh-f,.ibt figure{background:var(--stone2)}
.cx:first-child{background:#fff;color:var(--k)}
.cx:first-child p{color:var(--m)}
.cx:first-child ul,.cx:first-child li{border-color:#111}
.ib{border-bottom:1px solid #e2dcd2}
/* v22: Instagram */
nav a.ig{display:inline-flex;align-items:center;border:0;padding:0 .1rem}nav a.ig:hover{opacity:.6}
.ab .igl{display:inline-block;margin-top:1.4rem;font:400 .74rem/1.4 var(--wide);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--k);padding-bottom:.2rem}

/* v23: reviews */
.rvs{background:#fff;text-align:center}
.rvs-hd{margin-bottom:2.2rem}
.rvs-g{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));text-align:left}
.rvs-g.one{max-width:46rem;margin:0 auto;text-align:center}
.rq{margin:0;padding:2.4rem 2rem;border-top:1px solid #111;border-bottom:1px solid #111}
.st5{letter-spacing:.3em;font-size:.9rem;color:var(--k);margin-bottom:1.2rem}
.rq blockquote{margin:0 0 1.4rem;font:italic 400 clamp(1.5rem,3.4vw,2.1rem)/1.3 var(--serif);color:var(--k)}
.rq figcaption{font:400 .72rem/1.4 var(--wide);letter-spacing:.18em;text-transform:uppercase;color:var(--k)}
.rq figcaption span{color:var(--m)}
.rq details{border:0;margin-top:1.4rem;padding:0;text-align:left}
.rq summary{font:400 .72rem/1.4 var(--wide);letter-spacing:.16em;text-transform:uppercase;text-align:center;list-style:none;cursor:pointer;color:var(--m)}
.rq summary::-webkit-details-marker{display:none}
.rq summary::after{content:" +"}
.rq details[open] summary::after{content:" \2212"}
.rq details p{font-size:.98rem;margin:1rem 0 0}
.rvs-ac{justify-content:center;margin-top:2.2rem}
/* v24: reviews grid caps at 2 across so quotes stay readable */
@media(min-width:900px){.rvs-g:not(.one){grid-template-columns:1fr 1fr;max-width:62rem;margin:0 auto}}

/* v25: topper custom colour feature */
.tp2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;width:100%;max-width:36rem;justify-self:center}
.tp2 figure{position:relative;margin:0;aspect-ratio:2/3;overflow:hidden;background:#f3f0ea}
.tp2 img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
/* v26: side-by-side pairs in grids */
.sbs{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.sbs>div{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--b)}
.sbs img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.pairs .pr:has(.sbs){grid-column:span 1}

/* v27: homepage before/after picks */
.pm{justify-content:center;margin-top:2.4rem}

/* v28: on phones, price sits under the description instead of above the title */
@media(max-width:560px){.pl b{order:0;margin-top:.5rem;font-size:.85rem;color:var(--m)}}

/* v29: more visual: photo service cards, image band, split sections, display type, compact menus */
.disp,.hero h1{font-family:"Italiana",var(--serif);font-weight:400;text-transform:uppercase;letter-spacing:.06em;line-height:1.05}
.hero h1{font-size:clamp(2.4rem,7vw,5rem)}.hero h1 em{font-style:normal}
.disp{font-size:clamp(2.2rem,5.5vw,3.6rem)}
.cx{padding-top:0}
.cx-i{display:block;margin:0 -2rem 1.8rem;aspect-ratio:4/5;overflow:hidden;position:relative;z-index:1}
.cx-i img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform .8s}
.cx:hover .cx-i img{transform:scale(1.04)}
.cx:hover{transform:none}
.bnd{position:relative;height:clamp(22rem,70vh,40rem);overflow:hidden;padding:0;background:#ddd}
.bnd img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.bnd::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,17,17,.45),rgba(17,17,17,0) 60%)}
.bnd-t{position:absolute;left:clamp(1.5rem,7vw,6rem);top:50%;transform:translateY(-50%);z-index:1;color:#fff}
.bnd-t p{margin:0;color:#fff;font:400 clamp(2.6rem,8vw,6rem)/1 "Italiana",var(--serif);text-transform:uppercase;letter-spacing:.08em}
.bnd-t p:nth-child(2){padding-left:1.2em}.bnd-t p:nth-child(3){padding-left:2.4em;font-style:italic}
.split .w{display:grid;gap:clamp(2rem,6vw,5rem);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:center}
.sp-img{margin:0;position:relative;aspect-ratio:3/4;overflow:hidden;max-width:28rem;width:100%;justify-self:center}
.sp-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.sp-img figcaption{position:absolute;left:1rem;bottom:1rem;font:400 .66rem/1.3 var(--wide);letter-spacing:.16em;text-transform:uppercase;background:rgba(255,255,255,.9);color:#111;padding:.4rem .7rem}
.split .big{margin:.2rem 0 1.2rem}
/* compact service menus: name + price, tap for details */
.pl.cmpct{display:grid;grid-template-columns:1fr;column-gap:3rem;max-width:none}
@media(min-width:800px){.pl.cmpct{grid-template-columns:1fr 1fr}}
.pl.cmpct>div{cursor:pointer;padding:1.15rem 0}
.pl.cmpct h3{display:flex;align-items:center;gap:.6rem;margin:0}
.pl.cmpct h3::after{content:"+";font:300 1.1rem var(--sans);color:var(--m)}
.pl.cmpct>div.open h3::after{content:"\2212"}
.pl.cmpct p{display:none;margin-top:.6rem}
.pl.cmpct>div.open p{display:block}
.pl.cmpct b{align-self:start}
@media(max-width:560px){.pl.cmpct b{order:0}}
/* v30: taller card photos so long hair fits */
.cx-i{aspect-ratio:9/14}
.cx-i img{object-position:50% 50%!important}

.cx[href="blonding-colour-edmonton.html"] .cx-i img{object-position:50% 8%!important}

/* v31: inner page heroes with photo + display headline */
.ph h1{font-family:"Italiana",var(--serif);font-weight:400;text-transform:uppercase;letter-spacing:.05em;font-size:clamp(2.2rem,6vw,4.4rem);line-height:1.05}.ph h1 em{font-style:normal}
.phs{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:center}
.ph-i{margin:0;aspect-ratio:3/4;overflow:hidden;max-width:26rem;width:100%;justify-self:center;position:relative;z-index:1}
.ph-i img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:640px){.ph-i{max-width:none;aspect-ratio:4/5}}

/* v32: refined halo: one fine, open arc echoing the logo, no pulsing, no stacked rings */
.ring{animation:none!important;border:1px solid rgba(17,17,17,.16);border-right-color:transparent;border-bottom-color:transparent;transform:translate(-50%,-50%) rotate(-20deg)}
.ring.r2,.ring.r3{display:none}
.ph .ring.r1{left:78%;top:46%;width:min(80vw,560px);height:min(80vw,560px);border-color:rgba(17,17,17,.14);border-right-color:transparent;border-bottom-color:transparent}
.hero .ring.r1{width:min(96vw,720px);height:min(96vw,720px)}
.cta .ring.r1{width:min(90vw,620px);height:min(90vw,620px);border-color:rgba(17,17,17,.12);border-right-color:transparent;border-bottom-color:transparent}
@media(max-width:640px){.ph .ring.r1{left:85%;top:20%}}

/* v33: the halo has one job: it frames the feature photo, like the circle behind HALOS. in the logo */
.ring{display:none!important}
.ph-i,.sh-f{overflow:visible;position:relative;z-index:0}
.ph-i::before,.sh-f::before{content:"";position:absolute;left:50%;top:50%;width:132%;aspect-ratio:1/1;border:1px solid rgba(17,17,17,.55);border-left-color:transparent;border-radius:50%;transform:translate(-50%,-50%) rotate(-35deg);z-index:-1;pointer-events:none}
.sh-f::before{width:128%}
.ph,.sh{overflow:hidden}
@media(max-width:640px){.ph-i::before,.sh-f::before{width:118%}}

/* v34: About heading comes before the photo */
.ab-h{grid-column:1/-1;margin-bottom:-1rem}
.ab-h h2{margin:0}

/* v35: composed spreads on the fine hair page */
/* opening quote, framed by the halo like the logo */
.pq{position:relative;text-align:center;padding:clamp(5rem,13vw,10rem) 0;background:#fff;overflow:hidden}
.pq .w{position:relative;z-index:0}
.pq .w::before{content:"";position:absolute;left:50%;top:50%;width:min(92vw,640px);aspect-ratio:1/1;border:1px solid rgba(17,17,17,.5);border-left-color:transparent;border-radius:50%;transform:translate(-50%,-50%) rotate(-35deg);z-index:-1;pointer-events:none}
.pq blockquote{max-width:34rem;margin:0 auto;font:italic 400 clamp(1.6rem,3.8vw,2.6rem)/1.32 var(--serif);color:var(--k)}
.pq-c{margin:1.8rem 0 0;font-size:.9rem;color:var(--m)}
/* solutions: intro + photo left (sticky), menu right */
.opt{display:grid;gap:clamp(2.5rem,6vw,5rem);grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.opt{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.opt-l{position:sticky;top:7rem}}
.opt .pl{margin-top:0;border-top:1px solid #111}
.opt .pl.cmpct{grid-template-columns:1fr!important}
.opt-i{margin:2rem 0 0;aspect-ratio:4/5;overflow:hidden;max-width:24rem}
.opt-i img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
/* FAQ spread */
.faq2 .w{display:grid;gap:clamp(2rem,6vw,5rem);grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.faq2 .w{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.fq-l{position:sticky;top:7rem}}
.fq-l p{max-width:26rem}
.fq-r details:first-child{border-top:1px solid #111}
.fq-r summary{font-size:1.35rem}
/* v36: complete circles */
.ph-i::before,.sh-f::before,.pq .w::before{border-left-color:rgba(17,17,17,.5)!important}

/* v37: one halo only, around the quote; none behind photos */
.ph-i::before,.sh-f::before{display:none!important}

.ib .sm{font-size:.88rem;color:var(--m)}