/* WEL-05 松间 — warm wood, oat cream, linen. Fraunces (+ Noto Serif SC) + Figtree. */
.tpl-wel-05{
  --gut:clamp(18px,4.5vw,72px);--max:1260px;--pad-x:max(var(--gut),calc((100% - var(--max))/2));
  --serif:"Fraunces","Noto Serif SC",Georgia,serif;
  --sans:"Figtree","Noto Sans SC",system-ui,sans-serif;
  --r:28px;
  --dock-bg:var(--fg);--dock-fg:var(--bg);
  font-family:var(--sans);font-size:16.5px;line-height:1.75;
}
.tpl-wel-05 main{overflow-x:clip}
.tpl-wel-05 h1,.tpl-wel-05 h2,.tpl-wel-05 h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
:lang(zh-Hans) .tpl-wel-05 h1,:lang(zh-Hans) .tpl-wel-05 h2,:lang(zh-Hans) .tpl-wel-05 h3{font-weight:500;letter-spacing:.02em}
.w5-main>section{padding:clamp(76px,9vw,140px) var(--pad-x)}

/* header */
.w5-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 28px;padding:18px var(--pad-x)}
.w5-brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-family:var(--serif);font-size:21px;font-weight:500;text-decoration:none}
.w5-brand:not(:has(img))::before{content:"";flex:none;width:22px;height:22px;border-radius:50% 50% 50% 0;background:var(--accent);transform:rotate(-45deg)}
.w5-nav{display:flex;flex-wrap:wrap;gap:0 4px}
.w5-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-size:15px;text-decoration:none;color:var(--muted);border-radius:999px;transition:background .2s,color .2s}
.w5-nav a:hover{background:var(--soft);color:var(--fg)}

/* buttons */
.w5-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-top:30px}
.w5-btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:12px 30px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:16px;text-decoration:none;text-align:center;transition:transform .25s,box-shadow .25s}
.w5-btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px -16px var(--accent)}
.w5-btn--light{background:var(--card);color:var(--accent)}
.w5-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--fg) 30%,transparent);text-underline-offset:6px}

/* hero */
.w5-main>.w5-hero{position:relative;padding-top:clamp(4px,1vw,16px);padding-bottom:clamp(60px,8vw,120px)}
.w5-hero-ph{margin:0;overflow:hidden;border-radius:calc(var(--r) + 12px)}
.w5-hero-ph img{width:100%;aspect-ratio:16/8.4;object-fit:cover;object-position:50% 60%}
.w5-note{position:relative;width:min(560px,100%);margin:clamp(-220px,-15vw,-120px) 0 0 clamp(20px,4vw,64px);padding:clamp(30px,3.4vw,52px);border-radius:var(--r);background:var(--card);box-shadow:0 30px 60px -40px color-mix(in srgb,var(--fg) 55%,transparent)}
.w5-hero--text .w5-note{margin:40px auto 0;text-align:center;box-shadow:none;background:none}
.w5-hero--text .w5-actions{justify-content:center}
.w5-eyebrow{margin:0 0 18px;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--accent)}
.w5-hero h1{font-size:clamp(36px,4.2vw,62px);line-height:1.22}
:lang(zh-Hans) .w5-hero h1{line-height:1.36}
.w5-sub{margin-top:20px;color:var(--muted);font-size:clamp(16px,1.2vw,17.5px);max-width:30em}
.w5-sub p:last-child{margin:0}

/* kickers */
.w5-kicker{margin:0 0 14px;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--accent)}
.w5-main h2{font-size:clamp(30px,3.6vw,52px);line-height:1.25}
:lang(zh-Hans) .w5-main h2{line-height:1.4}
.w5-intro{margin-top:16px;color:var(--muted);max-width:32em}
.w5-intro p:last-child{margin:0}
.w5-sec-head{text-align:center;max-width:42rem;margin:0 auto clamp(40px,5vw,68px)}
.w5-sec-head .w5-intro{margin-inline:auto}

/* about + steps */
.w5-main>.w5-about{background:var(--soft);border-radius:calc(var(--r) + 12px);margin-inline:clamp(8px,2vw,28px)}
.w5-about-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px clamp(40px,7vw,110px);align-items:center}
.w5-about-top--text{grid-template-columns:minmax(0,1fr)}
.w5-about-body{margin-top:20px;color:var(--muted);font-size:17.5px;max-width:30em}
.w5-about-ph{margin:0;overflow:hidden;border-radius:var(--r)}
.w5-about-ph img{width:100%;aspect-ratio:3/2;object-fit:cover}
.w5-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px;margin-top:clamp(44px,5vw,72px)}
.w5-steps li{padding:26px 26px 28px;border-radius:22px;background:var(--card)}
.w5-step-n{display:block;font-family:var(--serif);font-style:italic;font-size:30px;line-height:1;color:var(--accent);margin-bottom:18px}
.w5-steps p{margin:0;font-size:17px;line-height:1.6}

/* services: spa menu */
.w5-menu{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:40px clamp(40px,7vw,120px);align-items:start}
.w5-menu-head{position:sticky;top:32px}
.w5-list{border-top:1px solid var(--fg)}
.w5-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 28px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line)}
.w5-item h3{font-size:clamp(21px,1.8vw,26px);line-height:1.35}
.w5-item-d{margin-top:6px;color:var(--muted);font-size:15.5px}
.w5-item-d p{margin:0}
.w5-price{grid-column:1;margin:0;font-family:var(--serif)}
.w5-ask{grid-column:2;grid-row:1;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);font-size:14px;font-weight:600;color:var(--accent);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.w5-ask:hover{background:var(--accent);color:var(--on-accent)}

/* gallery */
.w5-main>.w5-work{padding-top:0}
.w5-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);align-items:end}
.w5-tile{margin:0}
.w5-tile-ph{overflow:hidden;border-radius:var(--r)}
.w5-tile:nth-child(odd) .w5-tile-ph{border-radius:999px 999px var(--r) var(--r)}
.w5-tile img{width:100%;aspect-ratio:3/4;object-fit:cover}
.w5-tile:nth-child(even) img{aspect-ratio:4/5}
.w5-tile figcaption{margin-top:12px;font-size:14.5px;color:var(--muted);text-align:center}

/* quotes */
.w5-main>.w5-quotes{padding-top:0}
.w5-quote-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.w5-quote-list figure{padding:32px;border-radius:var(--r);background:var(--soft)}
.w5-quote-list blockquote{font-family:var(--serif);font-size:20px;line-height:1.55}
.w5-quote-list figcaption{margin-top:14px;font-size:14px;color:var(--muted)}

/* faq */
.w5-main>.w5-faq{padding-top:0}
.w5-faq-list{max-width:50rem;margin:0 auto;display:grid;gap:10px}
.w5-faq-list details{padding:0 clamp(20px,2.6vw,30px);border-radius:22px;background:var(--card);box-shadow:0 0 0 1px var(--line)}
.w5-faq-list details[open]{background:var(--soft);box-shadow:none}
.w5-faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:68px;padding:14px 0;font-family:var(--serif);font-size:clamp(17.5px,1.4vw,20px);line-height:1.45}
.w5-faq-list summary::after{flex:none;margin:0;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--bg);color:var(--accent);font-family:var(--sans)}
.w5-faq-list details p{margin:0 0 20px;color:var(--muted)}

/* contact */
.w5-main>.w5-contact{padding-top:0}
.w5-contact-card{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:36px clamp(40px,6vw,96px);align-items:center;padding:clamp(40px,6vw,88px);border-radius:calc(var(--r) + 12px);background:var(--accent);color:var(--on-accent)}
.w5-contact-card::before{content:"";position:absolute;z-index:-1;right:-6%;bottom:-40%;width:min(48%,460px);aspect-ratio:1;border-radius:50%;border:1px solid color-mix(in srgb,var(--on-accent) 25%,transparent);box-shadow:0 0 0 40px color-mix(in srgb,var(--on-accent) 5%,transparent)}
.w5-contact .w5-kicker{color:var(--on-accent);opacity:.9}
.w5-contact h2{font-size:clamp(34px,4.2vw,58px);margin-bottom:16px}
.w5-contact-intro{max-width:28em;margin-bottom:28px;opacity:.9}
.w5-contact-intro p:last-child{margin:0}
.w5-contact-info{padding:6px 26px;border-radius:var(--r);background:color-mix(in srgb,var(--on-accent) 10%,transparent)}
.w5-contact-list li{padding:14px 0}
.w5-contact-list li+li{border-top:1px solid color-mix(in srgb,var(--on-accent) 22%,transparent)}
.w5-contact-list .bc-k{font-size:11.5px;letter-spacing:.16em;opacity:.85}
.w5-contact-list a{display:inline-flex;align-items:center;min-height:44px;margin:-6px 0;font-family:var(--serif);font-size:19px;text-decoration:none}
.w5-contact-list span a{font-family:var(--sans);font-size:14.5px;text-decoration:underline}
.w5-social{display:flex;flex-wrap:wrap;gap:4px 18px;padding:8px 0;border-top:1px solid color-mix(in srgb,var(--on-accent) 22%,transparent)}
.w5-social a{display:inline-flex;align-items:center;min-height:44px;font-size:14.5px;text-decoration:none}

/* footer */
.w5-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 24px;padding:0 var(--pad-x) 40px;font-size:14px;color:var(--muted)}
.w5-foot-brand{font-family:var(--serif);font-size:17px;color:var(--fg)}

@media (max-width:900px){
  .w5-about-top,.w5-menu,.w5-contact-card{grid-template-columns:minmax(0,1fr)}
  .w5-menu-head{position:static}
  .w5-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .w5-hero-ph img{aspect-ratio:4/3}
  .w5-note{margin:-80px 0 0 0;width:calc(100% - 20px);margin-left:10px}
}
@media (max-width:700px){
  .tpl-wel-05{--r:22px;font-size:16px}
  .w5-head{padding-block:12px 6px}
  .w5-nav{width:calc(100% + 16px);margin:0 -8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .w5-nav a{flex:none;padding:0 10px;font-size:14.5px}
  .w5-main>.w5-hero{padding-inline:10px}
  .w5-hero-ph img{aspect-ratio:1/1;object-position:62% 60%}
  .w5-note{padding:28px 22px 24px}
  .w5-actions>.w5-btn{flex:1 1 100%}
  .w5-main>.w5-about{margin-inline:8px;padding-inline:18px}
  .w5-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:baseline;padding:18px 20px}
  .w5-step-n{font-size:24px;margin:0}
  .w5-item{grid-template-columns:minmax(0,1fr);padding:22px 0}
  .w5-ask{grid-column:1;grid-row:auto;justify-self:start;margin-top:8px}
  .w5-main>.w5-contact{padding-inline:8px}
  .w5-contact-card{padding:44px 22px 22px}
  .w5-contact-info{padding:4px 18px}
}