:root {
  --p-bg:#f6f4ff; --p-surface:#fff; --p-ink:#1d1b33; --p-muted:#5d5a7a;
  --p-accent:#7b4dff; --p-accent-ink:#fff; --p-action:#06c755; --p-action-ink:#fff;
  --p-inv-bg:#151a3a; --p-inv-surface:#20264d; --p-inv-ink:#fff; --p-inv-muted:#d4d1e5;
  --p-inv-accent:#f5c542; --p-inv-accent-ink:#151a3a; --p-inv-action:#06c755; --p-inv-action-ink:#fff;
  --font-display:"Figtree","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --font-text:"Figtree","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --line:#e5e0f0; --container:1180px; --gut:clamp(20px,4vw,48px); --nav:72px;
  color:var(--p-ink); background:var(--p-bg); font-family:var(--font-text); scroll-behavior:smooth;
}
*,*::before,*::after{box-sizing:border-box} html,body{margin:0;min-width:0;width:100%}
body{overflow-x:clip;color:var(--p-ink);line-height:1.6} img{display:block;max-width:100%;height:auto}
a{color:inherit} .wrap{width:min(100% - 2 * var(--gut),var(--container));margin-inline:auto}
.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:12px;top:12px;z-index:100;background:#fff;padding:10px}
.nav{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 3px 16px #1d1b3318}
.nav__bar{min-height:var(--nav);display:flex;align-items:center;gap:20px}
.nav__logo{display:flex;align-items:center;gap:9px;flex:none;color:var(--p-accent);font-size:17px;font-weight:900;text-decoration:none}
.nav__logo img{width:36px;height:36px;object-fit:contain}.nav__links{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.7vw,24px);margin-left:auto}
.nav__link{font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}.nav__link:hover{color:var(--p-accent)}
.nav__actions{display:flex;align-items:center;gap:12px}.social-link{font-size:13px;font-weight:700;text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 20px;border-radius:999px;background:var(--p-action);color:#fff;font-weight:700;text-decoration:none;text-align:center}
.btn:hover{filter:brightness(.95);transform:translateY(-1px)}.btn--secondary{background:#fff;color:var(--p-ink);border:1px solid var(--line)}
.nav__toggle{display:none}.hero{padding:24px 0 0}.hero__frame{position:relative;isolation:isolate;overflow:hidden;background:#181b3a}
.hero__frame::before{content:"";position:absolute;inset:-24px;z-index:-1;background:url("assets/img/client/banner-bg.png") center/cover;filter:blur(12px);opacity:.8}
.hero__frame img{width:100%;max-height:540px;object-fit:contain;margin-inline:auto}.hero__actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;padding:20px 0 0}
.section{padding-block:64px}.section-heading{margin-bottom:24px}.section-heading h1,.section-heading h2{margin:0;color:var(--p-ink);font-size:clamp(28px,3vw,40px);line-height:1.2}
.section-heading p{margin:0 0 6px;color:var(--p-accent);font-weight:700}.card{min-width:0;padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--p-surface);box-shadow:0 5px 18px #2014430a;transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 24px #20144314}.about-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin:0;padding:0;list-style:none}
.about-list li{padding:10px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.about-list li:first-child{grid-column:1/-1;color:var(--p-accent);font-weight:800}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.service-card{padding:0;overflow:hidden;color:inherit;text-decoration:none}
.service-card img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#f4f1fc;padding:10px}.service-card__text{padding:14px 16px 16px}.service-card h3{margin:0 0 6px;font-size:17px;line-height:1.35}.service-card span{color:var(--p-accent);font-size:14px;font-weight:700}
.reason-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.reason-card img{width:52px;height:52px;object-fit:contain;margin-bottom:12px}.reason-card p{margin:0}
.review-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.review-preview img,.review-grid img{width:100%;height:auto;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:10px}
.text-link{display:inline-block;margin-top:16px;color:var(--p-accent);font-weight:800;text-decoration:none}.cta-band{padding:30px 0;background:var(--p-inv-bg);color:var(--p-inv-ink)}.cta-band__inner{display:flex;align-items:center;justify-content:space-between;gap:18px}.cta-band h2{margin:0;font-size:clamp(20px,2.5vw,30px)}
.breadcrumbs{padding-top:26px;color:var(--p-muted);font-size:14px}.breadcrumbs a{color:var(--p-accent)}.service-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.9fr);gap:28px;align-items:start}.service-detail__image{width:100%;max-height:440px;object-fit:contain;background:#fff;border-radius:14px}.service-detail__copy p{margin:0 0 18px}.service-detail__copy .muted{color:var(--p-muted)}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;list-style:none}.chips li{padding:7px 12px;border-radius:999px;background:#eee9fb;color:var(--p-ink);font-size:14px;font-weight:700}.note-list{padding-left:1.4em}.note-list li{padding:5px 0}.service-links{display:flex;flex-wrap:wrap;gap:10px}.service-links a{padding:9px 12px;border:1px solid var(--line);border-radius:9px;text-decoration:none;font-weight:700}
.review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.info-block{margin-top:26px}.faq-list details{padding:15px 0;border-bottom:1px solid var(--line)}.faq-list summary{cursor:pointer;font-weight:800}.faq-list p{margin:10px 0}.faq-list a{color:var(--p-accent)}
.site-footer{padding:30px 0;background:var(--p-inv-bg);color:#fff}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.footer-links{display:flex;gap:16px;flex-wrap:wrap}.footer-links a{color:#fff;text-decoration:none}.footer-copy{width:100%;padding-top:15px;border-top:1px solid #ffffff30;color:#d4d1e5;font-size:13px}
.floating-line{display:none}.privacy-card{max-width:850px;margin:40px auto;padding:28px;border-radius:16px;background:#fff}.privacy-card h1{margin:0 0 20px}.privacy-card p{margin:12px 0;color:var(--p-muted)}
@media(max-width:1000px){.nav__links{display:none}.nav__toggle{display:grid;place-items:center;width:40px;height:40px;margin-left:auto;border:1px solid var(--line);border-radius:50%;background:#fff;font-size:20px}.nav.is-open .nav__links{position:absolute;top:var(--nav);left:0;right:0;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:10px var(--gut) 18px;background:#fff;box-shadow:0 8px 16px #1d1b3318}.nav.is-open .nav__link{padding:11px 0}.nav__actions .social-link{display:none}.nav__actions{margin-left:auto}}
@media(max-width:700px){:root{--nav:64px}.section{padding-block:40px}.service-grid,.reason-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card{padding:16px}.service-card{padding:0}.review-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.service-detail{grid-template-columns:1fr;gap:18px}.service-detail__image{max-height:none}.about-list{grid-template-columns:1fr}.about-list li:first-child{grid-column:auto}.review-preview{gap:10px}.cta-band__inner{align-items:flex-start;flex-direction:column}.floating-line{position:fixed;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:60;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#06c755;color:white;font-weight:800;text-decoration:none;box-shadow:0 5px 18px #1d1b3344}}
@media(max-width:420px){.nav__bar{gap:8px}.nav__logo{font-size:14px;gap:5px}.nav__logo img{width:30px;height:30px}.nav__actions .btn{min-height:38px;padding:7px 11px;font-size:12px}.nav__toggle{width:34px;height:34px}.service-card h3{font-size:15px}.reason-card{padding:13px}.hero__actions .btn{padding-inline:14px;font-size:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
.hero__kicker{text-align:center;margin:18px 0 0;color:var(--p-accent);font-weight:800}
.hero-title{text-align:center;margin:14px 0 0;font-size:clamp(26px,4vw,42px);line-height:1.2}.hero__kicker{margin-top:8px}
/* manager fix: undo the kit's one-section-per-screen rule (system.css sets section height to 100vh and a 120px top pad) */
main > :is(section,.section,.hero){height:auto!important;min-height:0!important}
main > :is(section,.section){padding-block:64px!important}
main > .hero{padding:24px 0 0!important}
main > .cta-band{padding-block:30px!important}
@media(max-width:700px){main > :is(section,.section){padding-block:40px!important}}
/* the banner already shows the studio name: keep the h1 for search engines and screen readers only */
.hero-title{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.faq-answer{margin:10px 0 4px;color:var(--p-accent)}.faq-points{margin:0;padding-left:1.3em}.faq-points li{padding:3px 0}
.promo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.promo-grid img{width:100%;height:auto;border:1px solid var(--line);border-radius:10px;background:#fff}
.service-detail__image[src*="icon-"]{max-height:280px;padding:24px;border:1px solid var(--line)}
@media(max-width:700px){.promo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.about-list li.about-highlight{grid-column:1/-1;text-align:center;font-size:clamp(20px,2.4vw,26px);font-weight:900;color:var(--p-accent);padding:14px 0}
.hero__actions{padding-top:24px}