/* Lulu Braids: visual layer for the client page. Loaded after styles.css.
   Remove the <link> to design.css in index.html to go back to the plain look. */
:root{
  --hero-a:#B8006A; --hero-b:#7A0045; --gold:#F6C453; --shadow:0 10px 30px -14px rgba(120,0,70,.35);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--hero-a:#8E0052;--hero-b:#4A0029;--shadow:0 10px 30px -14px rgba(0,0,0,.6)}}

body{padding:0}
.wrap{max-width:680px;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));gap:36px}

/* ---------- hero ---------- */
.hero{position:relative;background:radial-gradient(120% 90% at 50% 0%,var(--hero-a) 0%,var(--hero-b) 100%);color:#fff;padding:28px 20px 72px;text-align:center;overflow:hidden}
.hero::before,.hero::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;border:2px solid rgba(255,255,255,.08);pointer-events:none}
.hero::before{left:-190px;top:-120px;box-shadow:0 0 0 38px rgba(255,255,255,.035),0 0 0 76px rgba(255,255,255,.025)}
.hero::after{right:-210px;bottom:-60px}
.hero-in{position:relative;max-width:560px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px}
.hero .logo{width:min(70%,250px)}
.hero .logo img{filter:brightness(0) invert(1);opacity:.96}
.hero .slogan{font-family:var(--font-display);font-weight:800;font-style:normal;font-size:clamp(40px,11vw,64px);line-height:1;letter-spacing:-.025em;color:#fff;margin-top:6px}
.hero .where{font-size:15px;color:rgba(255,255,255,.82)}
.hero .btn.go{margin-top:6px;background:#fff;color:#8E0052;min-height:54px;padding:0 30px;border-radius:99px;font-size:17px;box-shadow:0 8px 22px -8px rgba(0,0,0,.45);transition:transform .15s,box-shadow .15s}
.hero .btn.go:hover{transform:translateY(-2px);box-shadow:0 12px 26px -8px rgba(0,0,0,.5)}
.hero .btn.go:active{transform:translateY(0)}
.hero .btn.go:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.edge{position:absolute;left:0;bottom:-1px;width:100%;height:34px;display:block}
.hero .edge path{fill:var(--bg)}
/* one entrance moment: the hero builds in once */
@media (prefers-reduced-motion:no-preference){
  .hero-in>*{opacity:0;transform:translateY(14px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
  .hero-in>.logo{animation-delay:.05s}.hero-in>.slogan{animation-delay:.22s}.hero-in>.where{animation-delay:.38s}.hero-in>.go{animation-delay:.5s}
  @keyframes rise{to{opacity:1;transform:none}}
}

/* ---------- house rules, overlapping the hero ---------- */
.rules{margin-top:-52px;position:relative;z-index:2;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:620px){.rules{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rules li{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:14px;box-shadow:var(--shadow);padding:12px 12px 14px;font-size:13px;color:var(--muted)}
.rules li:nth-child(2){border-top-color:var(--gold)}
.rules li:nth-child(3){border-top-color:var(--accent2)}
.rules li:nth-child(4){border-top-color:var(--hero-b)}
.rules b{color:var(--ink);font-size:15px}

/* ---------- step headings ---------- */
.step-h{gap:14px}
.step-h .n{width:40px;height:40px;font-size:18px;background:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 4px var(--soft)}
.step-h h2{font-size:clamp(25px,6.5vw,32px);font-weight:800;letter-spacing:-.02em}
#s2,#s3,#s4{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:22px 18px;box-shadow:var(--shadow)}
@media (min-width:620px){#s2,#s3,#s4{padding:26px}}

/* ---------- styles as a photo gallery ---------- */
.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px;border:0;background:transparent;border-radius:0;overflow:visible}
.svc{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.svc+.svc{border-top:1px solid var(--line)}
.svc:not(.open):hover{transform:translateY(-3px)}
.svc-h{display:flex;flex-direction:column;align-items:stretch;padding:0;gap:0;position:relative}
.svc-h .th{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border-radius:0;transition:transform .5s}
.svc:not(.open):hover .th{transform:scale(1.04)}
.svc-h .nm{font-size:16px;line-height:1.2;padding:10px 12px 0;font-weight:700}
.svc-h .meta{padding:2px 12px 12px;font-size:13px}
.svc-h .chev{position:absolute;top:10px;right:10px;width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,255,255,.92);transform:none;display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.svc-h .chev::before{content:"";width:8px;height:8px;border-right:2px solid #8E0052;border-bottom:2px solid #8E0052;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.svc.open .chev{transform:none}
.svc.open .chev::before{transform:translateY(2px) rotate(-135deg)}
.svc-h.nothumb .nm{padding-top:14px}
.svc-h.nothumb{min-height:110px;justify-content:flex-end;background:linear-gradient(160deg,var(--soft),var(--surface))}
.svc.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent),var(--shadow)}
.svc.on .svc-h{background:transparent}
.svc.on .nm::after{display:block;margin:6px 0 0;width:max-content}
.svc.open{grid-column:1/-1;transform:none}
@media (min-width:0px){
.svc.open .svc-h{display:grid;grid-template-columns:84px 1fr auto;grid-template-rows:auto auto;align-items:center;gap:2px 14px;padding:12px 14px;background:var(--soft)}
.svc.open .svc-h .th{grid-column:1;grid-row:1/3;width:84px;aspect-ratio:1;border-radius:14px}
.svc.open .svc-h .nm{grid-column:2;grid-row:1;padding:0;font-size:20px;align-self:end}
.svc.open .svc-h .meta{grid-column:2;grid-row:2;padding:0;align-self:start}
.svc.open .svc-h .chev{position:static;grid-column:3;grid-row:1/3}
.svc.open .svc-h.nothumb{grid-template-columns:1fr auto}
.svc.open .svc-h.nothumb .nm,.svc.open .svc-h.nothumb .meta{grid-column:1}
.svc.open .svc-h.nothumb .chev{grid-column:2}
.svc.open .nm::after{display:inline-block;margin:0 0 0 8px;vertical-align:middle}
}
.svc-p{background:var(--surface);padding:16px 16px 20px}
.ph img{border-radius:14px}

/* ---------- chips and calendar ---------- */
.chip span{border-radius:99px;padding:9px 16px;transition:background .15s,border-color .15s,transform .1s}
.chip input:checked+span{box-shadow:0 6px 14px -8px var(--accent)}
.chip:active span{transform:scale(.97)}
.cal{border:0;background:var(--soft);border-radius:18px}
.cell{border-radius:12px;background:var(--surface)}
.cell.sel{box-shadow:0 6px 14px -6px var(--accent)}
.cell.closed,.cell.full,.cell.past{background-color:transparent}
.nav{background:var(--surface)}
legend{color:var(--ink);text-transform:none;letter-spacing:0;font-size:16px;font-family:var(--font-display);font-weight:700}
.field label{font-size:15px}
input[type=text],input[type=tel],textarea{border-radius:12px;padding:13px 14px;transition:border-color .15s,box-shadow .15s}
input[type=text]:focus,input[type=tel]:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px var(--soft)}

/* ---------- buttons, summary ---------- */
.btn{border-radius:99px;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 82%,#000));box-shadow:0 8px 18px -8px var(--accent);transition:transform .12s,box-shadow .12s}
.btn:hover{box-shadow:0 12px 22px -8px var(--accent)}
.btn:active{transform:scale(.98)}
.btn.alt{background:transparent;box-shadow:none}
.hero .btn.go{background:#fff}
.sum{background:var(--soft);border-radius:16px;padding:16px}
.policy{border-left:4px solid var(--gold);border-radius:14px}
.bar{background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -10px 30px -18px rgba(120,0,70,.4)}
.banner{border-radius:14px}
#done{border-top:6px solid var(--accent)}

/* ---------- footer ---------- */
.foot{margin-top:44px;background:linear-gradient(180deg,var(--hero-a),var(--hero-b));color:#fff;border:0;padding:44px 20px 104px;position:relative}
.foot::before{content:"";position:absolute;left:0;right:0;top:-1px;height:30px;background:var(--bg);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V0C95 0 95 14 90 14S85 0 80 0 75 14 70 14 65 0 60 0 55 14 50 14 45 0 40 0 35 14 30 14 25 0 20 0 15 14 10 14 5 0 0 0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V0C95 0 95 14 90 14S85 0 80 0 75 14 70 14 65 0 60 0 55 14 50 14 45 0 40 0 35 14 30 14 25 0 20 0 15 14 10 14 5 0 0 0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.foot-in{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:8px;padding-top:12px}
.foot h3{font-size:26px;font-weight:800;margin-bottom:6px}
.foot a{color:#fff}
.foot p{color:rgba(255,255,255,.88)}
.foot b{color:#fff}
.soc{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);color:#fff}
.soc:hover{background:#fff;color:#8E0052}
.soc:focus-visible{outline-color:var(--gold)}

/* ---------- online payment ---------- */
.alt-pay{border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--surface)}
.alt-pay summary{cursor:pointer;font-weight:600}
.alt-pay[open] summary{margin-bottom:10px}
.alt-pay .btn{margin-top:10px}
body.paying .wrap>.step,body.paying .rules,body.paying .bar{display:none!important}
#payResult{margin-top:-30px;position:relative;z-index:2;border-top:6px solid var(--accent);gap:12px;box-shadow:var(--shadow)}
#payResult h3{font-size:24px}
body.paying .hero .btn.go{display:none}