/* FNB-07 娘惹糕坊 — Nyonya kuih. Libre Caslon Text + Noto Serif SC + DM Sans. */
.tpl-fnb-07{--gut:clamp(16px,5vw,88px);--max:1360px;--pad-x:max(var(--gut),calc((100% - var(--max))/2 + var(--gut)));--serif:"Libre Caslon Text","Noto Serif SC",Georgia,serif;--cn:"Noto Serif SC","Libre Caslon Text",serif;--p:var(--petal,color-mix(in srgb,var(--accent) 45%,var(--soft)));--ts:64px;font-family:"DM Sans","Noto Sans SC",system-ui,sans-serif;font-size:16.5px;line-height:1.75}
.tpl-fnb-07 h1,.tpl-fnb-07 h2,.tpl-fnb-07 h3{font-family:var(--cn);font-weight:600}
.f7-main>section{padding:clamp(72px,9vw,136px) var(--pad-x)}

/* Peranakan tile, CSS only: corner quarter-flowers, centre rosette, four petals. */
.f7-tile{background-color:var(--bg);background-image:
  radial-gradient(circle at 50% 50%,var(--p) 0 4px,transparent 4.5px),
  radial-gradient(circle at 50% 50%,transparent 0 8px,var(--accent) 8.5px 10px,transparent 10.5px),
  radial-gradient(ellipse 4.5px 9px at 50% 17%,var(--p) 96%,transparent),
  radial-gradient(ellipse 4.5px 9px at 50% 83%,var(--p) 96%,transparent),
  radial-gradient(ellipse 9px 4.5px at 17% 50%,var(--p) 96%,transparent),
  radial-gradient(ellipse 9px 4.5px at 83% 50%,var(--p) 96%,transparent),
  radial-gradient(circle at 0 0,var(--accent) 0 11px,transparent 11.5px 15px,color-mix(in srgb,var(--accent) 45%,transparent) 15.5px 16.5px,transparent 17px),
  radial-gradient(circle at 100% 0,var(--accent) 0 11px,transparent 11.5px 15px,color-mix(in srgb,var(--accent) 45%,transparent) 15.5px 16.5px,transparent 17px),
  radial-gradient(circle at 0 100%,var(--accent) 0 11px,transparent 11.5px 15px,color-mix(in srgb,var(--accent) 45%,transparent) 15.5px 16.5px,transparent 17px),
  radial-gradient(circle at 100% 100%,var(--accent) 0 11px,transparent 11.5px 15px,color-mix(in srgb,var(--accent) 45%,transparent) 15.5px 16.5px,transparent 17px),
  linear-gradient(45deg,transparent calc(50% - .8px),color-mix(in srgb,var(--accent) 45%,transparent) calc(50% - .8px) calc(50% + .8px),transparent calc(50% + .8px)),
  linear-gradient(-45deg,transparent calc(50% - .8px),color-mix(in srgb,var(--accent) 45%,transparent) calc(50% - .8px) calc(50% + .8px),transparent calc(50% + .8px));
  background-size:var(--ts) var(--ts);background-position:center}

.f7-kicker{margin:0 0 18px;color:var(--accent);font-size:12.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase}
.f7-flower{display:block;width:30px;height:30px;color:var(--p)}
.f7-flower .f7-eye{fill:var(--bg)}

/* top ribbon + header */
.f7-ribbon{height:14px;background-color:var(--accent);background-image:radial-gradient(circle at 50% 50%,var(--p) 0 3px,transparent 3.5px),linear-gradient(45deg,transparent 46%,color-mix(in srgb,var(--on-accent) 35%,transparent) 47% 53%,transparent 54%),linear-gradient(-45deg,transparent 46%,color-mix(in srgb,var(--on-accent) 35%,transparent) 47% 53%,transparent 54%);background-size:14px 14px}
.f7-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 30px;padding:16px var(--pad-x);border-bottom:1px solid var(--line)}
.f7-brand{margin-right:auto;font-family:var(--cn);font-weight:600;font-size:clamp(19px,1.7vw,23px);letter-spacing:.04em;text-decoration:none;min-height:44px;display:flex;align-items:center;line-height:1.2}
.f7-nav{display:flex;flex-wrap:wrap;gap:0 clamp(14px,2vw,28px)}
.f7-nav a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none;font-size:14.5px;font-weight:500;color:var(--muted)}
.f7-nav a:hover{color:var(--accent)}
.f7-head-cta{display:inline-flex;align-items:center;min-height:46px;padding:8px 22px;border-radius:999px;background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:700;font-size:14.5px;white-space:nowrap}

/* hero: arch on a tile panel */
.f7-main>.f7-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,7vw,120px);align-items:center;padding-top:clamp(48px,6vw,96px)}
.f7-hero--text{grid-template-columns:minmax(0,1fr)!important;text-align:center}
.f7-hero--text .f7-hero-copy{max-width:860px;margin:0 auto}
.f7-hero--text .f7-actions{justify-content:center}
.f7-hero h1{font-size:clamp(44px,5.8vw,90px);line-height:1.18;letter-spacing:.01em;margin-bottom:26px}
.f7-sub{font-size:clamp(17px,1.35vw,19.5px);color:var(--muted);max-width:30em}
.f7-sub p:last-child{margin:0}
.f7-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3vw,44px)}
.f7-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:14px 32px;border-radius:999px;background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:700;font-size:16px;letter-spacing:.02em;transition:transform .2s}
.f7-btn:hover{transform:translateY(-2px)}
.f7-btn2{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:14px 28px;border-radius:999px;border:1px solid var(--accent);color:var(--accent);text-decoration:none;font-weight:700;font-size:16px}
.f7-btn2:hover{background:var(--soft)}
.f7-hero-media{position:relative;margin:0;padding:0 0 clamp(36px,4.4vw,64px) clamp(36px,4.4vw,64px);max-width:540px;justify-self:end;width:100%}
.f7-hero-tile{position:absolute;left:0;bottom:0;width:82%;height:76%;border-radius:4px}
.f7-arch{position:relative;border-radius:999px 999px 6px 6px;overflow:hidden;box-shadow:0 0 0 8px var(--bg),0 0 0 9px var(--line)}
.f7-arch img{width:100%;aspect-ratio:4/5.2;object-fit:cover}

.f7-band{height:44px;border-block:1px solid var(--line)}

/* about: tile-framed photo */
.f7-main>.f7-about{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(40px,8vw,128px);align-items:center;background:var(--soft)}
.f7-about--text{grid-template-columns:minmax(0,1fr)!important}
.f7-about--text .f7-about-copy{max-width:760px;margin:0 auto}
.f7-about-media{margin:0;padding:clamp(16px,1.8vw,24px);border-radius:4px}
.f7-about-media img{width:100%;aspect-ratio:4/4.6;object-fit:cover;box-shadow:0 0 0 6px var(--bg)}
.f7-main h2{font-size:clamp(32px,4vw,56px);line-height:1.25;letter-spacing:.01em}
.f7-about h2{margin-bottom:clamp(24px,3vw,36px)}
.f7-about-body{font-size:clamp(16.5px,1.3vw,18.5px);color:var(--muted);max-width:32em}
.f7-about-body p:first-child{font-family:var(--cn);color:var(--fg);font-size:clamp(18px,1.5vw,21px);line-height:1.8}
.f7-steps li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.f7-steps p{margin:0;font-family:var(--cn);font-size:clamp(17px,1.4vw,19px)}

/* services: porcelain labels */
.f7-center{text-align:center;max-width:720px;margin:0 auto clamp(36px,5vw,64px)}
.f7-center .f7-flower{margin:0 auto 16px}
.f7-intro{color:var(--muted);margin-top:16px}
.f7-intro p:last-child{margin:0}
.f7-labels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:clamp(16px,2vw,28px);max-width:1240px;margin:0 auto}
.f7-label{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(32px,3vw,44px) clamp(20px,2vw,28px) 20px;border:1px solid var(--accent);border-radius:999px 999px 18px 18px;outline:1px solid var(--line);outline-offset:-8px;background:var(--bg)}
.f7-label .f7-flower{width:34px;height:34px;margin-bottom:16px;color:var(--accent)}
.f7-label h3{font-size:clamp(20px,1.7vw,24px);line-height:1.4}
.f7-desc{margin-top:10px;color:var(--muted);font-size:15.5px}
.f7-desc p{margin:0}
.f7-price{margin:8px 0 0;font-family:var(--serif);color:var(--accent)}
.f7-ask{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;min-height:44px;font-size:13.5px;font-weight:700;letter-spacing:.06em;color:var(--accent);text-decoration:none}
.f7-ask::after{content:"→";margin-left:8px;transition:transform .2s}
.f7-ask:hover::after{transform:translateX(3px)}

/* gallery: arched windows */
.f7-main>.f7-work{background:var(--soft)}
.f7-gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px);max-width:1240px;margin:0 auto}
.f7-gal--1,.f7-gal--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px}
.f7-gal--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.f7-shot{margin:0;text-align:center}
.f7-window{border-radius:999px 999px 6px 6px;overflow:hidden;box-shadow:0 0 0 6px var(--bg),0 0 0 7px var(--line)}
.f7-window img{width:100%;aspect-ratio:3/4.2;object-fit:cover;transition:transform .7s ease}
.f7-shot:hover .f7-window img{transform:scale(1.04)}
.f7-shot figcaption{margin-top:18px;font-family:var(--cn);font-size:16px}

/* testimonials */
.f7-quote-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px;max-width:1160px;margin:0 auto;text-align:center}
.f7-quote-list blockquote{font-family:var(--cn);font-size:18px}
.f7-quote-list figcaption{margin-top:12px;color:var(--accent);font-weight:700}

/* faq */
.f7-main>.f7-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,6vw,100px);align-items:start}
.f7-faq-list{border-top:1px solid var(--accent)}
.f7-faq-list details{border-bottom:1px solid var(--line)}
.f7-faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--cn);font-size:clamp(17px,1.4vw,19.5px);line-height:1.5;padding:22px 0;min-height:44px}
.f7-faq-list summary::after{flex:none;float:none;margin:0;color:var(--accent);font-size:24px;line-height:1}
.f7-faq-list details p{color:var(--muted);margin:0 0 22px}

/* contact: jade panel inside a tile frame */
.f7-main>.f7-contact{padding-top:0}
.f7-frame{padding:clamp(16px,2vw,28px);border-radius:6px;max-width:1120px;margin:0 auto}
.f7-panel{background:var(--accent);color:var(--on-accent);text-align:center;padding:clamp(48px,7vw,100px) clamp(20px,6vw,88px);border-radius:2px;box-shadow:inset 0 0 0 8px var(--accent),inset 0 0 0 9px color-mix(in srgb,var(--on-accent) 35%,transparent)}
.f7-panel .f7-flower{margin:0 auto 18px;width:38px;height:38px;color:var(--p)}
.f7-panel .f7-flower .f7-eye{fill:var(--accent)}
.f7-panel h2{font-size:clamp(34px,4.4vw,60px);margin-bottom:16px}
.f7-contact-intro{max-width:30em;margin:0 auto 32px;opacity:.92}
.f7-contact-intro p:last-child{margin:0}
.f7-btn--inv{background:var(--on-accent);color:var(--accent)}
.f7-contact-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:4px 24px;max-width:900px;margin:40px auto 0;padding-top:20px;border-top:1px solid color-mix(in srgb,var(--on-accent) 30%,transparent)}
.f7-contact-list li{padding:8px 0}
.f7-contact-list a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-weight:700}
.f7-social{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 24px;margin-top:12px}
.f7-social a{min-height:44px;display:inline-flex;align-items:center;font-weight:700}
.f7-foot{display:flex;flex-direction:column;align-items:center;gap:4px;padding:40px var(--pad-x) 40px;text-align:center;font-size:13px;color:var(--muted)}
.f7-foot .f7-flower{width:24px;height:24px;margin-bottom:8px}
.f7-foot-brand{font-family:var(--cn);font-weight:600;font-size:18px;color:var(--fg)}

@media (max-width:900px){
  .f7-main>.f7-hero,.f7-main>.f7-about,.f7-main>.f7-faq{grid-template-columns:minmax(0,1fr)}
  .f7-hero-media{justify-self:center;max-width:460px}
  .f7-about-media{max-width:480px;justify-self:center;width:100%}
  .f7-gal,.f7-gal--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .f7-head{gap:0 12px;padding-block:8px}
  .f7-nav{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;gap:0 18px}
  .f7-nav a{white-space:nowrap}
  .f7-head-cta{display:none}
  .f7-hero h1{font-size:clamp(36px,10.5vw,50px)}
  .f7-actions>*{flex:1 1 100%}
  .f7-hero-media{padding:0 0 22px 22px}
  .f7-band{height:32px}
  .tpl-fnb-07{--ts:48px}
  .f7-label{border-radius:160px 160px 16px 16px}
  .f7-gal{gap:18px 12px}
  .f7-window{box-shadow:0 0 0 4px var(--bg),0 0 0 5px var(--line)}
  .f7-shot figcaption{font-size:14.5px;margin-top:12px}
  .f7-frame{padding:10px}
}