@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--paper:#faf8f3;--ink:#37332e;--muted:#70695f;--accent:#eee5ce;--line:#ddd6ca}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.65}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible{outline:3px solid #8a6b30;outline-offset:6px}.wrap{width:min(1280px,90%);margin-inline:auto}.concept{text-align:center;background:#eee8dc;font-size:11px;letter-spacing:.06em;padding:6px 12px;color:#655b4d}.header{height:116px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:inline-flex;flex-direction:column;line-height:1}.brand>span{font-size:10px;font-weight:600;letter-spacing:.31em;margin-bottom:7px}.brand strong{font-family:'Manrope',sans-serif;font-size:31px;letter-spacing:-2px;font-weight:800}.dot{color:#dcb300}.header nav{display:flex;gap:35px;font-size:13px}.header nav a:hover,.text-link:hover{color:#80643d}.button{display:inline-flex;gap:28px;align-items:center;justify-content:space-between;background:var(--ink);color:white;padding:17px 23px;font-size:13px;font-weight:500;border-radius:3px;transition:background .2s}.button:hover{background:#65533f}.button span{font-size:20px;line-height:1}.button.small{padding:13px 19px}.hero{display:grid;grid-template-columns:1.08fr 1fr;gap:6%;padding:28px 0 70px;align-items:center}.eyebrow{font-size:10px;letter-spacing:.18em;font-weight:600;display:flex;align-items:center;gap:13px;margin:0 0 28px}.line{width:30px;height:1px;background:#a38b63}h1,h2,h3{font-family:'Manrope',sans-serif;line-height:1.09;font-weight:500;margin:0;letter-spacing:-.055em}h1{font-size:clamp(55px,6.1vw,88px)}em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.045em}.intro{font-size:16px;max-width:360px;color:var(--muted);margin:28px 0 32px}.actions{display:flex;flex-wrap:wrap;gap:21px;align-items:center}.text-link{font-size:12px;border-bottom:1px solid #c7bba5;padding-bottom:5px}.text-link span{margin-left:12px}.hero-note{display:flex;align-items:center;gap:16px;margin-top:49px}.spark{font-size:38px;color:#b58b00;line-height:1}.hero-note p{font-size:11px;line-height:1.6;margin:0;color:var(--muted)}.hero-note strong{font-weight:500;color:var(--ink)}figure{margin:0;position:relative}.hero-photo{height:545px;border-radius:180px 180px 4px 4px;overflow:hidden;background:#dedbcf}.hero-photo img{width:100%;height:100%;object-fit:cover}.hero-photo:after{content:'';position:absolute;inset:60% 0 0;background:linear-gradient(transparent,#0008);pointer-events:none}.hero-photo figcaption{position:absolute;bottom:25px;left:28px;right:28px;color:white;z-index:1;display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.16em}.hero-photo figcaption span:last-child{font-size:27px}.photo-label{position:absolute;top:20px;right:20px;background:#faf8f3dd;padding:3px 10px;font-size:10px;border-radius:20px}.ribbon{background:var(--accent);padding:22px 0}.ribbon .wrap{display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:12px}.ribbon i{font-size:20px;font-style:normal;color:#8b6e3f}.section{padding-block:100px}.section-top{display:flex;justify-content:space-between;align-items:end;gap:45px}h2{font-size:clamp(38px,4vw,57px)}.section-top>p{max-width:310px;font-size:14px;color:var(--muted);margin:0 0 6px}.draft-note{font-size:11px;color:var(--muted)}.section>.draft-note{margin-top:28px}.services{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:28px}.services article{border-top:1px solid var(--line);padding-top:25px}.number{font-size:11px;color:#9a8060}.services h3{font-size:22px;letter-spacing:-.04em;margin-top:34px}.services p{font-size:13px;color:var(--muted);max-width:300px;margin:16px 0 25px}.services a{font-size:12px;display:flex;justify-content:space-between;padding-bottom:15px;border-bottom:1px solid var(--line)}.services a:hover{color:#80643d}.salon{background:#eee9df;padding:76px 0}.salon-grid{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center}.salon-photo{height:440px;overflow:hidden;border-radius:3px}.salon-photo img{width:100%;height:100%;object-fit:cover}.salon-copy>p:not(.eyebrow){font-size:14px;color:var(--muted);max-width:380px}.salon-copy>p.draft-note{font-size:11px}.salon-copy h2{margin-bottom:27px}.salon-copy .text-link{display:inline-block;margin-top:18px}.contact{display:grid;grid-template-columns:1fr 1fr;gap:10%}.contact>div>p:not(.eyebrow){color:var(--muted);font-size:14px}.contact-details{padding-top:15px}.contact-details h3{font-size:26px;letter-spacing:-.04em}.contact-details>p{max-width:380px}.detail{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding:16px 0;font-size:12px}.detail strong{font-weight:500;text-align:right}.contact-details .draft-note{font-size:11px!important}.footer{border-top:0;padding:33px 0;display:flex;align-items:center;justify-content:space-between;gap:24px}.footer .brand strong{font-size:25px}.footer .brand>span{font-size:8px}.footer p,.footer>a:last-child{font-size:11px;color:var(--muted)}.skip{position:fixed;top:-80px;left:20px;background:white;padding:10px;z-index:10}.skip:focus{top:10px}@media(min-width:1500px){.hero-photo{height:600px}}@media(max-width:900px){.header nav{gap:18px}.hero{gap:4%}h1{font-size:60px}.hero-photo{height:480px}.actions{gap:15px}.hero-note{margin-top:30px}.services{gap:22px}.salon-grid{gap:6%}}@media(max-width:650px){.concept{font-size:9px}.header{height:95px;flex-wrap:wrap;gap:10px}.brand strong{font-size:25px}.brand>span{font-size:8px}.header nav{order:3;justify-content:center;width:100%;font-size:11px;gap:25px;padding-bottom:10px}.header .small{font-size:10px;padding:10px 12px;gap:12px}.hero{grid-template-columns:1fr;padding-top:38px;padding-bottom:35px;gap:30px}.eyebrow{margin-bottom:22px}h1{font-size:61px}.intro{font-size:15px;margin-top:22px}.hero-note{margin-top:24px}.hero-photo{height:380px;border-radius:140px 140px 3px 3px}.ribbon{padding:17px 0}.ribbon .wrap{flex-wrap:wrap;justify-content:center;gap:9px 15px;font-size:10px}.ribbon i{font-size:14px}.ribbon i:nth-of-type(2){display:none}.section{padding-block:60px}.section-top{display:block}.section-top>p{margin-top:22px}h2{font-size:43px}.services{grid-template-columns:1fr;gap:22px}.services h3{margin-top:15px}.services p{max-width:none}.salon{padding:40px 0}.salon-grid{grid-template-columns:1fr;gap:32px}.salon-photo{height:320px}.contact{grid-template-columns:1fr;gap:22px}.footer{flex-wrap:wrap;padding:26px 0}.footer p{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Signature strands: charcoal, brunette, caramel, blonde and logo yellow. */
.brand{flex-direction:row;align-items:center;gap:12px;flex-shrink:0}
.brand-icon{width:76px;height:56px;object-fit:contain;display:block}
.brand-wordmark{display:flex;flex-direction:column;line-height:1}
.brand-wordmark>span{font-size:10px;font-weight:600;letter-spacing:.31em;margin-bottom:7px}
.hair-strands{width:100%;height:78px;overflow:hidden;margin:0 0 20px;pointer-events:none}
.hair-strands svg{display:block;width:100%;height:100%}
.hair-strands path{fill:none;stroke-width:10;stroke-linecap:round}
.hero{padding-top:20px}
.ribbon{border-bottom:0}
.services article{border-top:3px solid #80694d}
.services article:nth-child(2){border-top-color:#b1a18a}
.services article:nth-child(3){border-top-color:#e4b900}
.salon{position:relative;overflow:hidden}
.salon:before{content:'';position:absolute;top:0;left:0;width:100%;height:6px;background:linear-gradient(90deg,#403a34 0 20%,#80694d 20% 40%,#b1a18a 40% 60%,#ddd4bc 60% 80%,#e4b900 80%)}
.footer .brand-icon{width:57px;height:43px}
.footer .brand-wordmark>span{font-size:8px}
@media(max-width:900px){.header{gap:15px}.header nav{gap:18px}.brand-icon{width:60px;height:46px}.brand{gap:8px}}
@media(max-width:650px){.header{height:auto;min-height:112px;padding-top:14px}.brand-icon{width:52px;height:40px}.brand-wordmark>span{font-size:8px}.hair-strands{height:51px;margin-bottom:12px}.hero{padding-top:15px}.header nav{padding-top:9px;padding-bottom:14px}}

/* Two salons are the starting point of the visitor journey. */
.location-hero{padding:12px 0 48px}
.welcome{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:30px}
.welcome h1{font-size:clamp(38px,4.5vw,65px)}
.welcome .eyebrow{margin-bottom:16px}
.welcome .intro{font-size:13px;max-width:290px;margin:0 0 4px;flex-shrink:0}
.location-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.location-card{min-width:0}
.location-image{height:245px;position:relative;overflow:hidden;border-radius:6px;background:#e9e0d2}
.location-image-two{background:#e3d7c1}
.location-image svg{position:absolute;width:100%;height:100%;inset:0;opacity:.6}
.location-image svg path{stroke:#b4a088;stroke-width:12}
.location-image svg path:nth-child(2){stroke:#f8f3e6}
.location-image svg path:nth-child(3){stroke:#dcb300}
.location-image-two svg{transform:scaleX(-1)}
.location-image-two svg path:first-child{stroke:#80694d}
.location-index{position:absolute;z-index:1;left:22px;top:20px;letter-spacing:.16em;font-size:10px;color:#544a3e}
.photo-coming{position:absolute;left:22px;bottom:20px;background:#faf8f3ed;color:#655b4d;font-size:11px;padding:6px 12px;border-radius:2px}
.location-info{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0 13px;border-bottom:1px solid var(--line)}
.location-info h2{font-size:26px;letter-spacing:-.045em}
.location-info p{margin:7px 0 0;font-size:12px;color:var(--muted)}
.location-link{font-size:12px;white-space:nowrap}
.location-link span{display:inline-block;margin-left:10px;font-size:20px;transition:transform .2s}
.location-link:hover span{transform:translate(2px,-2px)}
.location-link:hover{color:#80643d}
.location-contact{scroll-margin-top:30px;margin-top:30px}
.location-contact .eyebrow{margin-bottom:8px}
.location-contact:target{outline:2px solid #dcb300;outline-offset:12px;border-radius:2px}
@media(max-width:900px){.welcome{display:block}.welcome .intro{max-width:none;margin-top:16px}.header nav{gap:14px}.location-image{height:220px}}
@media(max-width:650px){.location-hero{padding-top:12px;padding-bottom:30px}.welcome{margin-bottom:24px}.welcome h1{font-size:43px}.welcome .eyebrow{font-size:9px;letter-spacing:.12em}.welcome .intro{font-size:13px}.location-grid{grid-template-columns:1fr;gap:25px}.location-image{height:215px}.location-info{padding-top:15px}.location-info h2{font-size:25px}.header nav{gap:20px;font-size:10px}.location-link{font-size:11px}}
@media(prefers-reduced-motion:reduce){.location-link span{transition:none}}

/* Full-viewport salon selector. */
.location-hero{padding:0}
.location-hero .welcome{padding-top:8px;margin-bottom:30px}
.location-grid{gap:0;min-height:620px;height:100svh;max-height:1200px}
.location-card{position:relative;display:block;overflow:hidden;color:#fff;background:#65533f;isolation:isolate}
.location-cover{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform .65s ease}
.location-card:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0005,transparent 30%,#0003 50%,#000b);z-index:-1}
.location-cover{z-index:-2}
.location-card:hover .location-cover{transform:scale(1.035)}
.location-card:focus-visible{outline:4px solid #e4b900;outline-offset:-4px}
.location-card .location-index{left:7%;top:35px;color:#fff}
.location-card .photo-coming{left:auto;right:7%;top:31px;bottom:auto;font-size:9px;background:#faf8f3d9}
.location-info{position:absolute;left:7%;right:7%;bottom:8%;padding:0;border:0;align-items:end;flex-wrap:wrap;gap:25px}
.location-info h2{font-size:clamp(42px,5vw,80px);font-weight:500;letter-spacing:-.055em}
.location-info p{color:#fff;font-size:10px;letter-spacing:.18em;margin:0 0 15px}
.location-link{color:#fff;border-bottom:1px solid #ffffff80;padding-bottom:8px;font-size:12px}
.location-link span{margin-left:25px}
.location-card:hover .location-link span{transform:translate(3px,-3px)}
@media(max-width:900px){.location-info h2{font-size:45px}.location-card .location-index{top:25px}.location-card .photo-coming{top:53px;right:auto;left:7%}}
@media(max-width:650px){.location-hero .welcome{padding-top:10px;margin-bottom:25px}.location-grid{height:auto;max-height:none;min-height:0;gap:0}.location-card{height:70svh;min-height:390px}.location-info{bottom:9%;gap:20px}.location-info h2{font-size:49px}.location-card .photo-coming{top:22px;right:6%;left:auto}.location-card .location-index{font-size:8px;top:29px;left:6%}}
@media(prefers-reduced-motion:reduce){.location-cover{transition:none}.location-card:hover .location-cover{transform:none}}

/* Keep both location names in the first screen, below the header and title. */
.location-hero .welcome{margin-bottom:22px}
.location-grid{height:clamp(300px,calc(100svh - 360px),640px);min-height:0;max-height:none}
.location-info{bottom:30px}
.location-info h2{font-size:clamp(36px,4.5vw,64px)}
@media(max-width:900px){.location-grid{height:clamp(280px,calc(100svh - 390px),540px)}}
@media(max-width:650px){
 .location-hero .welcome{margin-bottom:20px}
 .location-grid{height:auto;gap:0}
 .location-card{height:clamp(175px,calc((100svh - 350px)/2),280px);min-height:0}
 .location-info{left:6%;right:6%;bottom:18px;gap:10px;flex-wrap:nowrap;align-items:end}
 .location-info h2{font-size:34px}
 .location-info p{font-size:8px;margin-bottom:7px}
 .location-link{font-size:10px;padding-bottom:4px}
 .location-link span{margin-left:6px;font-size:17px}
 .location-card .location-index{top:15px;font-size:7px}
 .location-card .photo-coming{top:10px;font-size:8px;padding:3px 6px}
}

/* Salon price list with readable amounts on every screen size. */
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px 60px;margin-top:42px;align-items:start}
.price-group{border-top:3px solid #80694d;padding-top:20px;min-width:0}
.price-group:nth-child(3n+2){border-color:#b1a18a}
.price-group:nth-child(3n){border-color:#e4b900}
.price-group h3{font-size:24px;letter-spacing:-.04em;margin-bottom:18px}
.price-group dl{margin:0}
.price-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;row-gap:4px;border-bottom:1px solid var(--line);padding:12px 0;font-size:13px;line-height:1.5}
.price-row dt{min-width:0}
.price-row dd{margin:0;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:500}
.price-row .price-note{grid-column:1/-1;font-size:11px;font-weight:400;color:var(--muted);white-space:normal}
.price-footnote{font-size:12px;color:var(--muted);margin-top:30px;margin-bottom:20px}
@media(max-width:650px){.price-grid{grid-template-columns:1fr;gap:30px;margin-top:30px}.price-row{font-size:12px;column-gap:12px}.price-group h3{font-size:23px}}

/* Products are available in the salons, with advice for home care. */
.products{display:grid;grid-template-columns:1fr 1fr;gap:10%;border-bottom:1px solid var(--line)}
.products-copy>p{font-size:14px;color:var(--muted);max-width:440px;margin:0 0 18px}
.product-types{display:flex;flex-wrap:wrap;gap:9px;margin:25px 0}
.product-types span{font-size:11px;padding:7px 15px;border:1px solid #d4c7b2;border-radius:30px;background:#f0e9dc}
.product-types span:last-child{border-color:#ddbd49}
.products-copy .text-link{display:inline-block}
@media(max-width:650px){.products{grid-template-columns:1fr;gap:25px}}

/* Personal finds add the character of the salons. */
.treasures{display:grid;grid-template-columns:1fr 1fr;gap:10%;border-bottom:1px solid var(--line)}
.treasures-copy>p{font-size:14px;color:var(--muted);max-width:440px;margin:0 0 18px}
.treasures-copy .text-link{display:inline-block}
@media(max-width:650px){.treasures{grid-template-columns:1fr;gap:25px}}

/* Native accordions keep the treatment overview concise and keyboard accessible. */
.price-group{padding-top:0}
.price-group summary{display:flex;justify-content:space-between;align-items:center;gap:20px;list-style:none;cursor:pointer;padding:22px 0}
.price-group summary::-webkit-details-marker{display:none}
.price-summary-copy{display:flex;flex-direction:column;gap:10px;min-width:0}
.price-title{font-family:'Manrope',sans-serif;font-size:24px;line-height:1.15;letter-spacing:-.04em;font-weight:500}
.price-description{font-size:13px;line-height:1.6;color:var(--muted)}
.price-toggle{display:flex;align-items:center;gap:12px;font-size:10px;white-space:nowrap;color:#65533f}
.toggle-symbol{font-size:23px;font-weight:400;line-height:1}
.when-open{display:none}
.price-group[open] .when-open{display:inline}
.price-group[open] .when-closed{display:none}
.price-group[open] .toggle-symbol{transform:rotate(45deg)}
.price-group[open] .price-description{display:none}
.price-group[open] summary{padding-bottom:18px}
.price-group summary:focus-visible{outline:2px solid #8a6b30;outline-offset:5px}
.price-group summary:hover .price-title{color:#80643d}
.price-group dl{padding-bottom:5px}
@media(max-width:650px){.price-title{font-size:23px}.price-group summary{gap:12px}.price-description{font-size:12px}.price-toggle{font-size:9px;gap:8px}}

/* Leave room for all five continuous curves, including their stroke edges. */
.hair-strands{height:95px}
.hair-strands path{stroke-width:14}
@media(max-width:650px){.hair-strands{height:64px}}

/* Full-width warm colour blocks make the page sections distinct. */
.products-band{background:#faf8f3}
.treasures-band{background:#e8dcc6}
.contact-band{background:#f1ece4}
.section-band .products,.section-band .treasures{border-bottom:0}
.treasures-band .product-types span{background:#f5eee2;border-color:#b9a78b}
.contact-band .detail{border-bottom-color:#d1c4b1}
/* Keep treatment accordions and the discovery section quiet. */
.treasures-band{background:var(--paper)}
.treasures-band .product-types span{background:#f0e9dc;border-color:#d4c7b2}
.treasures-band .product-types span:last-child{border-color:#ddbd49}
@media(max-width:650px){.section-band .section{padding-block:52px}}

/* Repeat the salon section's five-colour divider above appointments. */
.contact-band{position:relative}
.contact-band::before{content:'';position:absolute;top:0;left:0;width:100%;height:6px;background:linear-gradient(90deg,#403a34 0 20%,#80694d 20% 40%,#b1a18a 40% 60%,#ddd4bc 60% 80%,#e4b900 80%);pointer-events:none}

/* Desktop: salon photos frame a quiet central introduction. */
@media(min-width:1000px){
 .hair-strands{margin-bottom:0;height:84px}
 .location-hero{position:relative;background:var(--paper);isolation:isolate}
 .location-hero .welcome{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:34%;margin:0;padding:0 18px;text-align:center;display:block;pointer-events:none}
 .welcome .eyebrow{justify-content:center;font-size:9px;letter-spacing:.14em;margin-bottom:22px}
 .welcome h1{font-size:clamp(38px,4vw,66px);line-height:1.12;max-width:440px;margin-inline:auto;text-wrap:balance}
 .welcome .intro{font-size:13px;line-height:1.8;max-width:260px;margin:24px auto 0}
 .location-grid{height:clamp(360px,calc(100svh - 265px),680px);grid-template-columns:1fr 1fr}
 .location-card{background:var(--paper)}
 .location-card:first-child .location-cover{object-position:35% center}
 .location-card:last-child .location-cover{object-position:65% center}
 .location-card:first-child:after{z-index:0;background:linear-gradient(90deg,transparent 35%,#faf8f350 57%,#faf8f3d9 78%,var(--paper) 100%)}
 .location-card:last-child:after{z-index:0;background:linear-gradient(270deg,transparent 35%,#faf8f350 57%,#faf8f3d9 78%,var(--paper) 100%)}
 .location-card:before{content:'';position:absolute;inset:50% 0 0;z-index:-1;background:linear-gradient(transparent,#0008)}
 .location-info{z-index:1;left:7%;right:7%;bottom:32px;display:block}
 .location-card:last-child .location-info{text-align:right}
 .location-info h2{font-size:clamp(34px,3.5vw,55px)}
 .location-info p{font-size:9px;margin-bottom:10px}
 .location-link{display:inline-block;margin-top:18px}
 .location-index{z-index:1}
 .location-card .photo-coming{z-index:1;top:55px;left:7%;right:auto}
 .location-card:last-child .location-index{left:auto;right:7%}
 .location-card:last-child .photo-coming{left:auto;right:7%}
}

/* Wave-shaped edge overlays photos without a rectangular gap. */
.hair-strands .strand-mask{fill:#fff;stroke:none}
@media(min-width:1000px){
 .location-hero>.hair-strands{position:absolute;z-index:4;top:-1px;left:0;width:100%;height:110px;margin:0}
 .location-hero .welcome{width:38%;padding-inline:24px;top:54%}
 .location-card:first-child:after{background:linear-gradient(90deg,transparent 12%,#faf8f360 32%,#faf8f3eb 53%,var(--paper) 67%)}
 .location-card:last-child:after{background:linear-gradient(270deg,transparent 12%,#faf8f360 32%,#faf8f3eb 53%,var(--paper) 67%)}
 .location-card .location-index{top:125px}
 .location-card .photo-coming{top:150px}
 .location-grid{height:clamp(420px,calc(100svh - 180px),740px)}
}

/* A narrow light centre follows the text width, with short fades to the photos. */
@media(min-width:1000px){
 .location-hero>.hair-strands{height:85px}
 .location-card:first-child:after,.location-card:last-child:after{background:none}
 .location-hero:after{content:'';position:absolute;z-index:2;inset:0 auto 0 50%;transform:translateX(-50%);width:510px;background:linear-gradient(90deg,transparent 0%,var(--paper) 18%,var(--paper) 82%,transparent 100%);pointer-events:none}
 .location-hero .welcome{width:330px;padding:0;top:52%;z-index:3}
 .welcome h1{font-size:clamp(38px,3.5vw,58px)}
 .welcome .intro{max-width:260px;margin-top:23px}
 .location-card .location-index{top:100px}
 .location-card .photo-coming{top:125px}
}

/* Symmetric arc with clearance above every stroke and longer side fades. */
@media(min-width:1000px){
 .location-hero>.hair-strands{top:0;height:105px}
 .location-hero:after{width:810px;background:linear-gradient(90deg,transparent 0%,#faf8f345 12%,#faf8f3a6 23%,var(--paper) 30%,var(--paper) 70%,#faf8f3a6 77%,#faf8f345 88%,transparent 100%)}
}

@media(min-width:1000px){
 .location-hero:after{width:1010px;background:linear-gradient(90deg,transparent 0%,#faf8f345 14%,#faf8f3a6 26%,var(--paper) 34%,var(--paper) 66%,#faf8f3a6 74%,#faf8f345 86%,transparent 100%)}
}

@media(min-width:1000px){
 .location-hero:after{width:1250px;background:linear-gradient(90deg,transparent 0%,#faf8f345 17%,#faf8f3a6 29%,var(--paper) 37%,var(--paper) 63%,#faf8f3a6 71%,#faf8f345 83%,transparent 100%)}
}

/* Smooth full-width fades avoid a visible edge at a fixed overlay boundary. */
@media(min-width:1000px){
 .location-hero:after{width:100%;background:linear-gradient(90deg,rgba(250,248,243,0) 0%,rgba(250,248,243,.04) 5%,rgba(250,248,243,.14) 12%,rgba(250,248,243,.32) 20%,rgba(250,248,243,.58) 27%,rgba(250,248,243,.82) 33%,rgba(250,248,243,.96) 38%,var(--paper) 42%,var(--paper) 58%,rgba(250,248,243,.96) 62%,rgba(250,248,243,.82) 67%,rgba(250,248,243,.58) 73%,rgba(250,248,243,.32) 80%,rgba(250,248,243,.14) 88%,rgba(250,248,243,.04) 95%,rgba(250,248,243,0) 100%)}
 .location-hero .welcome{width:min(330px,28%)}
}

@media(min-width:1000px){
 .location-hero:after{background:linear-gradient(90deg,rgba(250,248,243,0) 0%,rgba(250,248,243,0) 6%,rgba(250,248,243,.04) 11%,rgba(250,248,243,.14) 17%,rgba(250,248,243,.32) 23%,rgba(250,248,243,.58) 29%,rgba(250,248,243,.82) 34%,rgba(250,248,243,.96) 39%,var(--paper) 42%,var(--paper) 58%,rgba(250,248,243,.96) 61%,rgba(250,248,243,.82) 66%,rgba(250,248,243,.58) 71%,rgba(250,248,243,.32) 77%,rgba(250,248,243,.14) 83%,rgba(250,248,243,.04) 89%,rgba(250,248,243,0) 94%,rgba(250,248,243,0) 100%)}
}

/* One salon at a time, each with its own story and gallery. */
.salon-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:38px}
.salon-switch{display:flex;gap:4px;padding:5px;background:#e1d9cb;border-radius:40px}
.salon-switch button{font:inherit;font-size:13px;cursor:pointer;border:0;border-radius:30px;padding:12px 20px;background:transparent;color:var(--ink)}
.salon-switch button[aria-selected="true"]{background:var(--paper);box-shadow:0 2px 5px #403a3412}
.salon-switch button:focus-visible,.gallery-thumb:focus-visible{outline:3px solid #8a6b30;outline-offset:3px}
.salon-panel[hidden]{display:none}
.salon-panel .salon-grid{align-items:center}
.gallery-main{height:370px;overflow:hidden;border-radius:3px;background:#ddd4bc}
.gallery-main>img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-main figcaption{position:absolute;bottom:14px;left:14px;background:#faf8f3eb;padding:4px 10px;font-size:10px}
.gallery-thumbnails{display:flex;gap:12px;margin-top:12px}
.gallery-thumb{padding:0;border:2px solid transparent;border-radius:3px;background:none;cursor:pointer;width:100px;height:70px;overflow:hidden;opacity:.65}
.gallery-thumb[aria-pressed="true"]{border-color:#b58b00;opacity:1}
.gallery-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.salon-story h3{font-size:40px;margin-bottom:24px}
.salon-story>p:not(.eyebrow){font-size:14px;color:var(--muted);max-width:440px}
.salon-story>p.draft-note{font-size:11px}
.salon-story .button{margin-top:16px}
@media(max-width:650px){.salon-heading{display:block;margin-bottom:28px}.salon-switch{margin-top:24px;width:fit-content}.salon-switch button{font-size:12px;padding:11px 18px}.gallery-main{height:290px}.salon-story h3{font-size:34px}}

/* Location-led editorial layout: story at left, generous gallery at right. */
.salon-heading{align-items:center;padding-bottom:28px;border-bottom:1px solid #d3c8b8;margin-bottom:36px}
.salon-heading h2{font-size:clamp(35px,3.5vw,52px)}
.salon-heading .eyebrow{margin-bottom:14px}
.salon-switch{border-radius:4px;background:#e2dbcf;padding:4px}
.salon-switch button{border-radius:2px;min-width:130px}
.salon-panel .salon-grid{grid-template-columns:.8fr 1.2fr;gap:7%;align-items:center}
.salon-story{grid-column:1;grid-row:1}
.salon-gallery{grid-column:2;grid-row:1}
.salon-story h3{font-size:clamp(34px,3.2vw,48px);margin-bottom:16px}
.salon-story .eyebrow{font-size:9px;margin-bottom:15px}
.salon-story>p.salon-address{color:var(--ink);font-size:15px;line-height:1.6;border-left:3px solid #dcb300;padding-left:15px;margin-bottom:27px}
.salon-story>p:not(.eyebrow):not(.salon-address){font-size:13px}
.salon-route{display:block;width:fit-content;font-size:12px;border-bottom:1px solid #b7a78b;padding-bottom:4px;margin-top:22px;margin-bottom:15px}
.salon-route span{margin-left:22px}
.gallery-main{height:410px}
.gallery-thumbnails{justify-content:flex-start}
.gallery-thumb{width:110px;height:74px}
@media(max-width:750px){.salon-heading{display:block}.salon-switch{margin-top:22px;width:fit-content}.salon-panel .salon-grid{grid-template-columns:1fr;gap:28px}.salon-story{grid-column:1;grid-row:1}.salon-gallery{grid-column:1;grid-row:2}.gallery-main{height:310px}.salon-switch button{min-width:0}.salon-story h3{font-size:36px}}

/* A single editorial collection replaces two repeated product sections. */
.salon-finds{display:grid;grid-template-columns:.85fr 1.35fr;gap:8%;align-items:start}
.finds-intro>p:not(.eyebrow){font-size:14px;color:var(--muted);max-width:300px;margin:24px 0}
.finds-intro .text-link{display:inline-block}
.finds-collection{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.finds-item{padding:23px 0 0;border-top:3px solid #b1a18a;min-width:0}
.finds-item:last-of-type{border-color:#dcb300}
.finds-item-top{display:flex;gap:16px;align-items:center;margin-bottom:35px}
.finds-number{font-family:Georgia,serif;font-size:28px;font-style:italic;color:#9c8665;line-height:1}
.finds-category{font-size:8px;font-weight:500;letter-spacing:.12em}
.finds-item h3{font-size:25px;line-height:1.2;letter-spacing:-.04em;margin-bottom:17px}
.finds-item>p{font-size:13px;color:var(--muted);line-height:1.8}
.finds-item .finds-caption{font-size:10px;color:#8b7451;margin:24px 0 0}
.finds-note{grid-column:1/-1;font-size:11px;color:var(--muted);padding-top:18px;border-top:1px solid var(--line);margin:0}
@media(max-width:900px){.salon-finds{grid-template-columns:1fr;gap:35px}.finds-intro>p:not(.eyebrow){max-width:440px}}
@media(max-width:650px){.finds-collection{grid-template-columns:1fr;gap:28px}.finds-item-top{margin-bottom:20px}.finds-item h3{font-size:24px}.finds-note{grid-column:1}}

/* Mobile introduction: photos first, curved top edge, then a fade into the title. */
@media(max-width:650px){
 .location-hero{position:relative;display:flex;flex-direction:column;background:var(--paper);isolation:isolate}
 .location-hero>.hair-strands{position:absolute;z-index:4;top:0;left:0;width:100%;height:62px;margin:0;pointer-events:none}
 .location-hero .location-grid{order:1;position:relative;display:grid;grid-template-columns:1fr 1fr;height:350px;min-height:0;gap:0}
 .location-hero .location-grid:after{content:'';position:absolute;z-index:2;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(250,248,243,.08) 58%,rgba(250,248,243,.3) 69%,rgba(250,248,243,.68) 82%,rgba(250,248,243,.94) 94%,var(--paper) 100%);pointer-events:none}
 .location-hero .location-card{height:100%;min-height:0}
 .location-hero .location-card:after{background:linear-gradient(180deg,#0002,transparent 35%,#0005 65%,transparent)}
 .location-hero .location-info{left:10%;right:7%;top:47%;bottom:auto;display:block;z-index:3}
 .location-hero .location-info h2{font-size:clamp(21px,5.6vw,33px);letter-spacing:-.05em}
 .location-hero .location-info p{font-size:7px;letter-spacing:.1em;margin-bottom:8px}
 .location-hero .location-link{display:inline-block;font-size:9px;margin-top:11px;border-color:#ffffff90}
 .location-hero .location-link span{font-size:14px;margin-left:5px}
 .location-hero .location-index{top:75px;left:10%;font-size:6px;letter-spacing:.1em}
 .location-hero .photo-coming{top:auto;bottom:28px;left:10%;right:auto;font-size:7px;z-index:3;padding:3px 5px}
 .location-hero .welcome{order:2;position:relative;text-align:center;padding:5px 0 30px;margin-bottom:0}
 .location-hero .welcome .eyebrow{justify-content:center;margin-bottom:16px;font-size:8px}
 .location-hero .welcome h1{font-size:45px;max-width:340px;margin-inline:auto;text-wrap:balance}
 .location-hero .welcome .intro{font-size:12px;max-width:300px;margin:18px auto 0}
}

/* Stacked mobile salons leave breathing room for the introduction below. */
@media(max-width:650px){
 .location-hero .location-grid{grid-template-columns:1fr;grid-template-rows:1fr 1fr;height:clamp(370px,53svh,460px)}
 .location-hero .location-grid:after{background:linear-gradient(180deg,transparent 76%,rgba(250,248,243,.12) 81%,rgba(250,248,243,.4) 87%,rgba(250,248,243,.78) 94%,var(--paper) 100%)}
 .location-hero .location-info{left:6%;right:6%;top:auto;bottom:37px;display:flex;justify-content:space-between;align-items:end;gap:12px}
 .location-hero .location-info h2{font-size:31px}
 .location-hero .location-info p{font-size:7px;margin-bottom:6px}
 .location-hero .location-link{font-size:10px;margin-top:0;white-space:nowrap}
 .location-hero .location-index{top:65px;left:6%;font-size:7px}
 .location-hero .location-card:last-child .location-index{top:14px}
 .location-hero .photo-coming{bottom:12px;left:6%;font-size:7px}
 .location-hero .location-card:last-child .location-info{bottom:55px}
 .location-hero .location-card:last-child .photo-coming{bottom:27px}
 .location-hero .welcome{padding:20px 0 36px}
 .location-hero .welcome h1{font-size:43px}
 .location-hero .welcome .intro{margin-top:18px;line-height:1.7}
}

/* A soft sand background gives the salon collection its own section. */
.finds-band{background:#e9dfce}
.finds-band .finds-note{border-top-color:#cfc0a9}
/* Reserve room for the title on mobile before increasing photo heights. */
@media(max-width:650px){
 .header{min-height:88px;padding-top:8px;gap:5px 10px}
 .header .brand-icon{width:43px;height:33px}
 .header .brand{gap:7px}
 .header .brand strong{font-size:22px}
 .header .brand-wordmark>span{font-size:7px;margin-bottom:5px}
 .header .button.small{padding:8px 10px;font-size:9px;gap:9px}
 .header nav{padding-top:4px;padding-bottom:9px;font-size:10px;gap:21px}
 .location-hero .location-grid{height:clamp(230px,calc(100svh - 335px),520px)}
 .location-hero .welcome{padding:12px 0 22px}
 .location-hero .welcome .eyebrow{margin-bottom:11px}
 .location-hero .welcome h1{font-size:clamp(34px,9.5vw,43px);line-height:1.12}
 .location-hero .welcome .intro{margin-top:12px;font-size:11px}
 .location-hero .location-info{bottom:25px}
 .location-hero .location-card:last-child .location-info{bottom:43px}
 .location-hero .location-index{top:55px}
 .location-hero .location-card:last-child .photo-coming{bottom:19px}
}
@media(max-width:650px) and (max-height:600px){
 .concept{padding-block:3px;font-size:8px}
 .location-hero .location-grid{height:max(140px,calc(100svh - 290px))}
 .location-hero .welcome h1{font-size:32px}
 .location-hero .location-info h2{font-size:25px}
 .location-hero .location-info p,.location-hero .location-index{display:none}
 .location-hero .location-link{font-size:9px}
 .location-hero .welcome .intro{font-size:10px;margin-top:9px}
}
/* Keep both mobile location labels centred left and clear of the bottom fade. */
@media(max-width:650px){
 .location-hero .location-card .location-info,
 .location-hero .location-card:last-child .location-info{
  top:50%;bottom:auto;left:6%;right:6%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
 }
 .location-hero .location-info p{text-shadow:0 1px 5px #0008}
 .location-hero .location-info h2{text-shadow:0 2px 10px #0006}
}
/* Mobile labels sit below again; the fade starts beneath the second label. */
@media(max-width:650px){
 .location-hero .location-card .location-info{top:auto;bottom:25px;transform:none;align-items:end}
 .location-hero .location-card:last-child .location-info{top:auto;bottom:52px;transform:none;align-items:end}
 .location-hero .location-grid:after{background:linear-gradient(180deg,rgba(250,248,243,0) 0%,rgba(250,248,243,0) 87%,rgba(250,248,243,.06) 89%,rgba(250,248,243,.22) 92%,rgba(250,248,243,.5) 95%,rgba(250,248,243,.82) 98%,var(--paper) 100%)}
 .location-hero .location-card:last-child .photo-coming{bottom:27px}
}

/* Compact mobile salon information with actions alongside the key details. */
@media(max-width:650px){
 .salon{padding-block:30px}
 .salon-heading{padding-bottom:18px;margin-bottom:22px}
 .salon-heading h2{font-size:29px}
 .salon-heading .eyebrow{font-size:8px;margin-bottom:10px}
 .salon-switch{margin-top:15px}
 .salon-switch button{padding:9px 16px;font-size:11px}
 .salon-story{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:14px;align-items:center}
 .salon-story>.eyebrow{display:none}
 .salon-story h3{grid-column:1;grid-row:1;font-size:28px;margin:0}
 .salon-story>.button{grid-column:2;grid-row:1;font-size:9px;padding:10px 11px;gap:8px;margin:0;white-space:nowrap}
 .salon-story>.button span{font-size:16px}
 .salon-story>p.salon-address{grid-column:1;grid-row:2;margin:0;padding-left:10px;font-size:12px}
 .salon-story>.salon-route{grid-column:2;grid-row:2;font-size:10px;margin:0;justify-self:end}
 .salon-story>.salon-route span{margin-left:5px}
 .salon-story>p:not(.salon-address):not(.eyebrow){grid-column:1/-1;margin:0;font-size:12px;line-height:1.65}
 .header .button.small{background:transparent;color:var(--ink);border:1px solid #b8a789;border-radius:25px;padding:8px 10px;font-size:9px}
}
/* Desktop salon actions mirror mobile; address and route follow the story. */
@media(min-width:651px){
 .salon-story{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:18px;align-items:center}
 .salon-story>.eyebrow{grid-column:1/-1;grid-row:1;margin:0}
 .salon-story h3{grid-column:1;grid-row:2;margin:0;font-size:clamp(28px,2.8vw,43px)}
 .salon-story>.button{grid-column:2;grid-row:2;margin:0;padding:12px 13px;gap:10px;font-size:10px;white-space:nowrap}
 .salon-story>.button span{font-size:17px}
 .salon-story>p:not(.eyebrow):not(.salon-address){grid-column:1/-1;margin:0}
 .salon-story>p:not(.eyebrow):not(.salon-address):nth-of-type(3){grid-row:3}
 .salon-story>p:not(.eyebrow):not(.salon-address):nth-of-type(4){grid-row:4}
 .salon-story>p:not(.eyebrow):not(.salon-address):nth-of-type(5){grid-row:5}
 .salon-story>p.salon-address{grid-column:1;grid-row:6;margin:8px 0 0;font-size:13px}
 .salon-story>.salon-route{grid-column:2;grid-row:6;margin:8px 0 0;justify-self:end;font-size:11px}
 .salon-story>.salon-route span{margin-left:10px}
}
/* Mobile address and route belong below the story, just as on desktop. */
@media(max-width:650px){
 .salon-story>p:not(.salon-address):not(.eyebrow):nth-of-type(3){grid-row:2}
 .salon-story>p:not(.salon-address):not(.eyebrow):nth-of-type(4){grid-row:3}
 .salon-story>p:not(.salon-address):not(.eyebrow):nth-of-type(5){grid-row:4}
 .salon-story>p.salon-address{grid-row:5;margin-top:6px}
 .salon-story>.salon-route{grid-row:5;margin-top:6px}
}

/* Unified action buttons across desktop and mobile. */
.button,.button.small,.header .button.small,
.salon-story>.button,.salon-story>.salon-route,
.salon-story .button,.salon-route{
 display:inline-flex;align-items:center;justify-content:space-between;gap:16px;
 min-height:44px;padding:11px 17px;margin:0;
 background:#403a34;color:#fffdf8;border:1px solid #403a34;
 border-radius:7px;font-family:'DM Sans',sans-serif;font-size:12px;
 font-weight:500;line-height:1.4;letter-spacing:.01em;text-decoration:none;
 box-shadow:0 2px 0 #403a340c;white-space:nowrap;
 transition:background .2s,border-color .2s,box-shadow .2s;
}
.button span,.button.small span,.salon-route span,
.salon-story>.button span,.salon-story>.salon-route span{
 display:inline-flex;align-items:center;justify-content:center;
 width:22px;height:22px;margin:0;border-radius:50%;
 background:#ffffff14;color:#edcf6d;font-size:17px;line-height:1;
}
.button:hover,.header .button.small:hover,.salon-route:hover,
.salon-story>.button:hover,.salon-story>.salon-route:hover{
 background:#65533f;border-color:#65533f;box-shadow:0 3px 8px #403a3418;
}
.button:focus-visible,.salon-route:focus-visible{outline:3px solid #c5a844;outline-offset:4px}
@media(max-width:650px){
 .header{min-height:92px}
 .button,.button.small,.header .button.small,
 .salon-story>.button,.salon-story>.salon-route{
  min-height:44px;padding:10px 12px;gap:9px;font-size:11px;
 }
 .salon-story h3{font-size:clamp(24px,6.5vw,28px)}
 .salon-story{column-gap:10px}
}
@media(prefers-reduced-motion:reduce){.button,.salon-route{transition:none}}
/* Restrained buttons: simple primary action and quieter route action. */
.button,.button.small,.header .button.small,.salon-story>.button,.salon-story .button{
 background:#403a34;color:#fff;border-color:#403a34;border-radius:3px;
 box-shadow:none;min-height:40px;padding:9px 14px;gap:12px;font-size:11px;font-weight:400;
}
.button span,.button.small span,.salon-story>.button span,
.salon-route span,.salon-story>.salon-route span{
 background:none;color:inherit;width:auto;height:auto;border-radius:0;font-size:16px;
}
.salon-route,.salon-story>.salon-route{
 background:transparent;color:#655e55;border:1px solid #c9c1b5;border-radius:3px;
 box-shadow:none;min-height:40px;padding:9px 14px;gap:12px;font-size:11px;font-weight:400;
}
.button:hover,.header .button.small:hover,.salon-story>.button:hover{
 background:#514a42;border-color:#514a42;box-shadow:none;
}
.salon-route:hover,.salon-story>.salon-route:hover{
 background:#e6dfd3;border-color:#b6ab9c;color:#403a34;box-shadow:none;
}
@media(max-width:650px){
 .button,.button.small,.header .button.small,.salon-story>.button,.salon-story>.salon-route{
  min-height:40px;padding:9px 12px;font-size:10px;gap:9px;
 }
}

/* Larger header identity with the salon's founding year. */
.header .brand-icon{width:90px;height:68px}
.header .brand-since{font-size:10px;letter-spacing:.09em;font-weight:400;color:var(--muted);margin-top:8px;line-height:1.2}
@media(max-width:650px){
 .header .brand-icon{width:58px;height:45px}
 .header .brand-since{font-size:8px;margin-top:5px;letter-spacing:.06em}
}
/* Align the header wordmark as a single text column beside the symbol. */
.header .brand{display:flex;align-items:center;gap:14px}
.header .brand-icon{width:104px;height:78px;object-fit:contain;flex-shrink:0}
.header .brand-wordmark{display:flex;flex-direction:column;align-items:flex-start;text-align:left;line-height:1;margin:0;padding:0}
.header .brand-wordmark>span{display:block;margin:0 0 6px;padding:0;font-size:10px;line-height:1.2;letter-spacing:.28em}
.header .brand-wordmark strong{display:block;margin:0;padding:0;font-size:32px;line-height:1;letter-spacing:-1.6px}
.header .brand-since{display:block;margin:7px 0 0;padding:0;font-size:10px;line-height:1.2;letter-spacing:.07em;color:var(--muted)}
@media(max-width:650px){
 .header .brand{gap:10px}
 .header .brand-icon{width:67px;height:51px}
 .header .brand-wordmark>span{font-size:7px;letter-spacing:.24em;margin-bottom:4px}
 .header .brand-wordmark strong{font-size:24px;letter-spacing:-1.1px}
 .header .brand-since{font-size:8px;margin-top:5px;letter-spacing:.04em}
}

/* One coherent header bar, with a clear mobile navigation row. */
.header-band{background:#eee9df;border-bottom:1px solid #dcd3c5}
.header{height:112px;min-height:0;gap:30px}
.header nav{align-self:center;gap:30px;align-items:center}
.header nav a{position:relative;padding:10px 0;font-size:12px;color:#655e55}
.header nav a:after{content:'';position:absolute;bottom:4px;left:0;right:0;height:1px;background:#80725e;transform:scaleX(0);transition:transform .2s}
.header nav a:hover:after,.header nav a:focus-visible:after{transform:scaleX(1)}
.header .button.small{flex-shrink:0}
@media(min-width:651px) and (max-width:999px){.header{gap:16px}.header nav{gap:15px}.header .brand-icon{width:80px;height:61px}.header .brand-wordmark strong{font-size:28px}.header .button.small{font-size:10px;padding:9px 11px}}
@media(max-width:650px){
 .header{height:auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 10px;padding-top:11px}
 .header .brand{grid-column:1;grid-row:1;padding-bottom:10px}
 .header .button.small{grid-column:2;grid-row:1;margin-bottom:10px;font-size:10px;padding:9px 11px}
 .header nav{grid-column:1/-1;grid-row:2;display:flex;justify-content:space-between;gap:12px;width:100%;border-top:1px solid #d9cfbf;padding:0}
 .header nav a{font-size:10px;padding:10px 0}
 .header nav a:after{bottom:6px}
}
@media(prefers-reduced-motion:reduce){.header nav a:after{transition:none}}
/* Blend the header into the curved stripe mask instead of a separate rectangle. */
.header-band{background:#fff;border-bottom:0}
.header{height:106px}
@media(max-width:650px){
 .header{height:auto}
 .header nav{border-top:0}
}

.trust-banner{background:#403a34;color:#faf8f3;text-align:center;font-size:11px;line-height:1.5;letter-spacing:.06em;padding:7px 16px}
@media(max-width:650px){
 .trust-banner{font-size:10px;padding:6px 12px}
 .location-hero .location-grid{height:clamp(220px,calc(100svh - 365px),490px)}
}
@media(max-width:650px) and (max-height:600px){
 .location-hero .location-grid{height:max(140px,calc(100svh - 320px))}
}
.trust-banner{background:#eee8dc;color:#655e55}
/* Echo the header strands, with a gently off-centre bow. */
.footer-band{background:#fff}
.footer-strands{width:100%;height:105px;overflow:hidden;pointer-events:none;background:#fff}
.footer-strands svg{display:block;width:100%;height:100%}
.footer-strands path{fill:none;stroke-width:14;stroke-linecap:round}
.footer-strands .strand-mask{fill:#f1ece4;stroke:none}
.footer{position:relative;padding-top:20px}
@media(max-width:650px){
 .footer-strands{height:62px}
 .footer{padding-top:18px}
}
/* Swipeable salon photos; mobile gallery sits immediately below the switch. */
.gallery-track{display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.gallery-track::-webkit-scrollbar{display:none}
.gallery-track>img{flex:0 0 100%;width:100%;min-width:0;height:100%;object-fit:cover;scroll-snap-align:start;scroll-snap-stop:always}
.gallery-track:focus-visible{outline:3px solid #b58b00;outline-offset:-3px}
.gallery-main figcaption{pointer-events:none}
@media(max-width:750px){
 .salon-gallery{grid-row:1;min-width:0}
 .salon-story{grid-row:2}
 .salon-panel .salon-grid{gap:20px}
 .salon-gallery{width:calc(100% / .9);margin-left:calc(-100% / 18)}
 .gallery-main{height:auto;aspect-ratio:4/3;border-radius:0}
 .gallery-thumbnails{justify-content:center;gap:0;margin-top:2px}
 .gallery-thumb{display:grid;place-items:center;width:44px;height:44px;border:0;opacity:1;overflow:visible}
 .gallery-thumb img{display:none}
 .gallery-thumb::after{content:'';width:8px;height:8px;border-radius:50%;background:#b4aa9b}
 .gallery-thumb[aria-pressed="true"]{border:0}
 .gallery-thumb[aria-pressed="true"]::after{background:#403a34;box-shadow:0 0 0 3px #403a3415}
}

/* Compact salon layout with one text column and a grouped action row. */
.salon{padding-block:44px}
.salon-heading{gap:24px;padding-bottom:20px;margin-bottom:24px;align-items:center}
.salon-heading .eyebrow{margin-bottom:9px}
.salon-heading h2{font-size:clamp(30px,3vw,42px)}
.salon-switch{margin:0;flex-shrink:0}
.salon-switch button{min-height:44px;padding:9px 18px}
.salon-panel .salon-grid{grid-template-columns:1fr 1.15fr;gap:40px;align-items:center}
.salon-story{display:flex;flex-direction:column;align-items:stretch;gap:16px;min-width:0}
.salon-story .salon-identity h3{font-size:30px;margin:0 0 9px}
.salon-story .salon-address{border:0;padding:0;margin:0;font-size:12px;line-height:1.65;color:var(--muted)}
.salon-story>p.salon-description,.salon-story>p.salon-extra{margin:0;max-width:440px;line-height:1.7;font-size:13px}
.salon-story>p.salon-extra{font-size:12px}
.salon-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:2px}
.salon-actions .button,.salon-actions .salon-route{margin:0;min-height:44px;padding:10px 14px;font-size:11px}
.salon-gallery{min-width:0}
.gallery-main{height:320px}
.gallery-thumbnails{margin-top:8px;gap:8px}
.gallery-thumb{width:72px;height:48px}
@media(max-width:750px){
 .salon{padding-block:28px}
 .salon-heading{display:block;border:0;padding-bottom:0;margin-bottom:16px}
 .salon-heading h2{font-size:29px}
 .salon-switch{display:flex;margin-top:16px;width:100%}
 .salon-switch button{flex:1;min-width:0;font-size:12px}
 .salon-panel .salon-grid{grid-template-columns:minmax(0,1fr);gap:8px}
 .salon-gallery{grid-column:1;grid-row:1}
 .gallery-main{height:auto;aspect-ratio:3/2}
 .gallery-thumbnails{margin:0;gap:0}
 .gallery-thumb{width:44px;height:36px}
 .salon-story{grid-column:1;grid-row:2;gap:12px}
 .salon-identity{display:flex;justify-content:space-between;gap:16px;align-items:center}
 .salon-story .salon-identity h3{font-size:25px;margin:0}
 .salon-story .salon-address{text-align:right;font-size:11px;flex-shrink:0}
 .salon-story>p.salon-description{font-size:12px}
 .salon-story>p.salon-extra{font-size:11px}
 .salon-actions{margin-top:2px;gap:8px}
 .salon-actions .button,.salon-actions .salon-route{justify-content:center;flex:1;gap:10px;padding:10px;font-size:11px}
}
@media(max-width:360px){.salon-story .salon-identity h3{font-size:22px}.salon-story .salon-address{font-size:10px}}

/* Larger desktop photographs and a full-image modal. */
@media(min-width:751px){
 .salon-panel .salon-grid{grid-template-columns:.85fr 1.3fr;gap:36px}
 .gallery-main{height:clamp(360px,32vw,460px)}
}
.gallery-track{cursor:zoom-in}
.gallery-zoom{position:absolute;top:12px;right:12px;border:1px solid #ffffff80;border-radius:3px;background:#faf8f3ed;color:#37332e;min-height:44px;padding:10px 14px;font:inherit;font-size:11px;cursor:pointer}
.gallery-zoom:focus-visible{outline:3px solid #b58b00;outline-offset:3px}
body.viewer-open{overflow:hidden}
.photo-viewer{border:0;border-radius:6px;background:#24221f;color:#fff;padding:16px;width:min(1200px,96vw);max-width:96vw;max-height:94dvh;overflow:auto}
.photo-viewer::backdrop{background:#000c}
.photo-viewer button{font:inherit;font-size:13px;min-height:44px;padding:10px 16px;border:1px solid #ffffff60;border-radius:3px;background:transparent;color:#fff;cursor:pointer}
.photo-viewer button:focus-visible{outline:3px solid #e4b900;outline-offset:3px}
.viewer-toolbar,.viewer-controls{display:flex;align-items:center;justify-content:space-between;gap:12px}
.viewer-toolbar p{margin:0;font-size:13px}
.viewer-image{display:block;width:100%;height:min(70dvh,800px);object-fit:contain;margin:12px 0}
.viewer-controls span{font-size:11px;color:#d4cec4;text-align:center}
@media(max-width:650px){.photo-viewer{padding:10px}.viewer-controls{flex-wrap:wrap}.viewer-controls span{order:3;width:100%}.viewer-image{height:60dvh}}

/* Photo-first viewer: direct touch interaction, no navigation buttons. */
.photo-viewer{padding:0;background:#171614;border-radius:4px;overflow:hidden;width:min(1280px,96vw)}
.photo-viewer .viewer-close{position:absolute;z-index:2;right:12px;top:12px;border:0;border-radius:50%;width:44px;height:44px;padding:0;background:#24221fb3;font-size:29px;line-height:1}
.viewer-track{display:flex;width:100%;height:82dvh;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.viewer-track::-webkit-scrollbar{display:none}
.viewer-track img{display:block;flex:0 0 100%;width:100%;min-width:0;height:100%;object-fit:contain;scroll-snap-align:start;scroll-snap-stop:always}
.viewer-count{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);margin:0;background:#24221fb3;border-radius:20px;padding:4px 12px;font-size:11px;pointer-events:none;color:white}
@media(max-width:750px){
 .photo-viewer{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0}
 .viewer-track{height:100%}
 .photo-viewer .viewer-close{top:max(12px,env(safe-area-inset-top));right:12px}
 .viewer-count{bottom:max(20px,env(safe-area-inset-bottom))}
 .gallery-thumbnails{pointer-events:none}
 .gallery-thumb{pointer-events:auto}
}

/* Treatment options without prices. */
.treatment-list{list-style:none;margin:0;padding:0 0 5px}.treatment-list li{border-bottom:1px solid var(--line);padding:12px 0;font-size:13px;line-height:1.5}.price-grid + .text-link{display:inline-block;margin-top:30px}

/* Always-visible treatment categories. */
.treatment-overview .price-group{padding-top:22px}.treatment-overview h3{margin:0 0 10px;font-weight:500;line-height:1.15}.treatment-overview p{margin:0}

/* Personal introduction between the salon locations and treatments. */
.about-renate{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:start;border-bottom:1px solid var(--line)}
.about-renate-heading h2{font-size:clamp(36px,3.8vw,54px)}
.about-renate-story p{font-size:14px;line-height:1.85;color:var(--muted);margin:0 0 20px;max-width:460px}
.about-renate-story .about-renate-lead{font-size:18px;line-height:1.65;color:var(--ink)}
.about-renate-signature{display:block;margin-top:28px;font-family:Georgia,serif;font-style:italic;font-size:25px;color:#80694d}
@media(max-width:650px){.about-renate{grid-template-columns:1fr;gap:30px}.about-renate-story p{max-width:none}.about-renate-story .about-renate-lead{font-size:17px}}
/* Renate's photo keeps its original portrait composition. */
.renate-photo{margin-top:32px;max-width:380px;overflow:hidden;border-radius:4px}.renate-photo img{display:block;width:100%;height:auto}.about-renate-story{padding-top:52px}@media(max-width:650px){.renate-photo{max-width:100%;margin-top:26px}.about-renate-story{padding-top:0}}

/* Show more of Brinkstraat's interior and keep location labels readable. */
.location-hero .location-card[data-salon="brinkstraat"] .location-cover{object-position:50% 8%}
#panel-brinkstraat .gallery-main>img,#panel-brinkstraat .gallery-track>img{object-position:50% 8%}
.location-hero .location-card:after{inset:0;z-index:0;background:linear-gradient(180deg,rgba(25,25,25,.12) 0%,rgba(25,25,25,0) 30%,rgba(35,35,35,.3) 55%,rgba(25,25,25,.78) 100%);pointer-events:none}
.location-hero .location-card .location-info{color:#fff}
/* Give Brinkstraat more visible height and anchor the photo at the top. */
.location-hero .location-card[data-salon="brinkstraat"] .location-cover{object-position:50% 0%}
@media(max-width:650px){
 .location-hero .location-grid{height:clamp(300px,calc(100svh - 300px),570px);grid-template-rows:1.15fr 1fr}
 .location-hero .location-grid:after{background:none}
 .location-hero .location-card:before{content:'';position:absolute;inset:auto 0 0;height:28px;z-index:1;background:linear-gradient(180deg,transparent,var(--paper));pointer-events:none}
 .location-hero .location-card .location-info,.location-hero .location-card:last-child .location-info{bottom:35px}
}
/* Keep photo bottoms dark, without a white fade. */
.location-hero .location-card:before{content:none;background:none}.location-hero .location-grid:after{content:none;background:none}

/* Keep the ceiling lamps visible below the decorative top edge. */
.location-hero .location-card[data-salon="brinkstraat"] .location-cover{top:55px;height:calc(100% - 55px);object-position:center top}
@media(max-width:650px){
 .location-hero .location-grid{height:auto;grid-template-rows:clamp(290px,44svh,380px) clamp(220px,32svh,300px)}
 .location-hero .location-card[data-salon="brinkstraat"] .location-cover{top:30px;height:calc(100% - 30px)}
}
/* Desktop stays unchanged; mobile shows the full 4:3 Brinkstraat photo. */
@media(min-width:651px){
 .location-hero .location-card[data-salon="brinkstraat"] .location-cover{top:0;height:100%;object-position:50% 8%}
}
@media(max-width:650px){
 .location-hero .location-grid{height:auto;grid-template-rows:calc(75vw + 40px) clamp(220px,32svh,300px)}
 .location-hero .location-card[data-salon="brinkstraat"] .location-cover{top:40px;height:calc(100% - 40px);object-fit:contain;object-position:center top}
}
/* Compact mobile cards, with Brinkstraat cropped toward the ceiling. */
@media(max-width:650px){
 .location-hero .location-grid{height:clamp(300px,calc(100svh - 300px),570px);grid-template-rows:1.15fr 1fr}
 .location-hero .location-card[data-salon="brinkstraat"] .location-cover{top:30px;height:calc(100% - 30px);object-fit:cover;object-position:center top}
}
/* Underlined phone numbers make the call action clear. */
.location-contact a[href^="tel:"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:#a7957b;transition:color .2s,text-decoration-color .2s}
.location-contact a[href^="tel:"]:hover{color:#80643d;text-decoration-color:currentColor}
.location-contact a[href^="tel:"]:focus-visible{outline:2px solid #b58b00;outline-offset:5px}
/* Historical clippings remain fully visible and can be opened for reading. */
.about-archive{grid-column:1/-1;padding-top:40px;border-top:1px solid var(--line);margin-top:36px}.about-clippings{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;max-width:760px}.about-clippings figure{background:#eee9df;padding:16px;border-radius:4px}.about-clippings a{display:block;cursor:zoom-in}.about-clippings img{display:block;width:100%;height:360px;object-fit:contain;object-position:top}.about-clippings figcaption{font-size:12px;margin-top:14px;display:flex;justify-content:space-between}.archive-note{font-size:12px;color:var(--muted);margin-top:18px}@media(max-width:650px){.about-archive{margin-top:4px;padding-top:28px}.about-clippings{gap:14px}.about-clippings figure{padding:10px}.about-clippings img{height:240px}.about-clippings figcaption{font-size:10px}}

/* Newspaper clippings are the main images beside the personal story. */
.about-renate-heading .about-archive{margin-top:30px;padding-top:0;border-top:0}.about-renate-heading .about-archive>.eyebrow{display:none}.about-renate-heading .about-clippings{gap:16px}.about-renate-heading .about-clippings img{height:340px}.about-renate-heading .about-clippings figure{padding:10px}@media(max-width:650px){.about-renate-heading .about-clippings img{height:260px}}

/* Full-width newspaper images without cards or inset frames. */
.about-renate-heading{display:contents}
.about-renate-heading>h2,.about-renate-heading>.eyebrow{grid-column:1}
.about-renate-story{grid-column:2;grid-row:1 / span 3}
.about-renate-heading .about-archive{grid-column:1/-1;margin-top:30px;width:100%}
.about-renate-heading .about-clippings{max-width:none;width:100%;grid-template-columns:1fr 1fr;gap:24px}
.about-renate-heading .about-clippings figure{padding:0;background:none;border-radius:0}
.about-renate-heading .about-clippings img{width:100%;height:auto;object-fit:contain}
@media(max-width:650px){.about-renate-heading>h2,.about-renate-heading>.eyebrow{grid-column:1}.about-renate-story{grid-column:1;grid-row:auto}.about-renate-heading .about-archive{grid-row:auto;margin-top:0}.about-renate-heading .about-clippings{gap:12px}}
/* Two equally tall clippings form one uninterrupted visual block. */
.about-renate{row-gap:0}
.about-renate-heading .about-clippings{gap:0;align-items:stretch;grid-template-columns:0.7173fr 1fr}
.about-renate-heading .about-clippings figure{height:100%;min-width:0}
.about-renate-heading .about-clippings a{display:block;height:100%}
.about-renate-heading .about-clippings img{width:100%;height:100%;object-fit:fill}
@media(max-width:650px){.about-renate{row-gap:24px}.about-renate-heading .about-clippings{gap:0}}
/* Fit the complete mobile introduction inside the smallest visible viewport. */
@media(max-width:650px){
 .trust-banner{padding:4px 12px;font-size:9px;line-height:1.4}
 .header{padding-top:8px}
 .header .brand{padding-bottom:6px;gap:8px}
 .header .brand-icon{width:57px;height:44px}
 .header .brand-wordmark strong{font-size:22px}
 .header .brand-wordmark>span{font-size:7px;margin-bottom:3px}
 .header .button.small{margin-bottom:6px;padding:8px 10px;min-height:38px}
 .header nav a{padding:7px 0}
 .location-hero{height:calc(100svh - var(--mobile-top-height,120px) - 8px);min-height:0;padding:0;gap:0}
 .location-hero .location-grid{flex:1 1 0;height:auto;min-height:160px;grid-template-rows:1.15fr 1fr}
 .location-hero>.hair-strands{height:50px}
 .location-hero .welcome{flex:0 0 auto;width:90%;padding:10px 0 12px;margin:0 auto}
 .location-hero .welcome .eyebrow{margin-bottom:7px;font-size:7px;line-height:1.4}
 .location-hero .welcome h1{font-size:clamp(30px,8.5vw,39px);line-height:1.06}
 .location-hero .welcome .intro{font-size:11px;line-height:1.5;margin:8px auto 0;max-width:310px}
 .location-hero .location-card .location-info,.location-hero .location-card:last-child .location-info{bottom:20px}
 .location-hero .location-info h2{font-size:clamp(24px,7.5vw,31px)}
 .location-hero .location-link{font-size:9px}
}
@media(max-width:650px) and (max-height:600px){
 .trust-banner{padding-block:3px}
 .header{padding-top:5px}
 .header .brand-icon{height:37px;width:49px}
 .header .brand-wordmark strong{font-size:20px}
 .header nav a{padding-block:5px}
 .location-hero .welcome{padding-block:7px}
 .location-hero .welcome h1{font-size:29px}
 .location-hero .welcome .intro{margin-top:6px;font-size:10px;line-height:1.4}
 .location-hero .welcome .eyebrow{margin-bottom:5px}
 .location-hero .location-card .location-info,.location-hero .location-card:last-child .location-info{bottom:13px}
}
/* Restore the original mobile strands and separate the salons subtly. */
@media(max-width:650px){.location-hero>.hair-strands{height:62px}.location-hero .location-grid{row-gap:0;background:var(--paper)}}

/* Desktop: personal story on the left, historical photos on the right. */
@media(min-width:651px){
 .about-renate{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:6%;row-gap:0;align-items:start}
 .about-renate-heading>.eyebrow{grid-column:1;grid-row:1;margin-bottom:22px}
 .about-renate-heading>h2{grid-column:1;grid-row:2;font-size:clamp(32px,3.2vw,48px);margin-bottom:26px}
 .about-renate-story{grid-column:1;grid-row:3;padding-top:0}
 .about-renate-story p{max-width:none}
 .about-renate-heading .about-archive{grid-column:2;grid-row:1 / span 3;margin-top:0;align-self:start}
 .about-renate-heading .about-clippings{width:100%;gap:0}
}
/* Decorative architecture belongs to the desktop layout. */
.salon-building-illustration{display:none}

/* Contact: clearly separate the two salons with the signature gold. */
.contact-details .location-contact>.eyebrow{font-weight:800}
.contact-details .location-contact+.location-contact{border-top:3px solid #e4b900;padding-top:24px;margin-top:24px}
.contact-details .location-contact:has(+.location-contact)>.detail:last-child{border-bottom:0}

/* Close the final contact block with the signature brown. */
.contact-details .location-contact:last-child>.detail:last-child{border-bottom:0}
.contact-details .location-contact:last-child{border-bottom:3px solid #80694d;padding-bottom:24px}

/* Desktop preview: show the salon photos without the pale centre fade. */
@media(min-width:1000px){
 .location-hero:after{content:none;background:none}
 .location-hero .welcome,.location-hero .welcome .intro{color:#fff;text-shadow:0 2px 10px #000b}
 .location-hero .welcome .line{background:#fff}
}

/* Dark translucent backing keeps the desktop introduction readable. */
@media(min-width:1000px){
 .location-hero .welcome{width:min(390px,34%);padding:28px 30px;background:rgba(30,27,23,.72);border:1px solid rgba(255,255,255,.16);border-radius:6px;box-shadow:0 8px 30px #0002}
 .location-hero .welcome,.location-hero .welcome .intro{color:#fff;text-shadow:none}
 .location-hero .welcome .intro{margin-inline:auto}
}

/* Full-height desktop overlay, with the introduction centred within it. */
@media(min-width:1000px){
 .location-hero .welcome{top:0;bottom:0;height:100%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:0;border:0;box-shadow:none;margin-block:0}
}

/* Lighter frosted overlay; keep the introduction itself sharp. */
@media(min-width:1000px){
 .location-hero .welcome{background:rgba(30,27,23,.26);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:0}
}

/* Optically align the n with the H above it at every logo size. */
.brand .brand-wordmark>strong{text-indent:-.055em}

/* The full archive photos stay uncropped below the personal story. */
.about-photo-album{grid-column:1/-1;grid-row:4;margin-top:40px;min-width:0}
.about-photo-album>.eyebrow{margin-bottom:18px}
.about-photo-grid{columns:3;column-gap:18px}
.about-photo-grid figure{break-inside:avoid;margin:0 0 18px}
.about-photo-grid a{display:block;cursor:zoom-in}
.about-photo-grid img{display:block;width:100%;height:auto;border-radius:3px}
@media(max-width:650px){.about-photo-album{grid-column:1;grid-row:auto;margin-top:28px}.about-photo-grid{columns:2;column-gap:12px}.about-photo-grid figure{margin-bottom:12px}}

/* Personal story: swipeable memories on the left, text on the right. */
.about-renate.about-renate-carousel{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:48px;align-items:start;max-width:1480px;width:calc(100% - 96px)}
.about-memories,.about-copy{min-width:0}.about-copy>h2{font-size:clamp(32px,3.2vw,48px);margin-bottom:26px}.about-copy .about-renate-story{padding:0}.about-copy .about-renate-story p{max-width:none}
.about-memories>.eyebrow{margin-bottom:22px}.memories-view{position:relative}.memories-track{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab}.memories-track::-webkit-scrollbar{display:none}.memories-track figure{flex:0 0 88%;min-width:0;scroll-snap-align:start;margin:0}.memories-track a{display:flex;height:clamp(320px,34vw,540px);align-items:center;justify-content:center;background:#eee9df}.memories-track img{display:block;width:100%;height:100%;object-fit:contain}.memories-track:focus-visible{outline:2px solid #b58b00;outline-offset:4px}.memories-track.dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}.memories-controls{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 10px;pointer-events:none}.memories-controls button{pointer-events:auto;display:grid;place-items:center;width:32px;height:32px;padding:6px;border:0;border-radius:50%;background:#fffffff0;color:#292929;box-shadow:0 2px 8px #0003;cursor:pointer}.memories-controls button:disabled{opacity:0;pointer-events:none}.memories-controls svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}.memories-controls button:focus-visible{outline:2px solid #b58b00;outline-offset:3px}
@media(max-width:750px){.about-renate.about-renate-carousel{width:90%;grid-template-columns:minmax(0,1fr);gap:28px}.about-copy{grid-row:1}.about-memories{grid-row:2}.memories-track a{height:clamp(260px,68vw,440px)}.memories-track figure{flex-basis:92%}}

/* Show two memories side by side, and enlarge within the page. */
.memories-track figure{flex-basis:calc((100% - 16px)/2)}
.memories-track .memories-photo{display:flex;width:100%;height:clamp(300px,34vw,540px);padding:0;border:0;border-radius:0;align-items:center;justify-content:center;background:#eee9df;cursor:zoom-in}
@media(max-width:750px){.memories-track figure{flex-basis:92%}.memories-track .memories-photo{height:clamp(260px,68vw,440px)}}

/* Mirror the full-width salon strip: the story travels at the right edge. */
@media(min-width:751px){
 .about-renate.about-renate-carousel{display:block;width:100%;max-width:none;overflow:hidden;border-bottom:0}
 .about-renate-carousel .about-fixed-label{width:calc(100% - 96px);max-width:1480px;margin:0 auto 26px;justify-content:flex-end}
 .about-renate-carousel .about-memories{width:100%;max-width:none}
 .about-renate-carousel .about-memories>.eyebrow{width:calc(100% - 96px);max-width:1480px;margin:0 auto 18px}
 .about-renate-carousel .memories-track{padding-inline:max(48px,calc((100vw - 1480px)/2));scroll-padding-inline:max(48px,calc((100vw - 1480px)/2));align-items:start}
 .about-renate-carousel .memories-track>.about-copy{direction:ltr;flex:0 0 clamp(320px,30vw,480px);width:clamp(320px,30vw,480px);padding-left:30px;scroll-snap-align:start}
 .about-renate-carousel .memories-track figure{direction:ltr;flex:0 0 auto;width:auto}
 .about-renate-carousel .memories-track .memories-photo{width:auto;height:clamp(370px,34vw,570px);background:transparent}
 .about-renate-carousel .memories-track img{width:auto;height:100%;max-width:none;object-fit:contain}
 .about-renate-carousel .memories-controls{flex-direction:row-reverse;padding:0 14px}
 .about-renate-carousel .memories-controls svg{transform:rotate(180deg)}
}

/* Centre the story vertically beside the opening photograph. */
@media(min-width:751px){.about-renate-carousel .memories-track{align-items:center}.about-renate-carousel .memories-track>.about-copy{align-self:center}}

/* Keep the mirrored opening position inside the same gutters as block one. */
@media(min-width:751px){
 .about-renate-carousel{--memories-gutter:max(48px,calc((100vw - 1480px)/2))}
 .about-renate-carousel .memories-track>.about-copy{scroll-margin-right:var(--memories-gutter);scroll-snap-align:start}
}

/* A real first slide reserves the right gutter at the initial snap position. */
@media(min-width:751px){
 .about-renate-carousel .memories-track{padding-inline:0;scroll-padding-inline:0}
 .memories-start-space{flex:0 0 calc(var(--memories-gutter) - 16px);height:1px;scroll-snap-align:start}
 .about-renate-carousel .memories-track>.about-copy{scroll-snap-align:none;scroll-margin-right:0}
}

/* Visible gallery controls from the first view, with a quieter disabled state. */
.salon .salon-gallery .gallery-navigation,.about-renate-carousel .memories-controls{z-index:5}
.salon .salon-gallery .gallery-navigation button,.about-renate-carousel .memories-controls button{width:48px;height:48px;min-height:48px;flex-shrink:0;border:2px solid #403a34;background:#fff;color:#292929;box-shadow:0 3px 12px #0005;opacity:1}
.salon .salon-gallery .gallery-navigation button:disabled,.about-renate-carousel .memories-controls button:disabled{opacity:0;visibility:hidden;pointer-events:none}
.salon .salon-gallery .gallery-navigation button::before{width:11px;height:11px;border-top-width:3px;border-right-width:3px}
.about-renate-carousel .memories-controls svg{width:25px;height:25px;stroke-width:2.5}
.salon .salon-gallery .gallery-navigation button:hover,.about-renate-carousel .memories-controls button:hover{background:#f4e8b5}
@media(max-width:750px){.salon .salon-gallery .gallery-navigation button,.about-renate-carousel .memories-controls button{width:44px;height:44px;min-height:44px}}

/* Both strips use the same drag cursor. */
.about-renate-carousel .memories-track .memories-photo{cursor:grab}
.about-renate-carousel .memories-track.dragging .memories-photo{cursor:grabbing}

/* Mobile mirrors the salon gallery, between the heading and the story. */
@media(max-width:750px){
 .about-copy>.about-memories{margin:24px 0}
 .about-renate-carousel .memories-track{gap:0}
 .about-renate-carousel .memories-track figure{flex:0 0 100%;width:100%}
 .about-renate-carousel .memories-track .memories-photo{height:auto;aspect-ratio:3/2;width:100%}
 .about-renate-carousel .memories-track img{width:100%;height:100%;object-fit:contain}
 .about-renate-carousel .memories-controls{display:none}
 .memories-pagination{display:flex;justify-content:center;flex-wrap:wrap;gap:0}
 .memories-pagination button{display:grid;place-items:center;width:44px;height:36px;padding:0;border:0;background:transparent;cursor:pointer}
 .memories-pagination button::after{content:'';width:8px;height:8px;border-radius:50%;background:#b4aa9b}
 .memories-pagination button[aria-pressed="true"]::after{background:#403a34;box-shadow:0 0 0 3px #403a3415}
 .memories-pagination button:focus-visible{outline:2px solid #b58b00;outline-offset:-4px}
}

/* Mobile memories extend to both screen edges. */
@media(max-width:750px){
 .about-copy>.about-memories{width:100vw;max-width:none;position:relative;left:50%;transform:translateX(-50%)}
}

/* Expanded footer with a personal introduction and location details. */
.footer.footer-expanded{display:grid;grid-template-columns:1fr 1.55fr;align-items:start;gap:40px 8%;padding-block:32px 24px;text-align:left}
.footer-expanded .footer-intro{max-width:340px}
.footer-expanded p{font-size:13px;line-height:1.8;color:var(--muted);margin:14px 0}
.footer-expanded .footer-tagline{font-family:'Manrope',sans-serif;font-size:29px;letter-spacing:-.04em;line-height:1.25;color:var(--ink);margin:25px 0 14px}
.footer-action{display:inline-block;font-size:12px;border-bottom:1px solid #bba77c;padding-bottom:4px}
.footer-intro .footer-action{margin-top:10px}
.footer-locations{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.footer-expanded .eyebrow{font-size:9px;letter-spacing:.11em;margin:0 0 15px;color:#80694d}
.footer-location{border-top:1px solid var(--line);padding-top:22px;min-width:0}
.footer-location h2{font-size:27px;letter-spacing:-.045em;margin-bottom:20px}
.footer-location address{font-style:normal;font-size:13px;line-height:1.8;color:var(--muted)}
.footer-location .footer-phone{display:block;font-size:14px;margin-top:10px}
.footer-location h3{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;letter-spacing:.03em;margin-top:26px}
.footer-location h3+p{margin:8px 0 18px}
.footer-navigation{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:16px 36px;padding-block:20px;border-block:1px solid var(--line);font-size:12px}
.footer-bottom{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 26px;font-size:11px;color:var(--muted);margin-top:-20px}
.footer-bottom span{margin-right:auto}
.footer-expanded a:hover{color:#80643d}
@media(max-width:750px){.footer.footer-expanded{grid-template-columns:1fr;gap:32px;padding-block:24px}.footer-expanded .footer-intro{max-width:420px}.footer-locations{gap:24px}.footer-location h2{font-size:24px}.footer-expanded .eyebrow{font-size:8px;letter-spacing:.07em}.footer-navigation{gap:14px 24px}.footer-bottom{margin-top:-12px}}
@media(max-width:380px){.footer-locations{grid-template-columns:1fr;gap:30px}.footer-bottom span{width:100%}}
.salon-page-link{border-bottom:1px solid #a8997e;padding-bottom:3px}.salon-page-link:hover{color:#80643d}

/* Compact footer with navigation alongside the two locations. */
.footer.footer-expanded{grid-template-columns:minmax(220px,1.15fr) minmax(380px,1.65fr) minmax(145px,.65fr);gap:40px 5%;padding-top:32px}
.footer-expanded .footer-intro{max-width:300px}
.footer-expanded .footer-tagline{font-size:26px;margin-top:22px}
.footer-expanded .footer-locations{gap:30px}
.footer-expanded .footer-location{border:0;padding-top:0}
.footer-expanded .footer-location h2,.footer-expanded .footer-navigation h2{font-size:23px;line-height:1.2;letter-spacing:-.04em;margin:0 0 23px}
.footer-expanded .footer-navigation{grid-column:auto;display:flex;flex-direction:column;align-items:flex-start;gap:15px;border:0;padding:0;font-size:13px}
.footer-expanded .footer-navigation h2{margin-bottom:8px}
.footer-expanded .footer-bottom{margin-top:0;padding-top:21px;border-top:1px solid var(--line)}
@media(min-width:751px) and (max-width:1050px){.footer.footer-expanded{grid-template-columns:1fr 1.6fr;gap:36px 6%}.footer-expanded .footer-navigation{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:15px 26px;border-top:1px solid var(--line);padding-top:22px}.footer-expanded .footer-navigation h2{margin:0 10px 0 0;font-size:20px}}
@media(max-width:750px){.footer.footer-expanded{grid-template-columns:1fr;gap:32px}.footer-expanded .footer-intro{max-width:420px}.footer-expanded .footer-locations{gap:24px}.footer-expanded .footer-navigation{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:13px 24px;border-top:1px solid var(--line);padding-top:24px}.footer-expanded .footer-navigation h2{grid-column:1/-1;margin:0 0 8px}.footer-expanded .footer-bottom{gap:12px 20px}.footer-expanded .footer-intro p{display:block}}

/* Google review summary, styled as part of the salon's own USP band. */
.ribbon-reviewed{padding:20px 0}
.ribbon-reviewed>.wrap{gap:30px;align-items:center}
.usp-points{display:flex;align-items:center;justify-content:space-between;gap:26px;flex:1;font-size:12px}
.review-usp{display:flex;align-items:center;gap:14px;padding:0 0 0 30px;border-left:1px solid #b1a18a80;flex-shrink:0;color:var(--ink);text-align:left}
.review-usp-score{font-family:'Manrope',sans-serif;font-size:32px;line-height:1;letter-spacing:-.06em;font-weight:500}
.review-usp-scale{font-size:14px;letter-spacing:0;margin-left:3px;color:var(--muted)}
.review-usp-detail{display:flex;flex-direction:column;gap:3px;font-size:10px;line-height:1.5}
.review-usp-stars{font-size:17px;letter-spacing:2px;color:#80643d;line-height:1}
.review-usp-last{background:linear-gradient(90deg,#80643d 60%,#b9b09e 60%);background-clip:text;-webkit-background-clip:text;color:transparent}
.review-usp-arrow{font-size:19px;margin-left:5px;transition:transform .2s}
.review-usp:hover .review-usp-arrow{transform:translate(2px,-2px)}
.review-usp:hover .review-usp-detail>span:last-child{text-decoration:underline;text-underline-offset:3px}
@media(max-width:950px){.ribbon-reviewed>.wrap{flex-direction:column;gap:18px}.usp-points{width:100%;justify-content:center;gap:22px}.review-usp{border-left:0;border-top:1px solid #b1a18a80;padding:16px 12px 0}.ribbon-reviewed .usp-points i{display:block}}
@media(max-width:450px){.usp-points{font-size:10px;gap:12px}.ribbon-reviewed .usp-points i{font-size:14px}.review-usp-score{font-size:29px}.ribbon-location .usp-points{flex-wrap:wrap}.review-usp{gap:12px}}

/* A quiet, compact review mention within the USP strip. */
.review-usp{gap:10px;padding-left:24px}.review-usp-label{font-size:12px;white-space:nowrap}.review-usp-stars{font-size:15px;letter-spacing:1px}.review-usp:hover .review-usp-label{text-decoration:underline;text-underline-offset:3px}@media(max-width:950px){.review-usp{padding:12px 0 0;gap:10px}.ribbon-reviewed>.wrap{gap:12px}}

.ribbon-reviewed .review-usp{border:0;padding:0}.ribbon-reviewed .review-usp-separator{display:block;flex-shrink:0;font-size:20px;font-style:normal;color:#8b6e3f}@media(max-width:950px){.ribbon-reviewed .review-usp-separator{display:none}}

/* Treat the review as the fourth USP, using the same row and baseline. */
.ribbon-reviewed>.wrap{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:20px;font-size:12px}.ribbon-reviewed .review-usp{display:inline-flex;align-items:center;gap:8px;border:0;padding:0;flex:none;line-height:1.65}.ribbon-reviewed .review-usp-label{font-size:inherit}.ribbon-reviewed .review-usp-stars{font-size:13px;line-height:1;letter-spacing:0}.ribbon-reviewed>.wrap>i,.ribbon-reviewed .review-usp-separator{display:block;font-size:20px;line-height:1;color:#8b6e3f;flex:none}.ribbon-reviewed>.wrap>span{white-space:nowrap}@media(max-width:750px){.ribbon-reviewed>.wrap{display:grid;grid-template-columns:1fr auto 1fr;gap:12px 14px;text-align:center;font-size:11px}.ribbon-reviewed>.wrap>span,.ribbon-reviewed .review-usp{justify-self:center}.ribbon-reviewed>.wrap>i:nth-of-type(2){display:none}.ribbon-reviewed>.wrap>i{font-size:16px}.ribbon-reviewed .review-usp{gap:6px}.ribbon-reviewed .review-usp-stars{font-size:11px}}

/* Shared navigation: locations, treatments and the salon story. */
.header .main-navigation{align-items:center}
.location-menu{position:relative}
.location-menu summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;padding-block:12px}
.location-menu summary::-webkit-details-marker{display:none}
.location-menu summary:focus-visible{outline:3px solid #8a6b30;outline-offset:4px}
.location-menu summary>span{font-size:15px;line-height:1;transition:transform .2s}
.location-menu[open] summary>span{transform:rotate(180deg)}
.location-menu-links{position:absolute;top:100%;left:-20px;width:245px;padding:8px;background:var(--paper);border:1px solid var(--line);box-shadow:0 12px 28px #37332e12;border-radius:3px;z-index:20}
.header .location-menu-links a{display:block;padding:12px;font-size:14px;border-radius:2px}
.header .location-menu-links a:hover,.header .location-menu-links a:focus-visible{background:#eee9df;color:var(--ink)}
.location-menu-links a>span{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.main-navigation>a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-color:#b58b00}
@media(max-width:650px){.header .main-navigation{gap:25px}.location-menu summary{padding-block:5px}.location-menu-links{left:0;width:220px;text-align:left}.header .location-menu-links a{font-size:13px;padding:13px}}

.location-menu .menu-chevron{display:block;flex-shrink:0;width:12px;height:12px;transition:transform .2s}.location-menu[open] .menu-chevron{transform:rotate(180deg)}

.button:has(.whatsapp-icon){justify-content:flex-start;gap:12px}.button .whatsapp-icon{display:block;flex:0 0 20px;width:20px;height:20px}.button:has(.whatsapp-icon)>span:last-child{margin-left:auto}

.footer-intro .footer-action:has(.whatsapp-icon){display:inline-flex;align-items:center;gap:8px}.footer-action .whatsapp-icon{display:block;width:16px;height:16px;flex:0 0 16px}

/* Renate tells her own story in the first person. */
.about-renate-story{font-style:italic}