/* FIT-02 静心普拉提 — sunlit shophouse studio */
.tpl-fit-02{--gut:clamp(20px,5vw,80px);--f2-d:"Cormorant Garamond","Noto Serif SC",Georgia,serif;--f2-zh:"Noto Serif SC","Cormorant Garamond",serif;--f2-s:"Figtree","Noto Sans SC",system-ui,sans-serif;--f2-arch:999px 999px 0 0;font-family:var(--f2-s);font-size:16.5px;line-height:1.8;--dock-bg:var(--fg);--dock-fg:var(--bg)}
.tpl-fit-02 h1,.tpl-fit-02 h2,.tpl-fit-02 h3{font-family:var(--f2-d);font-weight:500;letter-spacing:.01em}
.tpl-fit-02 ::selection{background:var(--soft)}

/* header */
.f2-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 40px;padding:14px var(--gut);max-width:1600px;margin:0 auto}
.f2-brand{display:inline-flex;align-items:center;min-height:48px;font-family:var(--f2-d);font-style:italic;font-weight:500;font-size:30px;line-height:1;letter-spacing:.01em;text-decoration:none}
.f2-nav{display:flex;flex-wrap:wrap;gap:0 34px}
.f2-nav a{position:relative;min-height:44px;display:inline-flex;align-items:center;text-decoration:none;font-size:13.5px;letter-spacing:.14em;color:var(--muted);transition:color .2s}
.f2-nav a::after{content:"";position:absolute;left:50%;bottom:10px;width:4px;height:4px;border-radius:50%;background:var(--accent);transform:translateX(-50%) scale(0);transition:transform .2s}
.f2-nav a:hover{color:var(--fg)}
.f2-nav a:hover::after{transform:translateX(-50%) scale(1)}

/* shared */
.f2-main>section{padding:clamp(80px,10vw,168px) var(--gut)}
.f2-kicker{display:flex;align-items:center;gap:14px;margin:0 0 20px;font-size:12.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);font-weight:600}
.f2-kicker::before{content:"";width:28px;height:1px;background:currentColor}
.f2-main h2{font-family:var(--f2-zh);font-size:clamp(32px,3.8vw,58px);line-height:1.3;font-weight:500;letter-spacing:.02em}
.f2-intro{color:var(--muted);max-width:32em;margin-top:18px}
.f2-intro p:last-child{margin:0}
.f2-btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:56px;padding:12px 34px;border-radius:999px;background:var(--accent);color:var(--on-accent);text-decoration:none;font-size:15px;font-weight:600;letter-spacing:.08em;text-align:center;transition:background .25s,color .25s,gap .25s}
.f2-btn::after{content:"→";font-family:var(--f2-d);font-size:20px;line-height:1}
.f2-btn:hover{background:var(--fg);color:var(--bg);gap:20px}
.f2-btn--inv{background:var(--on-accent);color:var(--accent)}
.f2-btn--inv:hover{background:var(--fg);color:var(--bg)}

/* hero */
.f2-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,6vw,110px);align-items:center;max-width:1600px;margin:0 auto;padding-top:clamp(36px,5vw,72px)!important}
.f2-hero--text{grid-template-columns:1fr;text-align:center;justify-items:center;padding-block:clamp(100px,14vw,200px)!important}
.f2-eyebrow{margin:0 0 clamp(24px,3vw,40px);font-family:var(--f2-d);font-style:italic;font-size:clamp(19px,1.6vw,24px);letter-spacing:.06em;color:var(--muted)}
.f2-hero h1{font-family:var(--f2-zh);font-size:clamp(42px,5.4vw,92px);line-height:1.22;font-weight:500;letter-spacing:.02em;margin-bottom:clamp(26px,3vw,40px)}
.f2-hl{display:block;color:var(--accent)}
.f2-sub{max-width:28em;color:var(--muted);font-size:clamp(16.5px,1.25vw,19px);margin-bottom:clamp(30px,3.4vw,48px)}
.f2-hero--text .f2-sub{margin-inline:auto}
.f2-sub p:last-child{margin:0}
.f2-hero-media{position:relative;padding:0 clamp(18px,2.4vw,36px) clamp(18px,2.4vw,36px) 0}
.f2-hero-media::before{content:"";position:absolute;inset:clamp(18px,2.4vw,36px) 0 0 clamp(18px,2.4vw,36px);border:1px solid var(--accent);border-radius:var(--f2-arch);opacity:.55}
.f2-window{position:relative;margin:0;border-radius:var(--f2-arch);overflow:hidden;background:var(--soft)}
.f2-window img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* about */
.f2-about{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(48px,8vw,140px);align-items:center;max-width:1280px;margin:0 auto;border-top:1px solid var(--line)}
.f2-about--text{grid-template-columns:1fr;max-width:860px;text-align:center}
.f2-about--text .f2-kicker{justify-content:center}
.f2-about h2{margin-bottom:clamp(24px,3vw,40px)}
.f2-about-body{font-size:clamp(17px,1.35vw,20px);line-height:1.95;max-width:30em}
.f2-about--text .f2-about-body{margin-inline:auto}
.f2-about-body p+p{color:var(--muted);font-size:.92em}
.f2-about-body p:last-child{margin:0}
.f2-capsule{margin:0;border-radius:999px;overflow:hidden;background:var(--soft);box-shadow:0 0 0 clamp(8px,1vw,14px) var(--bg),0 0 0 calc(clamp(8px,1vw,14px) + 1px) var(--line)}
.f2-capsule img{width:100%;aspect-ratio:9/16;object-fit:cover}

/* classes: printed timetable */
.f2-classes{background:var(--soft)}
.f2-sec-head{max-width:1280px;margin:0 auto clamp(40px,5vw,72px)}
.f2-list{max-width:1280px;margin:0 auto;border-top:1px solid var(--fg)}
.f2-row{display:grid;grid-template-columns:clamp(56px,7vw,110px) minmax(0,1fr) auto;gap:12px clamp(20px,4vw,64px);align-items:center;padding:clamp(26px,3vw,40px) clamp(0px,1.6vw,24px);border-bottom:1px solid var(--line);transition:background .3s}
.f2-row:hover{background:color-mix(in srgb,var(--bg) 55%,transparent)}
.f2-rn{font-family:var(--f2-d);font-style:italic;font-size:clamp(30px,3vw,46px);line-height:1;color:var(--accent)}
.f2-row h3{font-family:var(--f2-zh);font-size:clamp(21px,1.9vw,28px);line-height:1.4;margin-bottom:6px}
.f2-row h3 em{font-family:var(--f2-d);font-style:italic;font-weight:500;color:var(--muted);font-size:1.08em;margin-left:.2em;white-space:nowrap}
.f2-row-desc{color:var(--muted);max-width:40em;font-size:15.5px}
.f2-row-desc p{margin:0}
.f2-row-side{display:flex;align-items:center;gap:14px 24px;flex-wrap:wrap;justify-content:flex-end}
.f2-price{margin:0;font-family:var(--f2-d);font-size:24px;font-weight:600}
.f2-ask{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border:1px solid var(--fg);border-radius:999px;text-decoration:none;font-size:14px;letter-spacing:.06em;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.f2-ask:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* gallery: staggered arches */
.f2-strip{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.5fr;gap:clamp(14px,2vw,32px);max-width:1440px;margin:0 auto;align-items:start}
.f2-g{margin:0}
.f2-frame{overflow:hidden;border-radius:clamp(16px,2vw,28px);background:var(--bg);height:clamp(300px,30vw,500px)}
.f2-g1 .f2-frame,.f2-g2 .f2-frame{border-radius:var(--f2-arch)}
.f2-g1,.f2-g3{margin-top:clamp(40px,6vw,96px)}
.f2-frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.f2-g:hover .f2-frame img{transform:scale(1.04)}
.f2-g figcaption{display:flex;align-items:baseline;gap:10px;margin-top:14px;font-size:14.5px;color:var(--muted)}
.f2-cn{font-family:var(--f2-d);font-style:italic;font-size:19px;color:var(--accent)}

/* testimonials */
.f2-quote-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(24px,4vw,64px);max-width:1280px;margin:0 auto}
.f2-quote-list figure{text-align:center}
.f2-quote-list blockquote{font-family:var(--f2-zh);font-size:clamp(18px,1.5vw,22px);line-height:1.8}
.f2-quote-list blockquote::before{content:"\201C";display:block;font-family:var(--f2-d);font-size:72px;line-height:.7;color:var(--accent)}
.f2-quote-list figcaption{margin-top:16px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* faq */
.f2-faq{max-width:920px;margin:0 auto}
.f2-faq .f2-sec-head{text-align:center}
.f2-faq .f2-kicker{justify-content:center}
.f2-faq .f2-kicker::after{content:"";width:28px;height:1px;background:currentColor}
.f2-faq-list{border-top:1px solid var(--line)}
.f2-faq-list details{border-bottom:1px solid var(--line)}
.f2-faq-list summary{padding:26px 4px;min-height:76px;font-family:var(--f2-zh);font-size:clamp(17px,1.4vw,20px);line-height:1.55;font-weight:500}
.f2-faq-list summary::after{font-family:var(--f2-d);font-size:30px;line-height:.8;color:var(--accent)}
.f2-faq-list details p{color:var(--muted);margin:0 4px 28px;max-width:40em}

/* contact: arch panel */
.f2-contact{padding-top:clamp(40px,5vw,80px)!important}
.f2-arch{max-width:1100px;margin:0 auto;text-align:center;background:var(--accent);color:var(--on-accent);border-radius:min(550px,48vw) min(550px,48vw) clamp(20px,2vw,32px) clamp(20px,2vw,32px) / clamp(150px,18vw,260px) clamp(150px,18vw,260px) clamp(20px,2vw,32px) clamp(20px,2vw,32px);padding:clamp(96px,10vw,150px) clamp(24px,6vw,96px) clamp(56px,6vw,96px);--line:color-mix(in srgb,var(--on-accent) 28%,transparent)}
.f2-kicker--inv{color:var(--on-accent);justify-content:center}
.f2-kicker--inv::after{content:"";width:28px;height:1px;background:currentColor}
.f2-contact h2{font-size:clamp(34px,4.4vw,66px);margin-bottom:20px}
.f2-contact-intro{max-width:30em;margin:0 auto 34px;font-size:clamp(16.5px,1.3vw,19px)}
.f2-contact-intro p:last-child{margin:0}
.f2-contact-info{margin-top:clamp(44px,5vw,64px);text-align:left}
.f2-contact-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:0 32px;border-top:1px solid var(--line)}
.f2-contact-list li{padding:18px 0;border-bottom:1px solid var(--line)}
.f2-contact-list .bc-k{opacity:1;margin-bottom:2px;font-size:11.5px;letter-spacing:.2em}
.f2-contact-list a{display:inline-flex;align-items:center;min-height:44px;margin:-8px 0}
.f2-social{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.f2-social a{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1px solid currentColor;border-radius:999px;text-decoration:none;font-size:13.5px;letter-spacing:.08em}
.f2-social a:hover{background:var(--on-accent);color:var(--accent)}

/* footer */
.f2-foot{text-align:center;padding:clamp(48px,6vw,88px) var(--gut) clamp(32px,4vw,48px)}
.f2-foot-brand{margin:0 0 6px;font-family:var(--f2-d);font-style:italic;font-weight:500;font-size:clamp(34px,4vw,56px);line-height:1.1}
.f2-foot-note{margin:0;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

@media (max-width:900px){
  .f2-hero{grid-template-columns:1fr}
  .f2-hero-media{width:min(100%,520px);justify-self:center}
  .f2-about{grid-template-columns:1fr}
  .f2-capsule{width:min(62%,320px);justify-self:center;grid-row:1}
  .f2-capsule img{aspect-ratio:3/5}
}
@media (max-width:760px){
  .f2-head{justify-content:center;text-align:center;padding-top:10px;padding-bottom:4px}
  .f2-nav{justify-content:center;gap:0 18px}
  .f2-nav a{font-size:13px;letter-spacing:.1em}
  .f2-hero{text-align:left}
  .f2-hero h1{font-size:clamp(32px,9.6vw,52px)}
  .f2-row{align-items:start}
  .f2-rn{padding-top:4px}
  .f2-row{grid-template-columns:44px minmax(0,1fr);padding-inline:0}
  .f2-row-side{grid-column:2;justify-content:flex-start}
  .f2-row h3 em{display:block;margin:0;white-space:normal}
  .f2-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:calc(-1 * var(--gut));padding:0 var(--gut) 10px;scroll-padding-inline:var(--gut);scrollbar-width:none}
  .f2-strip::-webkit-scrollbar{display:none}
  .f2-g{flex:none;width:74vw;scroll-snap-align:start;margin-top:0!important}
  .f2-g1,.f2-g2{width:62vw}
  .f2-frame{height:auto;aspect-ratio:4/5}
  .f2-g0 .f2-frame,.f2-g3 .f2-frame{aspect-ratio:auto;height:calc(62vw * 1.25)}
  .f2-arch{border-radius:50vw 50vw 20px 20px / 36vw 36vw 20px 20px;padding-top:clamp(96px,26vw,140px)}
}