/*
Theme Name: Maxi Care Beauty Salon
Theme URI: https://www.maxicarebeautysalon.com.au/
Author: Maxi Care Beauty Salon
Description: A light, fast and modern salon theme with 3D effects, animated salon icons and illustrations. Edit every text, picture, icon, size and colour in Appearance → Customize → Maxi Care Website. Services and Salons have their own menus. Run Appearance → Maxi Care Setup once after activating.
Version: 1.4.0
Requires at least: 6.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: maxicare
Tags: custom-logo, custom-menu, custom-colors, featured-images, one-column, two-columns, translation-ready
*/

:root{
  --bg:#FFF7F1; --soft:#FBEDE3; --peach:#FFEEDD; --peach-2:#FFD8BE; --tan:#CEB19C; --tan-2:#D9C0AE; --tan-3:#7A5C47;
  --ink:#33261E; --muted:#6F5B4D; --line:#EFDDD0; --surface:#FFFFFF;
  --pink:#D61F4B; --pink-2:#C2153F; --pink-soft:#FFE1E8; --esp:#2A1F19; --on-esp:#FBF1E8; --on-esp-muted:#D9C0AE;
  --glass:rgba(255,255,255,.66); --glass-line:rgba(255,255,255,.9);
  --serif:"Cormorant Garamond", Garamond, Georgia, serif;
  --sans:"Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r-xl:32px; --r-lg:22px; --r-md:14px;
  --shadow:0 34px 70px -42px rgba(74,48,34,.55), 0 10px 22px -16px rgba(74,48,34,.25);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}


*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 100px)}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:1rem; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:3px solid var(--pink); outline-offset:3px; border-radius:8px}
.wrap{width:min(1220px, 100% - 40px); margin-inline:auto}
h1,h2,h3{font-family:var(--serif); font-weight:700; margin:0; line-height:1.03; letter-spacing:-.005em}
h2{font-size:clamp(2.4rem, 5.2vw, 4rem)}
.script{font-family:var(--serif); font-style:italic; font-weight:600; color:var(--pink); font-size:clamp(1.25rem, 2vw, 1.55rem); margin:0 0 6px; display:inline-flex; align-items:center; gap:8px}
.script .ico{width:22px; height:22px}
.muted{color:var(--muted)}
/* ICONS */
.ico{width:100%; height:100%; overflow:visible; --a1:#CEB19C; --a2:#F1345D; --ink-ic:currentColor; --surface-ic:#FFF8F2}
.ico *{transform-box:fill-box}
/* animations run when a parent has .play or on hover of .anim */
@keyframes snipA{0%,100%{transform:rotate(0)}50%{transform:rotate(14deg)}}
@keyframes snipB{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}
.i-scissors .blade-a{transform-origin:100% 0}
.i-scissors .blade-b{transform-origin:0 0}
.play .i-scissors .blade-a,.anim:hover .i-scissors .blade-a{animation:snipA .9s ease-in-out infinite; transform-origin:30% 40%}
.play .i-scissors .blade-b,.anim:hover .i-scissors .blade-b{animation:snipB .9s ease-in-out infinite; transform-origin:70% 40%}
@keyframes combSlide{50%{transform:translateX(6px)}}
.play .i-comb .mover,.anim:hover .i-comb .mover{animation:combSlide 1.2s ease-in-out infinite}
@keyframes air{0%{stroke-dashoffset:24; opacity:0}40%{opacity:1}100%{stroke-dashoffset:0; opacity:0}}
.i-dryer .air path{stroke-dasharray:12 12}
.play .i-dryer .air path,.anim:hover .i-dryer .air path{animation:air 1s linear infinite}
.play .i-dryer .air path:nth-child(2),.anim:hover .i-dryer .air path:nth-child(2){animation-delay:.2s}
.play .i-dryer .air path:nth-child(3),.anim:hover .i-dryer .air path:nth-child(3){animation-delay:.4s}
@keyframes press{50%{transform:translateY(4px)}}
.play .i-iron .arm-a,.anim:hover .i-iron .arm-a{animation:press 1.1s ease-in-out infinite}
@keyframes brushStroke{0%,100%{transform:rotate(0)}50%{transform:rotate(-16deg)}}
.i-colour .brush,.i-makeup .brush{transform-origin:0 100%}
.play .i-colour .brush,.anim:hover .i-colour .brush,.play .i-makeup .brush,.anim:hover .i-makeup .brush{animation:brushStroke 1.2s ease-in-out infinite}
@keyframes drip{0%{transform:translateY(-4px); opacity:0}50%{opacity:1}100%{transform:translateY(6px); opacity:0}}
.play .i-colour .drip,.anim:hover .i-colour .drip,.play .i-wax .drop,.anim:hover .i-wax .drop{animation:drip 1.4s ease-in infinite}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}
.i-balayage .lock{transform-origin:50% 0}
.play .i-balayage .lock,.anim:hover .i-balayage .lock{animation:sway 2.2s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.2; transform:scale(.6)}50%{opacity:1; transform:scale(1.15)}}
.i-balayage .spark,.i-lamination .spark,.i-face .glow{transform-origin:50% 50%}
.play .spark,.anim:hover .spark,.play .i-face .glow,.anim:hover .i-face .glow{animation:twinkle 1.4s ease-in-out infinite}
@keyframes flow{to{stroke-dashoffset:-16}}
.play .i-brow .thread,.anim:hover .i-brow .thread{animation:none}
.play .i-brow .thread path,.anim:hover .i-brow .thread path{animation:flow .6s linear infinite}
@keyframes blink{0%,86%,100%{transform:scaleY(1)}92%{transform:scaleY(.1)}}
.i-lashes .lid,.i-lashes .pupil{transform-origin:50% 100%}
.play .i-lashes .lid,.anim:hover .i-lashes .lid{animation:blink 2.6s ease-in-out infinite}
@keyframes bloom{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.i-lotus .petals{transform-origin:50% 100%}
.play .i-lotus .petals,.anim:hover .i-lotus .petals{animation:bloom 2s ease-in-out infinite}
@keyframes draw{0%{stroke-dashoffset:40}60%,100%{stroke-dashoffset:0}}
.play .i-henna .trail,.anim:hover .i-henna .trail{animation:draw 1.8s ease-in-out infinite}
@keyframes lift{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.play .i-lamination .hairs,.anim:hover .i-lamination .hairs{animation:lift 1.4s ease-in-out infinite}
@keyframes stir{0%,100%{transform:rotate(0)}50%{transform:rotate(12deg)}}
.i-wax .stick{transform-origin:0 100%}
.play .i-wax .stick,.anim:hover .i-wax .stick{animation:stir 1.4s ease-in-out infinite}
@keyframes shine{0%,100%{opacity:.2}50%{opacity:1}}
.play .i-mirror .shine,.anim:hover .i-mirror .shine{animation:shine 1.6s ease-in-out infinite}
@keyframes pop{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
.i-cal .pick{transform-origin:50% 50%}
.play .i-cal .pick,.anim:hover .i-cal .pick{animation:pop 1.2s ease-in-out infinite}
@keyframes tick{to{transform:rotate(360deg)}}
.i-clock .hand{transform-origin:0% 0%}
.play .i-clock .hand,.anim:hover .i-clock .hand{animation:tick 4s linear infinite; transform-box:view-box; transform-origin:32px 32px}
@keyframes flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.9)}}
.i-shop .awning{transform-origin:50% 0}
.play .i-shop .awning,.anim:hover .i-shop .awning{animation:flap 1.6s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){ .ico *{animation:none !important} }

.ico{color:var(--ink)}

/* Animated background blobs (transform only) */
.blobs{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
.blobs i{position:absolute; width:60vmax; height:60vmax; border-radius:50%; opacity:.55; animation:drift 26s ease-in-out infinite alternate}
.blobs i:nth-child(1){left:-20vmax; top:-24vmax; background:radial-gradient(closest-side, #FFD8BE, transparent)}
.blobs i:nth-child(2){right:-24vmax; top:10vh; background:radial-gradient(closest-side, #FFD3DD, transparent); animation-duration:32s}
.blobs i:nth-child(3){left:20vw; bottom:-34vmax; background:radial-gradient(closest-side, #EBD5C4, transparent); animation-duration:38s}
@keyframes drift{to{transform:translate(8vmax, 6vmax) scale(1.1)}}



.progress{position:fixed; left:0; top:0; height:3px; width:100%; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg, var(--tan), var(--pink)); z-index:60}

/* Buttons */
.btn{position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 26px; border-radius:999px; font-weight:600; font-size:.92rem; text-decoration:none; border:0; cursor:pointer; font-family:inherit; transition:transform .25s, box-shadow .25s, background .25s}
.btn .ico{width:22px; height:22px; color:currentColor}
.btn::after{content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform:skewX(-20deg); transition:left .6s}
.btn:hover::after{left:120%}
.btn-pink{background:linear-gradient(180deg, #FF4C72, var(--pink)); color:#fff; box-shadow:0 14px 30px -12px rgba(241,52,93,.75)}
.btn-pink .ico{--a1:#fff; --a2:#fff}
.btn-pink:hover{transform:translateY(-2px)}
.btn-glass{background:var(--glass); color:var(--ink); border:1px solid var(--glass-line); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 10px 24px -18px rgba(74,48,34,.6)}
.btn-glass:hover{transform:translateY(-2px)}

/* Floating glass nav */
.top{position:fixed; left:0; right:0; top:calc(env(safe-area-inset-top,0px) + 12px); z-index:40; pointer-events:none}
.bar{pointer-events:auto; display:flex; align-items:center; gap:10px; height:70px; padding:0 10px 0 16px; border-radius:999px; background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5); box-shadow:0 18px 40px -26px rgba(74,48,34,.6)}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; line-height:1}
.logo .mark{width:44px; height:44px; border-radius:50%; background:conic-gradient(from 200deg, var(--tan), var(--pink), var(--tan)); padding:2px; display:grid; place-items:center}
.logo .mark span{width:100%; height:100%; border-radius:50%; background:var(--surface); display:grid; place-items:center}
.logo .mark .ico{width:26px; height:26px}
.logo b{display:block; font-family:var(--serif); font-weight:700; font-size:1.4rem}
.logo small{display:block; font-size:.64rem; letter-spacing:.16em; color:var(--tan-3); margin-top:3px}
.menu{display:flex; align-items:center; gap:2px; margin:0 0 0 auto; padding:0; list-style:none}
.menu a{display:flex; flex-direction:column; align-items:center; justify-content:center; text-decoration:none; min-height:52px; padding:0 16px; border-radius:999px; font-weight:600; font-size:.78rem; letter-spacing:.08em; line-height:1.2; transition:background .2s}
.menu a small{font-family:var(--serif); font-style:italic; font-weight:600; letter-spacing:0; font-size:.95rem; color:var(--tan-3)}
.menu a:hover{background:var(--soft)}
.menu a.on{background:var(--peach)}
.menu a.book{background:var(--pink); color:#fff}
.menu a.book small{color:#FFDCE4}
.menu a.book:hover{background:var(--pink-2)}
.menu .home .ico{width:26px; height:26px}
.icon-btn{background:none; border:0; color:var(--ink); width:50px; height:50px; border-radius:50%; cursor:pointer; display:grid; place-items:center; font-size:1.25rem}
.icon-btn:hover{background:var(--soft)}
.icon-btn svg{width:22px; height:22px}
.menu-btn{display:none}
@media (max-width:1020px){
  .menu{display:none}
  .menu-btn{display:grid; margin-left:auto}
  .menu.open{display:flex; position:absolute; top:80px; left:20px; right:20px; flex-direction:column; align-items:stretch; gap:4px; padding:12px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow)}
  .menu.open a{flex-direction:row; justify-content:space-between; padding:0 18px; min-height:56px}
  .menu.open .icon-btn{width:100%; border-radius:999px}
}
@media (max-width:420px){ .logo small{display:none} .bar{padding-left:10px} }

.search{position:fixed; inset:0; z-index:70; display:none; background:color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding:calc(env(safe-area-inset-top,0px) + 96px) 20px 20px}
.search.open{display:block}
.search .wrap{max-width:720px}
.search input{width:100%; font:inherit; font-family:var(--serif); font-size:2.2rem; padding:10px 0; border:0; border-bottom:2px solid var(--pink); background:transparent; color:var(--ink); outline:none}
.search ul{list-style:none; padding:0; margin:16px 0}
.search li a{display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); text-decoration:none}
.search li a .ico{width:30px; height:30px; flex:none}
.search li a span{margin-left:auto; color:var(--muted)}
.search .close{position:absolute; right:20px; top:calc(env(safe-area-inset-top,0px) + 24px)}

/* HERO */
.hero{position:relative; overflow:hidden; overflow:clip}
.mq-wrap{overflow:hidden; padding:24px 0}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:24px; min-height:max(700px, 100svh); padding-block:120px 80px}
.hero h1{font-size:clamp(3.4rem, 8.2vw, 7.2rem); line-height:.92; margin:6px 0 24px}
.shimmer{background:linear-gradient(100deg, var(--ink) 20%, var(--pink) 40%, var(--tan-3) 55%, var(--ink) 75%); background-size:250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sheen 6s ease-in-out infinite}
@keyframes sheen{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.hero p.lead{color:var(--muted); max-width:46ch; margin:0 0 30px; font-size:1.05rem}
.actions{display:flex; flex-wrap:wrap; gap:12px}
.live{display:grid; grid-template-columns:repeat(2, max-content); gap:12px; margin-top:36px}
.live a{display:flex; align-items:center; gap:12px; text-decoration:none; padding:10px 18px 10px 10px; border-radius:var(--r-lg); background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 14px 30px -24px rgba(74,48,34,.7); transition:transform .25s}
.live a:hover{transform:translateY(-3px)}
.live .ico{width:38px; height:38px}
.live b{display:block; font-family:var(--serif); font-size:1.2rem; line-height:1.1}
.live small{display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--muted)}
.dot{width:9px; height:9px; border-radius:50%; background:#B49A86; flex:none}
.dot.open{background:#2DB673; box-shadow:0 0 0 0 rgba(45,182,115,.6); animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 8px rgba(45,182,115,0)}100%{box-shadow:0 0 0 0 rgba(45,182,115,0)}}
@media (max-width:480px){ .live{grid-template-columns:1fr 1fr} .live a{padding:8px 10px} .live .ico{width:30px; height:30px} .live b{font-size:1.02rem} }

/* Hero stage: mirror + 3D orbit of service icons */
.stage{position:relative; height:clamp(380px, 46vw, 600px); perspective:1200px; transform-style:preserve-3d}
.stage-inner{position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(var(--px,0deg)) rotateY(var(--py,0deg)); transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.mirror{position:absolute; left:50%; top:50%; width:clamp(170px, 20vw, 250px); aspect-ratio:3/4; transform:translate(-50%,-56%); border-radius:999px 999px 40px 40px; background:linear-gradient(160deg, #FFFFFF 0%, #FFE6D6 35%, #F6C9B5 70%, #E9B7A2 100%); box-shadow:0 0 0 10px rgba(255,255,255,.6), 0 0 0 11px var(--tan-2), 0 50px 80px -40px rgba(74,48,34,.7), inset 0 -20px 40px rgba(241,52,93,.15); display:grid; place-items:center; overflow:hidden}
.mirror::before{content:""; position:absolute; top:-30%; left:-60%; width:50%; height:160%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); transform:rotate(20deg); animation:glint 5s ease-in-out infinite}
@keyframes glint{0%,60%{left:-60%}100%{left:130%}}
.mirror .ico{width:56%; height:56%; color:#4A372B; --ink-ic:#4A372B; filter:drop-shadow(0 10px 14px rgba(74,48,34,.25))}
.stand{position:absolute; left:50%; top:50%; width:18px; height:clamp(70px, 9vw, 110px); transform:translate(-50%, calc(clamp(170px, 20vw, 250px) * .61)); background:linear-gradient(90deg, #C7A88F, #E9D3C2, #C7A88F); border-radius:4px}
.stand::after{content:""; position:absolute; left:50%; bottom:-8px; width:120px; height:16px; transform:translateX(-50%); border-radius:50%; background:linear-gradient(90deg, #C7A88F, #E9D3C2, #C7A88F)}
.orbit{position:absolute; left:50%; top:50%; width:0; height:0; transform-style:preserve-3d; transform:rotateX(72deg)}
.spin{position:absolute; transform-style:preserve-3d; animation:spin 28s linear infinite}
@keyframes spin{to{transform:rotateZ(360deg)}}
.orb-item{position:absolute; transform-style:preserve-3d; transform:rotateZ(var(--a)) translateX(var(--R)) rotateZ(calc(-1 * var(--a)))}
.bub{position:absolute; width:clamp(54px, 6vw, 76px); height:clamp(54px, 6vw, 76px); margin:calc(clamp(54px, 6vw, 76px) / -2) 0 0 calc(clamp(54px, 6vw, 76px) / -2); border-radius:22px; background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow:0 18px 30px -16px rgba(74,48,34,.55); display:grid; place-items:center; padding:12px; animation:counter 28s linear infinite; transform-style:preserve-3d}
@keyframes counter{from{transform:rotateZ(0) rotateX(-72deg)}to{transform:rotateZ(-360deg) rotateX(-72deg)}}
.ring-line{position:absolute; left:50%; top:50%; width:calc(var(--R) * 2); height:calc(var(--R) * .62); border-radius:50%; border:1.5px dashed rgba(206,177,156,.8); transform:translate(-50%,-50%)}
.float{position:absolute; width:34px; height:34px; animation:bob 6s ease-in-out infinite}
.float.f1{left:6%; top:12%} .float.f2{right:4%; top:6%; animation-delay:-2s; width:26px; height:26px} .float.f3{right:12%; bottom:8%; animation-delay:-4s}
@keyframes bob{50%{transform:translateY(-14px) rotate(8deg)}}
.chip{position:absolute; z-index:3; display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--r-md); background:var(--surface); box-shadow:var(--shadow); font-size:.8rem; line-height:1.25; animation:bob 7s ease-in-out infinite}
.chip .ico{width:32px; height:32px}
.chip b{display:block; font-family:var(--serif); font-size:1.35rem}
.chip.c1{left:0; bottom:18%} .chip.c2{right:0; top:16%; animation-delay:-3s}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr; min-height:0; padding-top:110px; padding-bottom:40px}
  .stage{order:-1; height:360px}
  .chip{display:none}
}

/* Marquee */
.marquee{overflow:hidden; padding:18px 0; background:var(--esp); color:var(--on-esp); transform:rotate(-1.5deg); margin:0 -20px; box-shadow:0 20px 40px -24px rgba(0,0,0,.5)}
.marquee .track{display:flex; width:max-content; gap:40px; animation:mq 40s linear infinite}
.marquee span{display:inline-flex; align-items:center; gap:12px; font-family:var(--serif); font-size:1.6rem; font-weight:600; white-space:nowrap}
.marquee .ico{width:34px; height:34px; color:var(--on-esp); --a1:#CEB19C; --a2:#F1345D}
@keyframes mq{to{transform:translateX(-50%)}}

/* Sections */
section.block{padding-block:clamp(72px, 9vw, 124px); position:relative}
.head{max-width:720px; margin:0 auto clamp(36px, 5vw, 56px); text-align:center}
.head p{margin:14px auto 0; color:var(--muted); max-width:58ch}
.head.left{text-align:left; margin-inline:0}

/* About */
.about .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px, 5vw, 72px); align-items:center}
.about h2{margin-bottom:18px}
.about p{max-width:58ch}
.tags{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:20px 0 22px}
.tags li{display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 8px; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-size:.84rem; transition:transform .2s}
.tags li:hover{transform:translateY(-2px)}
.tags .ico{width:24px; height:24px}
.stack{position:relative; height:440px; perspective:1200px}
.feat{position:absolute; width:min(320px, 82%); padding:24px; border-radius:var(--r-xl); background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:var(--shadow); transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.feat .icw{width:64px; height:64px; padding:12px; border-radius:20px}
.feat h3{font-size:1.7rem}
.feat p{margin:6px 0 0; font-size:.9rem; color:var(--muted)}
.stack{height:520px}
.feat{display:flex; gap:16px; align-items:flex-start; padding:20px 22px}
.feat .icw{flex:none; transform:none}
.feat.a{left:0; top:0; transform:rotate(-3deg)}
.feat.b{right:0; top:172px; transform:rotate(2.5deg)}
.feat.c{left:6%; top:344px; transform:rotate(-1.5deg)}
.feat:hover{transform:rotate(0) translateY(-6px) scale(1.03) !important; z-index:2}
@media (max-width:900px){ .about .wrap{grid-template-columns:1fr} .stack{height:auto; display:grid; gap:14px} .feat{position:static; width:auto; transform:none !important} }

/* Main services */
.cards{display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; perspective:1600px}
.svc-card{position:relative; display:flex; flex-direction:column; text-decoration:none; color:var(--ink); border-radius:var(--r-xl); padding:30px; background:var(--surface); box-shadow:var(--shadow); overflow:hidden; transform-style:preserve-3d; transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.svc-card::before{content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background:radial-gradient(closest-side, var(--c1), transparent); opacity:.9; transition:transform .6s}
.svc-card:hover::before{transform:scale(1.4)}
.svc-card::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.55), transparent 45%); opacity:var(--glare,0); transition:opacity .3s}
.icw{position:relative; width:96px; height:96px; padding:16px; border-radius:30px; background:linear-gradient(150deg, var(--c1, #FFEEDD), var(--c2, #FFD8BE)); box-shadow:0 18px 30px -18px rgba(74,48,34,.6), inset 0 1px 0 rgba(255,255,255,.7); transform:translateZ(50px)}
.icw .ico{color:#3B2A20; --ink-ic:#3B2A20}
.svc-card h3{font-size:clamp(1.7rem, 2.3vw, 2.05rem); margin:22px 0 8px; transform:translateZ(40px)}
.svc-card p{margin:0; color:var(--muted); font-size:.93rem; transform:translateZ(30px)}
.svc-card .more{margin-top:auto; padding-top:18px; display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.86rem; color:var(--pink); transform:translateZ(30px)}
.svc-card .more::after{content:"→"; transition:transform .25s}
.svc-card:hover .more::after{transform:translateX(6px)}
@media (max-width:1000px){ .cards{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .cards{grid-template-columns:1fr} }

/* Treatments strip */
.treats{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px}
.treat{display:flex; align-items:center; gap:14px; padding:16px; border-radius:var(--r-lg); background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); text-decoration:none; transition:transform .25s, box-shadow .25s}
.treat:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.treat .icw{width:58px; height:58px; padding:10px; border-radius:18px; transform:none; flex:none}
.treat b{display:block; font-size:.95rem; line-height:1.3}
.treat span{font-family:var(--serif); font-weight:700; font-size:1.2rem; color:var(--pink)}
@media (max-width:1000px){ .treats{grid-template-columns:1fr 1fr} }
@media (max-width:460px){ .treat{padding:12px; gap:10px} .treat .icw{width:46px; height:46px; padding:8px} .treat b{font-size:.85rem} }

/* Prices */
.prices{background:var(--esp); color:var(--on-esp); overflow:hidden; border-radius:clamp(28px, 5vw, 56px); margin-inline:clamp(0px, 2vw, 24px)}
.prices .script{color:#FF7E99}
.prices .head p{color:var(--on-esp-muted)}
.prices .head a{color:#fff}
.prices-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px, 5vw, 64px); align-items:center}
.switch{display:inline-flex; padding:6px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); margin-top:26px}
.switch button{display:inline-flex; align-items:center; gap:8px; font:inherit; font-weight:600; min-height:50px; padding:0 22px; border-radius:999px; border:0; background:transparent; color:var(--on-esp); cursor:pointer}
.switch button .ico{width:26px; height:26px; color:currentColor}
.switch button[aria-selected="true"]{background:var(--tan); color:var(--esp)}
.flip{perspective:1600px}
.flip-inner{display:grid; transform-style:preserve-3d; transition:transform .9s cubic-bezier(.6,.05,.25,1)}
.flip.back .flip-inner{transform:rotateY(180deg)}
.face{grid-area:1/1; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:var(--r-xl); padding:clamp(22px, 3.4vw, 36px); background:linear-gradient(160deg, #FFF3E8, #FFD8BE); color:#33261E; box-shadow:0 50px 90px -40px rgba(0,0,0,.7)}
.face.b{transform:rotateY(180deg); background:linear-gradient(160deg, #FFE7EC, #F5CDBA)}
.face .fh{display:flex; align-items:center; gap:14px; margin-bottom:8px}
.face .fh .ico{width:48px; height:48px; color:#33261E; --ink-ic:#33261E}
.face h3{font-size:2.4rem}
.face table{width:100%; border-collapse:collapse}
.face td{padding:10px 4px; border-bottom:1px dashed rgba(139,118,101,.35)}
.face td:last-child{text-align:right; font-family:var(--serif); font-weight:700; font-size:1.25rem; white-space:nowrap}
.face tr:last-child td{border-bottom:0}
@media (max-width:900px){ .prices-grid{grid-template-columns:1fr} }

/* Branches */
.outlets{display:grid; grid-template-columns:1fr 1fr; gap:28px; perspective:1600px}
.outlets>*{min-width:0}
.branch{position:relative; border-radius:var(--r-xl); background:var(--surface); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.b-top{position:relative; height:170px; background:linear-gradient(140deg, var(--c1), var(--c2)); display:flex; align-items:flex-end; justify-content:space-between; padding:20px 24px; overflow:hidden}
.b-top .shopw{position:absolute; right:22px; top:16px; width:120px; height:120px}
.b-top .shopw .ico{color:#3B2A20; --ink-ic:#3B2A20; --surface-ic:#FFF8F2}
.b-top h3{position:relative; font-size:clamp(2rem, 3vw, 2.6rem); color:#33261E}
.b-top .pill{position:absolute; left:24px; top:20px}
.pill{display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:600; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.75); color:#33261E}
.branch .body{padding:clamp(20px, 3vw, 30px); display:flex; flex-direction:column; gap:14px; flex:1}
.info{display:flex; gap:12px; align-items:flex-start}
.info .ico{width:30px; height:30px; flex:none; margin-top:2px}
.info address{font-style:normal; color:var(--muted)}
.phone{font-family:var(--serif); font-size:1.8rem; font-weight:700; text-decoration:none; line-height:1.2}
.week{display:grid; grid-template-columns:repeat(7, 1fr); gap:6px}
.day{min-width:0; border-radius:12px; padding:8px 2px; text-align:center; background:var(--soft); font-size:.7rem; line-height:1.35}
.day b{display:block; font-size:.78rem}
.day.today{background:var(--pink); color:#fff; box-shadow:0 10px 20px -10px rgba(241,52,93,.8); transform:translateY(-3px)}
.social{display:flex; flex-wrap:wrap; gap:8px}
.social a{font-size:.8rem; padding:6px 12px; border-radius:999px; border:1px solid var(--line); text-decoration:none; color:var(--muted)}
.social a:hover{color:var(--ink); border-color:var(--tan)}
.map{min-height:170px; border-radius:var(--r-md); display:grid; place-items:center; text-align:center; font-size:.8rem; color:var(--muted); background:repeating-linear-gradient(45deg, var(--soft) 0 12px, var(--peach) 12px 24px); position:relative}
.map .ico{width:44px; height:44px; position:absolute; top:28%; left:50%; transform:translateX(-50%); animation:bob 3s ease-in-out infinite}
.map em{position:absolute; bottom:12px; left:0; right:0; font-style:normal}
@media (max-width:900px){ .outlets{grid-template-columns:1fr} }
@media (max-width:420px){ .day{font-size:.6rem} .day b{font-size:.68rem} }

/* Booking + enquiry */
.booking .bk-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px, 5vw, 72px); align-items:center}
.booking .bk-grid>*{min-width:0}
.cal-stage{perspective:1400px; display:grid; place-items:center; min-height:420px; position:relative}
.cal{width:min(380px, 100%); border-radius:var(--r-xl); padding:24px; background:var(--surface); box-shadow:0 60px 100px -50px rgba(74,48,34,.7), 0 0 0 1px var(--line); transform:rotateX(14deg) rotateY(-18deg) rotateZ(2deg); transform-style:preserve-3d; animation:calf 7s ease-in-out infinite}
@keyframes calf{50%{transform:rotateX(10deg) rotateY(-10deg) rotateZ(1deg) translateY(-12px)}}
.cal .ch{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.cal .ch .ico{width:40px; height:40px}
.cal h3{font-size:1.6rem}
.cal .grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; transform:translateZ(30px)}
.cal .grid span{aspect-ratio:1; display:grid; place-items:center; border-radius:10px; font-size:.78rem; background:var(--soft)}
.cal .grid span.on{background:var(--pink); color:#fff}
.cal .slot{margin-top:14px; display:flex; gap:8px; transform:translateZ(50px)}
.cal .slot span{flex:1; text-align:center; padding:10px 0; border-radius:12px; border:1px solid var(--line); font-size:.78rem}
.cal .slot span.on{border-color:var(--pink); color:var(--pink); font-weight:600}
.cal-stage .float.f1{left:4%; top:6%} .cal-stage .float.f3{right:4%; bottom:6%}
.note{margin-top:20px; font-size:.84rem; color:var(--muted); border-left:3px solid var(--tan); padding-left:12px}
@media (max-width:900px){ .booking .wrap{grid-template-columns:1fr} .cal-stage{min-height:340px; order:-1} }
.form{border-radius:var(--r-xl); padding:clamp(22px, 4vw, 44px); background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:var(--shadow); display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form .full{grid-column:1/-1}
.form label{display:block; font-size:.82rem; font-weight:600; margin-bottom:6px}
.form input,.form select,.form textarea{width:100%; font:inherit; min-height:52px; padding:12px 16px; border-radius:var(--r-md); border:1.5px solid var(--line); background:var(--surface); color:var(--ink)}
.form textarea{min-height:120px; resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none; border-color:var(--pink); box-shadow:0 0 0 4px var(--pink-soft)}
.form .sent{display:block; grid-column:1/-1; padding:14px 16px; border-radius:var(--r-md); background:#E6F7EE; color:#1E6B45}
.form.done .sent{display:block}
@media (max-width:640px){ .form{grid-template-columns:1fr} }

/* Rise */
.rise{opacity:0; transform:translateY(46px) rotateX(14deg); transform-origin:50% 100%; transition:opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
.rise.in{opacity:1; transform:none}
.svc-card.rise.in,.branch.rise.in{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}

/* Inner pages */
.page-head{padding:calc(env(safe-area-inset-top,0px) + 140px) 0 clamp(48px, 6vw, 80px)}
.page-head .wrap{display:grid; grid-template-columns:1.3fr .7fr; gap:32px; align-items:center}
.page-head h1{font-size:clamp(2.8rem, 6.4vw, 5rem)}
.page-head p{color:var(--muted); max-width:60ch; margin:14px 0 24px}
.crumbs{font-size:.84rem; color:var(--muted); margin-bottom:12px}
.crumbs a{text-decoration:none} .crumbs a:hover{text-decoration:underline}
.ph-icon{justify-self:center; width:clamp(150px, 20vw, 230px); height:clamp(150px, 20vw, 230px); padding:clamp(28px, 4vw, 44px); border-radius:46px; background:linear-gradient(150deg, var(--c1, #FFEEDD), var(--c2, #FFD8BE)); box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.7); animation:tilt3d 8s ease-in-out infinite}
.ph-icon .ico{color:#3B2A20; --ink-ic:#3B2A20}
@keyframes tilt3d{0%,100%{transform:perspective(800px) rotateY(-14deg) rotateX(6deg)}50%{transform:perspective(800px) rotateY(14deg) rotateX(-4deg) translateY(-10px)}}
@media (max-width:760px){ .page-head .wrap{grid-template-columns:1fr} .ph-icon{order:-1; justify-self:start; width:120px; height:120px; padding:22px; border-radius:32px} }
.layout{display:grid; grid-template-columns:1fr 340px; gap:44px; align-items:start}
.layout>*{min-width:0}
.side{position:sticky; top:calc(env(safe-area-inset-top,0px) + 110px); border-radius:var(--r-xl); padding:28px; background:var(--esp); color:var(--on-esp); box-shadow:var(--shadow)}
.side h3{font-size:1.9rem; margin-bottom:12px}
.side .b{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:.9rem}
.side .b a{text-decoration:none; font-weight:600}
.side .btn{width:100%; margin-top:18px}
@media (max-width:960px){ .layout{grid-template-columns:1fr} .side{position:static} }
.prose{max-width:68ch}
.prose h2{font-size:clamp(1.9rem, 3.4vw, 2.6rem); margin:40px 0 14px; display:flex; align-items:center; gap:12px}
.prose h2 .ico{width:40px; height:40px; flex:none}
.prose h2:first-child{margin-top:0}
.ptable{width:100%; border-collapse:collapse; background:var(--surface); border-radius:var(--r-lg); overflow:hidden; box-shadow:0 20px 40px -30px rgba(74,48,34,.5)}
.ptable th{text-align:left; background:var(--peach-2); color:#33261E; padding:14px 18px; font-size:.86rem}
.ptable th:last-child,.ptable td:last-child{text-align:right}
.ptable td{padding:13px 18px; border-top:1px solid var(--line)}
.ptable td:last-child{font-family:var(--serif); font-weight:700; font-size:1.15rem}
.ptable tr{transition:background .2s} .ptable tbody tr:hover{background:var(--soft)}
.tw{overflow-x:auto; border-radius:var(--r-lg)}
.list-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:22px; perspective:1600px}
.list-grid .svc-card{padding:26px}
.list-grid .icw{width:76px; height:76px; padding:12px; border-radius:24px}
.kw{font-size:.76rem; color:var(--tan-3); margin:-4px 0 10px}
.from{display:inline-block; font-family:var(--serif); font-weight:700; font-size:1.35rem; color:var(--pink); background:var(--pink-soft); padding:2px 14px; border-radius:999px; margin-bottom:10px}
@media (max-width:700px){ .list-grid{grid-template-columns:1fr} }
.stub{border-radius:var(--r-xl); padding:30px; background:var(--soft); border:1.5px dashed var(--tan)}

/* Footer */
footer{background:var(--esp); color:var(--on-esp-muted); padding-block:64px 28px; margin-top:clamp(72px, 9vw, 120px)}
footer .grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px}
footer h4{font-family:var(--serif); color:var(--on-esp); font-size:1.45rem; font-weight:700; margin:0 0 10px}
footer a{color:var(--on-esp); text-decoration:none}
footer a:hover{text-decoration:underline}
footer ul{list-style:none; padding:0; margin:0; line-height:2.1}
footer .logo b{color:var(--on-esp)}
footer .logo .mark span{background:var(--esp)}
footer .logo .mark .ico{color:var(--on-esp); --ink-ic:var(--on-esp)}
footer .credit{border-top:1px solid rgba(255,255,255,.12); margin-top:44px; padding-top:20px; font-size:.82rem}
@media (max-width:900px){ footer .grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ footer .grid{grid-template-columns:1fr} }
.totop{position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:35; width:50px; height:50px; border-radius:50%; background:var(--pink); color:#fff; display:grid; place-items:center; text-decoration:none; box-shadow:0 14px 30px -12px rgba(241,52,93,.8); opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .3s, transform .3s; font-size:1.2rem}
.totop.show{opacity:1; pointer-events:auto; transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .rise{opacity:1; transform:none}
  .bub{transform:rotateX(-72deg)}
}
/* PICTURES (illustrations) */
.art{display:block; width:100%; height:100%}
.art *{transform-box:fill-box}
@keyframes twk{0%,100%{opacity:.3; transform:scale(.6)}50%{opacity:1; transform:scale(1.1)}}
.art .tw{transform-origin:50% 50%; animation:twk 2.4s ease-in-out infinite}
.art .tw:nth-of-type(2n){animation-delay:-1.2s}
.art-model .lock-l{transform-origin:80% 0; animation:swayL 5s ease-in-out infinite}
.art-model .lock-r{transform-origin:20% 0; animation:swayR 5s ease-in-out infinite}
.art-model .hair-back{transform-origin:50% 0; animation:swayB 6s ease-in-out infinite}
@keyframes swayL{50%{transform:rotate(2.5deg)}} @keyframes swayR{50%{transform:rotate(-2.5deg)}} @keyframes swayB{50%{transform:scaleX(1.02)}}
.art-model .sparkle{animation:twk 3s ease-in-out infinite; transform-origin:50% 50%}
.art-chair .air path{stroke-dasharray:10 10; animation:air 1s linear infinite}
.art-chair .glint{animation:shine 2s ease-in-out infinite}
.art-colour .brush{transform-origin:0% 100%; animation:brushStroke 2s ease-in-out infinite}
.art-colour .swatch{transform-origin:50% 0; animation:swayB 4s ease-in-out infinite}
.art-keratin .ironG{animation:glide 3.6s ease-in-out infinite}
@keyframes glide{0%,100%{transform:translateY(-60px)}50%{transform:translateY(60px)}}
.art-keratin .shine{animation:shine 3.6s ease-in-out infinite}
.art-thread .thr path{animation:flow .8s linear infinite}
.art-facial .steam{animation:steam 3s ease-in-out infinite}
@keyframes steam{0%{transform:translateY(10px); opacity:0}50%{opacity:1}100%{transform:translateY(-14px); opacity:0}}
.art-facial .cuc{transform-origin:50% 50%; animation:bloom 3s ease-in-out infinite}
.art-lash .lid{transform-origin:50% 0; animation:flutter 3.2s ease-in-out infinite}
@keyframes flutter{0%,80%,100%{transform:scaleY(1)}88%{transform:scaleY(.82)}}
.art-lash .tweez{transform-origin:100% 0; animation:stir 2.4s ease-in-out infinite}
.art-shop .awn{transform-origin:50% 0; animation:flap 2.4s ease-in-out infinite}
.art-shop .plant{transform-origin:50% 100%; animation:sway 3s ease-in-out infinite}
.pic:not(.play) .art *{animation-play-state:paused !important}
.svc-card{padding:0 0 26px}
.svc-card .pic{height:var(--card-h); overflow:hidden; border-radius:var(--r-xl) var(--r-xl) 0 0; transform:translateZ(20px)}
.svc-card .pic .art{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.svc-card:hover .pic .art{transform:scale(1.07)}
.svc-card .icw{width:78px; height:78px; padding:13px; border-radius:24px; margin:-40px 0 0 26px; border:4px solid var(--surface)}
.svc-card h3,.svc-card p,.svc-card .more,.svc-card .kw,.svc-card .from{margin-left:26px; margin-right:26px}
.svc-card h3{margin-top:16px}
.svc-card::before{display:none}
.list-grid .svc-card{padding:26px}
.list-grid .svc-card h3,.list-grid .svc-card p,.list-grid .svc-card .kw,.list-grid .svc-card .from{margin-left:0; margin-right:0}
.list-grid .svc-card .icw{margin:0}
.mirror{place-items:end center}
.mirror .art-model{width:100%; height:100%}
.mirror::before{z-index:2}
.b-top{height:var(--branch-h); padding:0; background:none}
.b-top .pic{position:absolute; inset:0}
.b-top h3{position:absolute; left:20px; bottom:14px; padding:4px 16px; border-radius:14px; background:rgba(255,248,242,.88); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.b-top .pill{z-index:2}
.gal{position:relative; overflow:hidden; height:clamp(360px, 42vw, 480px); perspective:1200px; touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none}
.gal:active{cursor:grabbing}
.gal::after{content:""; position:absolute; left:15%; right:15%; bottom:4%; height:40px; background:radial-gradient(closest-side, rgba(74,48,34,.28), transparent)}
.gring{position:absolute; left:50%; top:46%; width:min(var(--gw), 62vw); aspect-ratio:10/9; transform-style:preserve-3d}
.gcard{position:absolute; inset:0; border-radius:24px; overflow:hidden; box-shadow:0 30px 50px -26px rgba(74,48,34,.65); backface-visibility:hidden; -webkit-backface-visibility:hidden; text-decoration:none; background:var(--surface); display:flex; flex-direction:column}
.gcard .pic{flex:1; min-height:0}
.gcard b{display:block; padding:10px 14px; font-family:var(--serif); font-size:1.2rem; color:var(--ink)}
@media (max-width:700px){ .gcard b{font-size:1rem; padding:8px 12px} }
.page-head .ph-pic{justify-self:center; width:min(100%, var(--ph-w)); aspect-ratio:320/220; border-radius:32px; overflow:hidden; box-shadow:var(--shadow); animation:tilt3d 9s ease-in-out infinite}
@media (max-width:760px){ .page-head .ph-pic{order:-1; justify-self:stretch; width:100%} }


/* ===== WordPress additions ===== */
.screen-reader-text{border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute !important; width:1px; word-wrap:normal !important}
.skip-link:focus{clip:auto; clip-path:none; height:auto; width:auto; left:12px; top:12px; z-index:100; padding:12px 18px; background:var(--surface); border-radius:12px}
.bar{height:auto; min-height:70px; padding-block:8px}
.logo-img{display:block; width:var(--logo-w); max-width:none; height:auto}
@media (max-width:1020px){ .logo-img{width:var(--logo-w-m)} }
.site-footer .logo-img{width:var(--flogo-w)}
.logo-text{display:block}
.menu .home{min-width:52px}
.mc-status{display:inline-flex; align-items:center; gap:6px}
.pic .mc-img{display:block; width:100%; height:100%; object-fit:cover}

/* Hero stage */
.stage{--R:clamp(150px, 17vw, 230px)}
@media (max-width:900px){ .stage{--R:140px} }
@media (max-width:380px){ .stage{--R:120px} }
.mirror{width:calc(clamp(170px, 20vw, 250px) * var(--hero-scale))}
.stand{transform:translate(-50%, calc(clamp(170px, 20vw, 250px) * var(--hero-scale) * .61))}
.mirror .hero-img{object-fit:cover; object-position:center top}
.hero-free{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:calc(clamp(240px, 30vw, 420px) * var(--hero-scale)); aspect-ratio:3/4; border-radius:var(--r-xl); overflow:hidden; filter:drop-shadow(0 40px 60px rgba(74,48,34,.35))}
.hero-free .mc-img{object-fit:cover}

/* Sections */
section.block.tight{padding-top:0}
section.block.tight-top{padding-top:20px}
.loc-label{margin-bottom:10px}
.pr-note{color:var(--on-esp-muted); margin-top:18px; font-size:.9rem}
.center-cta{text-align:center}
.small{font-size:.9rem}

/* Maps and booking embed */
iframe.map{display:block; width:100%; min-height:240px; border:0; border-radius:var(--r-md); background:var(--soft)}
a.map{text-decoration:none}
.bk-frame{margin-top:40px; border-radius:var(--r-xl); overflow:hidden; background:#fff; box-shadow:var(--shadow)}
.bk-frame iframe{display:block; width:100%; height:var(--bk-h); border:0}

/* Forms */
.form .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form .sent.err{background:#FDE7EA; color:#8A1C2C}
.form.cf7{display:block}
.form.cf7 input:not([type=submit]),.form.cf7 textarea,.form.cf7 select{width:100%; font:inherit; min-height:52px; padding:12px 16px; border-radius:var(--r-md); border:1.5px solid var(--line); background:var(--surface); color:var(--ink)}
.form.cf7 input[type=submit]{min-height:52px; padding:0 28px; border:0; border-radius:999px; background:var(--pink); color:#fff; font:inherit; font-weight:600; cursor:pointer}
.search form{margin:0}

/* Side booking box */
.side .b{display:flex; align-items:center; gap:10px}
.side .b .bn{flex:1}
.side .mc-status .st{display:none}
.side-p{color:var(--on-esp-muted); margin:0 0 6px}

/* Service page */
.price-line{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 20px}
.price-line .ico{width:34px; height:34px}
.price-line .from{margin:0}
.price-line .kw{margin:0}
.list-grid a.svc-card{color:var(--ink)}
.list-grid .svc-card .more{margin-left:0}

/* Editor content */
.prose img{max-width:100%; height:auto; border-radius:var(--r-lg)}
.prose a{color:var(--pink)}
.prose .wp-block-table,.prose figure.wp-block-table{margin:0 0 16px; overflow-x:auto; border-radius:var(--r-lg); box-shadow:0 20px 40px -30px rgba(74,48,34,.5)}
.prose table{width:100%; border-collapse:collapse; background:var(--surface)}
.prose th{text-align:left; background:var(--peach-2); color:#33261E; padding:14px 18px; font-size:.86rem; border:0}
.prose td{padding:13px 18px; border:0; border-top:1px solid var(--line)}
.prose th:last-child,.prose td:last-child{text-align:right}
.prose td:last-child{font-family:var(--serif); font-weight:700; font-size:1.15rem; white-space:nowrap}
.prose tbody tr:hover{background:var(--soft)}
.prose .alignwide,.prose .alignfull{max-width:100%}
.pager{margin-top:40px; text-align:center}
.pager .page-numbers{display:inline-grid; place-items:center; min-width:44px; height:44px; border-radius:999px; text-decoration:none; background:var(--surface); margin:2px}
.pager .page-numbers.current{background:var(--pink); color:#fff}
.search-form{display:flex; gap:8px; margin-top:20px}
.search-form input[type=search]{flex:1; min-height:52px; padding:0 16px; border-radius:999px; border:1.5px solid var(--line); font:inherit}
.search-form input[type=submit]{min-height:52px; padding:0 22px; border-radius:999px; border:0; background:var(--pink); color:#fff; font:inherit; font-weight:600}

/* Animations off (Customizer switch) */
body.no-anim *,body.no-anim *::before,body.no-anim *::after{animation:none !important; transition:none !important}
body.no-anim .rise{opacity:1; transform:none}
body.no-anim .bub{transform:rotateX(-72deg)}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

.nav{margin-left:auto}
.nav .menu{margin-left:0}
@media (max-width:1020px){ .nav{margin-left:0} }
.head p a{color:var(--pink); font-weight:600}
.prices .head p a{color:#fff}
.ft-menu a{font-weight:500}
.prose thead,.prose .wp-block-table thead{border:0}
.prose .wp-block-table td,.prose .wp-block-table th{border-left:0;border-right:0}
.ft-widgets{margin-top:32px; display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
/* Imported old content */
.prose details{border:1px solid var(--line);border-radius:var(--r-md);margin:0 0 12px;background:var(--surface);overflow:hidden}
.prose summary{cursor:pointer;list-style:none;padding:16px 50px 16px 18px;font-weight:600;position:relative}
.prose summary::-webkit-details-marker{display:none}
.prose summary::after{content:"+";position:absolute;right:16px;top:50%;translate:0 -50%;width:28px;height:28px;border-radius:50%;background:var(--pink);color:#fff;display:grid;place-items:center;transition:transform .3s}
.prose details[open] summary::after{transform:rotate(45deg)}
.prose details>*:not(summary){padding:0 18px 14px;margin:0}
.prose a.button{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:999px;background:var(--pink);color:#fff;text-decoration:none;font-weight:600}
.prose img{max-width:100%;height:auto;border-radius:var(--r-lg)}

/* ===== Tidier service pages and prices ===== */
.prose h3{font-size:clamp(1.5rem,2.4vw,1.85rem);margin:34px 0 10px}
.prose h3 strong{font-weight:inherit}
.prose p{margin:0 0 14px}
.prose .closing{margin:36px 0 14px;padding:24px 26px;border-radius:var(--r-lg);background:linear-gradient(120deg,var(--peach),var(--peach-2));font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:600;line-height:1.3;color:var(--esp);text-align:center}
.price-card{margin:30px 0 14px;border-radius:var(--r-lg);background:var(--surface);box-shadow:0 24px 50px -34px rgba(74,48,34,.55);overflow:hidden;border:1px solid var(--line)}
.price-card>h2,.price-card>h3,.price-card>h4,.price-card>h5{margin:0;padding:18px 22px;background:linear-gradient(120deg,var(--peach),var(--peach-2));font-size:1.45rem;display:flex;align-items:center;gap:10px}
.price-card>h2::before,.price-card>h3::before,.price-card>h4::before,.price-card>h5::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--pink);flex:none}
.price-card .table-1,.price-card figure{margin:0;box-shadow:none;border-radius:0}
.price-card table{width:100%;border-collapse:collapse;background:transparent;margin:0}
.price-card thead th{background:transparent;color:var(--muted);font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:12px 22px 8px;border:0;text-align:left}
.price-card th.pc-price,.price-card td.pc-price{text-align:right!important}
.price-card td{padding:13px 22px;border:0;border-top:1px dashed var(--line);font-size:.98rem}
.price-card tbody tr:first-child td{border-top:1px solid var(--line)}
.price-card td.pc-price{font-family:var(--serif);font-weight:700;font-size:1.25rem;color:var(--pink);white-space:nowrap}
.price-card tbody tr:hover{background:var(--pink-soft)}
.price-card+p{font-size:.86rem;color:var(--muted)}
@media(max-width:600px){.price-card td,.price-card thead th{padding-left:16px;padding-right:16px}.price-card>h3{padding:16px}}
/* Price label on service cards: a neat badge instead of a full-width bar */
.svc-card .from{align-self:flex-start;font-size:1.1rem;padding:3px 14px}
.list-grid .svc-card .from{position:absolute;top:26px;right:26px;margin:0}
.list-grid .svc-card h3{padding-right:0}

/* ===== Easy-to-read colours ===== */
:root{--pink-ink:color-mix(in srgb,var(--pink) 82%,#000)}
.more,.svc-card .more,.from,.price-line .from,.prose a:not(.button):not(.btn),.pc-price,.treat span,.script,.crumbs a,.kw b{color:var(--pink-ink)}
.from{background:#FFE9EE}
.logo small,.menu a small,.kw{color:#7A5C47}
.site-footer .social a,.site-footer a{color:var(--on-esp)}
.site-footer .social a{border-color:rgba(255,255,255,.22)}
.site-footer .social a:hover{border-color:var(--pink);color:#fff}
.site-footer p,.site-footer .ft-about,.site-footer li{color:var(--on-esp-muted)}
.site-footer h4{color:#fff}
.site-footer .credit{color:var(--on-esp-muted)}
.site-footer .logo-img{background:#fff;padding:10px 14px;border-radius:14px;box-sizing:content-box}
.prose,.prose p,.prose li,.prose td{color:var(--ink)}
.page-head p,.head p,.hero p.lead,.svc-card p,.feat p{color:#5C4A3E}
.btn-pink,.menu a.book,.prose a.button{background:linear-gradient(180deg,var(--pink),var(--pink-ink));color:#fff}
.btn-pink:hover,.prose a.button:hover{background:var(--pink-ink)}
footer .logo small,footer .logo-text small{color:var(--on-esp-muted)}
footer .logo-text b{color:#fff}
/* Both price lists shown together (no flipping) */
.prices-grid{grid-template-columns:1fr!important;gap:30px}
.prices-grid>div:first-child{text-align:center}
.prices-grid>div:first-child .head{margin-inline:auto;text-align:center}
.price-lists{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.plist{background:var(--surface);color:var(--ink);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 30px 60px -36px rgba(0,0,0,.6)}
.plist-h{display:flex;align-items:center;gap:12px;padding:18px 24px;background:linear-gradient(120deg,var(--peach),var(--peach-2))}
.plist-h .ico{width:34px;height:34px}
.plist-h h3{font-size:1.7rem;color:var(--esp)}
.plist table{width:100%;border-collapse:collapse}
.plist td{padding:12px 24px;border-top:1px dashed var(--line);font-size:.98rem;color:var(--ink)}
.plist tr:first-child td{border-top:0}
.plist td.pc-price{text-align:right;font-family:var(--serif);font-weight:700;font-size:1.25rem;color:var(--pink-ink);white-space:nowrap}
.plist tr:hover td{background:#FFF3F5}
@media(max-width:760px){.price-lists{grid-template-columns:1fr}.plist td{padding:11px 16px}}
/* Simpler service cards */
.list-grid .svc-card .kw{display:none}

/* ===== One salon layout ===== */
.outlets.one{grid-template-columns:1fr;max-width:1100px;margin-inline:auto}
.outlets.one .branch{transform:none}
.outlets.one .b-top{height:150px}
.outlets.one .body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:40px;row-gap:16px;align-items:start}
.outlets.one .body>*{grid-column:1}
.outlets.one .body>.map{grid-column:2;grid-row:1 / span 8;min-height:420px;height:100%;width:100%;border:0;border-radius:var(--r-lg)}
.outlets.one .week{grid-template-columns:repeat(7,1fr)}
.outlets.one .phone{font-size:2rem}
@media(max-width:900px){.outlets.one .body{grid-template-columns:1fr}.outlets.one .body>.map{grid-column:1;grid-row:auto;min-height:300px}}
footer .grid.one{grid-template-columns:1.3fr 1fr 1fr}
@media(max-width:900px){footer .grid.one{grid-template-columns:1fr}}