/* BAR-05 小剪刀童发 — children's hair salon. Fredoka over Nunito (+ Noto Sans SC); cream, navy and crayon colours. */
.tpl-bar-05{--gut:clamp(16px,5vw,64px);--max:1200px;--pad-x:max(var(--gut),calc((100% - var(--max))/2));--b5-disp:"Fredoka","Noto Sans SC",system-ui,sans-serif;--b5-sans:"Nunito","Noto Sans SC",system-ui,sans-serif;font-family:var(--b5-sans);font-size:17px;line-height:1.75;--dock-bg:var(--fg);--dock-fg:var(--bg)}
.tpl-bar-05 h1,.tpl-bar-05 h2,.tpl-bar-05 h3{font-family:var(--b5-disp);font-weight:600;letter-spacing:-.005em}
.tpl-bar-05 #main{overflow-x:clip}
.tpl-bar-05 #main>section{padding:clamp(64px,8vw,120px) var(--pad-x)}

.b5-head{display:flex;align-items:center;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;padding:16px var(--pad-x)}
.b5-brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-family:var(--b5-disp);font-size:22px;font-weight:600;text-decoration:none}
.b5-brand::before{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:conic-gradient(var(--c1) 0 25%,var(--c2) 0 50%,var(--c3) 0 75%,var(--c4) 0)}
.b5-nav{display:flex;flex-wrap:wrap;gap:2px}
.b5-nav a{min-height:44px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;transition:background .2s}
.b5-nav a:nth-child(4n+1):hover{background:var(--c1)}
.b5-nav a:nth-child(4n+2):hover{background:var(--c2)}
.b5-nav a:nth-child(4n+3):hover{background:var(--c3)}
.b5-nav a:nth-child(4n+4):hover{background:var(--c4)}

.b5-kicker{display:inline-block;margin:0 0 14px;padding:4px 14px;border-radius:999px;background:var(--c1);font-family:var(--b5-disp);font-weight:500;font-size:15px;color:var(--fg)}
.tpl-bar-05 #main h2{font-size:clamp(32px,4.4vw,56px);line-height:1.18}
.b5-intro{color:var(--muted);max-width:30em;margin:14px auto 0}
.b5-intro p:last-child{margin:0}
.b5-sec-head{text-align:center;max-width:760px;margin:0 auto clamp(36px,5vw,64px)}

.b5-btn{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:12px 34px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-family:var(--b5-disp);font-weight:600;font-size:18px;text-decoration:none;text-align:center;box-shadow:0 5px 0 color-mix(in srgb,var(--fg) 85%,transparent);transition:transform .15s,box-shadow .15s}
.b5-btn:hover{transform:translateY(3px);box-shadow:0 2px 0 color-mix(in srgb,var(--fg) 85%,transparent)}

/* hero */
.b5-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:center;padding-top:clamp(28px,4vw,64px)!important;padding-bottom:clamp(56px,7vw,104px)!important}
.b5-eyebrow{margin:0 0 20px;font-family:var(--b5-disp);font-weight:500;font-size:17px;color:var(--muted)}
.b5-eyebrow::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--accent);margin-right:10px;vertical-align:1px}
.b5-hero h1{font-size:clamp(42px,5vw,72px);line-height:1.1;margin-bottom:24px}
.b5-sub{max-width:26em;color:var(--muted);font-size:18.5px;margin-bottom:36px}
.b5-sub p:last-child{margin:0}
.b5-hero-img{position:relative;margin:0;padding:clamp(16px,3vw,36px)}
.b5-pebble{position:relative;z-index:1;overflow:hidden;border-radius:58% 42% 48% 52% / 46% 52% 48% 54%;background:var(--c2)}
.b5-pebble img{width:100%;aspect-ratio:1/1.05;object-fit:cover;object-position:50% 30%}
.b5-sun{position:absolute;right:0;top:0;width:34%;aspect-ratio:1;border-radius:50%;background:var(--c1)}
.b5-dotty{position:absolute;left:0;bottom:6%;width:30%;aspect-ratio:1;border-radius:50%;background:radial-gradient(var(--c4) 28%,transparent 30%) 0 0/22px 22px}
.b5-squiggle{position:absolute;z-index:2;left:-4%;top:8%;width:clamp(72px,10vw,120px);color:var(--accent);transform:rotate(-14deg)}
.b5-hero--text{grid-template-columns:minmax(0,820px);justify-content:center;text-align:center}
.b5-hero--text .b5-sub{margin-inline:auto}

/* about */
.b5-about{position:relative;background:var(--soft);padding-top:clamp(56px,7vw,104px)!important}
.b5-wave{position:absolute;left:0;top:-47px;width:100%;height:48px;color:var(--soft);display:block}
.b5-about-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,6vw,96px);align-items:center}
.b5-about-in--text{grid-template-columns:minmax(0,760px);justify-content:center;text-align:center}
.b5-about-img{margin:0;padding:14px;border-radius:50%;background:var(--c3);max-width:460px;justify-self:center;width:100%}
.b5-about-img img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%}
.b5-about h2{margin-bottom:22px}
.b5-body p:first-child{font-size:19px;font-weight:700}
.b5-body p:last-child{margin:0}

/* services */
.b5-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:20px}
.b5-tile{display:flex;flex-direction:column;align-items:flex-start;padding:28px 28px 20px;border-radius:32px;color:var(--fg);transition:transform .25s}
.b5-tile:nth-child(odd){transform:rotate(-.6deg)}
.b5-tile:nth-child(even){transform:rotate(.6deg)}
.b5-tile:hover{transform:rotate(0) translateY(-4px)}
.b5-tile--0{background:var(--c1)}
.b5-tile--1{background:var(--c2)}
.b5-tile--2{background:var(--c3)}
.b5-tile--3{background:var(--c4)}
.b5-tile--4{background:var(--c5)}
.b5-badge{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--card);font-family:var(--b5-disp);font-weight:600;font-size:16px;margin-bottom:18px}
.b5-tile h3{font-size:24px;line-height:1.3;margin-bottom:8px}
.b5-desc{font-size:16px;margin-bottom:12px}
.b5-desc p{margin:0}
.b5-price{margin:0 0 8px;font-weight:800}
.b5-ask{margin-top:auto;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 18px;border-radius:999px;background:var(--card);font-weight:800;font-size:15px;text-decoration:none}
.b5-ask:hover{background:var(--fg);color:var(--bg)}

/* work: polaroids */
.b5-work{background:var(--soft)}
.b5-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);padding-top:8px}
.b5-polaroid{margin:0;padding:12px 12px 4px;background:var(--card);border-radius:6px;box-shadow:0 14px 30px -18px rgba(30,40,60,.45);transition:transform .3s}
.b5-polaroid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:3px}
.b5-polaroid figcaption{padding:10px 4px 8px;text-align:center;font-family:var(--b5-disp);font-weight:500;font-size:16px;color:#22304A}
.b5-polaroid--0{transform:rotate(-3deg)}
.b5-polaroid--1{transform:rotate(2deg) translateY(18px)}
.b5-polaroid--2{transform:rotate(-1.5deg)}
.b5-polaroid--3{transform:rotate(3deg) translateY(12px)}
.b5-polaroid:hover{transform:rotate(0) scale(1.03)}

.b5-quote-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.b5-quote-list figure{padding:28px;border-radius:28px;background:var(--card);box-shadow:inset 0 0 0 2px var(--line)}
.b5-quote-list figcaption{margin-top:12px;font-weight:800;color:var(--muted);font-size:15px}

/* faq */
.b5-faq-list{display:grid;gap:12px;max-width:820px;margin:0 auto}
.b5-faq-list details{border-radius:24px;background:var(--card);box-shadow:inset 0 0 0 2px var(--line)}
.b5-faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:66px;padding:16px 24px;font-family:var(--b5-disp);font-weight:500;font-size:19px;line-height:1.4}
.b5-faq-list summary::after{float:none;margin:0;display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--c2);font-size:22px}
.b5-faq-list details:nth-child(even) summary::after{background:var(--c4)}
.b5-faq-list details p{margin:0;padding:0 24px 22px;color:var(--muted)}

/* contact */
.b5-sunny{position:relative;display:grid;justify-items:center;text-align:center;padding:clamp(52px,7vw,96px) clamp(20px,6vw,80px);border-radius:48px;background:var(--c1);overflow:hidden;isolation:isolate}
.b5-sunny::before{content:"";position:absolute;z-index:-1;width:320px;height:320px;right:-110px;top:-120px;border-radius:50%;background:color-mix(in srgb,var(--card) 45%,transparent)}
.b5-sunny::after{content:"";position:absolute;z-index:-1;width:200px;height:200px;left:-60px;bottom:-80px;border-radius:50%;background:radial-gradient(var(--c4) 28%,transparent 30%) 0 0/22px 22px}
.b5-sunny h2{max-width:15em}
.b5-sunny .b5-intro{color:var(--fg);opacity:.8;margin:14px auto 32px}
.b5-contact-info{display:grid;gap:12px;justify-items:center;margin-top:32px}
.b5-contact-list{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 36px}
.b5-contact-list .bc-k{font-size:11.5px;font-weight:800}
.b5-contact-list a{display:inline-flex;align-items:center;min-height:44px}
.b5-social{display:flex;flex-wrap:wrap;justify-content:center;gap:0 18px}
.b5-social a{min-height:44px;display:inline-flex;align-items:center;font-weight:800;text-decoration:none}

.b5-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 20px;padding:8px var(--pad-x) 40px;font-size:14.5px;color:var(--muted)}
.b5-foot-brand{font-family:var(--b5-disp);font-weight:600;color:var(--fg)}

@media (max-width:860px){
  .b5-head{justify-content:center}
  .b5-nav{justify-content:center}
  .b5-nav a{padding:0 10px}
  .b5-hero{grid-template-columns:1fr;text-align:center}
  .b5-hero-img{order:-1;max-width:480px;width:100%;justify-self:center}
  .b5-sub{margin-inline:auto}
  .b5-eyebrow::before{display:none}
  .b5-about-in{grid-template-columns:1fr;text-align:center}
  .b5-about-img{max-width:320px}
  .b5-board{grid-template-columns:1fr 1fr;gap:20px 16px}
  .b5-wave{top:-31px;height:32px}
}
@media (max-width:520px){
  .b5-hero h1{font-size:clamp(42px,12.4vw,58px)}
  .b5-actions .b5-btn{width:100%}
  .b5-tile{padding:24px 22px 18px}
  .b5-polaroid{padding:8px 8px 2px}
  .b5-polaroid figcaption{font-size:14px}
  .b5-sunny{border-radius:32px}
}