/* ============================================================
   Creative Touch — design system
   Colours, fonts, spacing taken directly from the live site
   (creativetouch.book.app) CSS variables:
     accent  #ea85c7   bg-primary #f5f1f2   bg-secondary #e9e6e6
     text    #2f2f1b   border rgba(0,0,0,.125)   radius 0.5rem   font Lato
   ============================================================ */
:root{
  --pink:#ea85c7;
  --pink-dark:#d65fae;
  --pink-deep:#b84490;
  --pink-soft:rgba(234,133,199,.16);
  --pink-ghost:rgba(234,133,199,.55);
  --bg:#f5f1f2;
  --bg2:#e9e6e6;
  --white:#ffffff;
  --ink:#2f2f1b;
  --ink-soft:#5c5c49;
  --ink-mute:#8a8a78;
  --border:rgba(0,0,0,.125);
  --r:.5rem;
  --r-lg:.85rem;
  --shadow:0 1px 2px rgba(47,47,27,.05), 0 6px 20px rgba(47,47,27,.07);
  --shadow-lg:0 12px 40px rgba(47,47,27,.16);
  --header-h:4rem;
  --maxw:1120px;
  --font:'Lato','Segoe UI',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0; line-height:1.15; color:var(--ink); font-weight:700; letter-spacing:-.01em}
p{margin:0}
a{color:var(--pink-deep); text-decoration:none}
img{max-width:100%; display:block}
button{font-family:inherit; cursor:pointer}
.container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px}
.eyebrow{font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--pink-deep)}
.section{padding:64px 0}
.section-tight{padding:44px 0}
.section h2{font-size:clamp(1.5rem,3.4vw,2.1rem); margin-bottom:6px}
.section .lead{color:var(--ink-soft); max-width:60ch; margin-bottom:28px}
.center{text-align:center}
.center .lead{margin-left:auto; margin-right:auto}
.divider{height:1px; background:var(--border); border:0; margin:0}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50; height:var(--header-h);
  background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:10px; min-width:0}
.brand img{height:40px; width:auto; object-fit:contain}
.brand .wordmark{font-weight:700; font-size:1.15rem; letter-spacing:.02em; white-space:nowrap}
.nav-links{display:flex; align-items:center; gap:4px; overflow-x:auto; scrollbar-width:none}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{
  padding:8px 13px; border-radius:var(--r); color:var(--ink-soft);
  font-weight:600; font-size:.92rem; white-space:nowrap; transition:.18s;
}
.nav-links a:hover{background:var(--pink-soft); color:var(--pink-deep)}
.nav-links a.active{color:var(--pink-deep); background:var(--pink-soft)}
.nav-cta{
  margin-left:6px; padding:9px 18px; background:var(--pink); color:#fff !important;
  border-radius:var(--r); font-weight:700; white-space:nowrap; box-shadow:0 4px 14px rgba(234,133,199,.4);
  transition:.18s;
}
.nav-cta:hover{background:var(--pink-dark); transform:translateY(-1px)}
.nav-toggle{display:none; border:1px solid var(--border); background:#fff; border-radius:var(--r);
  width:42px; height:38px; font-size:1.1rem; color:var(--ink)}

/* ---------- Hero ---------- */
.hero{position:relative; color:#fff; overflow:hidden}
.hero .bg{position:absolute; inset:0; background-size:cover; background-position:center; opacity:.34}
.hero::after{content:''; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(47,47,27,.55), rgba(47,47,27,.28) 60%, rgba(234,133,199,.25));}
.hero-inner{position:relative; z-index:2; padding:72px 0; max-width:640px}
.hero .eyebrow{color:#ffd6ef}
.hero h1{color:#fff; font-size:clamp(2rem,5vw,3.1rem); margin:12px 0 14px; text-shadow:0 2px 20px rgba(0,0,0,.3)}
.hero p{color:rgba(255,255,255,.92); font-size:1.08rem; max-width:52ch}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
.hero-badges{display:flex; gap:20px; flex-wrap:wrap; margin-top:26px; color:rgba(255,255,255,.9)}
.hero-badges span{display:flex; align-items:center; gap:7px; font-size:.9rem; font-weight:600}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:var(--r); font-weight:700; font-size:.98rem;
  border:1px solid transparent; transition:.18s; line-height:1}
.btn-primary{background:var(--pink); color:#fff; box-shadow:0 4px 14px rgba(234,133,199,.4)}
.btn-primary:hover{background:var(--pink-dark); transform:translateY(-1px); box-shadow:0 8px 22px rgba(234,133,199,.5)}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--border)}
.btn-ghost:hover{border-color:var(--pink-ghost); color:var(--pink-deep); background:#fff}
.btn-white{background:#fff; color:var(--pink-deep)}
.btn-white:hover{transform:translateY(-1px)}
.btn-lg{padding:15px 30px; font-size:1.05rem}
.btn-block{width:100%}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}

/* ---------- Cards ---------- */
.card{background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow)}
.card-pad{padding:26px}

/* ---------- "Where to find us" ---------- */
.findus-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:stretch}
.map-wrap{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border); background:var(--bg2); min-height:260px}
.map-wrap iframe{width:100%; height:100%; min-height:260px; border:0; display:block}
.info-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.info-list li{display:flex; gap:12px; align-items:flex-start; font-size:.98rem}
.info-list .ico{width:38px; height:38px; flex:0 0 38px; border-radius:10px; background:var(--pink-soft);
  display:flex; align-items:center; justify-content:center; font-size:1.05rem}
.info-list b{display:block; font-size:.78rem; color:var(--ink-mute); font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-bottom:1px}
.hours-table{width:100%; border-collapse:collapse; margin-top:4px}
.hours-table td{padding:7px 0; border-bottom:1px dashed var(--border); font-size:.95rem}
.hours-table td:last-child{text-align:right; font-weight:700}
.hours-table tr.closed td:last-child{color:var(--ink-mute); font-weight:600}

/* ---------- Service accordion (Book page) ---------- */
.svc-list{display:flex; flex-direction:column; gap:12px}
.svc-cat{background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow)}
.svc-cat-head{display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%;
  padding:17px 20px; background:none; border:0; text-align:left; font-weight:700; font-size:1.02rem; color:var(--ink)}
.svc-cat-head:hover{background:var(--pink-soft)}
.svc-cat-head .chev{transition:.25s; color:var(--pink-deep); font-size:1.1rem; flex:0 0 auto}
.svc-cat.open .chev{transform:rotate(180deg)}
.svc-cat-body{max-height:0; overflow:hidden; transition:max-height .32s ease}
.svc-item{display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:15px 20px; border-top:1px solid var(--border)}
.svc-item:hover{background:var(--bg)}
.svc-item .meta{min-width:0}
.svc-item .name{font-weight:700; font-size:1rem}
.svc-item .desc{color:var(--ink-soft); font-size:.9rem; margin-top:2px}
.svc-item .dur{color:var(--ink-mute); font-size:.82rem; margin-top:5px; font-weight:600}
.svc-item .price{white-space:nowrap; font-weight:800; color:var(--pink-deep); font-size:1.02rem; display:flex; flex-direction:column; align-items:flex-end; gap:3px}
.svc-item .price .book-mini{font-size:.74rem; font-weight:700; color:var(--ink-soft); background:var(--pink-soft);
  padding:3px 10px; border-radius:20px; cursor:pointer; transition:.15s}
.svc-item .price .book-mini:hover{background:var(--pink); color:#fff}
.from-tag{font-size:.72rem; font-weight:700; color:var(--pink-deep); background:var(--pink-soft); padding:2px 8px; border-radius:20px}
.consult-tag{font-size:.72rem; font-weight:700; color:#fff; background:var(--ink-soft); padding:2px 8px; border-radius:20px}

/* ---------- Booking modal / panel ---------- */
.modal-back{position:fixed; inset:0; z-index:100; background:rgba(47,47,27,.5); backdrop-filter:blur(3px);
  display:none; align-items:flex-start; justify-content:center; padding:24px 16px; overflow-y:auto}
.modal-back.show{display:flex}
.modal{background:var(--bg); border-radius:14px; width:100%; max-width:560px; box-shadow:var(--shadow-lg);
  animation:pop .25s ease; margin:auto 0}
@keyframes pop{from{transform:translateY(14px) scale(.98); opacity:0}to{transform:none; opacity:1}}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border); background:#fff; border-radius:14px 14px 0 0}
.modal-head h3{font-size:1.15rem}
.modal-close{border:0; background:var(--pink-soft); color:var(--pink-deep); width:34px; height:34px; border-radius:50%; font-size:1.1rem; font-weight:700}
.modal-close:hover{background:var(--pink); color:#fff}
.modal-body{padding:22px}
.stepper{display:flex; gap:6px; margin-bottom:22px}
.stepper .dot{flex:1; height:5px; border-radius:3px; background:var(--bg2)}
.stepper .dot.on{background:var(--pink)}
.field{margin-bottom:16px}
.field label{display:block; font-weight:700; font-size:.85rem; margin-bottom:6px; color:var(--ink)}
.field input,.field select,.field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:var(--r);
  font-family:inherit; font-size:.98rem; background:#fff; color:var(--ink); transition:.15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--pink); box-shadow:0 0 0 3px var(--pink-soft)}
.field .hint{font-size:.8rem; color:var(--ink-mute); margin-top:5px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.date-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.date-cell{padding:9px 0; text-align:center; border:1px solid var(--border); border-radius:8px; background:#fff;
  cursor:pointer; font-weight:600; transition:.12s}
.date-cell .dow{font-size:.68rem; color:var(--ink-mute); display:block}
.date-cell .num{font-size:.95rem; font-weight:700}
.date-cell:hover{border-color:var(--pink-ghost)}
.date-cell.sel{background:var(--pink); color:#fff; border-color:var(--pink)}
.date-cell.sel .dow{color:rgba(255,255,255,.85)}
.date-cell:disabled{opacity:.35; cursor:not-allowed}
.slot-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.slot{padding:11px 0; text-align:center; border:1px solid var(--border); border-radius:8px; background:#fff;
  font-weight:700; cursor:pointer; transition:.12s; font-size:.92rem}
.slot:hover{border-color:var(--pink-ghost)}
.slot.sel{background:var(--pink); color:#fff; border-color:var(--pink)}
.slot.taken{opacity:.35; cursor:not-allowed; text-decoration:line-through}
.summary-line{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px dashed var(--border); font-size:.95rem}
.summary-line b{font-weight:700}
.total-line{display:flex; justify-content:space-between; padding:14px 0 0; font-size:1.15rem; font-weight:800; color:var(--pink-deep)}
.secure-note{display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--ink-mute); margin-top:10px; justify-content:center}
.confirm-box{text-align:center; padding:8px 0}
.confirm-box .tick{width:64px; height:64px; border-radius:50%; background:var(--pink); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:2rem; margin:0 auto 18px; box-shadow:0 8px 24px rgba(234,133,199,.5)}

/* ---------- Gift card ---------- */
.gift-grid{display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center}
.gift-visual{aspect-ratio:1.5; border-radius:var(--r-lg); background:
  linear-gradient(135deg, var(--pink), #f3bfe3 55%, #fdeef7); display:flex; flex-direction:column;
  justify-content:center; padding:34px; color:#fff; box-shadow:var(--shadow-lg); position:relative; overflow:hidden}
.gift-visual .gc-brand{font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; opacity:.9}
.gift-visual .gc-amt{font-size:clamp(2.4rem,7vw,3.6rem); font-weight:800; margin:8px 0}
.gift-visual .gc-name{font-size:1.05rem; opacity:.95}
.gift-visual .spark{position:absolute; font-size:3.5rem; opacity:.25; right:-6px; bottom:-10px}

/* ---------- Gallery ---------- */
.gallery-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px}
.gal-item{aspect-ratio:1; border-radius:var(--r); overflow:hidden; position:relative; background:var(--bg2);
  display:flex; align-items:center; justify-content:center; border:1px solid var(--border); cursor:pointer; transition:.2s}
.gal-item:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.gal-item .glyph{font-size:3rem}
.gal-item .cap{position:absolute; left:0; right:0; bottom:0; padding:22px 12px 10px; font-size:.82rem; font-weight:700;
  background:linear-gradient(transparent, rgba(47,47,27,.75)); color:#fff}
.gal-empty{grid-column:1/-1; text-align:center; padding:40px; color:var(--ink-mute)}

/* ---------- Reviews ---------- */
.review-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px}
.review{background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow); display:flex; flex-direction:column}
.review .r-top{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.avatar{width:44px; height:44px; border-radius:50%; background:var(--pink); color:#fff; display:flex;
  align-items:center; justify-content:center; font-weight:800; font-size:1.1rem; flex:0 0 44px}
.review .r-name{font-weight:700; font-size:1rem}
.review .r-date{font-size:.8rem; color:var(--ink-mute)}
.stars{color:#f5a623; letter-spacing:2px; font-size:.95rem}
.review .r-svc{font-size:.82rem; font-weight:700; color:var(--pink-deep); background:var(--pink-soft);
  align-self:flex-start; padding:3px 10px; border-radius:20px; margin-bottom:10px}
.review .r-text{font-size:.94rem; color:var(--ink-soft); flex:1}
.review .r-reply{margin-top:14px; padding-top:12px; border-top:1px dashed var(--border); font-size:.88rem}
.review .r-reply b{color:var(--ink); display:block; font-size:.8rem; margin-bottom:3px}
.review .r-reply span{color:var(--ink-soft)}
.review-count{text-align:center; font-size:1rem; color:var(--ink-soft); margin-bottom:8px}
.review-count b{color:var(--pink-deep); font-size:1.4rem}

/* ---------- Footer ---------- */
.site-footer{background:#fff; border-top:1px solid var(--border); margin-top:20px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; padding:44px 0 28px}
.foot-brand img{height:42px; margin-bottom:10px}
.foot-brand p{color:var(--ink-soft); font-size:.92rem; max-width:36ch}
.foot-col h4{font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:12px}
.foot-col a,.foot-col span{display:block; color:var(--ink-soft); font-size:.93rem; padding:5px 0}
.foot-col a:hover{color:var(--pink-deep)}
.foot-bottom{border-top:1px solid var(--border); padding:16px 0; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:8px; font-size:.82rem; color:var(--ink-mute)}
.foot-bottom a{color:var(--ink-soft)}

/* ---------- Toast ---------- */
.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(120%); z-index:200;
  background:var(--ink); color:#fff; padding:13px 22px; border-radius:30px; font-weight:600; font-size:.92rem;
  box-shadow:var(--shadow-lg); transition:.3s; max-width:90vw; text-align:center}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .findus-grid,.gift-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav-toggle{display:block}
  .nav{flex-wrap:wrap; height:auto; padding:10px 0}
  .nav-links{order:3; width:100%; flex-direction:column; align-items:stretch; gap:2px; display:none}
  .nav.open .nav-links{display:flex}
  .nav-links a{padding:11px 13px}
  .nav-cta{margin:6px 0 0}
  .section{padding:46px 0}
  .hero-inner{padding:52px 0}
  .foot-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
}