:root{--contact-gold:#a07f4b;--contact-card:#f3f2f0}
html{background:#050505}.contact-template{min-height:0!important;margin:0;padding:0;background:#050505}.contact-page{background:#fff}.contact-template .services-footer{display:grid;width:100%;margin:0;border:0;border-radius:0}
.contact-story{min-height:1040px;padding:118px 0 92px;background:#fff url("../images/Contact_hero_bg.jpg") right top/1920px 607px no-repeat}.contact-visual{display:none}.contact-shell{display:block}.contact-copy{width:620px;padding-left:57px;color:#222}.contact-eyebrow{margin:0 0 10px;color:var(--contact-gold);font:200 18px/1.4 Raleway,sans-serif;transform:scaleX(.95);transform-origin:left center}.contact-copy h1{position:static;display:block;width:auto;height:auto;inset:auto;z-index:auto;margin:0;color:#000;opacity:1;font:300 75px/1 "Times New Roman",Times,serif;letter-spacing:0;text-transform:none;transform:translateX(-2px) scaleX(.95);transform-origin:left center}.contact-rule{display:block;width:60px;height:1px;margin:20px 1px;background:var(--contact-gold)}.contact-subtitle{margin:0 0 18px;color:var(--contact-gold)!important;font-family:"Noto Sans TC","Source Han Sans TC",sans-serif!important;font-size:20px!important;font-weight:300;line-height:1.65;letter-spacing:0;transform:scaleX(.95);transform-origin:left center}.contact-description p{margin:0;color:#000;font-family:"Noto Sans TC","Source Han Sans TC",sans-serif;font-size:15px;font-weight:300;line-height:2.05;letter-spacing:0;transform:scaleX(.95);transform-origin:left center}
.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:34px}.contact-card{position:relative;min-height:90px;display:flex;flex-direction:column;justify-content:center;padding:13px 15px;border:1px solid transparent;border-radius:20px;background:rgba(243,242,240,.88);color:#252525;text-decoration:none;overflow:hidden;transform:translateY(0);transition:transform .58s cubic-bezier(.22,.61,.36,1),background-color .58s ease,border-color .58s ease,box-shadow .58s ease}.contact-card:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(196,154,92,.12),transparent 55%);opacity:0;transition:opacity .58s ease}.contact-card-title{position:relative;z-index:1;font:300 20px/1.4 Raleway,"Noto Sans TC",sans-serif;letter-spacing:.02em;transform:scaleX(.95);transform-origin:left center}.contact-card-line{position:relative;z-index:1;display:block;width:100%;height:1px;margin:4px 0 8px;background:rgba(70,66,60,.35);transition:background-color .5s ease}.contact-card-detail{position:relative;z-index:1;font-size:15px;font-weight:300;line-height:1.5;transform:scaleX(.95);transform-origin:left center}.contact-card-qr{padding-right:104px}.contact-card-qr img{position:absolute;z-index:1;right:12px;top:50%;width:78px;height:78px;object-fit:cover;transform:translateY(-50%) scale(1);transform-origin:center;transition:transform .65s cubic-bezier(.22,.61,.36,1),filter .58s ease}.contact-card:hover{transform:translateY(-3px);border-color:rgba(196,154,92,.55);background:#faf8f4;box-shadow:0 14px 34px rgba(83,65,42,.11)}.contact-card:hover:after{opacity:1}.contact-card:hover .contact-card-line{background:#c49a5c}.contact-card:hover img{transform:translateY(-50%) scale(1.045);filter:contrast(1.03)}
.contact-belief{margin:56px 0 0;color:#2b2b2b;font-size:20px;font-weight:300;line-height:1.6;transform:scaleX(.95);transform-origin:left center}.contact-signature{display:flex;align-items:center;gap:22px;margin-top:46px;color:#b2946f;font-size:16px;font-weight:300}.contact-signature img{display:block;width:170px;height:auto}.contact-signature span{transform:scaleX(.95);transform-origin:left center}.contact-motion .contact-intro>*,.contact-motion .contact-grid,.contact-motion .contact-belief,.contact-motion .contact-signature{opacity:.15;-webkit-mask-image:linear-gradient(135deg,#000 0%,#000 34%,rgba(0,0,0,.82) 43%,rgba(0,0,0,.5) 53%,rgba(0,0,0,.18) 63%,transparent 72%);mask-image:linear-gradient(135deg,#000 0%,#000 34%,rgba(0,0,0,.82) 43%,rgba(0,0,0,.5) 53%,rgba(0,0,0,.18) 63%,transparent 72%);-webkit-mask-size:260% 260%;mask-size:260% 260%;-webkit-mask-position:100% 100%;mask-position:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
@media(max-width:1248px) and (min-width:900px){.contact-copy{padding-left:36px}}
@media(max-width:899px){.contact-story{min-height:0;padding:0 0 70px;background:none}.contact-visual{display:block;width:100%;height:300px;background:#fff url("../images/Contact_hero_bg.jpg") 60% center/auto 300px no-repeat}.contact-shell{width:min(calc(100% - 64px),720px);padding-top:42px}.contact-copy{width:100%;padding:0}.contact-copy h1{font-size:54px}.contact-subtitle{font-size:18px!important}.contact-grid{max-width:620px}.contact-description br{display:none}}
@media(max-width:767px){.contact-story{padding-bottom:54px}.contact-visual{height:220px;margin-top:64px;background-position:61% center;background-size:auto 220px}.contact-shell{width:100%;padding:32px 20px 0}.contact-eyebrow{font-size:15px}.contact-copy h1{font-size:44px;transform:none}.contact-rule{width:100%;margin:18px 0}.contact-subtitle{font-size:18px!important;line-height:1.65;transform:none}.contact-description p{font-size:15px;line-height:1.85;transform:none}.contact-grid{grid-template-columns:1fr;gap:12px;margin-top:28px}.contact-card{min-height:88px;border-radius:16px}.contact-card-title,.contact-card-detail{transform:none}.contact-card-qr{min-height:112px;padding-right:118px}.contact-card-qr img{right:14px;width:88px;height:88px}.contact-belief{margin-top:42px;font-size:18px;line-height:1.65;transform:none}.contact-signature{gap:16px;margin-top:38px;font-size:14px}.contact-signature img{width:135px}}
@media(max-width:390px){.contact-copy h1{font-size:40px}.contact-subtitle{font-size:17px!important}.contact-card-detail{font-size:14px}}
@media(prefers-reduced-motion:reduce){.contact-card,.contact-card img{transition:none}.contact-motion .contact-intro>*,.contact-motion .contact-grid,.contact-motion .contact-belief,.contact-motion .contact-signature{opacity:1;mask-image:none;-webkit-mask-image:none}}

/* Fixed-position, soft contact-card interaction. */
.contact-story{background-position:center top}
.contact-card{transform:none;transition:background-color .7s ease,border-color .7s ease,box-shadow .7s ease}
.contact-card:hover{transform:none;border-color:rgba(196,154,92,.48);background:#faf8f4;box-shadow:0 8px 24px rgba(83,65,42,.075)}
.contact-card-qr img{transition:transform .75s cubic-bezier(.22,.61,.36,1),filter .7s ease}
.contact-card:hover img{transform:translateY(-50%) scale(1.018);filter:contrast(1.02)}

/* Keep the in-card QR sharp; reveal a full QR preview in the open right column. */
.contact-grid{position:relative}
.contact-card-qr:hover>img{transform:translateY(-50%) scale(1);filter:none}
.contact-qr-preview{display:none}
@media(min-width:1250px){
  .contact-qr-preview{position:absolute;left:calc(100% + 72px);top:-30px;display:block;width:300px;height:300px;padding:14px;border:1px solid rgba(196,154,92,.25);border-radius:22px;background:rgba(255,255,255,.96);box-shadow:0 18px 46px rgba(61,49,34,.1);opacity:0;transform:translateX(10px);pointer-events:none;transition:opacity .65s ease,transform .65s cubic-bezier(.22,.61,.36,1)}
  .contact-qr-preview img{position:absolute;inset:14px;width:272px;height:272px;object-fit:contain;opacity:0;transition:opacity .55s ease}
  .contact-grid:has(.contact-card-line-app:hover) .contact-qr-preview,.contact-grid:has(.contact-card-line-app:focus-visible) .contact-qr-preview,.contact-grid:has(.contact-card-wechat:hover) .contact-qr-preview,.contact-grid:has(.contact-card-wechat:focus-visible) .contact-qr-preview{opacity:1;transform:translateX(0)}
  .contact-grid:has(.contact-card-line-app:hover) .contact-qr-preview-line,.contact-grid:has(.contact-card-line-app:focus-visible) .contact-qr-preview-line{opacity:1}
  .contact-grid:has(.contact-card-wechat:hover) .contact-qr-preview-wechat,.contact-grid:has(.contact-card-wechat:focus-visible) .contact-qr-preview-wechat{opacity:1}
}