/* Site header shared by the homepage and every inner page: wordmark, main menu, language switch,
   free-consultation button, floating contact buttons, mobile bottom bar and mobile menu dialog.
   Scoped to .zt-site so Bootstrap and the inner-page styles cannot leak in. Moved from home-v2.css. */
.zt-site{
  --blue:#2e5195; --blue-d:#24427a; --navy:#163e6f; --slate:#4b4f74; --teal:#27596a;
  --ink:#231f20; --black:#0b0606; --gray:#dfdfdf; --card:#e9e9e9; --quote:#d5d4d4;
  --orange:#f39801; --orange-d:#d98500; --gold:#cea120; --warm:#514946;
  --paper:#ffffff; --text:#26262b; --muted:#585b63; --line:#d9dbe0;
  --ff:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",system-ui,sans-serif;
  --ease-in:cubic-bezier(.215,.61,.355,1); --ease-st:cubic-bezier(.4,0,.6,1); --ease-sheet:cubic-bezier(.32,.72,0,1);
  --sh-1:0 1px 2px rgba(10,20,45,.10),0 4px 10px rgba(10,20,45,.10),0 18px 40px rgba(10,20,45,.14);
  --sh-2:0 2px 4px rgba(10,20,45,.12),0 10px 24px rgba(10,20,45,.18),0 34px 70px rgba(10,20,45,.22);
  color-scheme:light;
}
:where(.zt-site) *{box-sizing:border-box}
:where(.zt-site){font-family:var(--ff);font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased}
:where(.zt-site) img{display:block;max-width:100%;height:auto}
:where(.zt-site) a{color:inherit;text-decoration:none}
:where(.zt-site) button{font:inherit;color:inherit;cursor:pointer}
:where(.zt-site) ul{margin:0;padding:0;list-style:none}
:where(.zt-site) h4{margin:0;line-height:1.4}
:where(.zt-site) :focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
:where(.zt-site) .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:where(.zt-site) .ic{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:where(.zt-site) .float{animation:zt-site-bob var(--dur,5s) ease-in-out var(--del,0s) infinite}
@keyframes zt-site-bob{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,var(--amp,-10px),0)}}
:where(.zt-site) .d-only{}
:where(.zt-site) .m-only{display:none!important}
@media(max-width:1099px){:where(.zt-site) .d-only{display:none!important}}
@media(max-width:1099px){:where(.zt-site) .m-only{display:revert!important}}
:where(.zt-site) .logo{display:flex;align-items:center;gap:12px;flex:none;color:#fff}
:where(.zt-site) .logo .le{height:30px;width:auto;fill:currentColor}
:where(.zt-site) .logo .lw{height:18px;width:auto;fill:currentColor}
:where(.zt-site) .logo .lz{height:20px;width:auto;fill:currentColor}
@media(max-width:1099px){:where(.zt-site) .logo{gap:8px}}
@media(max-width:1099px){:where(.zt-site) .logo .le{height:24px}}
:where(.zt-site) .hd-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:8px;font-size:15px;font-weight:700;letter-spacing:.08em;white-space:nowrap;background:var(--orange);color:var(--ink);box-shadow:0 2px 0 var(--orange-d),0 10px 24px rgba(243,152,1,.32);transition:transform .18s var(--ease-st),box-shadow .18s var(--ease-st)}
:where(.zt-site) .hd-cta:hover{transform:translateY(-2px);color:var(--ink);box-shadow:0 4px 0 var(--orange-d),0 16px 30px rgba(243,152,1,.4)}
:where(.zt-site) .hd{position:fixed;top:0;left:0;right:0;z-index:60;height:calc(84px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) max(32px,env(safe-area-inset-right,0px)) 0 max(32px,env(safe-area-inset-left,0px));display:flex;align-items:center;gap:clamp(16px,2vw,32px);color:#fff;transition:color .3s var(--ease-st),background .3s var(--ease-st),box-shadow .3s var(--ease-st),height .3s var(--ease-st)}
:where(.zt-site) .hd::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,34,.45),transparent);z-index:-1;transition:opacity .3s}
:where(.zt-site) .hd.solid{height:calc(68px + env(safe-area-inset-top,0px));background:rgba(17,28,58,.80);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 1px 0 rgba(255,255,255,.08),0 14px 34px rgba(0,0,0,.2)}
:where(.zt-site) .hd.solid::before{opacity:0}
/* Before scrolling, the header sits on the bright unfiltered photo: navy text, icons and logo, and no dark gradient. */
@media(min-width:1100px){:where(.zt-site) .hd:not(.solid){color:var(--navy)}}
:where(.zt-site) .hd:not(.solid)::before{opacity:0}
:where(.zt-site) .hd .logo,:where(.zt-site) .hd .iconbtn{color:inherit}
@media(min-width:1100px){:where(.zt-site) .hd:not(.solid) .lang-btn{border-color:rgba(22,62,111,.6)}}
/* The photo has dark hair and columns under the header, so navy alone drops below 4.5:1 there.
   Logo, menu and icons sit on small frosted chips (the hero card's material); the photo itself stays unfiltered. */
:where(.zt-site) .hd .logo,:where(.zt-site) .hd .nav,:where(.zt-site) .hd .lang-btn,:where(.zt-site) .hd .m-actions{border-radius:999px;transition:background .3s var(--ease-st)}
:where(.zt-site) .hd .logo{padding:6px 16px;margin-left:-16px}
:where(.zt-site) .hd .nav{padding:2px 20px}
@media(min-width:1100px){:where(.zt-site) .hd:not(.solid) .logo,:where(.zt-site) .hd:not(.solid) .nav,:where(.zt-site) .hd:not(.solid) .lang-btn{background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)}}
/* Phones and tablets (Avery 10/30 R2): one solid dark-blue bar from the very top, homepage included, and it never changes
   while scrolling (no white chips, no frosted-grey step, no fade). No backdrop-filter, no transitions on the bar. */
@media(max-width:1099px){
 :where(.zt-site) .hd,:where(.zt-site) .hd.solid{background:var(--navy);color:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 1px 0 rgba(255,255,255,.1);transition:none}
 :where(.zt-site) .hd::before{display:none}
 :where(.zt-site) .hd .logo{padding:6px 0;margin-left:0;background:none}
}
:where(.zt-site) .nav{display:flex;gap:clamp(14px,2vw,30px);margin-left:auto;font-size:15px;letter-spacing:.08em;font-weight:500}
:where(.zt-site) .nav a{position:relative;padding:8px 0}
:where(.zt-site) .nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .24s var(--ease-in)}
:where(.zt-site) .nav a:hover::after,:where(.zt-site) .nav a[aria-current]::after{transform:scaleX(1)}
:where(.zt-site) .lang{position:relative}
:where(.zt-site) .lang-btn{display:flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.4);background:transparent;border-radius:999px;padding:0 14px;min-height:40px;font-size:14px}
:where(.zt-site) .lang-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:160px;background:#fff;color:var(--ink);border-radius:12px;box-shadow:var(--sh-2);padding:6px;list-style:none;margin:0;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .18s,transform .18s var(--ease-in)}
:where(.zt-site) .lang.open .lang-menu{opacity:1;transform:none;pointer-events:auto}
:where(.zt-site) .lang-menu a{display:flex;justify-content:space-between;padding:10px 12px;border-radius:8px;font-size:15px}
:where(.zt-site) .lang-menu a:hover{background:#f1f3f8}
:where(.zt-site) .lang-menu a[aria-current]{color:var(--blue);font-weight:700}
:where(.zt-site) .hd .hd-cta{min-height:44px;padding:0 20px;font-size:15px}
:where(.zt-site) .iconbtn{width:44px;height:44px;border:0;background:transparent;display:grid;place-items:center;border-radius:12px;color:#fff;font-size:24px}
/* Mobile bottom bar (Avery 10/29 M9): two buttons only, equal width. Phone = brand orange, LINE = LINE green #06C755, white text. */
:where(.zt-site) .bbar{position:fixed;left:0;right:0;bottom:0;z-index:58;display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:8px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-top:1px solid #e3e5ea;box-shadow:0 -10px 30px rgba(10,20,45,.10)}
:where(.zt-site) .bbar a{min-height:50px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;font-weight:700;font-size:16px;letter-spacing:.06em;text-align:center;line-height:1.2;color:#fff}
:where(.zt-site) .bbar a:active{filter:brightness(.92)}
:where(.zt-site) .bbar .ic{font-size:20px}
:where(.zt-site) .bbar .b1{background:var(--orange);box-shadow:0 2px 0 var(--orange-d)}
:where(.zt-site) .bbar .b2{background:#06c755;box-shadow:0 2px 0 #05a847}
@media(max-width:1099px){:where(.zt-site) .bbar{display:grid}}
/* Mobile menu (Avery 10/30 R2, like apple.com on phones). The <dialog> opens non-modally, so it is not in the top layer:
   it sits under the fixed header (z-index 59 < 60), which stays visible with the same button turned into ✕. Solid
   dark-blue panel, no backdrop-filter. Always rendered; .open fades it in with opacity/transform only. Opening: panel
   160 ms, rows 140 ms each with a 20 ms stagger capped at 100 ms, so all done by 240 ms. Closing: 180 ms, no stagger.
   overscroll-behavior:contain plus .menu-in 1px taller than the panel keeps the iOS bounce inside the panel. */
:where(.zt-site) .menu{position:fixed;inset:calc(60px + env(safe-area-inset-top,0px)) 0 0 0;z-index:59;background:var(--navy);color:#fff;display:block;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;opacity:0;visibility:hidden;transform:translate3d(0,-8px,0);pointer-events:none;transition:opacity .18s var(--ease-st),transform .18s var(--ease-st),visibility 0s linear .18s}
:where(.zt-site) .menu.open{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .16s var(--ease-in),transform .16s var(--ease-in),visibility 0s}
:where(.zt-site) .menu-in{min-height:calc(100% + 1px);display:flex;flex-direction:column;padding:8px max(24px,env(safe-area-inset-right,0px)) 0 max(24px,env(safe-area-inset-left,0px))}
:where(.zt-site) .menu-cta{position:sticky;bottom:0;margin:auto calc(-1 * max(24px,env(safe-area-inset-right,0px))) 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:var(--navy);box-shadow:0 -1px 0 rgba(255,255,255,.12)}
:where(.zt-site) .menu .menu-cta .urgent{flex-direction:column;justify-content:center;gap:2px;min-height:58px;margin:0;padding:8px 10px;text-align:center;line-height:1.3}
:where(.zt-site) .menu .menu-cta .urgent span:first-child{font-size:13px;font-weight:500}
:where(.zt-site) .menu .menu-cta .urgent span:last-child{font-size:17px;letter-spacing:.04em}
:where(.zt-site) .menu .urgent{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:12px;background:var(--orange);color:var(--ink);font-weight:700;margin-bottom:22px}
:where(.zt-site) .menu h4{margin:22px 0 10px;font-size:15px;color:#a7abb5;letter-spacing:.14em;font-weight:500}
:where(.zt-site) .menu .mgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 10px;list-style:none;margin:0;padding:0}
:where(.zt-site) .menu .mgrid a{display:flex;align-items:center;min-height:48px;font-size:17px;font-weight:700;letter-spacing:.04em}
:where(.zt-site) .menu .mgrid.svc a{font-size:15px;min-height:44px}
/* Top-level rows: closed they wait 8px up and transparent; .open brings them in with a 20 ms stagger (see above). */
:where(.zt-site) .menu .macc>li,:where(.zt-site) .menu .mgrid>li{opacity:0;transform:translate3d(0,-6px,0);transition:opacity .12s var(--ease-st),transform .12s var(--ease-st)}
:where(.zt-site) .menu.open .macc>li,:where(.zt-site) .menu.open .mgrid>li{opacity:1;transform:none;transition:opacity .14s var(--ease-in) calc(min(var(--i,0),5) * 20ms),transform .14s var(--ease-in) calc(min(var(--i,0),5) * 20ms)}
:where(.zt-site) .menu .mfoot{margin:26px 0 22px;display:flex;flex-direction:column;align-items:center;gap:14px}
:where(.zt-site) .menu .mfoot .le{height:60px;fill:#fff}
:where(.zt-site) .menu .mfoot .lw{height:16px;fill:#fff}
:where(.zt-site) .menu .mfoot .soc{display:flex;gap:16px}
:where(.zt-site) .menu .mfoot .soc a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);font-size:20px}
@media(max-width:1099px){:where(.zt-site) .hd{height:calc(60px + env(safe-area-inset-top,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px));gap:4px}}
@media(max-width:1099px){:where(.zt-site) .hd.solid{height:calc(60px + env(safe-area-inset-top,0px))}}
@media(max-width:1099px){:where(.zt-site) .m-actions{display:flex;align-items:center;margin-left:auto}}
/* .m-only uses display:revert!important, which turned this row back into a block and stacked the two buttons. */
@media(max-width:1099px){:where(.zt-site) .m-actions.m-only{display:flex!important;flex-direction:row;align-items:center;gap:4px}}
@media(max-width:1099px){:where(.zt-site) .m-actions .iconbtn{flex:none;min-width:44px;min-height:44px}}
/* ≡ turns into ✕ in place (same button, same spot): the top and bottom lines rotate onto the diagonals, the middle fades. */
:where(.zt-site) .burger-ic path{transform-box:view-box;transform-origin:12px 12px;transition:transform .2s var(--ease-st),opacity .12s var(--ease-st)}
:where(.zt-site) .burger[aria-expanded="true"] .bt{transform:rotate(45deg) translateY(5px)}
:where(.zt-site) .burger[aria-expanded="true"] .bm{opacity:0}
:where(.zt-site) .burger[aria-expanded="true"] .bb{transform:rotate(-45deg) translateY(-5px)}
/* Mobile language panel (Avery 10/29 M1): a small card under the globe with the three languages. Open/close animate only
   opacity and transform (~200 ms); visibility flips after the fade so the closed card is neither tappable nor read out. */
:where(.zt-site) .mlang{position:relative;display:flex}
:where(.zt-site) .mlang-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:5;min-width:176px;background:#fff;color:var(--ink);border-radius:14px;box-shadow:var(--sh-2);padding:6px;list-style:none;margin:0;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.96);transform-origin:top right;transition:opacity .15s var(--ease-st),transform .15s var(--ease-st),visibility 0s linear .15s}
:where(.zt-site) .mlang.open .mlang-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
:where(.zt-site) .mlang-menu li{border:0}
:where(.zt-site) .mlang-menu a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 14px;border-radius:9px;font-size:15px;letter-spacing:.04em;white-space:nowrap;color:var(--ink)}
:where(.zt-site) .mlang-menu a:active{background:#f1f3f8}
:where(.zt-site) .mlang-menu a[aria-current]{color:var(--blue);font-weight:700}
:where(.zt-site) .mlang-menu a span{font-size:13px}
@media(prefers-reduced-motion:reduce){
 :where(.zt-site) .menu,:where(.zt-site) .menu.open,:where(.zt-site) .menu .macc>li,:where(.zt-site) .menu.open .macc>li,:where(.zt-site) .menu .mgrid>li,:where(.zt-site) .menu.open .mgrid>li,:where(.zt-site) .mlang-menu,:where(.zt-site) .burger-ic path{transition:none!important;transform:none}
}
:where(.zt-site) .menu{margin:0;border:0;padding:0;max-width:none;max-height:none;width:auto;height:auto}
@media(min-width:1100px){:where(.zt-site) .menu{display:none}}
:where(.zt-site) .lang-menu{opacity:1;transform:none;pointer-events:auto}
:where(.zt-site) .nav-list{display:flex;gap:clamp(12px,1.6vw,26px);list-style:none;margin:0;padding:0}
:where(.zt-site) .nav-item{position:relative}
:where(.zt-site) .nav-item>a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
:where(.zt-site) .nav-drop{position:absolute;left:50%;top:100%;transform:translate(-50%,-4px);min-width:168px;list-style:none;margin:0;padding:6px;background:#fff;color:var(--ink);border-radius:12px;box-shadow:var(--sh-2);opacity:0;visibility:hidden;transition:opacity .16s,transform .16s var(--ease-in),visibility .16s;letter-spacing:.04em}
:where(.zt-site) .nav-item:hover>.nav-drop,:where(.zt-site) .nav-item:focus-within>.nav-drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
:where(.zt-site) .nav-drop a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;white-space:nowrap}
:where(.zt-site) .nav-drop a::after{display:none}
:where(.zt-site) .nav-drop a:hover,:where(.zt-site) .nav-drop a:focus-visible{background:#f1f3f8}
/* Japanese menu labels: never split one word across two lines; a label that still cannot fit breaks only as a last resort. */
:where(.zt-site):lang(ja) .nav a,:where(.zt-site):lang(ja) .nav-drop a,:where(.zt-site):lang(ja) .menu .macc a,:where(.zt-site):lang(ja) .menu .macc summary{word-break:keep-all;overflow-wrap:anywhere}
:where(.zt-site) .menu .macc{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.12)}
:where(.zt-site) .menu .macc>li{border-bottom:1px solid rgba(255,255,255,.12)}
:where(.zt-site) .menu .macc-link,:where(.zt-site) .menu .macc summary{display:flex;align-items:center;justify-content:space-between;min-height:60px;padding:6px 0;font-size:21px;font-weight:700;line-height:1.5;letter-spacing:.04em;cursor:pointer;list-style:none}
:where(.zt-site) .menu .macc summary::-webkit-details-marker{display:none}
:where(.zt-site) .menu .macc summary::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .2s}
:where(.zt-site) .menu .macc details[open]>summary::after{transform:rotate(225deg) translateY(-3px)}
:where(.zt-site) .menu .macc details ul{list-style:none;margin:0 0 10px;padding:0 0 0 14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px;border-left:2px solid var(--orange)}
:where(.zt-site) .menu .macc details li{opacity:1;transform:none}
:where(.zt-site) .menu .macc details a{display:flex;align-items:center;min-height:44px;font-size:16px;line-height:1.5;color:#dfe4ee}
:where(.zt-site) .menu .macc details li:has(>a.macc-all){grid-column:1/-1}
:where(.zt-site) .menu .macc details a.macc-all{color:#fff;font-weight:700}
:where(.zt-site) .menu .urgent-line{background:#05873a;color:#fff} /* 11/03 S19：白字壓 #06c755 只有 2.26，加深到 #05873a（4.63，與底部列同色） */
@media(min-width:1100px) and (max-width:1350px){
 :where(.zt-site) .nav{gap:14px;font-size:14px}
 :where(.zt-site) .hd{gap:16px;padding-inline:22px}
 :where(.zt-site) .hd .hd-cta{padding-inline:12px}
 :where(.zt-site) .logo .lw{height:15px}
}
/* Same WCAG 2.2.2 cap as the homepage: the floating buttons bob once and stop. */
:where(.zt-site) .float{animation-duration:min(var(--dur,3.5s),3.5s);animation-delay:min(var(--del,0s),0s);animation-iteration-count:1;animation-fill-mode:both}
/* Site search (Avery 10/29 C2, like apple.com): the magnifier next to the globe opens #site-search. Desktop: a white bar
   drops over the header with a dim scrim below; phones: a full-screen sheet. Open/close animate only opacity and transform
   (~220 ms); visibility flips after the fade so the closed bar is neither tappable nor read out (it is also inert). */
:where(.zt-site) .hd .srch-btn{flex:none;width:40px;height:40px;font-size:20px;border-radius:999px;margin-left:-8px}
:where(.zt-site) .hd:not(.solid) .srch-btn.d-only{background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)}
:where(.zt-site) .hd .srch-btn:hover{background:rgba(255,255,255,.16)}
:where(.zt-site) .hd:not(.solid) .srch-btn:hover{background:rgba(255,255,255,.92)}
:where(.zt-site) .srch{position:fixed;left:0;right:0;top:0;z-index:70;display:flex;align-items:center;gap:12px;padding:calc(20px + env(safe-area-inset-top,0px)) max(32px,env(safe-area-inset-right,0px)) 22px max(32px,env(safe-area-inset-left,0px));background:#fff;color:var(--ink);box-shadow:var(--sh-2);opacity:0;visibility:hidden;transform:translate3d(0,-16px,0);transition:opacity .22s var(--ease-st),transform .22s var(--ease-st),visibility 0s linear .22s}
:where(.zt-site) .srch.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
/* min-width:0 lets the form shrink beside ✕ (the English placeholder pushed it off screen); flex-direction:row because
   the homepage's `.zt-home form{flex-direction:column}` stacked it (Avery 10/30 R2). */
:where(.zt-site) .srch-form{flex:1;min-width:0;display:flex;flex-direction:row;align-items:center;gap:12px;max-width:760px;margin:0 auto;padding:0 6px 0 16px;min-height:56px;border:1px solid var(--line);border-radius:999px;background:#f5f6f9}
:where(.zt-site) .srch-form:focus-within{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(46,81,149,.18)}
:where(.zt-site) .srch-ic{font-size:22px;color:var(--muted)}
:where(.zt-site) .srch-input{flex:1;min-width:0;height:54px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:17px;letter-spacing:.04em;outline:0;-webkit-appearance:none;appearance:none}
/* The homepage's form fields (`.zt-home input`, `input:focus`) drew a second box and ring inside the pill. */
:where(.zt-site) .srch-input,:where(.zt-site) .srch-input:focus{min-height:0;padding:0;border:0;border-radius:0;box-shadow:none}
:where(.zt-site) .srch-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
:where(.zt-site) .srch-go{flex:none;min-height:44px;padding:0 20px;border:0;border-radius:999px;background:var(--blue);color:#fff;font-weight:700;font-size:15px;letter-spacing:.08em}
:where(.zt-site) .srch-go:hover{background:var(--blue-d)}
:where(.zt-site) .srch-close{flex:none;color:var(--navy);font-size:32px;line-height:1}
:where(.zt-site) .srch-scrim{position:fixed;inset:0;z-index:65;background:rgba(10,20,45,.42);opacity:0;visibility:hidden;transition:opacity .22s var(--ease-st),visibility 0s linear .22s}
:where(.zt-site) .srch-scrim.open{opacity:1;visibility:visible;transition-delay:0s}
@media(max-width:1099px){
 :where(.zt-site) .srch{bottom:0;align-items:flex-start;flex-wrap:nowrap;padding:calc(10px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));box-shadow:none;transform:translate3d(0,24px,0)}
 :where(.zt-site) .srch-form{min-height:48px;padding:0 4px 0 14px}
 :where(.zt-site) .srch-input{height:46px;font-size:16px}
 :where(.zt-site) .srch-go{min-height:40px;padding:0 14px}
 :where(.zt-site) .srch-scrim{display:none}
 html.zt-search-open{overflow:hidden}
}
@media(prefers-reduced-motion:reduce){
 /* Q045（S19 11/03）：原本是 .01ms 轉場，visibility 也跟著變成 .01ms，打開的那一刻還是 hidden，focus() 失敗、焦點留在放大鏡上。
    減少動態時直接不轉場，開關立即生效；語言卡片、選單同理（上面那條）。 */
 :where(.zt-site) .srch,:where(.zt-site) .srch-scrim{transition:none!important}
}
/* Inner pages: leave room under the footer for the fixed mobile bottom bar (the homepage footer has its own padding). */
@media(max-width:1099px){.main-body{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}}
/* R3 10/31 點擊範圍（ADR-0025）：首頁頁首標誌 36→44px 高。 */
@media(max-width:1099px){:where(.zt-site) .hd .logo{min-height:44px}}
/* R3 10/31（#108 頁首）：1100～1279 寬（iPad 橫向、小筆電）頁首塞不下——英文「Free Consultation」鈕超出畫面最多 150px，
   中日文語言鈕被擠成直排。這個區間標誌改用手機版短字「梓同」（省約 150px），頁首左右內距 32→20px，選單間距與字距、
   語言鈕與免費諮詢鈕內距收一點，語言鈕不換行。1280px 以上不變。 */
@media(min-width:1100px) and (max-width:1279px){
 :where(.zt-site) .hd .logo .lw{display:none!important}
 :where(.zt-site) .hd .logo .lz{display:block!important}
 :where(.zt-site) .hd{padding-left:20px;padding-right:20px;gap:12px}
 :where(.zt-site) .hd .nav{gap:14px;letter-spacing:.02em;padding:2px 14px}
 :where(.zt-site) .lang-btn{white-space:nowrap;padding:0 10px}
 :where(.zt-site) .hd .hd-cta{padding:0 14px;letter-spacing:.02em}
}
/* 11/02 設計修正 ②④：手機底部列電話鈕（橙底）白字只有 2.26:1，改墨黑字 #231f20（7.22:1）；LINE 鈕白字壓 #06c755 也只有 2.26:1，
   底色加深到 #05873a（白字 4.63:1）。仍是電話、LINE 兩格（Avery 10/29 M9）。 */
:where(.zt-site) .bbar .b1{color:#231f20}
:where(.zt-site) .bbar .b2{background:#05873a;box-shadow:0 2px 0 #046b2e}
/* 11/03 design-static 第 3 條：頁首「免費諮詢」主要行動鈕高 48px */
:where(.zt-site) .hd-cta,:where(.zt-site) .hd .hd-cta{min-height:48px}
/* Q045 無障礙（WCAG 2.2 AA）：
   2.4.7 焦點可見：鍵盤焦點一律深藍外框＋白邊，淺底深底都看得到（outline 用 !important，蓋過元件的 outline:none）。
   2.4.11 焦點不被遮住：Tab 捲動時留出固定頁首與手機底部聯絡列的高度。
   2.4.1 內頁的「跳到主要內容」平常藏在畫面外，取得焦點才出現。 */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,iframe:focus-visible,[tabindex]:focus-visible{outline:3px solid #163e6f!important;outline-offset:2px;box-shadow:0 0 0 5px #fff}
.zt-footer a:focus-visible,.bbar a:focus-visible,.hd a:focus-visible,.hd button:focus-visible{outline-color:#fff!important;box-shadow:0 0 0 5px #163e6f}
/* Q045（S19 11/03）：用 Tab 進到 iframe 時，Chrome 的 :focus、:focus-within 都不成立，由 site-header.js wireFrameFocus 加 .is-focused。 */
iframe:focus,iframe:focus-within,iframe.is-focused{outline:3px solid #163e6f!important;outline-offset:2px}
svg a:focus-visible path,a.cmap-area:focus-visible path{stroke:#163e6f;stroke-width:3px}
html{scroll-padding-top:calc(96px + env(safe-area-inset-top,0px))}
@media(max-width:1099px){html{scroll-padding-top:calc(80px + env(safe-area-inset-top,0px));scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}}
.skip-link{position:fixed;left:12px;top:12px;z-index:200;transform:translateY(-200%);background:#fff;color:#163e6f;padding:12px 18px;border-radius:8px;font-weight:700}
.skip-link:focus{transform:none}
#main-content:focus{outline:none}
/* 11/05 S19（Avery iPhone 實點）
   ① 第二道保險：整頁不得橫向溢出。iOS Safari 遇到文件變寬會撐大版面視窗，fixed 的頁首與底部聯絡列跟著錯位
      （主因是指紋特效，已改成 fixed 覆蓋層，見 js/mouse-effect）。clip 不會建立捲動容器，sticky 照常。
      底部聯絡列獨立成合成層，iOS 收合工具列、慣性捲動時不跟著內容晚一幀重繪。 */
html{overflow-x:clip}
:where(.zt-site) .bbar{transform:translate3d(0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
/* 11/05 總指揮 16:0x 跨領域規則（Apple、GOV.UK、NerdWallet、Cleveland Clinic、Baymard）。手機版面（1099px 以下）：
   ④ 選單第一項緊貼頁首下緣：面板上內距 4px，「主選單」小標籤不顯示（面板本身有 aria-label）。
   ① 子選單一次只開一項（details name="site-menu"，舊瀏覽器 wireAccordions 補），summary 整列可點。
   ② 主項 20px／600、列高 56px；子項 16px／400、列高 44px、左縮排 16px、淡一階 #d3dbe8（對深藍 #163e6f 9.0:1）。
   ③ 「全部○○」和其他子項同一種樣式。
   ⑤ 選單底部：電話、LINE（和頁面聯絡列同一套樣式）→ 語言切換 → 下內距 24px＋安全區；品牌圖與社群連結在頁尾已有，選單不重複。
   ⑥ 頁面聯絡列高 56px＋安全區（上框線 1＋3＋按鈕 48＋4，按鈕 48px 是 design-static 的底部列門檻），內頁 body 下內距同值；首頁頁尾下內距同值再加 16px（頁尾有自己的底色）。
   ⑦ 選單打開時頁面聯絡列隱藏（選單裡有同一組按鈕）、背景鎖住，關閉時還原捲動位置（site-header.js createScrollLock）。 */
@media(max-width:1099px){
 :where(.zt-site) .menu{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
 :where(.zt-site) .menu-in{padding-top:4px}
 :where(.zt-site) .menu-in>h4:first-child{display:none}
 :where(.zt-site) .menu .macc{border-top:0}
 :where(.zt-site) .menu .macc-link,:where(.zt-site) .menu .macc summary{min-height:56px;padding:4px 0;font-size:20px;font-weight:600;line-height:1.4}
 :where(.zt-site) .menu .macc details ul{display:block;margin:0 0 8px;padding:0 0 0 16px}
 :where(.zt-site) .menu .macc details a,:where(.zt-site) .menu .macc details a.macc-all{min-height:44px;font-size:16px;font-weight:400;line-height:1.4;letter-spacing:.02em;color:#d3dbe8}
 :where(.zt-site) .menu .menu-cta{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:24px 0 0;padding:0;background:none;box-shadow:none}
 :where(.zt-site) .menu-in>h4:not(:first-child){margin:24px 0 8px}
 :where(.zt-site) .menu .mfoot{display:none}
 html.zt-menu-open :where(.zt-site) .bbar{display:none}
 :where(.zt-site) .bbar{padding-top:3px;padding-bottom:calc(4px + env(safe-area-inset-bottom,0px))}
 :where(.zt-site) .bbar a{min-height:48px}
 .main-body{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
}
:where(.zt-site) .menu .menu-cta a{min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;font-weight:700;font-size:16px;letter-spacing:.06em;line-height:1.2;text-align:center}
:where(.zt-site) .menu .menu-cta .ic{font-size:20px}
:where(.zt-site) .menu .menu-cta .b1{background:var(--orange);box-shadow:0 2px 0 var(--orange-d);color:#231f20}
:where(.zt-site) .menu .menu-cta .b2{background:#05873a;box-shadow:0 2px 0 #046b2e;color:#fff}
/* 11/05 Avery 19:3x：手機選單頂層「文字＝連結、右側箭頭＝按鈕」（原本整列是 <summary>，點文字只會展開）。
   文字連到該區塊頁；箭頭按鈕 56×56（含周圍空白，≥ 44×44），aria-expanded；子選單沿用 16:0x 的樣式（16px／400／44px、左縮排 16px、淡一階）。 */
:where(.zt-site) .menu .macc-row{display:flex;align-items:stretch}
/* 20:5x 總指揮對 Avery 原話（「點下拉的那個箭頭或某些空白部分才是打開選單」）：連結只包文字（左右各 8px 點擊空間、高 56px），
   文字右邊的空白全部屬於箭頭按鈕（flex:1 1 56px，箭頭靠右）；點空白＝展開，不前往。 */
:where(.zt-site) .menu .macc-row .macc-link{flex:0 1 auto;min-width:0;min-height:56px;margin-left:-8px;padding-left:8px;padding-right:8px}
:where(.zt-site) .menu .macc-toggle{flex:1 1 56px;display:flex;align-items:center;justify-content:flex-end;min-width:56px;min-height:56px;margin:0 -16px 0 0;padding:0 23px 0 0;border:0;background:none;color:inherit;cursor:pointer}
:where(.zt-site) .menu .macc-toggle::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .2s}
:where(.zt-site) .menu .macc-toggle[aria-expanded="true"]::after{transform:rotate(225deg) translateY(-3px)}
:where(.zt-site) .menu .macc-toggle:focus-visible{outline:3px solid #fff;outline-offset:-6px}
:where(.zt-site) .menu .macc-sub{list-style:none;margin:0 0 8px;padding:0 0 0 16px;border-left:2px solid var(--orange)}
:where(.zt-site) .menu .macc-sub[hidden]{display:none}
:where(.zt-site) .menu .macc-sub a,:where(.zt-site) .menu .macc-sub a.macc-all{display:flex;align-items:center;min-height:44px;font-size:16px;font-weight:400;line-height:1.4;letter-spacing:.02em;color:#d3dbe8}
@media(prefers-reduced-motion:reduce){:where(.zt-site) .menu .macc-toggle::after{transition:none}}