/* ================= SUNNY DESIGN — shared styles (service pages) ================= */
@font-face{font-family:'huninn';src:url('https://cdn.jsdelivr.net/gh/justfont/open-huninn-font@2.1/font/jf-openhuninn-2.1.woff2') format('woff2');font-weight:400 700;font-display:swap}
:root{
  --black:#161616;--ink:#222;--yellow:#fcb61c;--yellow-soft:#fff3d6;--white:#fff;--gray:#7a7a7a;--gray-lite:#f5f5f4;--line:#06C755;--radius:22px;
  --cn:'huninn','Noto Sans TC',sans-serif;--en:'Baloo 2','Quicksand',var(--cn);--maxw:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--cn);color:var(--ink);background:var(--white);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.en{font-family:var(--en)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.hl{background:linear-gradient(180deg,transparent 58%,var(--yellow) 58%);padding:0 .1em;border-radius:4px}
.yellow{color:var(--yellow)}

/* NAV */
header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:2px solid var(--black)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{height:34px}
.nav-links{display:flex;align-items:center;gap:30px;font-weight:700;font-size:15px}
.nav-links a{position:relative;padding:4px 0}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:3px;background:var(--yellow);border-radius:3px;transition:.25s}
.nav-links a:hover::after{width:100%}
/* dropdown submenu */
.has-sub{position:relative;display:inline-flex;align-items:center}
.has-sub>a{display:inline-flex;align-items:center;gap:5px}
.has-sub .chev{transition:.2s}
.has-sub:hover .chev{transform:rotate(180deg)}
.submenu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(12px);background:#fff;border:2px solid var(--black);border-radius:16px;padding:10px;min-width:190px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transition:.2s;box-shadow:6px 6px 0 rgba(0,0,0,.10);z-index:120}
.submenu::before{content:'';position:absolute;top:-14px;left:0;right:0;height:14px}
.has-sub:hover .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(8px)}
.submenu a{padding:10px 16px;border-radius:10px;font-size:14.5px;white-space:nowrap;font-weight:700}
.submenu a::after{display:none!important}
.submenu a:hover{background:var(--yellow)}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--cn);font-weight:700;font-size:15px;padding:11px 22px;border-radius:100px;border:2px solid var(--black);background:var(--black);color:#fff;cursor:pointer;transition:.22s}
.btn:hover{background:var(--yellow);color:var(--black);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--black)}
.btn.ghost:hover{background:var(--yellow)}
.btn.line-btn{background:var(--line);border-color:var(--line);color:#fff}
.btn.line-btn:hover{background:#05a648;border-color:#05a648;color:#fff}
/* nav consult button — white oval, roomy padding, no underline */
.btn.consult{background:#fff;color:var(--black);border-color:var(--black);padding-left:34px;padding-right:34px}
.btn.consult:hover{background:var(--yellow);color:var(--black)}
.nav-links a.btn::after{display:none!important}
.hamb{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.hamb span{width:26px;height:3px;background:var(--black);border-radius:3px}

/* PAGE HEAD */
.phead{padding:70px 0 46px;position:relative;overflow:hidden}
.phead .blob{position:absolute;width:340px;height:340px;border-radius:50%;background:var(--yellow);opacity:.14;top:-110px;right:-70px}
.phead .blob.b2{width:14px;height:14px;opacity:1;top:120px;right:20%}
.crumb{font-weight:700;font-size:14px;color:var(--gray);margin-bottom:20px;position:relative}
.crumb a:hover{color:var(--black)}
.crumb .cur{color:var(--black)}
.phead-tag{font-family:var(--en);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);display:flex;align-items:center;gap:10px;margin-bottom:12px;position:relative}
.phead-tag::before{content:'';width:30px;height:3px;background:var(--yellow);border-radius:3px}
.phead h1{font-size:clamp(36px,5.4vw,62px);font-weight:900;color:var(--black);line-height:1.12;position:relative}
.phead .lead{color:var(--gray);margin-top:20px;max-width:640px;font-size:17px;position:relative}
.phead .head-meta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:28px;position:relative}
.price-chip{display:inline-flex;align-items:baseline;gap:8px;border:2px solid var(--black);background:var(--yellow);border-radius:100px;padding:10px 22px;font-weight:900;font-size:17px}
.price-chip .u{font-family:var(--en);font-size:14px;font-weight:600}

/* SECTIONS */
section{padding:76px 0}
.sec-head{margin-bottom:40px}
.sec-tag{font-family:var(--en);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);display:flex;align-items:center;gap:10px}
.sec-tag::before{content:'';width:30px;height:3px;background:var(--yellow);border-radius:3px}
.sec-head h2{font-size:clamp(26px,4vw,40px);font-weight:900;color:var(--black);margin-top:12px;line-height:1.25}
.sec-head p{color:var(--gray);margin-top:12px;max-width:600px}

/* WORKS GALLERY */
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;align-items:start}
.work{display:block;position:relative;border:2px solid var(--black);border-radius:var(--radius);overflow:hidden;background:#fff;transition:.25s}
a.work{cursor:pointer}
.work .ov .visit{display:inline-block;margin-top:7px;font-family:var(--en);font-size:12px;font-weight:700;letter-spacing:.05em;color:#fff;border-bottom:2px solid var(--yellow);padding-bottom:1px}
.work:hover{transform:translateY(-5px);box-shadow:7px 7px 0 var(--yellow)}
.work img{width:100%;height:100%;object-fit:cover;transition:.4s}
.work.contain img{object-fit:contain}
.work:hover img{transform:scale(1.04)}
.work.contain:hover img{transform:none}
.work .ov{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.82));color:#fff;transform:translateY(8px);opacity:0;transition:.28s}
.work:hover .ov{transform:translateY(0);opacity:1}
.work .ov .cat{font-family:var(--en);font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--yellow);text-transform:uppercase}
.work .ov h4{font-size:17px;font-weight:700;color:#fff}
.work .tag{position:absolute;top:14px;left:14px;background:var(--yellow);border:2px solid var(--black);color:var(--black);font-weight:700;font-size:12px;padding:4px 12px;border-radius:100px;z-index:2}
.c12{grid-column:span 12}.c8{grid-column:span 8}.c6{grid-column:span 6}.c4{grid-column:span 4}.c3{grid-column:span 3}
.ratio-wide{aspect-ratio:16/9}.ratio-app{aspect-ratio:9/16}.ratio-sq{aspect-ratio:1/1}.ratio-tall{aspect-ratio:4/5}.ratio-43{aspect-ratio:4/3}.ratio-phone{aspect-ratio:83/180}
.gal video{width:100%;height:100%;object-fit:cover;display:block;background:#000}

/* PRICING */
.pricing-wrap{background:var(--gray-lite);border-top:2px solid var(--black);border-bottom:2px solid var(--black)}
.plan-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.plan-cards.three{grid-template-columns:repeat(3,1fr)}
.plan-cards.four{grid-template-columns:repeat(4,1fr)}
.pcard{border:2px solid var(--black);border-radius:var(--radius);padding:26px;background:#fff;transition:.22s;position:relative}
.pcard:hover{transform:translateY(-5px);box-shadow:7px 7px 0 var(--yellow)}
.pcard.dark{background:var(--black);color:#fff}
.pcard.dark .p-name{color:#fff}.pcard.dark li{color:#d5d5d5}
.pcard .p-name{font-size:19px;font-weight:900;color:var(--black)}
.pcard .p-amt{font-family:var(--en);font-size:34px;font-weight:800;color:var(--black);margin:10px 0 4px}
.pcard.dark .p-amt{color:var(--yellow)}
.pcard .p-amt small{font-size:15px;color:var(--gray);font-weight:600}
.pcard .p-unit{font-size:13px;color:var(--gray);margin-bottom:16px}
.pcard.dark .p-unit{color:#aaa}
.pcard ul{list-style:none;border-top:1px dashed #ddd;padding-top:16px}
.pcard.dark ul{border-color:#3a3a3a}
.pcard li{display:flex;gap:9px;font-size:14px;margin-bottom:10px;align-items:flex-start}
.pcard li svg{flex:none;margin-top:3px}
.tag-pill{position:absolute;top:-13px;right:20px;background:var(--yellow);border:2px solid var(--black);font-weight:700;font-size:12px;padding:4px 14px;border-radius:100px}
.items{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.items span{border:2px solid var(--black);border-radius:100px;padding:7px 16px;font-weight:700;font-size:14px;background:#fff}
.items span.y{background:var(--yellow)}
.note{display:flex;gap:10px;align-items:flex-start;background:#fff;border:2px solid var(--black);border-radius:16px;padding:14px 18px;margin-top:22px;font-size:14px}
.note svg{flex:none;margin-top:3px;color:var(--yellow)}

/* pricing table (web) */
.tbl-scroll{overflow-x:auto;border:2px solid var(--black);border-radius:var(--radius);background:#fff}
table.pricing{border-collapse:collapse;width:100%;min-width:820px;background:#fff}
table.pricing th,table.pricing td{padding:15px 18px;text-align:center;border-bottom:1px solid #ececec;font-size:14.5px}
table.pricing thead th{background:#fff;vertical-align:bottom;border-bottom:2px solid var(--black)}
table.pricing thead .plan{font-size:20px;font-weight:900;color:var(--black)}
table.pricing thead .amt{font-family:var(--en);font-size:26px;font-weight:800;color:var(--black);line-height:1.1}
table.pricing thead .amt small{font-size:14px;color:var(--gray);font-weight:600}
table.pricing tbody th{text-align:left;font-weight:700;color:var(--black);background:#fafafa}
table.pricing tbody td.sub{text-align:left;color:var(--gray);font-size:12.5px;font-weight:400}
.rowcat td{background:var(--black);color:#fff;text-align:left;font-weight:700;font-size:14px;letter-spacing:.04em}
.check{color:var(--black)}.dash{color:#ccc}
.feat-col{background:var(--yellow-soft)!important}
th.feat-col{border-top:3px solid var(--yellow);border-left:2px solid var(--black);border-right:2px solid var(--black)}
td.feat-col{border-left:2px solid var(--black);border-right:2px solid var(--black)}
.badge{display:inline-block;background:var(--black);color:var(--yellow);font-size:11px;font-weight:700;padding:3px 10px;border-radius:100px;margin-bottom:8px;letter-spacing:.05em}
.plan-note{font-size:12px;color:var(--gray);font-weight:500}

/* OTHER SERVICES */
.others{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.others a{display:flex;align-items:center;justify-content:space-between;gap:12px;border:2px solid var(--black);border-radius:16px;padding:18px 22px;font-weight:800;font-size:17px;background:#fff;transition:.22s}
.others a:hover{background:var(--yellow);transform:translateY(-3px);box-shadow:5px 5px 0 var(--black)}
.others a .arw{width:32px;height:32px;border-radius:50%;background:var(--black);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;transition:.22s}
.others a:hover .arw{background:#fff;color:var(--black)}

/* CTA */
.cta{background:var(--yellow);text-align:center;padding:80px 0}
.cta h2{font-size:clamp(26px,4.4vw,48px);font-weight:900;color:var(--black)}
.cta p{color:var(--ink);margin:16px auto 30px;max-width:520px;font-size:17px}
.cta .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta .btn.mail,.cta .btn.lt{background:#fff;color:var(--black);border-color:var(--black)}
.cta .btn.mail:hover,.cta .btn.lt:hover{background:var(--black);color:#fff}
.cta .btn.dk{background:var(--black);color:#fff;border-color:var(--black)}
.cta .btn.dk:hover{background:#fff;color:var(--black)}

/* FOOTER */
footer{background:var(--black);color:#fff;padding:60px 0 28px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding-bottom:38px;border-bottom:1px solid #3a3a3a}
.foot-grid img{height:34px;margin-bottom:16px}
.foot-grid .desc{color:#b0b0b0;font-size:14px;max-width:320px}
.foot-col h5{font-weight:700;font-size:15px;margin-bottom:14px;color:var(--yellow)}
.foot-col a{display:block;color:#cfcfcf;font-size:14px;margin-bottom:10px;transition:.2s}
.foot-col a:hover{color:var(--yellow)}
.foot-col a.line-link{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:700;margin-bottom:12px}
.foot-col a.line-link:hover{color:var(--yellow)}
.foot-bot{padding-top:22px;color:#8a8a8a;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* reveal */
.js .rv{opacity:0;transform:translateY(26px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.js .rv.show{opacity:1;transform:none}

@media(max-width:940px){
  .plan-cards.four{grid-template-columns:repeat(2,1fr)}
  .plan-cards.three{grid-template-columns:1fr 1fr}
  .others{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .c8,.c6,.c4,.c3{grid-column:span 6}
}
@media(max-width:640px){
  .nav-links{display:none}.hamb{display:flex}
  .nav-links.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;background:#fff;border-bottom:2px solid var(--black);padding:20px 24px;gap:16px;align-items:flex-start}
  .has-sub{flex-direction:column;align-items:flex-start;width:100%}
  .submenu{position:static;transform:none!important;opacity:1;visibility:visible;border:none;box-shadow:none;padding:8px 0 0 14px;min-width:auto;gap:4px}
  .submenu::before{display:none}
  .has-sub .chev{display:none}
  section{padding:52px 0}
  .plan-cards,.plan-cards.three,.plan-cards.four{grid-template-columns:1fr}
  .others{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(6,1fr)}
  .c12,.c8,.c6{grid-column:span 6}
  .c4,.c3{grid-column:span 3}
  .foot-grid{grid-template-columns:1fr}
}