@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap');

/*
 * EDITORIAL REDESIGN — 2026
 * A warm, tactile visual layer built over the original site architecture.
 * Existing content, routes, booking, quiz and gallery behavior are preserved.
 */

:root{
  --bg:#f1ede6;
  --bg-2:#e8e1d7;
  --bg-3:#ded4c6;
  --brass:#8d6844;
  --brass-2:#6f4d31;
  --brass-dim:rgba(111,77,49,.5);
  --ivory:#1b1917;
  --muted:rgba(27,25,23,.62);
  --faint:rgba(27,25,23,.38);
  --line:rgba(27,25,23,.17);
  --line-soft:rgba(27,25,23,.1);
  --paper:#f7f4ee;
  --ink:#1b1917;
}

/* ──────────────────────────────────────────────────────────────────────
   MONOCHROME EDITION
   Influenced by art-deco salon identities and contemporary beauty
   editorials: true black, soft white, graphic rules and image-led pacing.
   Gold is reserved for tiny typographic notes and interaction states.
   ────────────────────────────────────────────────────────────────────── */
:root{
  --bg:#f5f3ef;
  --bg-2:#ece9e3;
  --bg-3:#dedbd4;
  --paper:#fbfaf7;
  --ink:#111111;
  --ivory:#111111;
  --brass:#9a815f;
  --brass-2:#7f684a;
  --muted:rgba(17,17,17,.62);
  --faint:rgba(17,17,17,.36);
  --line:rgba(17,17,17,.2);
  --line-soft:rgba(17,17,17,.1);
  --ff-d:'Cormorant Garamond','Times New Roman',serif;
}

body{background:var(--paper)}
.sec-h,.about-h,.p-hero h1{font-weight:300}
.lbl{color:#171717}
.hand{color:inherit}

nav.top{background:rgba(251,250,247,.95);border-color:var(--line-soft);backdrop-filter:blur(14px)}
nav.top.scrolled{background:rgba(251,250,247,.94)}
.nav-logo-img{background:#fff;filter:grayscale(1) contrast(1.35)}
.nav-editorial{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:clamp(1.2rem,2.5vw,3rem)}
.nav-editorial a{font-size:.5rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;color:#111;position:relative;padding:.4rem 0}
.nav-editorial a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#111;transform:scaleX(0);transform-origin:right;transition:transform .35s ease}
.nav-editorial a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-book,#mtog,nav.top.scrolled .nav-book,nav.top.scrolled #mtog{color:#111;border-color:var(--line)}
.nav-book:hover{background:#111;color:#fff}
#mtog{display:none}

#hero{background:var(--paper);min-height:100svh}
#hero .hero-bg{left:51%;top:18%;right:7%;bottom:8%;z-index:1}
#hero .hero-bg-img{filter:grayscale(1) contrast(.93) brightness(1.03);object-position:53% 48%}
#hero .hero-bg::after{content:"";position:absolute;inset:0;border:1px solid rgba(17,17,17,.15);pointer-events:none}
#hero .hero-scrim{display:none}
.hero-frame{padding-top:9.5rem;padding-bottom:4rem;justify-content:center}
.hero-frame::before{content:"PERSONAL BEAUTY  ·  PERSONAL RITUAL";position:absolute;top:9.6rem;left:50%;transform:translateX(-50%);font-size:.48rem;letter-spacing:.29em;color:var(--faint);white-space:nowrap}
.hero-frame::after{color:#111;right:2rem;bottom:3rem}
.h-label{top:auto;bottom:4rem;color:#111}
.hh{font-size:clamp(5rem,10.5vw,11.5rem);max-width:none;width:100%;line-height:.68;letter-spacing:-.075em;z-index:3;color:#111}
.hh-row{position:relative;width:max-content}
.hh-row-1{margin-left:-3vw}
.hh-row-2{margin-left:20vw}
.hh-row-2 .outline{-webkit-text-stroke:1.4px #111;color:rgba(251,250,247,.1)}
.hh-row-3{margin-left:5vw;color:#111;font-style:italic}
.hero-low{position:absolute;right:7%;bottom:8%;z-index:4;width:35%;background:var(--paper);padding:1.5rem 0 0 2rem;border-left:0}
.hs{font-size:.74rem;color:#111;border:0;padding:0;max-width:42ch}
.h-actions .btn{font-size:.52rem}
.h-actions .btn-ghost{display:none}

.ticker{background:#111;padding:.85rem 0}
.ticker-item{font-style:normal;text-transform:uppercase;font-family:var(--ff-b);font-size:.58rem;letter-spacing:.3em}
.ticker-item.alt{color:#fff;-webkit-text-stroke:0}
.ticker-dot{color:#fff;font-size:.35rem}

#about{background:var(--paper)}
.about-h{font-size:clamp(3.7rem,6.3vw,7rem);line-height:.78}
.aimg-1,.aimg-2,.spot-img img,.sp-img-col img,.p-hero-img img,.p-hero-photo img{filter:grayscale(1) contrast(.95)}
.aimg-1-w{width:70%}
.aimg-2-w{right:2%;bottom:-4rem;border-color:var(--paper)}
.about-quote{border-color:#111}

#spotlight{background:#e5e1da}
#spotlight .lbl{color:#111}

#services{background:#111}
#services .lbl,#services .sp-n{color:rgba(255,255,255,.55)}
#services .sp-intro h2,#services .sp-nm{font-size:clamp(3rem,5.6vw,6.3rem);line-height:.78}
#services .sp-big{-webkit-text-stroke:1px rgba(255,255,255,.16)}

#ba{background:var(--paper)}
.ba-wrap{filter:grayscale(1)}
.ba-grid{gap:clamp(.8rem,1.7vw,1.75rem)}
.ba-case img{filter:grayscale(1);transition:filter .5s ease,transform 1s cubic-bezier(.2,.6,.2,1)}
.ba-case:hover img{filter:grayscale(0)}
.ba-more-lbl{color:#111}

.p-hero{background:var(--paper);padding-top:clamp(10rem,19vh,14rem)}
.p-hero h1{font-size:clamp(5rem,10vw,11rem);line-height:.7;max-width:8ch;color:#111}
.p-hero .hand{color:#111}
.p-hero-split-media .p-hero-img:last-child{border-color:var(--paper)}
.p-hero-chip{color:#111;border-color:#111}

#treatments{background:#111}
#treatments .tr-bg{filter:grayscale(1) contrast(.9) brightness(.52)}
#tiers,#pricing,#process,#team,#gallery,#testimonials,#instagram,#brands,#academy,#contact{background:var(--paper)}
.tier.featured{background:#111}

.gallery-grid img,.ig-item img,.tm-ph{filter:grayscale(1);transition:filter .5s ease}
.gallery-grid a:hover img,.ig-item:hover img{filter:grayscale(0)}

.btn-brass{background:#111;color:#fff}
.btn-brass::before{background:#8f7655}
.link-u::after{background:#111}
footer{background:#111}

@media(max-width:1080px){
  .nav-editorial{display:none}
  #mtog{display:flex}
}

@media(max-width:900px){
  #hero .hero-bg{left:32%;top:12%;right:4%;bottom:43%}
  .hero-frame{justify-content:flex-end;padding-top:7rem}
  .hero-frame::before{top:7.3rem}
  .hh{font-size:clamp(4.4rem,15vw,8rem);margin-bottom:13rem}
  .hh-row-1{margin-left:0}
  .hh-row-2{margin-left:12vw}
  .hh-row-3{margin-left:3vw}
  .hero-low{position:static;width:100%;padding:1rem 0 0;background:transparent}
  .h-label{display:none}
}

@media(max-width:640px){
  #hero .hero-bg{left:18%;top:11%;right:0;bottom:50%}
  .hero-frame{padding-top:6.7rem}
  .hero-frame::before{top:6.9rem;font-size:.4rem;letter-spacing:.19em}
  .hh{font-size:clamp(3.8rem,18vw,5.6rem);line-height:.72;margin-bottom:8rem}
  .hh-row-2{margin-left:5vw}
  .hero-low{background:var(--paper);padding-top:1.2rem}
  .h-actions{display:block}
  .h-actions .btn{width:100%}
}

html,body{background:var(--bg);color:var(--ink)}
body{font-size:1rem;letter-spacing:.005em}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:7999;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
#grain{opacity:.018;mix-blend-mode:multiply}
::selection{background:#1b1917;color:#f5f0e8}

.ctr{max-width:1440px;padding-inline:clamp(1.25rem,4vw,4.5rem)}
.lbl{color:var(--brass-2);font-size:.54rem;letter-spacing:.36em}
.sec-h{font-size:clamp(2.7rem,5vw,5.7rem);line-height:.89;letter-spacing:-.045em;color:var(--ink)}
.outline{-webkit-text-stroke:1px rgba(27,25,23,.68)}
.hand{color:var(--brass-2)}
.link-u{color:var(--ink)}
.btn{border-radius:0}
.btn-brass{background:var(--ink);color:#f6f1e9}
.btn-brass::before{background:var(--brass)}
.btn-ghost{color:var(--ink);border-color:var(--line)}
.btn-ghost::before{background:var(--ink)}
.btn-ghost:hover{color:#f6f1e9;border-color:var(--ink)}

/* Navigation: restrained horizontal masthead on desktop, editorial overlay on mobile. */
nav.top{padding:1.15rem clamp(1.25rem,3vw,3.2rem);border-bottom:1px solid rgba(255,255,255,.22);mix-blend-mode:normal}
nav.top.scrolled{background:rgba(241,237,230,.9);box-shadow:0 1px 0 var(--line-soft);backdrop-filter:blur(18px)}
.nav-logo-img{height:48px;background:rgba(247,244,238,.92);border-radius:0;padding:.32rem .55rem;box-shadow:none}
.nav-book{color:#f4eee5;border-color:rgba(255,255,255,.42);padding:.85rem 1.25rem}
#mtog{color:#f4eee5}
nav.top.scrolled .nav-book{color:var(--ink);border-color:var(--line)}
nav.top.scrolled #mtog{color:var(--ink)}
.nav-book:hover{background:var(--ink);border-color:var(--ink);color:#f4eee5}
#mov{background:var(--ink);color:#f4eee5}
#mov .mot,#mov .mov-hand{color:#f4eee5}
#mov .mon,#mov .mov-c:hover{color:#b99a77}
#mov .moi{border-color:rgba(255,255,255,.1)}
#mov .mov-c{color:rgba(255,255,255,.55)}

/* Homepage hero: poster-like split composition instead of a conventional photo overlay. */
#hero{background:var(--bg);min-height:100svh}
#hero .hero-bg{left:46%;inset-block:0;right:0;overflow:hidden}
#hero .hero-bg-img{top:0;height:100%;width:100%;object-position:55% 48%;filter:saturate(.62) contrast(1.05) brightness(.83);transform:none!important}
#hero .hero-scrim::before{background:linear-gradient(90deg,rgba(27,25,23,.5),transparent 32%),linear-gradient(0deg,rgba(27,25,23,.28),transparent 45%)}
#hero .hero-scrim::after{display:none}
.hero-frame{padding:8.4rem clamp(1.25rem,4vw,4.5rem) 3rem;justify-content:flex-end;gap:5rem;max-width:1440px}
.hero-frame::after{content:"EST. 2018  ·  PAZARDZHIK";position:absolute;right:clamp(1rem,2vw,2.5rem);bottom:2.2rem;color:rgba(255,255,255,.74);font-size:.5rem;letter-spacing:.28em;writing-mode:vertical-rl}
.h-label{position:absolute;top:8.6rem;left:clamp(1.25rem,4vw,4.5rem);color:var(--brass-2)}
.hh{max-width:8.8ch;color:var(--ink);font-size:clamp(4.25rem,8.4vw,9rem);line-height:.79;letter-spacing:-.065em;text-shadow:none;font-style:normal;position:relative;z-index:3}
.hh-row{width:max-content}
.hh-row-2{margin-left:clamp(1rem,5vw,5rem)}
.hh-row-2 .outline{-webkit-text-stroke:1.5px rgba(27,25,23,.8)}
.hh-row-3{margin-left:clamp(2rem,9vw,10rem);font-style:italic;color:var(--brass-2)}
.hero-low{width:42%;display:grid;grid-template-columns:1fr;align-items:start;gap:1.5rem}
.hs{color:var(--muted);max-width:38ch;border-left:1px solid var(--brass);padding-left:1.3rem}
.h-actions{gap:.7rem}

/* Editorial rhythm and transitions. */
.ticker{background:var(--ink);border:0;padding:1.15rem 0}
.ticker-item{color:#eee7dd;font-size:clamp(1.15rem,2vw,1.85rem)}
.ticker-item.alt{-webkit-text-stroke:1px rgba(238,231,221,.45)}
.ticker-dot{color:#b89977}
#stats{background:var(--paper)}
.stats-inner{border-bottom:1px solid var(--line)}
.stat{border-color:var(--line-soft)}
#about{background:var(--paper);padding-block:clamp(7rem,12vw,12rem)}
.about-grid{grid-template-columns:1.12fr .88fr;gap:clamp(3rem,8vw,9rem)}
.aimg-1-w{width:78%;aspect-ratio:4/5;box-shadow:none}
.aimg-2-w{width:44%;right:-2%;bottom:-5rem;border:8px solid var(--paper);box-shadow:none}
.about-h{font-size:clamp(2.7rem,5vw,5.4rem);line-height:.9;letter-spacing:-.045em;color:var(--ink)}
.about-p,.about-sign-role{color:var(--muted)}
.about-quote{color:var(--ink);border-color:var(--brass)}
.about-sign-name{color:var(--ink)}
#spotlight{background:var(--bg-3)}
.spot-grid{gap:clamp(3rem,9vw,10rem)}
.spot-img{aspect-ratio:4/5}

/* Treatments on the home page become an art-directed horizontal journal. */
#services{background:var(--ink);border:0}
#services .lbl,#services .sp-n{color:#b99a77}
#services .sp-intro h2,#services .sp-nm,#services .sp-pr,#services .link-u{color:#f3ede4}
#services .sp-intro p,#services .sp-d,#services .sp-hint{color:rgba(243,237,228,.55)}
#services .sp,#services .sp-intro,#services .sp-img-col{border-color:rgba(255,255,255,.1)}
#services .sp-big{-webkit-text-stroke:1px rgba(185,154,119,.18)}
#services .btn-brass{background:#eee7dc;color:var(--ink)}

/* Results: visual proof takes over the page. */
#ba{padding:clamp(7rem,12vw,12rem) 0;background:var(--bg)}
.ba-head{display:grid;grid-template-columns:1.25fr .75fr;align-items:end;margin-bottom:clamp(3rem,6vw,6rem)}
.ba-wrap{max-width:none;width:calc(100% - clamp(2.5rem,11vw,12rem));aspect-ratio:16/8.5;box-shadow:none;border:0}
.ba-wrap::before{content:"01";position:absolute;left:-3.4rem;top:0;color:var(--brass-2);font-family:var(--ff-d);font-style:italic;font-size:1.2rem}
.ba-before{filter:saturate(.68) contrast(.95)}
.ba-tag{border-radius:0;font-weight:500}
.ba-tag.l{background:var(--paper);color:var(--ink)}
.ba-tag.r{background:var(--ink);color:#f4eee6}
.ba-handle{background:var(--paper);border:1px solid var(--ink);box-shadow:none}
.ba-handle svg{stroke:var(--ink)}
.ba-divider{background:var(--paper);box-shadow:none}
.ba-more{margin-top:clamp(5rem,10vw,10rem)}
.ba-more-lbl{padding-bottom:1.25rem;border-bottom:1px solid var(--line)}
.ba-grid{grid-template-columns:repeat(12,1fr);gap:clamp(.7rem,1.5vw,1.5rem);align-items:start}
.ba-case{background:transparent;border:0;cursor:zoom-in}
.ba-case:nth-child(6n+1){grid-column:span 7}
.ba-case:nth-child(6n+2){grid-column:span 5;margin-top:5rem}
.ba-case:nth-child(6n+3){grid-column:span 4;margin-top:1rem}
.ba-case:nth-child(6n+4){grid-column:span 8;margin-top:7rem}
.ba-case:nth-child(6n+5){grid-column:span 5}
.ba-case:nth-child(6n+6){grid-column:span 7;margin-top:4rem}
.ba-case img,.ba-case .img-ph{aspect-ratio:4/3;border:0}
.ba-case figcaption{position:static;background:none;color:var(--ink);padding:.8rem 0 0;border-top:1px solid var(--line);margin-top:.65rem}
.ba-note{color:var(--muted)}

/* Inner-page hero: oversized title meets deliberately offset photography. */
.p-hero{padding:clamp(9rem,17vh,12rem) 0 clamp(5rem,9vw,9rem);background:var(--bg)}
.p-hero h1{font-size:clamp(4rem,8.2vw,9rem);line-height:.79;letter-spacing:-.06em;color:var(--ink);font-style:normal;max-width:10ch}
.p-hero p{color:var(--muted);margin-left:clamp(0rem,8vw,9rem)}
.p-hero-chip{border-radius:0;color:var(--brass-2);border-width:0 0 1px;margin-left:clamp(0rem,8vw,9rem);padding-inline:0}
.p-hero-split,.p-hero-photo{grid-template-columns:1.22fr .78fr;gap:clamp(2rem,7vw,8rem)}
.p-hero-split-media{aspect-ratio:4/5}
.p-hero-split-media .p-hero-img{border-radius:0;box-shadow:none}
.p-hero-split-media .p-hero-img:first-child{width:72%;left:7%;top:0;transform:none}
.p-hero-split-media .p-hero-img:last-child{width:48%;right:-6%;bottom:-10%;transform:none;border:8px solid var(--bg)}
.p-hero-photo .p-hero-img{border-radius:0;transform:none;box-shadow:none;aspect-ratio:4/5}
.p-hero-plain .p-hero-bg-word{-webkit-text-stroke:1px rgba(27,25,23,.1)}

/* Procedure directory: typographic index, no floating card look. */
#treatments{background:var(--ink)}
.tr-nav,.tr-content{border-color:rgba(255,255,255,.1)}
.tr-sector-btn,.tr-sector-title,.tr-item-name,.tr-link{color:#f2ece3}
.tr-sector-btn.on,.tr-link:hover{color:#b99a77}
.tr-item,.tr-sector-head{border-color:rgba(255,255,255,.13)}
.tr-item{border-radius:0;background:transparent!important}
.tr-item-desc,.tr-item-meta{color:rgba(242,236,227,.55)}
.tr-bg{filter:saturate(.48) contrast(1.1) brightness(.67)}
#tiers,#pricing,#process{background:var(--paper)}
.tier{border-radius:0;border-color:var(--line);background:transparent;box-shadow:none}
.tier.featured{background:var(--ink);color:#f3ede4}
.tier.featured *{color:inherit}
.pr-row{color:var(--ink);border-color:var(--line)}

/* Academy, team, gallery and contact inherit the lighter editorial palette. */
#team,#gallery,#testimonials,#instagram,#brands,#academy,#contact{background:var(--paper)}
.tm-name,.tm-bio,.gi-cap,.test-q,.contact-h,.ak-title{color:var(--ink)}
.tm-role,.test-meta,.contact-p,.ak-copy{color:var(--muted)}
.gallery-grid{gap:clamp(.75rem,1.5vw,1.5rem)}
.gi{border-radius:0}
.gi:nth-child(3n+2){margin-top:clamp(2rem,5vw,5rem)}
.ig-item{border-radius:0}
footer{background:var(--ink);color:#f1ebe2}
footer .ft-link,footer .ft-c,footer .ft-bottom{color:rgba(241,235,226,.62)}

/* Functional overlays stay dark and focused. */
#bw,#quiz,#lb{--ivory:#f0eae0;--muted:rgba(240,234,224,.58);--line:rgba(240,234,224,.12);--bg:#0d0c0b;--bg-2:#151311;--brass:#c3a37f;color:#f0eae0}
#bw-panel,.qz-panel{background:#151311}
#lb-img[style*="background-image"]::before,#lb-img[style*="background-image"]::after{display:none}

@media(max-width:900px){
  #hero .hero-bg{left:25%;top:0;bottom:38%}
  #hero .hero-scrim::before{background:linear-gradient(to bottom,rgba(27,25,23,.1),rgba(241,237,230,.96) 94%)}
  .hero-frame{padding-top:7.5rem;justify-content:flex-end}
  .h-label{top:auto;bottom:34rem}
  .hh{font-size:clamp(3.7rem,15vw,7rem);line-height:.82}
  .hero-low{width:100%}
  .hero-frame::after{display:none}
  .about-grid,.ba-head,.p-hero-split,.p-hero-photo{grid-template-columns:1fr}
  .about-media{position:relative;top:auto;max-width:620px}
  .p-hero p,.p-hero-chip{margin-left:0}
  .p-hero-split-media{order:-1;max-width:540px}
  .p-hero h1{font-size:clamp(3.8rem,13vw,7rem)}
  .ba-wrap{width:100%}
  .ba-wrap::before{display:none}
}

@media(max-width:640px){
  html{font-size:100%}
  nav.top{padding:.8rem 1rem}
  .nav-logo-img{height:41px}
  .nav-right{gap:.75rem}
  .nav-book{display:none}
  #hero .hero-bg{left:0;bottom:46%}
  .hero-frame{padding:6.6rem 1.1rem 2rem;gap:1.5rem}
  .h-label{display:none}
  .hh{font-size:clamp(3.4rem,18vw,5.3rem);margin-bottom:1rem}
  .hh-row-2{margin-left:.4rem}
  .hh-row-3{margin-left:1.2rem}
  .hero-low{background:rgba(241,237,230,.92);padding:1.2rem 0 0}
  .h-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .h-actions .btn{justify-content:center;padding:.95rem .6rem}
  .sec-h{font-size:clamp(2.7rem,13vw,4.2rem)}
  #about{padding-block:6rem}
  .aimg-1-w{width:85%}
  .aimg-2-w{bottom:-2rem;border-width:5px}
  .about-txt{padding-top:3rem}
  .ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem .7rem}
  .ba-case:nth-child(n){grid-column:auto;margin-top:0}
  .ba-case:nth-child(even){margin-top:2rem}
  .ba-case figcaption{font-size:.48rem;letter-spacing:.1em}
  .ba-wrap{aspect-ratio:4/5}
  .p-hero{padding:7.5rem 0 4.5rem}
  .p-hero h1{font-size:clamp(3.4rem,17vw,5.4rem)}
  .p-hero-split-media{aspect-ratio:1/1.15}
  .p-hero-split-media .p-hero-img:first-child{left:0;width:72%}
  .p-hero-split-media .p-hero-img:last-child{right:0;bottom:0;width:48%}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .gi:nth-child(3n+2){margin-top:1.5rem}
}

@media(prefers-reduced-motion:reduce){
  body::before{display:none}
  .ticker-track,.aimg-stamp svg{animation:none!important}
}