/* ==========================================================================
   環宇企業管理 — 主樣式
   依「環宇官網改版」設計稿實作。色彩與字體 token 見 tokens.css。

   設計原則（來自設計簡報）
   ------------------------
   * 用細線（1px #E5E8EC）和留白分區，少用陰影，避免卡片浮誇
   * 圓角統一 8px，不混用
   * 中文長段落行高 1.8 以上（現站太擠）
   * 標題層級要拉開對比，不要全站都用差不多大的字
   * 區塊進入視窗時 200ms 上浮淡入。不做視差、不自動輪播、不彈窗
   * 所有可點擊元素最小 44×44px
   ========================================================================== */

/* --------------------------------------------------------------- 基礎 */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--line-body);
	letter-spacing: var(--track-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: var(--line-heading);
	letter-spacing: 0;
	margin: 0 0 .5em;
	text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-800); text-decoration: underline; }

img, svg, video { max-width: 100%; height: auto; }

hr { border: 0; border-top: 1px solid var(--color-divider); margin: 2em 0; }

:focus-visible {
	outline: 2px solid var(--color-accent-2-600);
	outline-offset: 2px;
	border-radius: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: var(--color-navy); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 8px; top: 8px; }

/* --------------------------------------------------------------- 版面 */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 22px;
}

.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding: var(--section-y) 0; }
.section--tight { padding: calc(var(--section-y) * .6) 0; }
.section--surface { background: var(--color-surface); }
.section--navy {
	background: var(--color-navy);
	color: var(--color-neutral-200);
}
.section--navy h2,
.section--navy h3 { color: #fff; }
.section--navy a { color: var(--color-accent-300); }

.section__head { max-width: 760px; margin: 0 0 42px; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--row {
	max-width: none;
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 20px; flex-wrap: wrap;
}
.section__head--row h2 { margin: 0; }
.section__head__link { font-size: var(--fs-small); font-weight: 600; color: var(--color-accent-700); white-space: nowrap; }
.section__head__link::after { content: ' →'; }
.section__sub { font-size: var(--fs-small); color: var(--color-neutral-700); line-height: 1.8; margin: 10px 0 0; }

.kicker {
	display: block;
	font-size: var(--fs-tiny);
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--color-accent-700);
	margin: 0 0 10px;
}
.section--navy .kicker { color: var(--color-accent); }

.lead {
	font-size: calc(var(--fs-body) + 1px);
	color: var(--color-neutral-700);
	line-height: 1.9;
}
.section--navy .lead { color: var(--color-accent-2-200); }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
	.grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- 按鈕 */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;           /* 可點擊元素最小 44px */
	padding: 0 24px;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-family: var(--font-heading);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease),
	            border-color var(--dur-fast) var(--ease),
	            color var(--dur-fast) var(--ease);
}
.btn:hover { text-decoration: none; }

/* 金色按鈕的字用深海軍藍而不是白色 —— 金底白字對比不足 */
.btn-primary {
	background: var(--color-accent);
	color: var(--color-navy);
	border-color: var(--color-accent);
}
.btn-primary:hover {
	background: var(--color-accent-400);
	border-color: var(--color-accent-400);
	color: var(--color-navy);
}

.btn-secondary {
	background: transparent;
	color: var(--color-navy);
	border-color: var(--color-neutral-500);
}
.btn-secondary:hover {
	border-color: var(--color-navy);
	background: var(--color-neutral-200);
	color: var(--color-navy);
}

/* 深底上的描邊按鈕。Hero 也是深底，必須一起列進來 ——
   否則會是深藍字配深藍底，按鈕文字完全看不見。 */
.section--navy .btn-secondary,
.hero .btn-secondary,
.site-footer .btn-secondary {
	color: #fff;
	border-color: rgba(255, 255, 255, .35);
}
.section--navy .btn-secondary:hover,
.hero .btn-secondary:hover,
.site-footer .btn-secondary:hover {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .6);
	color: #fff;
}

.btn-lg { min-height: 54px; padding: 0 30px; font-size: 16.5px; }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------- 標籤 */

.tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-pill);
	font-size: var(--fs-tiny);
	color: var(--color-neutral-700);
	background: var(--color-bg);
	white-space: nowrap;
}
.tag--gold { border-color: var(--color-accent-300); color: var(--color-accent-800); background: var(--color-accent-100); }
.tag--hot  { border-color: var(--color-accent); color: var(--color-accent-800); background: var(--color-accent-100); font-weight: 600; }

.tag-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* --------------------------------------------------------------- 頁首 */

.topbar {
	background: var(--color-navy);
	color: var(--color-accent-2-200);
	font-size: var(--fs-tiny);
}
.topbar__inner {
	display: flex; align-items: center; gap: 16px;
	min-height: 40px; flex-wrap: wrap;
}
.topbar strong { color: var(--color-accent); font-weight: 700; }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.topbar a { color: var(--color-accent-2-200); }
.topbar a:hover { color: #fff; }

@media (max-width: 900px) { .topbar { display: none; } }

.site-header {
	position: sticky; top: 0; z-index: 500;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-divider);
	transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
/* 滾動時變半透明毛玻璃固定置頂 */
.site-header.is-stuck {
	background: rgba(255, 255, 255, .88);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	box-shadow: var(--shadow-sm);
}

.site-header__inner {
	display: flex; align-items: center; gap: 20px;
	min-height: var(--header-h);
}

.site-logo { display: flex; align-items: center; flex: 0 0 auto; }
.site-logo img { max-height: 46px; width: auto; }
.site-logo__text {
	font-family: var(--font-heading); font-weight: 700;
	font-size: 19px; color: var(--color-navy); line-height: 1.2;
}
.site-logo__text small {
	display: block; font-size: 10.5px; font-weight: 400;
	letter-spacing: .1em; color: var(--color-neutral-600);
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }

.nav__top {
	display: inline-flex; align-items: center; gap: 5px;
	min-height: 44px; padding: 0 13px;
	border-radius: var(--radius);
	font-family: var(--font-heading); font-size: 15px; font-weight: 600;
	color: var(--color-text); background: transparent; border: 0; cursor: pointer;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav__top:hover,
.nav__item.is-open > .nav__top { background: var(--color-accent-100); color: var(--color-navy); text-decoration: none; }
.nav__item.is-current > .nav__top { color: var(--color-accent-800); }

.nav__caret { width: 9px; height: 9px; transition: transform var(--dur-fast) var(--ease); opacity: .55; }
.nav__item.is-open .nav__caret { transform: rotate(180deg); }

.nav__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* --- mega menu 面板 --- */

.mega {
	position: absolute; left: 0; right: 0; top: 100%;
	background: var(--color-bg);
	border-top: 1px solid var(--color-divider);
	border-bottom: 1px solid var(--color-divider);
	box-shadow: var(--shadow-lg);
	opacity: 0; visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--dur-fast) var(--ease),
	            transform var(--dur-fast) var(--ease),
	            visibility var(--dur-fast);
}
.nav__item.is-open .mega { opacity: 1; visibility: visible; transform: none; }

.mega__inner {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 40px;
	padding: 32px 0 36px;
}

.mega__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.mega__cols--1 { grid-template-columns: minmax(0, 1fr); }

.mega__col-title {
	font-size: var(--fs-tiny); font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--color-neutral-600);
	margin: 0 0 12px; padding-bottom: 8px;
	border-bottom: 1px solid var(--color-divider);
}

.mega__list { list-style: none; margin: 0; padding: 0; }

.mega__link {
	display: block; padding: 9px 10px; margin: 0 -10px;
	border-radius: var(--radius);
	color: var(--color-text);
	transition: background var(--dur-fast) var(--ease);
}
.mega__link:hover { background: var(--color-surface); text-decoration: none; }

.mega__name {
	display: flex; align-items: center; gap: 8px;
	font-weight: 600; font-size: 15px; line-height: 1.4;
}
.mega__desc {
	display: block; font-size: var(--fs-tiny); color: var(--color-neutral-600);
	line-height: 1.55; margin-top: 2px;
}

.mega__cta {
	background: var(--color-navy); color: var(--color-neutral-200);
	border-radius: var(--radius); padding: 26px 24px;
	display: flex; flex-direction: column; gap: 12px;
}
.mega__cta h3 { color: #fff; font-size: 17px; margin: 0; }
.mega__cta p { font-size: var(--fs-small); line-height: 1.75; color: var(--color-accent-2-200); margin: 0; }
.mega__cta .btn { margin-top: auto; }

@media (max-width: 1080px) {
	.mega__inner { grid-template-columns: 1fr; }
	.mega__cta { flex-direction: row; align-items: center; justify-content: space-between; }
	.mega__cta .btn { margin: 0; flex: 0 0 auto; }
}

/* --- 行動版導覽 --- */

.nav-toggle {
	display: none;
	width: 46px; height: 46px;
	align-items: center; justify-content: center;
	background: transparent; border: 1px solid var(--color-divider);
	border-radius: var(--radius); cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
	content: ''; display: block; position: relative;
	width: 20px; height: 2px; background: var(--color-navy);
	transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after  { position: absolute; top: 6px; }
.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span::after  { transform: translateY(-6px) rotate(-45deg); }

.drawer {
	position: fixed; inset: var(--header-h) 0 0;
	background: var(--color-bg);
	z-index: 480;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	display: none;
	padding: 8px 0 96px;
}
.drawer.is-open { display: block; }

.drawer__group { border-bottom: 1px solid var(--color-divider); }
.drawer__top {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	width: 100%; min-height: 56px; padding: 0 22px;
	background: transparent; border: 0; cursor: pointer;
	font-family: var(--font-heading); font-size: 16.5px; font-weight: 600;
	color: var(--color-text); text-align: left;
}
.drawer__sign { font-size: 22px; color: var(--color-neutral-600); line-height: 1; }
.drawer__panel { display: none; padding: 0 22px 18px; }
.drawer__group.is-open .drawer__panel { display: block; }
.drawer__col-title {
	font-size: var(--fs-tiny); font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--color-neutral-600);
	margin: 14px 0 6px;
}
.drawer__link {
	display: block; padding: 11px 0;
	border-bottom: 1px solid var(--color-neutral-300);
	color: var(--color-text); font-size: 15.5px;
}
.drawer__link:last-child { border-bottom: 0; }
.drawer__link small { display: block; color: var(--color-neutral-600); font-size: var(--fs-tiny); }

/* 行動版底部固定條：兩個按鈕各佔一半寬度 */
.mobile-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 470;
	display: none; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--color-divider);
}
.mobile-bar .btn { flex: 1 1 0; min-height: 48px; }

@media (max-width: 1080px) {
	.nav__list { display: none; }
	.nav-toggle { display: inline-flex; }
	.mobile-bar { display: flex; }
	body.has-mobile-bar { padding-bottom: 76px; }
}

@media (max-width: 560px) {
	/* 底部固定條已有完整 CTA；窄螢幕頁首只保留 logo 與選單，避免橫向溢出。 */
	.site-header__inner { gap: 12px; }
	.nav__actions > .btn { display: none; }
}

/* --------------------------------------------------------------- 微信浮層 */

.nav__wechat { position: relative; }
.wechat-pop {
	position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
	width: 210px; padding: 16px;
	background: var(--color-bg);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	text-align: center;
}
.wechat-pop img { width: 150px; height: 150px; object-fit: contain; display: block; margin: 0 auto 10px; }
.wechat-pop__id { font-size: var(--fs-small); font-weight: 700; color: var(--color-navy); margin: 0 0 4px; }
.wechat-pop__hint { font-size: var(--fs-tiny); color: var(--color-neutral-600); margin: 0; line-height: 1.6; }

@media (max-width: 900px) {
	/* 行動版底部固定條已有完整 CTA，頁首不重複放微信 */
	.nav__wechat { display: none; }
}

/* --------------------------------------------------------------- Hero */

.hero {
	position: relative;
	background: var(--color-bg);
	color: var(--color-text);
	overflow: hidden;
}
.hero::before,
.hero::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}
.hero::before {
	width: 460px; height: 460px; right: -140px; top: -170px;
	background: var(--color-accent-2-100);
	opacity: .72;
}
.hero::after {
	width: 280px; height: 280px; left: -95px; bottom: -130px;
	background: var(--color-accent-100);
	opacity: .85;
}
.hero__inner {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
	gap: 48px; align-items: center;
	padding-top: 74px; padding-bottom: 80px;
}
.hero__copy { max-width: 760px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 20px; }
.hero .hero__trust .tag {
	background: var(--color-accent-2-100);
	border-color: var(--color-accent-2-200);
	color: var(--color-accent-2-900);
	font-size: 12.5px;
	padding: 5px 13px;
}

.hero h1 { color: var(--color-navy); margin: 0 0 18px; text-wrap: pretty; }
.hero__h1-accent { display: block; color: var(--color-accent-700); }
.hero__sub { max-width: 690px; font-size: 17.5px; color: var(--color-neutral-700); line-height: 1.9; margin: 0 0 26px; }
.hero__card {
	background: var(--color-bg);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	padding: 24px 26px;
}
.hero__card-title {
	font-size: 11px; font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; color: var(--color-accent-700); margin-bottom: 8px;
}
.hero__facts { margin: 0; }
.hero__facts > div {
	display: flex; justify-content: space-between; gap: 18px;
	padding: 11px 0; border-bottom: 1px solid var(--color-divider);
	font-size: 14.5px;
}
.hero__facts dt { color: var(--color-neutral-700); }
.hero__facts dd { margin: 0; font-weight: 700; text-align: right; }
.hero__media { margin: 16px 0 0; aspect-ratio: 16 / 7; overflow: hidden; border-radius: var(--radius); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1080px) {
	.hero__inner { grid-template-columns: minmax(0, 1fr) minmax(290px, .72fr); gap: 28px; }
}

@media (max-width: 900px) {
	/* Hero 在行動版不超過一屏，CTA 必須在首屏可見 */
	.hero__inner { display: block; padding-top: 38px; padding-bottom: 38px; }
	.hero__sub { font-size: 15.5px; margin-bottom: 18px; }
	.hero .btn { width: 100%; }
	.hero .btn-row { flex-direction: column; }
	.hero__card { display: none; }
	.hero::before { width: 300px; height: 300px; right: -170px; top: -150px; }
	.hero::after { display: none; }
}

@media (max-width: 560px) {
	/* 設計簡報要求三個信任小標籤都要在。原本這裡把第三個
	   （合作 CPA S1073）display:none 來壓縮高度，等於在最主要的
	   行動版流量上刪掉一個信任訊號。改成縮字級讓它換行，內容留著。 */
	.hero .hero__trust { gap: 6px; margin-bottom: 16px; }
	.hero .hero__trust .tag { font-size: 11.5px; padding: 4px 10px; }
}

/* Hero 下方橫幅 */
.hero-strip {
	background: var(--color-accent-2-800);
	color: var(--color-accent-2-100);
	font-size: var(--fs-small);
}
.hero-strip__inner {
	display: flex; flex-wrap: wrap; gap: 10px 30px;
	padding: 14px 0; align-items: center;
}
.hero-strip span { display: inline-flex; align-items: center; gap: 8px; }
.hero-strip strong { color: #fff; }
.hero-strip span::before {
	content: ''; width: 5px; height: 5px; border-radius: 50%;
	background: var(--color-accent); flex: 0 0 auto;
}

/* --------------------------------------------------------------- 卡片 */

.card {
	background: var(--color-bg);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius);
	padding: 26px 24px;
	display: flex; flex-direction: column;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover { border-color: var(--color-accent-300); box-shadow: var(--shadow-md); }

.card__mark {
	width: 46px; height: 46px; border-radius: var(--radius);
	background: var(--color-navy); color: var(--color-accent);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-heading); font-size: 19px; font-weight: 700;
	margin: 0 0 16px; flex: 0 0 auto;
}
.card h3 { font-size: 18.5px; margin: 0 0 8px; }
.card__desc { font-size: var(--fs-small); color: var(--color-neutral-700); line-height: 1.75; margin: 0 0 16px; }

.card__meta {
	display: flex; flex-wrap: wrap; gap: 8px 20px;
	margin: auto 0 14px; padding-top: 14px;
	border-top: 1px solid var(--color-divider);
	font-size: var(--fs-tiny);
}
.card__meta div { display: flex; flex-direction: column; gap: 2px; }
.card__meta dt { color: var(--color-neutral-600); }
.card__meta dd { margin: 0; font-weight: 700; color: var(--color-navy); }

.card__more { font-size: var(--fs-small); font-weight: 600; color: var(--color-accent-700); }
.card__more::after { content: ' →'; }

/* --------------------------------------------------------------- 差異化四點 + 大數字卡 */

/* 設計稿：四點沒有分隔線也沒有 01–04 編號，每點上方是一個實心圓點；
   四點底下緊接三張大數字卡，同屬「為什麼選環宇」這一區。 */

.why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 30px; }
.why__item { padding: 0; }
.why__dot {
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--color-accent-300);
	margin: 0 0 18px;
}
.why__item h3 { font-size: 17px; margin: 0 0 8px; line-height: 1.5; }
.why__item p { font-size: var(--fs-small); color: var(--color-neutral-700); line-height: 1.8; margin: 0; }

/* 三張大數字卡 */
/* 卡片數量會變（拿掉未經查證的評分後是兩張），用 auto-fit 讓剩下的
   卡片自己撐滿，不會在右邊留一個空格。 */
.why-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--gap); margin-top: 46px;
}
.why-stat {
	background: var(--color-accent-100);
	border: 1px solid var(--color-accent-200);
	border-radius: var(--radius);
	padding: 34px 26px;
	text-align: center;
}
.why-stat__num {
	font-family: var(--font-heading);
	font-size: 42px; font-weight: 700; line-height: 1.1;
	color: var(--color-accent-700);
	letter-spacing: -.01em;
}
.why-stat__num small { font-size: 24px; font-weight: 700; margin-left: 4px; }
.why-stat__label { font-size: 15.5px; font-weight: 700; color: var(--color-text); margin-top: 10px; }
.why-stat__source { font-size: var(--fs-tiny); color: var(--color-neutral-600); margin-top: 6px; line-height: 1.7; }

@media (max-width: 980px) {
	.why { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.why { grid-template-columns: 1fr; gap: 26px; }
	.why__dot { width: 28px; height: 28px; margin-bottom: 12px; }
	.why-stat { padding: 26px 20px; }
	.why-stat__num { font-size: 34px; }
}

/* --------------------------------------------------------------- 流程時間軸 */

.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.steps::before {
	content: ''; position: absolute; left: 0; right: 0; top: 17px;
	height: 1px; background: var(--color-divider);
}
.step { position: relative; padding: 0 16px 0 0; }
.step__dot {
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--color-bg); border: 1px solid var(--color-accent);
	color: var(--color-accent-800);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-heading); font-weight: 700; font-size: 14px;
	position: relative; z-index: 1; margin: 0 0 14px;
}
.step h3 { font-size: 16px; margin: 0 0 6px; }
.step p { font-size: var(--fs-tiny); color: var(--color-neutral-700); line-height: 1.7; margin: 0; }
.step__time { display: block; font-size: var(--fs-tiny); color: var(--color-accent-700); font-weight: 600; margin-top: 6px; }

@media (max-width: 900px) {
	.steps { grid-template-columns: 1fr; gap: 0; }
	.steps::before { left: 17px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
	.step { padding: 0 0 26px 52px; }
	.step__dot { position: absolute; left: 0; top: 0; margin: 0; }
	.step:last-child { padding-bottom: 0; }
}

/* --------------------------------------------------------------- 速覽框 */

.quickfacts {
	border: 1px solid var(--color-divider);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--color-surface);
}
.quickfacts__title {
	padding: 14px 22px; background: var(--color-navy); color: #fff;
	font-family: var(--font-heading); font-size: 15px; font-weight: 600;
}
.quickfacts dl { margin: 0; display: grid; grid-template-columns: 190px 1fr; }
.quickfacts dt,
.quickfacts dd {
	margin: 0; padding: 14px 22px;
	border-top: 1px solid var(--color-divider);
	font-size: var(--fs-small); line-height: 1.7;
}
.quickfacts dt { color: var(--color-neutral-700); background: rgba(255, 255, 255, .5); }
.quickfacts dd { font-weight: 600; color: var(--color-navy); background: var(--color-bg); }

@media (max-width: 640px) {
	.quickfacts dl { grid-template-columns: 1fr; }
	.quickfacts dt { padding-bottom: 2px; border-bottom: 0; }
	.quickfacts dd { padding-top: 2px; border-top: 0; }
	.quickfacts dt { border-top: 1px solid var(--color-divider); }
}

/* --------------------------------------------------------------- FAQ */

/* 設計稿：整個 FAQ 區塊置中收窄，每一題是一張填色圓角卡片（不是分隔線清單），
   展開的那張顏色略深；底部是一條深藍膠囊 CTA 條。 */

.faq-block { max-width: 800px; margin-inline: auto; }

.faq-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.faq-tab {
	min-height: 44px; padding: 0 22px;
	border: 1px solid var(--color-divider); border-radius: var(--radius-pill);
	background: var(--color-bg); color: var(--color-text);
	font-family: var(--font-heading); font-size: 15px; font-weight: 600;
	cursor: pointer;
	transition: all var(--dur-fast) var(--ease);
}
.faq-tab:hover { border-color: var(--color-accent-400); }
.faq-tab.is-active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-navy); }

.faq-panel { display: none; }
.faq-panel.is-active { display: block; }

.faq-list { display: grid; gap: 12px; }

.faq-item {
	background: var(--color-surface);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius);
	overflow: hidden;
	transition: background var(--dur-fast) var(--ease);
}
.faq-item.is-open { background: var(--color-accent-100); border-color: var(--color-accent-200); }

.faq-q {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
	width: 100%; padding: 20px 24px; min-height: 44px;
	background: transparent; border: 0; cursor: pointer; text-align: left;
	font-family: var(--font-heading); font-size: 17px; font-weight: 700;
	color: var(--color-navy); line-height: 1.55;
}
.faq-q:hover { color: var(--color-accent-800); }
.faq-sign { flex: 0 0 auto; font-size: 22px; line-height: 1.3; color: var(--color-accent-700); }

.faq-a { display: none; padding: 0 24px 24px; }
.faq-item.is-open .faq-a { display: block; }

/* 每題答案的第一句是 40–60 字的直接結論，視覺上要拉開 */
.faq-a__lead {
	font-size: calc(var(--fs-body) - .5px);
	line-height: 1.9;
	font-weight: 700;
	color: var(--color-navy);
	padding-left: 16px;
	border-left: 3px solid var(--color-accent);
	margin: 0 0 16px;
}

/* 子條列用金色破折號，不用預設圓點 */
.faq-a ul { margin: 0; padding: 0; list-style: none; }
.faq-a li {
	position: relative; padding-left: 26px;
	font-size: var(--fs-small); color: var(--color-neutral-700);
	line-height: 1.85; margin-bottom: 7px;
}
.faq-a li::before {
	content: '—'; position: absolute; left: 0; top: 0;
	color: var(--color-accent-600); font-weight: 700;
}

/* 底部深藍 CTA 條 */
.faq-cta {
	display: flex; align-items: center; justify-content: space-between;
	gap: 20px; flex-wrap: wrap;
	margin-top: 22px; padding: 22px 26px;
	background: var(--color-navy);
	border-radius: var(--radius-lg);
}
.faq-cta__text {
	font-family: var(--font-heading); font-size: 17px; font-weight: 700;
	color: #fff; margin: 0;
}
.faq-note { font-size: var(--fs-tiny); color: var(--color-neutral-600); margin: 14px 0 0; line-height: 1.7; }

@media (max-width: 640px) {
	.faq-q { padding: 18px 18px; font-size: 16px; }
	.faq-a { padding: 0 18px 20px; }
	.faq-cta { padding: 20px; }
	.faq-cta .btn { width: 100%; }
}

/* --------------------------------------------------------------- 客戶評價 */

/* 設計稿：三張填色圓角卡，上方是服務類型膠囊標籤，中間評價內文，
   底下一條細線再放署名。沒有真實文案前，署名欄位留空即可。 */

.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.review {
	/* figure 與 blockquote 的瀏覽器預設 margin 是 1em 40px —— 不歸零的話
	   卡片會整個往右縮 40px，跟區塊標題對不齊。 */
	margin: 0;
	background: var(--color-bg);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius);
	padding: 28px 26px;
	display: flex; flex-direction: column;
}
.review__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.review__body {
	font-size: var(--fs-small); line-height: 1.9;
	color: var(--color-text);
	margin: 0 0 18px;   /* blockquote 預設左右 40px，必須歸零 */
}
.review__by {
	margin: auto 0 0; padding-top: 14px;
	border-top: 1px solid var(--color-divider);
	font-size: var(--fs-tiny); color: var(--color-neutral-600); line-height: 1.7;
}

@media (max-width: 980px) { .reviews { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- 資質與服務覆蓋 */

/* 設計稿：左邊淺色卡列牌照與資質，右邊深色卡放服務覆蓋地區膠囊 + 地圖。 */

.creds { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }

.creds__panel {
	border-radius: var(--radius);
	padding: 30px 28px;
}
.creds__panel--light { background: var(--color-surface); border: 1px solid var(--color-divider); }
.creds__panel--dark  { background: var(--color-navy); }

.creds__panel .kicker { margin-bottom: 18px; display: block; }
.creds__panel--dark .kicker { color: var(--color-accent); }

.cred-list { list-style: none; margin: 0; padding: 0; }
.cred {
	display: flex; align-items: flex-start; gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--color-divider);
}
.cred:first-child { padding-top: 0; }
.cred:last-child { border-bottom: 0; padding-bottom: 0; }
.cred__thumb {
	flex: 0 0 auto; width: 58px; height: 44px;
	border-radius: var(--radius-sm); overflow: hidden;
	background: var(--color-neutral-300);
}
.cred__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 兩者都是 span，必須明確 display:block 才會像設計稿一樣分兩行 */
.cred__title { display: block; font-size: 16px; font-weight: 700; color: var(--color-navy); margin: 0 0 4px; line-height: 1.5; }
.cred__meta  { display: block; font-size: var(--fs-small); color: var(--color-neutral-700); margin: 0; line-height: 1.7; }
.creds__note { font-size: var(--fs-tiny); color: var(--color-neutral-600); margin: 18px 0 0; line-height: 1.7; }

/* 服務覆蓋地區 */
.coverage__regions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.coverage__pill {
	display: inline-flex; align-items: center;
	padding: 8px 18px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--radius-pill);
	font-size: var(--fs-small); color: #fff; white-space: nowrap;
}
.coverage__map {
	border-radius: var(--radius-sm); overflow: hidden;
	background: rgba(255, 255, 255, .06);
	aspect-ratio: 3 / 1;   /* 設計稿的地圖是一條扁的，不是 16:9 */
	display: flex; align-items: center; justify-content: center;
}
.coverage__map img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coverage__placeholder {
	font-size: var(--fs-tiny); color: var(--color-accent-2-300);
	text-align: center; padding: 20px; line-height: 1.7;
}

@media (max-width: 980px) { .creds { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .creds__panel { padding: 24px 20px; } }

/* ------------------------------------------------- FAQ：服務頁的攤開模式 */

/* 設計稿的服務內頁把每題直接攤開：問句當 H2、答案是一般段落、
   細節條列放在一個填色圓角框裡。不收合，答案對搜尋引擎與 AI 直接可見。 */

.faq-sections { display: grid; gap: 34px; }
.faq-sec__q {
	font-size: 22px; font-weight: 700; color: var(--color-navy);
	margin: 0 0 12px; line-height: 1.5;
}
.faq-sec__lead {
	font-size: var(--fs-body); line-height: 1.9;
	color: var(--color-text); margin: 0;
}
.faq-sec__points {
	list-style: none; margin: 18px 0 0; padding: 22px 26px;
	background: var(--color-surface);
	border-radius: var(--radius);
}
.faq-sec__points li {
	position: relative; padding-left: 26px;
	font-size: var(--fs-small); color: var(--color-neutral-700);
	line-height: 1.85; margin-bottom: 7px;
}
.faq-sec__points li:last-child { margin-bottom: 0; }
.faq-sec__points li::before {
	content: '—'; position: absolute; left: 0; top: 0;
	color: var(--color-accent-600); font-weight: 700;
}

@media (max-width: 640px) {
	.faq-sec__q { font-size: 19px; }
	.faq-sec__points { padding: 18px 20px; }
}

/* --------------------------------------------------------- 側欄相關連結 */

.side-links {
	background: var(--color-surface);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius);
	padding: 22px 24px;
	margin-top: 16px;
}
.side-links__title {
	font-size: 11px; font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; color: var(--color-accent-700); margin-bottom: 12px;
}
.side-links ul { list-style: none; margin: 0; padding: 0; }
.side-links li + li { border-top: 1px solid var(--color-divider); }
.side-links a {
	display: block; padding: 11px 0;
	font-size: var(--fs-small); font-weight: 600; color: var(--color-navy);
}
.side-links a:hover { color: var(--color-accent-800); text-decoration: none; }

/* ------------------------------------------------------------ 深色 CTA 條 */

/* 設計稿服務頁在頁尾前有一條深藍膠囊 CTA，比整塊轉化區輕。 */
.cta-bar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 20px; flex-wrap: wrap;
	padding: 26px 30px;
	background: var(--color-navy);
	border-radius: var(--radius-lg);
}
.cta-bar__text {
	font-family: var(--font-heading); font-size: 19px; font-weight: 700;
	color: #fff; margin: 0;
}

@media (max-width: 640px) {
	.cta-bar { padding: 22px; }
	.cta-bar .btn { width: 100%; }
}

/* --------------------------------------------------------------- 對照表 */

.table-block__note {
	font-size: var(--fs-small); color: var(--color-neutral-700);
	line-height: 1.8; margin: 0 0 16px;
}
.table-scroll { overflow-x: auto; border: 1px solid var(--color-divider); border-radius: var(--radius); }
table.we-table { border-radius: inherit; overflow: hidden; }

table.we-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
table.we-table th,
table.we-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--color-divider); }
table.we-table thead th {
	background: var(--color-navy); color: #fff;
	font-weight: 600; white-space: nowrap;
}
table.we-table tbody tr:nth-child(even) { background: var(--color-surface); }
table.we-table tbody td:first-child { font-weight: 700; color: var(--color-navy); }
table.we-table tbody tr:last-child td { border-bottom: 0; }

.table-block__source {
	font-size: var(--fs-tiny); color: var(--color-neutral-600);
	margin: 12px 0 0; line-height: 1.7;
}

/* 行動版改為堆疊卡片，不要橫向捲動 */
.we-cards { display: none; }

@media (max-width: 760px) {
	.table-scroll { display: none; }
	.we-cards { display: grid; gap: 12px; }
	.we-card {
		border: 1px solid var(--color-divider); border-radius: var(--radius);
		overflow: hidden;
	}
	.we-card__head {
		background: var(--color-navy); color: #fff;
		padding: 11px 16px; font-weight: 700; font-size: var(--fs-small);
	}
	.we-card__row {
		display: flex; gap: 14px; padding: 10px 16px;
		border-top: 1px solid var(--color-divider); font-size: var(--fs-small);
	}
	.we-card__k { flex: 0 0 40%; color: var(--color-neutral-600); }
	.we-card__v { flex: 1 1 auto; font-weight: 600; color: var(--color-navy); }
}

/* --------------------------------------------------------------- 底部聯絡列 */

/* 設計稿：每列左邊一個圓形圖標，右邊粗體號碼 + 一行灰色說明。 */

.contact-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 18px; }
.contact-row { display: flex; align-items: flex-start; gap: 14px; }
.contact-row__icon {
	flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
	display: grid; place-items: center;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .18);
	color: var(--color-accent);
	font-size: 14px; font-weight: 700;
}
/* .section--navy a 會把連結染成金色，聯絡電話要維持設計稿的白色粗體，
   所以這裡要用同等特異性的選擇器蓋回來。 */
.contact-row__value,
.section--navy a.contact-row__value {
	display: block; font-size: 17px; font-weight: 700; color: #fff; line-height: 1.5;
}
.section--navy a.contact-row__value:hover { color: var(--color-accent-300); text-decoration: none; }
.contact-row__meta {
	display: block; font-size: var(--fs-small);
	color: var(--color-accent-2-200); line-height: 1.7; margin-top: 2px;
}

.wechat-block { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.wechat-block__qr {
	flex: 0 0 auto; width: 88px; height: 88px;
	border-radius: var(--radius-sm); overflow: hidden;
	background: rgba(255, 255, 255, .08);
}
.wechat-block__qr img { width: 100%; height: 100%; object-fit: contain; display: block; }

@media (max-width: 640px) {
	.contact-row__value { font-size: 16px; }
	.wechat-block__qr { width: 72px; height: 72px; }
}

/* --------------------------------------------------------------- 表單 */

.we-form {
	background: var(--color-bg);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius);
	padding: 26px 24px;
}
.we-form__title { font-size: 20px; margin: 0 0 6px; }
.we-form__promise {
	font-size: var(--fs-tiny); color: var(--color-success);
	margin: 0 0 18px; font-weight: 600;
}
.we-form__row { display: block; margin: 0 0 14px; }
.we-form__row > span {
	display: block; font-size: var(--fs-small); font-weight: 600;
	margin: 0 0 6px; color: var(--color-neutral-800);
}
.we-form input[type=text],
.we-form select,
.we-form textarea {
	width: 100%; min-height: 46px; padding: 11px 14px;
	border: 1px solid var(--color-neutral-500); border-radius: var(--radius-sm);
	font-family: inherit; font-size: 15.5px; color: var(--color-text);
	background: var(--color-bg);
	transition: border-color var(--dur-fast) var(--ease);
}
.we-form textarea { min-height: 86px; resize: vertical; line-height: 1.7; }
.we-form input:focus,
.we-form select:focus,
.we-form textarea:focus { border-color: var(--color-accent-2-600); outline: none; }
.we-form__submit { width: 100%; min-height: 50px; margin-top: 4px; }

.section--navy .we-form { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .16); }
.section--navy .we-form__title { color: #fff; }
.section--navy .we-form__row > span { color: var(--color-accent-2-100); }
.section--navy .we-form__promise { color: var(--color-accent-300); }

/* 服務頁側邊黏性表單 */
.layout-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 52px; align-items: start; }
.sidebar { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 18px; }

@media (max-width: 1000px) {
	.layout-sidebar { grid-template-columns: 1fr; gap: 40px; }
	.sidebar { position: static; }
}

/* --------------------------------------------------------------- 麵包屑 */

.breadcrumb {
	font-size: var(--fs-tiny); color: var(--color-neutral-600);
	padding: 16px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.breadcrumb a { color: var(--color-neutral-700); }
.breadcrumb span[aria-current] { color: var(--color-text); font-weight: 600; }
.breadcrumb .sep { opacity: .5; }

/* --------------------------------------------------------------- 文章 */

.post-card {
	display: flex; flex-direction: column;
	border: 1px solid var(--color-divider); border-radius: var(--radius);
	overflow: hidden; background: var(--color-bg);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.post-card:hover { border-color: var(--color-accent-300); box-shadow: var(--shadow-md); }
.post-card__thumb { aspect-ratio: 16 / 9; background: var(--color-surface); overflow: hidden; }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1 1 auto; }
.post-card__date {
	font-size: var(--fs-tiny); color: var(--color-neutral-600);
	margin: 0 0 8px; letter-spacing: .02em;
}
.post-card__cat {
	font-size: var(--fs-tiny); font-weight: 700; color: var(--color-accent-700);
	letter-spacing: .06em; margin: 0 0 8px;
}
.post-card h3 { font-size: 17px; line-height: 1.55; margin: 0 0 10px; }
.post-card h3 a { color: var(--color-text); }
.post-card h3 a:hover { color: var(--color-accent-800); text-decoration: none; }
.post-card__excerpt { font-size: var(--fs-small); color: var(--color-neutral-700); line-height: 1.75; margin: 0 0 14px; }
.post-card__meta {
	margin-top: auto; padding-top: 12px; border-top: 1px solid var(--color-divider);
	font-size: var(--fs-tiny); color: var(--color-neutral-600);
	display: flex; gap: 12px; align-items: center;
}

/* 篩選列 */
.filters { display: grid; gap: 16px; margin: 0 0 34px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.filter-row__label {
	font-size: var(--fs-tiny); font-weight: 700; color: var(--color-neutral-600);
	letter-spacing: .08em; flex: 0 0 auto; margin-right: 4px;
}
.chip {
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 38px; padding: 0 15px;
	border: 1px solid var(--color-divider); border-radius: var(--radius-pill);
	font-size: var(--fs-small); color: var(--color-neutral-800); background: var(--color-bg);
	transition: all var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--color-accent-400); text-decoration: none; }
.chip.is-active { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }
.chip__n { font-size: var(--fs-tiny); opacity: .65; }

.search-box { display: flex; gap: 10px; max-width: 520px; }
.search-box input[type=search] {
	flex: 1 1 auto; min-height: 46px; padding: 11px 16px;
	border: 1px solid var(--color-neutral-500); border-radius: var(--radius);
	font-family: inherit; font-size: 15.5px;
}
.search-box input:focus { border-color: var(--color-accent-2-600); outline: none; }

/* 語言切換 */
.lang-switch { display: inline-flex; border: 1px solid var(--color-divider); border-radius: var(--radius-pill); overflow: hidden; }
.lang-switch a {
	padding: 7px 15px; font-size: var(--fs-tiny); font-weight: 600;
	color: var(--color-neutral-700); background: var(--color-bg);
	border-left: 1px solid var(--color-divider);
}
.lang-switch a:first-child { border-left: 0; }
.lang-switch a:hover { background: var(--color-surface); text-decoration: none; }
.lang-switch a.is-active { background: var(--color-navy); color: #fff; }

/* 文章內文 */
.entry-content { font-size: var(--fs-body); line-height: 1.95; }
.entry-content h2 { font-size: 26px; margin: 1.8em 0 .6em; }
.entry-content h3 { font-size: 20px; margin: 1.6em 0 .5em; }
.entry-content ul,
.entry-content ol { padding-left: 24px; margin: 0 0 1.2em; }
.entry-content li { margin-bottom: 8px; }
.entry-content img { border-radius: var(--radius); }
.entry-content blockquote {
	margin: 1.6em 0; padding: 4px 0 4px 20px;
	border-left: 3px solid var(--color-accent);
	color: var(--color-neutral-700);
}
.entry-content table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); margin: 1.4em 0; }
.entry-content th,
.entry-content td { padding: 11px 14px; border: 1px solid var(--color-divider); text-align: left; }
.entry-content th { background: var(--color-surface); font-weight: 700; }

/* 分頁 */
.pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 44px; }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; min-height: 44px; padding: 0 12px;
	border: 1px solid var(--color-divider); border-radius: var(--radius);
	color: var(--color-text); font-size: var(--fs-small);
}
.pagination .page-numbers:hover { border-color: var(--color-accent-400); text-decoration: none; }
.pagination .page-numbers.current { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }

/* --------------------------------------------------------------- 頁尾 */

.site-footer { background: var(--color-navy); color: var(--color-accent-2-200); font-size: var(--fs-small); }
.site-footer__main { padding: 62px 0 44px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.site-footer h3 {
	color: #fff; font-size: var(--fs-tiny); font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase; margin: 0 0 16px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: var(--color-accent-2-200); }
.site-footer a:hover { color: #fff; text-decoration: none; }
.site-footer__desc { line-height: 1.85; margin: 0 0 16px; font-size: 13.5px; }
.site-footer__phone {
	display: inline-block; font-family: var(--font-heading);
	font-size: 21px; font-weight: 700; color: var(--color-accent); margin: 4px 0 8px;
}
.site-footer__phone:hover { color: var(--color-accent-300); text-decoration: none; }

.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding: 20px 0 26px;
	display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center;
	font-size: var(--fs-tiny); color: var(--color-accent-2-300);
}
.site-footer__bottom nav { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }

@media (max-width: 980px) { .site-footer__main { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 600px) { .site-footer__main { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- 進場動畫 */

/* 進場淡入刻意只在 JS 可用時才隱藏內容。
   若無條件寫 .reveal{opacity:0}，JS 一旦沒載入（擋 script、載入失敗、
   爬蟲不執行 JS）整頁內容就會是隱形的 —— 那是拿全站可讀性換一個動效。
   .we-js 由 header 的 inline script 加上，所以無 JS 時一切照樣看得見。 */
.we-js .reveal { opacity: 0; transform: translateY(10px); }
.we-js .reveal.is-in {
	opacity: 1; transform: none;
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* 舊內文裡的裸 SVG 安全網
   ------------------------------------------------------------------
   原站用 Elementor HTML widget 寫的版面，圖示是 <svg viewBox="0 0 24 24">
   而且不帶 width/height —— 尺寸完全靠外層容器的 CSS。一旦那層容器沒了
   （post_content 被剝掉 <div> 的情況），SVG 會直接撐滿內容欄寬變成 820px。

   we-core 的 legacy-content.php 會把完整版面救回來，正常情況輪不到這條規則。
   這裡只是兜底：整個選擇器包在 :where() 裡，優先級為 0，
   舊內容自己的 <style>（例如 .of-why .w-ico svg{width:26px}）一定蓋得過它，
   不會反過來把設計稿指定的尺寸壓掉。 */
:where(.entry-content svg:not([width]):not([height])) {
	width: 1.5em;
	height: 1.5em;
	vertical-align: -0.15em;
}

/* 牌照證書縮圖
   可點開看正本；牌照號可在公司註冊處官網查證，這是全站最硬的信任證明。 */
.creds__licence { margin: 18px 0 0; }
.creds__licence a {
	display: inline-block; border: 1px solid var(--color-divider);
	border-radius: var(--radius); overflow: hidden; background: #fff;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.creds__licence a:hover { border-color: var(--color-accent); box-shadow: var(--shadow); }
.creds__licence img { display: block; max-width: 190px; height: auto; }
.creds__licence figcaption {
	margin-top: 8px; font-size: var(--fs-small); color: var(--color-neutral-700);
}

/* 辦公室實拍：灣仔有實體辦公室、可預約到訪，是與空殼中介的關鍵差異 */
.office-gallery {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--gap); margin: 26px 0 0;
}
.office-gallery figure { margin: 0; }
.office-gallery img {
	display: block; width: 100%; height: auto;
	border-radius: var(--radius); border: 1px solid var(--color-divider);
}
.office-gallery figcaption {
	margin-top: 8px; font-size: var(--fs-small); color: var(--color-neutral-700);
}

/* 香港行業分類查詢
   ------------------------------------------------------------------
   客戶辦商業登記、開戶與 ODI 備案都要填業務性質，官方是一份 41 頁 PDF。
   這一區把 1,261 個編碼做成可即時搜尋的清單 —— 刻意只做一頁，
   不替每個代碼開網址，避免上千個薄內容頁拖累全站。 */
.hsic { margin: 26px 0 0; }

.hsic__controls { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
@media (max-width: 700px) { .hsic__controls { grid-template-columns: 1fr; } }

.hsic__search input, .hsic__filter select {
	width: 100%; min-height: 48px; padding: 0 14px;
	border: 1px solid var(--color-divider); border-radius: var(--radius);
	background: var(--color-bg); color: var(--color-text);
	font-family: inherit; font-size: var(--fs-body);
}
.hsic__search input:focus, .hsic__filter select:focus {
	outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: var(--color-accent);
}

.hsic__status {
	margin: 14px 0 0; font-size: var(--fs-small); color: var(--color-neutral-700);
}

.hsic__results { margin: 16px 0 0; display: grid; gap: 10px; }

.hsic-row {
	display: grid; grid-template-columns: 132px 1fr; gap: 16px;
	padding: 14px 16px; border: 1px solid var(--color-divider);
	border-radius: var(--radius); background: var(--color-bg);
}
@media (max-width: 640px) {
	.hsic-row { grid-template-columns: 1fr; gap: 6px; }
}

.hsic-row__code { display: flex; flex-direction: column; gap: 4px; }
.hsic-row__code code {
	font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: 15px; font-weight: 700; color: var(--color-accent-700); letter-spacing: .04em;
}
.hsic-row__level {
	font-size: 12px; color: var(--color-neutral-700);
}

.hsic-row__body p { margin: 0; }
.hsic-row__zh { font-weight: 600; line-height: 1.6; }
.hsic-row__en { font-size: var(--fs-small); color: var(--color-neutral-700); line-height: 1.55; }
.hsic-row__sec { margin-top: 6px !important; font-size: 12px; color: var(--color-neutral-600, #7a8593); }

.hsic mark { background: var(--color-accent-100); color: inherit; padding: 0 2px; border-radius: 2px; }

.hsic__source {
	margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--color-divider);
	font-size: var(--fs-small); color: var(--color-neutral-700); line-height: 1.7;
}

/* --------------------------------------------------------------- 雜項 */

.notice-box {
	border: 1px solid var(--color-accent-300);
	background: var(--color-accent-100);
	border-radius: var(--radius);
	padding: 18px 22px;
	font-size: var(--fs-small);
	line-height: 1.8;
}

.placeholder {
	border: 1px dashed var(--color-neutral-500);
	background: var(--color-surface);
	border-radius: var(--radius);
	padding: 22px;
	color: var(--color-neutral-700);
	font-size: var(--fs-small);
	line-height: 1.8;
}
.placeholder strong { color: var(--color-warning); }

/* --------------------------------------------------------------- WooCommerce

   備份內有 7 個已發布商品，以及 shop／cart／checkout／my-account／
   request-quote 等營運頁。保留 Woo 原生標記與更新相容性，只用品牌 token
   做外觀和響應式排版，不覆寫結帳或付款邏輯。 */

.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering,
.woocommerce .product_meta {
	font-size: var(--fs-small);
	color: var(--color-neutral-700);
}

.woocommerce .woocommerce-ordering select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
	min-height: 46px;
	padding: 10px 13px;
	border: 1px solid var(--color-neutral-500);
	border-radius: var(--radius);
	background: #fff;
	font: inherit;
	color: var(--color-text);
}

.woocommerce .select2-container .select2-selection--single {
	padding: 8px 12px;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 28px; }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; }
.woocommerce form .form-row { max-width: 620px; margin: 0 0 18px; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select { width: 100%; box-sizing: border-box; }
.woocommerce form .form-row input:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { border-color: var(--color-accent-2-600); outline: 2px solid rgba(42, 96, 152, .12); }

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 30px 0 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	float: none;
	width: auto;
	margin: 0;
	padding: 0 0 22px;
	border: 1px solid var(--color-divider);
	border-radius: var(--radius);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--shadow-sm);
}
.woocommerce ul.products li.product a img { margin: 0 0 18px; aspect-ratio: 4 / 3; object-fit: cover; }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button { margin-left: 20px; margin-right: 20px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 0; font-size: 18px; line-height: 1.5; }
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--color-accent-800); font-weight: 700; }

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .add-request-quote-button.button,
.woocommerce .yith-ywraq-add-to-quote a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 19px;
	border: 1px solid var(--color-accent);
	border-radius: var(--radius);
	background: var(--color-accent);
	color: var(--color-navy);
	font-weight: 700;
	line-height: 1.2;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .add-request-quote-button.button:hover,
.woocommerce .yith-ywraq-add-to-quote a:hover {
	border-color: var(--color-accent-600);
	background: var(--color-accent-600);
	color: #fff;
	text-decoration: none;
}

.woocommerce div.product { display: flow-root; }
.woocommerce div.product div.images img { border-radius: var(--radius); }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: var(--color-divider); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	border-color: var(--color-divider);
	border-radius: var(--radius) var(--radius) 0 0;
	background: var(--color-surface);
}

.woocommerce table.shop_table {
	border: 1px solid var(--color-divider);
	border-collapse: collapse;
	border-radius: var(--radius);
	font-size: var(--fs-small);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { padding: 14px 16px; border-color: var(--color-divider); }
.woocommerce table.shop_table th { background: var(--color-surface); color: var(--color-navy); }
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-account .woocommerce-MyAccount-content {
	padding: 24px;
	border: 1px solid var(--color-divider);
	border-radius: var(--radius);
	background: #fff;
}
.woocommerce-cart .cart-collaterals { display: flow-root; }
.woocommerce-cart .cart-collaterals .cart_totals { width: min(100%, 520px); margin-left: auto; }

.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message {
	padding: 16px 20px 16px 48px;
	border-top: 0;
	border-left: 4px solid var(--color-accent-2-600);
	border-radius: var(--radius);
	background: var(--color-accent-2-100);
	color: var(--color-text);
}
.woocommerce .woocommerce-error { border-left-color: var(--color-danger); background: #fdeeee; }
.woocommerce .woocommerce-message { border-left-color: var(--color-success); background: #eef7f4; }

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--color-divider);
	border-radius: var(--radius);
	overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation li + li { border-top: 1px solid var(--color-divider); }
.woocommerce-account .woocommerce-MyAccount-navigation a { display: block; padding: 12px 16px; color: var(--color-text); }
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a { background: var(--color-navy); color: #fff; }

@media (max-width: 900px) {
	.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.woocommerce-cart .cart-collaterals .cart_totals { width: 100%; }
}

@media (max-width: 600px) {
	.woocommerce ul.products { grid-template-columns: 1fr; }
	.woocommerce ul.products[class*=columns-] li.product { width: auto; }
	.woocommerce table.shop_table_responsive tr td,
	.woocommerce-page table.shop_table_responsive tr td { padding: 12px 14px; }
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content { float: none; width: 100%; }
	.woocommerce-account .woocommerce-MyAccount-content { margin-top: 22px; padding: 18px; }
}