/* The directory of salons, on Bellfy's night (brand/night.css). Each card takes its accent from the
   salon's own colour (--salon), set by salones.js through the CSSOM. */
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.directory{display:block}

/* ---------- The night: the title and the search, a glowing glass bar ---------- */
/* The sky starts under the floating bar, as on the cover page, so the glass sits on the night. */
.directory-page{--nav-h:76px}
.directory-sky{margin-top:calc(12px - var(--nav-h))}
.directory-sky .nt-sky-inner{padding-top:calc(var(--nav-h) + clamp(48px,7vw,96px))}
@media(max-width:720px){.directory-page{--nav-h:72px}}
.directory-sky .nt-sky-inner{padding-bottom:clamp(40px,5vw,64px)}
.directory-head .nt-title{max-width:16ch}
@media(min-width:1080px){
 .directory-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);column-gap:40px}
 .directory-head>*{grid-column:1}
 .directory-head>.directory-stage{grid-column:2;grid-row:1/span 6}
}

/* The stage: the best-rated salons as membership cards floating in the night, each in its colour. */
.directory-stage{position:relative;min-height:420px;perspective:1200px}
@media(max-width:1079px){.directory-stage{display:none}}
.stage-card{--salon:#7444dc;position:absolute;width:min(300px,100%);aspect-ratio:1.586;display:grid;grid-template-rows:auto 1fr auto auto;padding:20px 22px;border-radius:20px;color:#fff;text-decoration:none;overflow:hidden;isolation:isolate;background:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.28),transparent 55%),radial-gradient(90% 90% at 100% 100%,color-mix(in srgb,var(--salon) 60%,#5b2bd0),transparent 70%),linear-gradient(135deg,color-mix(in srgb,var(--salon) 80%,#140b1d),color-mix(in srgb,var(--salon) 40%,#140b1d));border:1px solid rgba(255,255,255,.22);box-shadow:0 40px 70px -30px rgba(5,2,10,.85),inset 0 1px 0 rgba(255,255,255,.35);animation:stage-float 7s var(--ease-in-out) infinite alternate;transition:transform .6s var(--ease-out),box-shadow .6s}
.stage-card::after{content:'';position:absolute;inset:9px;z-index:-1;border-radius:13px;border:1px solid rgba(255,255,255,.2)}
.stage-card::before{content:'✦';position:absolute;right:20px;top:18px;font-size:14px;color:var(--rose);opacity:.9}
.stage-card.n1{right:4%;top:6%;rotate:6deg;z-index:3}
.stage-card.n2{left:0;top:34%;rotate:-8deg;z-index:2;animation-delay:-2.5s;width:min(260px,90%)}
.stage-card.n3{right:0;bottom:0;rotate:-2deg;z-index:1;animation-delay:-5s;width:min(240px,85%);opacity:.92}
.stage-card.n2 .stage-city,.stage-card.n3 .stage-city{display:none}
.stage-card.is-tilting{transition:transform .25s ease-out}
.stage-mono{font-family:var(--display);font-style:italic;font-size:44px;line-height:.9;letter-spacing:-.04em;text-shadow:0 6px 18px rgba(10,4,18,.35)}
.stage-name{align-self:end;font-family:var(--display);font-size:21px;line-height:1.1;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage-meta{margin-top:6px;font-size:12px;color:rgba(255,255,255,.82)}
.stage-meta b{color:#ffd88a}
.stage-city{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.2);font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.7)}
@keyframes stage-float{from{translate:0 0}to{translate:0 -14px}}
.directory-filters{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;max-width:880px;margin-top:clamp(30px,4vw,44px);padding:7px;border-radius:999px;border:1px solid rgba(255,248,242,.22);background:linear-gradient(160deg,rgba(255,248,242,.14),rgba(255,248,242,.05));-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 30px 70px -30px rgba(8,3,14,.9),0 0 0 0 rgba(237,138,206,0),inset 0 1px 0 rgba(255,255,255,.14);transition:box-shadow .6s var(--ease-out),border-color .6s var(--ease-out)}
.directory-filters::before{content:'';position:absolute;inset:-1px;z-index:-1;border-radius:inherit;padding:1px;background:linear-gradient(110deg,rgba(255,214,236,.65),rgba(199,168,255,.15) 40%,rgba(237,138,206,.55));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;transition:opacity .6s}
.directory-filters:focus-within{border-color:rgba(255,214,236,.5);box-shadow:0 30px 70px -30px rgba(8,3,14,.9),0 0 46px -6px rgba(237,138,206,.45),inset 0 1px 0 rgba(255,255,255,.2)}
.directory-filters:focus-within::before{opacity:1}
.directory-filters label{margin:0;min-width:0}
.directory-search{position:relative;display:block}
.directory-search-icon{position:absolute;left:20px;top:50%;width:20px;height:20px;margin-top:-10px;color:var(--rose);pointer-events:none}
.directory-filters input{width:100%;min-height:54px;padding:0 18px 0 52px;border:0;border-radius:999px;background:transparent;color:var(--moon);font:500 16px/1 var(--text);outline:none}
.directory-filters input::placeholder{color:var(--moon-faint)}
.directory-filters input::-webkit-search-cancel-button{filter:invert(1) opacity(.6)}
.directory-filters input:focus-visible{outline:none}
.directory-select select{appearance:none;-webkit-appearance:none;min-height:46px;padding:0 42px 0 20px;border:1px solid rgba(255,248,242,.22);border-radius:999px;background:rgba(20,11,29,.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23ffd6ec' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center;color:var(--moon);font:600 13px/1 var(--text);cursor:pointer;transition:background-color .3s,border-color .3s}
.directory-select select:hover{border-color:rgba(255,248,242,.45)}
.directory-select select option{color:var(--ink);background:#fff}
.directory-select select:focus-visible{outline:2px solid var(--blush);outline-offset:2px}

/* Zones and ideas: chips that light up when chosen. They scroll sideways on their own, never the page. */
.directory-chips{display:flex;align-items:center;gap:8px;margin-top:18px;max-width:100%;overflow-x:auto;scrollbar-width:none;padding:2px 2px 4px;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
.directory-chips::-webkit-scrollbar{display:none}
.directory-chips+.directory-chips{margin-top:10px}
.directory-chips>span{flex:none;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--moon-faint);margin-right:2px}
.directory-chips button{flex:none;min-height:40px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,248,242,.2);background:rgba(255,248,242,.06);color:var(--moon-soft);font:600 13px/1 var(--text);cursor:pointer;transition:background .4s var(--ease-out),color .4s,border-color .4s,box-shadow .4s}
.directory-chips button:hover{background:rgba(255,248,242,.12);color:var(--moon);border-color:rgba(255,248,242,.4)}
.directory-chips button[aria-pressed=true]{border-color:rgba(255,255,255,.3);background:linear-gradient(135deg,#a8406c,#8a3a9e 55%,var(--violet-soft));color:#fff;box-shadow:0 10px 26px -12px rgba(143,51,85,.9)}
.directory-chips.is-quiet button{min-height:34px;padding:0 14px;font-size:12.5px;background:transparent}
.directory-chips.is-quiet button[aria-pressed=true]{background:rgba(255,248,242,.16);border-color:rgba(255,214,236,.6);color:var(--moon);box-shadow:none}

/* ---------- The list ---------- */
.directory-list{max-width:1240px;margin:0 auto;padding:clamp(34px,4vw,56px) clamp(16px,4vw,48px) 0}
.directory-bar{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:20px}
.directory-count{margin:0;min-height:20px;font-family:var(--display);font-style:italic;font-size:22px;color:var(--ink)}
.directory-hint{margin:0;font-size:13px;color:var(--ink-faint)}
.directory-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:clamp(16px,2vw,26px)}
.directory-grid>li{min-width:0}
.directory-grid>li.is-fresh{animation:card-in .7s var(--ease-out) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes card-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.directory-loading{position:absolute}

/* Waiting: three cards breathing light, the shape of what is coming. */
.directory-skeleton{display:grid;gap:12px;padding:0 0 22px;border-radius:28px;overflow:hidden;background:var(--paper-raised);border:1px solid var(--line)}
.directory-skeleton>span{position:relative;overflow:hidden;background:var(--paper-deep);border-radius:999px}
.directory-skeleton>span::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.65) 50%,transparent 80%);transform:translateX(-100%);animation:shimmer 1.6s ease-in-out infinite}
.directory-skeleton .sk-cover{aspect-ratio:16/10;border-radius:0;margin-bottom:8px;background:linear-gradient(140deg,#2a1640,#1d0f33)}
.directory-skeleton .sk-cover::after{background:linear-gradient(100deg,transparent 20%,rgba(255,214,236,.16) 50%,transparent 80%)}
.directory-skeleton .sk-line{height:14px;margin:0 22px}
.sk-line.w60{width:60%;height:22px}.sk-line.w40{width:40%}.sk-line.w80{width:80%}
@keyframes shimmer{to{transform:translateX(100%)}}

.directory-empty{grid-column:1/-1;display:grid;justify-items:center;gap:10px;padding:clamp(48px,7vw,80px) 24px;text-align:center;border-radius:32px;border:1px dashed var(--line-strong);background:linear-gradient(180deg,var(--paper-raised),transparent)}
.directory-empty-mark{display:grid;place-items:center;width:58px;height:58px;margin-bottom:6px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#a8406c,#5b2bd0);color:#fff;font-size:20px;box-shadow:0 16px 36px -14px rgba(91,43,208,.7)}
.directory-empty strong{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.directory-empty span{font-size:15px;color:var(--ink-soft)}
.directory-empty .nt-btn{margin-top:12px;min-height:48px;font-size:14px}

/* ---------- A salon's card: its colour as a little night of its own ---------- */
.directory-card{--salon:#7444dc;position:relative;display:grid;grid-template-rows:auto 1fr;height:100%;border-radius:28px;overflow:hidden;background:var(--paper-raised);border:1px solid var(--line);color:var(--ink);text-decoration:none;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 30px 60px -50px rgba(60,20,50,.5);transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out),border-color .4s}
.directory-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--salon) 40%,var(--line));box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 40px 70px -38px color-mix(in srgb,var(--salon) 75%,#140b1d)}
.directory-card.is-tilting{transition:transform .25s ease-out,box-shadow .6s var(--ease-out),border-color .4s}
.directory-card:focus-visible{outline:3px solid var(--salon);outline-offset:4px}
.directory-cover{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;aspect-ratio:16/10;color:#fff;background:radial-gradient(70% 80% at 85% 10%,color-mix(in srgb,var(--salon) 85%,#fff 15%),transparent 65%),radial-gradient(80% 90% at 0% 110%,color-mix(in srgb,var(--salon) 60%,#5b2bd0),transparent 70%),linear-gradient(150deg,color-mix(in srgb,var(--salon) 45%,#1d0f33),color-mix(in srgb,var(--salon) 25%,#140b1d))}
.directory-cover::after{content:'';position:absolute;inset:0;z-index:-1;background-image:var(--grain);opacity:.12;mix-blend-mode:overlay}
.directory-cover-sky{position:absolute;inset:0;z-index:-1}
.directory-cover-sky i{position:absolute;font-style:normal;color:var(--rose);text-shadow:0 0 12px rgba(255,214,236,.9);animation:nt-twinkle 5s ease-in-out infinite}
.directory-cover-sky i:first-child{left:14%;top:22%;font-size:11px}.directory-cover-sky i:last-child{right:16%;bottom:24%;font-size:15px;animation-delay:-2.4s}
.directory-cover b{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(72px,7vw,96px);line-height:1;letter-spacing:-.04em;padding:0 .1em;background:linear-gradient(160deg,#fff 30%,color-mix(in srgb,var(--salon) 30%,var(--rose)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 10px 22px rgba(10,4,18,.4));transition:transform .8s var(--ease-out)}
.directory-card:hover .directory-cover b{transform:scale(1.06) rotate(-3deg)}
.directory-card.has-photo .directory-cover{background:#1d0f33}
.directory-card.has-photo .directory-cover::before{content:'';position:absolute;inset:0;z-index:-2;background:var(--photo) center/cover no-repeat;transition:transform 1.2s var(--ease-out)}
.directory-card.has-photo:hover .directory-cover::before{transform:scale(1.06)}
.directory-card.has-photo .directory-cover::after{background:linear-gradient(to top,rgba(20,11,29,.6),transparent 50%);opacity:1;mix-blend-mode:normal}
.directory-card.has-photo .directory-cover b,.directory-card.has-photo .directory-cover-sky{display:none}
.directory-place{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:6px;padding:7px 12px 7px 9px;border-radius:999px;background:rgba(20,11,29,.45);border:1px solid rgba(255,248,242,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:12px;font-weight:600;color:var(--moon)}
.directory-place svg{width:14px;height:14px;color:var(--rose)}
.directory-body{display:flex;flex-direction:column;gap:10px;min-width:0;padding:20px 22px 22px}
.directory-body>*{flex:none}
.directory-top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:4px 12px}
.directory-top strong{min-width:0;overflow-wrap:anywhere}
.directory-top strong{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.1;letter-spacing:-.025em}
.directory-rating{flex:none;display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:14px;font-weight:700;white-space:nowrap;color:var(--ink)}
.directory-rating small{color:var(--ink-faint);font-weight:500;font-size:12px}
.directory-stars{--score:0;position:relative;display:inline-block;font-size:13px;letter-spacing:1px;line-height:1;color:color-mix(in srgb,#d89a05 25%,var(--line))}
.directory-stars::before{content:'★★★★★'}
.directory-stars::after{content:'★★★★★';position:absolute;left:0;top:0;width:calc(var(--score) / 5 * 100%);overflow:hidden;color:#d89a05;white-space:nowrap}
.directory-rating.is-new{margin-top:2px;gap:6px;padding:6px 12px;border-radius:999px;font-size:11.5px;letter-spacing:.04em;color:#fff;background:linear-gradient(135deg,#a8406c,#8a3a9e 55%,var(--violet-soft));box-shadow:0 10px 22px -12px rgba(143,51,85,.9)}
.directory-rating.is-new span{color:var(--rose);font-size:10px}
.directory-city{display:none}
.directory-tagline{font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
.directory-services{display:flex;flex-wrap:wrap;gap:6px}
.directory-services:empty{display:none}
.directory-services i,.directory-tags i{font-style:normal;font-size:12px;padding:5px 11px;border-radius:999px;background:var(--paper-deep);color:var(--ink-soft)}
.directory-foot{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:14px}
.directory-from{font-family:var(--display);font-size:19px;letter-spacing:-.01em;font-variant-numeric:lining-nums;white-space:nowrap}
.directory-from small{font-family:var(--text);font-size:12px;color:var(--ink-faint);letter-spacing:.02em}
.directory-from{margin-right:auto}
.directory-tags{position:absolute;right:14px;top:14px;display:flex;gap:6px}
.directory-services i{background:color-mix(in srgb,var(--salon) 7%,var(--paper-deep))}
.directory-tags i{padding:6px 11px;font-weight:600;color:var(--moon);background:rgba(20,11,29,.42);border:1px solid rgba(255,248,242,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.directory-go{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;font-weight:700;font-size:13px;white-space:nowrap;color:#fff;background:color-mix(in srgb,var(--salon) 50%,#140b1d);box-shadow:0 10px 22px -12px color-mix(in srgb,var(--salon) 70%,#140b1d);transition:background .4s,transform .5s var(--ease-out)}
.directory-card:hover .directory-go{background:color-mix(in srgb,var(--salon) 62%,#140b1d)}
.directory-go span{transition:transform .5s var(--ease-out)}
.directory-card:hover .directory-go span{transform:translateX(3px)}

/* ---------- How it works, on paper ---------- */
.directory-how{max-width:1240px;margin:0 auto;padding:clamp(60px,8vw,110px) clamp(22px,4vw,48px) 0}
.directory-how ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.directory-how li{padding-top:24px;border-top:1px solid var(--line-strong)}
.how-num{font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--accent)}
.directory-how h3{margin:14px 0 10px;font-family:var(--display);font-weight:400;font-size:clamp(26px,2.4vw,34px);line-height:1.05;letter-spacing:-.03em}
.directory-how h3 em{color:var(--accent);font-style:italic}
.directory-how p{font-size:15px;line-height:1.7}

/* ---------- The call to salons, back on the night ---------- */
.directory-join{margin-top:clamp(60px,8vw,110px);text-align:center}
.directory-join .nt-sky-inner{display:grid;justify-items:center}
.directory-join .nt-eyebrow{justify-content:center}
.directory-join .nt-title{font-size:clamp(42px,6vw,84px)}
.directory-join .nt-lead{margin-left:auto;margin-right:auto}
.directory-join-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:34px}

@media(max-width:760px){
 .directory-filters{grid-template-columns:1fr;border-radius:30px;padding:6px}
 .directory-filters input{font-size:16px;padding-left:48px}
 .directory-filters input{min-height:52px}
 .directory-select select{width:100%;min-height:44px}
 .directory-hint{display:none}
 .directory-how ol{grid-template-columns:1fr;gap:28px}
 .directory-chips{flex-wrap:nowrap}
}
@media(max-width:420px){.directory-sky{margin:calc(10px - var(--nav-h)) 8px 0;border-radius:30px}.directory-join{margin-left:8px;margin-right:8px;border-radius:30px}.directory-body{padding:18px 18px 20px}.directory-top strong{font-size:24px}}
@media(prefers-reduced-motion:reduce){.directory-card,.directory-card:hover{transition:none;transform:none}.directory-skeleton>span::after{animation:none}}