/* ==========================================================================
   固定頁共用元件

   13 個固定頁（webdesign / ai-marketing / branding / prices …）共用同一套
   卡片、清單與問答元件。放在這一支、由 is_page() 條件式載入，
   而不是每頁各寫一份 —— 元件只有一個來源，改一次全站生效。

   通用的 .aark-section / .aark-section-head / .aark-wrap / .aark-btn
   在 style.css，不在這裡。
   ========================================================================== */

/* --- 卡片格線基礎 ---------------------------------------------------- */

.aark-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.aark-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.aark-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.aark-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; }

/* --- 名詞對照卡（網頁設計 vs 網站設計） ------------------------------ */

.aark-term {
	background: var(--aark-white);
	border: 1px solid var(--aark-navy);
	padding: 2.25rem;
	box-shadow: 7px 7px 0 var(--aark-blue);
}

.aark-term .tk {
	font-family: var(--aark-mono);
	font-size: .68rem;
	letter-spacing: .08em;
	color: var(--aark-blue-ink);
	margin-bottom: 1rem;
}

.aark-term h3 {
	font-family: var(--aark-serif);
	font-size: 1.5rem;
	color: var(--aark-navy);
	margin: 0 0 .75rem;
}

.aark-term p { margin: 0; color: var(--aark-slate); font-size: .95rem; }

/* 區段結語：比內文重一點，但不到標題 */
.aark-note-lead {
	margin: 2rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--aark-line);
	color: var(--aark-slate);
	font-size: .95rem;
	max-width: 72ch;
}

.aark-note-lead strong { color: var(--aark-navy); }

/* --- 編號卡（問題／類型／產業共用外觀） ------------------------------ */

.aark-numcard {
	background: var(--aark-white);
	border: 1px solid var(--aark-line);
	padding: 1.75rem;
	transition: border-color .18s ease, transform .18s ease;
}

.aark-numcard:hover { border-color: var(--aark-navy); transform: translateY(-2px); }

.aark-numcard .nk {
	font-family: var(--aark-mono);
	font-size: .68rem;
	letter-spacing: .08em;
	color: var(--aark-orange-ink);
	margin-bottom: .85rem;
}

.aark-numcard h3 {
	font-family: var(--aark-serif);
	font-size: 1.2rem;
	color: var(--aark-navy);
	margin: 0 0 .5rem;
	line-height: 1.35;
}

.aark-numcard p { margin: 0; color: var(--aark-slate); font-size: .9rem; line-height: 1.75; }

/* 米白底區段裡的卡片改用米白反白，避免白配白看不出邊界 */
.aark-on-paper .aark-numcard { background: var(--aark-paper); }

/* --- SEO / AEO / GEO 深色卡 ------------------------------------------ */

.aark-geo { background: var(--aark-navy-deep); border-top: 0; }

.aark-geo .aark-section-head,
.aark-geo .aark-section-head h2 { color: var(--aark-white); }

.aark-geo .aark-section-lede { color: rgba(255, 255, 255, .72); }

.aark-geo .aark-eyebrow { color: var(--aark-blue); }

.aark-geocard {
	border: 1px solid rgba(255, 255, 255, .18);
	padding: 2rem;
	background: var(--aark-navy-raise);
}

.aark-geocard .gk {
	font-family: var(--aark-mono);
	font-size: 1.75rem;
	font-weight: 600;
	color: var(--aark-orange);
	margin-bottom: 1rem;
	letter-spacing: -.02em;
}

.aark-geocard h3 {
	font-family: var(--aark-serif);
	font-size: 1.2rem;
	color: var(--aark-white);
	margin: 0 0 .6rem;
}

.aark-geocard p { margin: 0; color: rgba(255, 255, 255, .72); font-size: .9rem; line-height: 1.75; }

/* --- 流程列 ----------------------------------------------------------- */

.aark-steps { border-top: 2px solid var(--aark-navy); }

.aark-step {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 2rem;
	padding: 1.6rem 0;
	border-bottom: 1px solid var(--aark-line);
	align-items: baseline;
}

.aark-step > span {
	font-family: var(--aark-mono);
	font-size: .72rem;
	letter-spacing: .08em;
	color: var(--aark-blue-ink);
}

.aark-step h3 {
	font-family: var(--aark-serif);
	font-size: 1.2rem;
	color: var(--aark-navy);
	margin: 0 0 .35rem;
}

.aark-step p { margin: 0; color: var(--aark-slate); font-size: .92rem; }

/* --- 案例卡（固定頁版：等寬三欄，比首頁的不規則跨欄單純） ------------ */

.aark-pcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.aark-pcase {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--aark-navy);
	text-decoration: none;
}

.aark-pcase img {
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	object-fit: cover;
	transition: transform .5s ease;
}

.aark-pcase::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 62, .92) 0%, rgba(0, 0, 62, .55) 45%, rgba(0, 0, 62, .12) 100%);
}

.aark-pcase:hover img { transform: scale(1.04); }

.aark-pcase-copy {
	position: relative;
	z-index: 1;
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 320px;
}

.aark-pcase-copy small {
	font-family: var(--aark-mono);
	font-size: .62rem;
	letter-spacing: .1em;
	color: var(--aark-blue);
	display: block;
	margin-bottom: .5rem;
}

.aark-pcase-copy h3 {
	font-family: var(--aark-serif);
	font-size: 1.35rem;
	color: var(--aark-white);
	margin: 0 0 .4rem;
}

.aark-pcase-copy span { font-size: .82rem; color: rgba(255, 255, 255, .75); }

/* --- 價格入口 --------------------------------------------------------- */

.aark-price-teaser {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2.5rem;
	align-items: center;
	background: var(--aark-paper);
	border: 1px solid var(--aark-navy);
	padding: 2.5rem;
	box-shadow: 9px 9px 0 var(--aark-blue);
}

.aark-price-teaser h3 {
	font-family: var(--aark-serif);
	font-size: 1.6rem;
	color: var(--aark-navy);
	margin: .85rem 0 .6rem;
}

.aark-price-teaser p { margin: 0; color: var(--aark-slate); font-size: .95rem; max-width: 60ch; }

/* --- FAQ（原生 details，不用 JS） ------------------------------------- */

.aark-faq-list { border-top: 2px solid var(--aark-navy); max-width: 900px; }

.aark-faq-item { border-bottom: 1px solid var(--aark-line); }

.aark-faq-item summary {
	cursor: pointer;
	list-style: none;
	padding: 1.35rem 2.5rem 1.35rem 0;
	position: relative;
	font-weight: 700;
	color: var(--aark-navy);
	font-size: 1.02rem;
	line-height: 1.6;
}

.aark-faq-item summary::-webkit-details-marker { display: none; }

.aark-faq-item summary::after {
	content: "+";
	position: absolute;
	right: .25rem;
	top: 1.15rem;
	font-family: var(--aark-mono);
	font-size: 1.3rem;
	color: var(--aark-orange-ink);
	line-height: 1;
}

.aark-faq-item[open] summary::after { content: "\2212"; }

.aark-faq-item summary:hover { color: var(--aark-orange-ink); }

.aark-faq-item .faq-a {
	margin: 0 0 1.5rem;
	padding-right: 2.5rem;
	color: var(--aark-slate);
	font-size: .95rem;
	line-height: 1.9;
	max-width: 70ch;
}

.aark-faq-item .faq-a a {
	color: var(--aark-navy);
	font-weight: 700;
	border-bottom: 2px solid var(--aark-orange);
	text-decoration: none;
}

/* --- 區段底色 --------------------------------------------------------- */

.aark-on-white { background: var(--aark-white); }
.aark-on-paper { background: var(--aark-paper); }

/* --- 響應式 ----------------------------------------------------------- */

@media (max-width: 960px) {
	.aark-grid-4,
	.aark-grid-5,
	.aark-grid-3,
	.aark-pcase-grid { grid-template-columns: repeat(2, 1fr); }
	.aark-price-teaser { grid-template-columns: 1fr; }
	.aark-step { grid-template-columns: 100px 1fr; gap: 1.25rem; }
}

@media (max-width: 600px) {
	.aark-grid-2,
	.aark-grid-3,
	.aark-grid-4,
	.aark-grid-5,
	.aark-pcase-grid { grid-template-columns: 1fr; }
	.aark-term,
	.aark-price-teaser { padding: 1.75rem; box-shadow: 5px 5px 0 var(--aark-blue); }
	.aark-step { grid-template-columns: 1fr; gap: .4rem; }
	.aark-faq-item .faq-a { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.aark-numcard,
	.aark-pcase img { transition: none; }
	.aark-numcard:hover,
	.aark-pcase:hover img { transform: none; }
}


/* ==========================================================================
   方案與費用元件
   /prices/ 使用；加購列與維護列的「待核定」樣式其他頁也共用。
   ========================================================================== */

/* --- 方案卡 ----------------------------------------------------------- */

.aark-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }

.aark-plan {
	position: relative;
	background: var(--aark-white);
	border: 1px solid var(--aark-navy);
	padding: 2.25rem;
	display: flex;
	flex-direction: column;
}

/* 主推方案：深底 + 位移陰影，是三張卡裡唯一的視覺重音 */
.aark-plan.is-featured {
	background: var(--aark-navy);
	color: var(--aark-white);
	box-shadow: 9px 9px 0 var(--aark-blue);
}

.aark-featured-flag {
	position: absolute;
	top: -1px;
	right: -1px;
	background: var(--aark-orange);
	color: var(--aark-white);
	font-family: var(--aark-mono);
	font-size: .65rem;
	font-weight: 700;
	font-weight: 600;
	letter-spacing: .06em;
	padding: .4rem .75rem;
}

.aark-plan .pnum {
	font-family: var(--aark-mono);
	font-size: .68rem;
	letter-spacing: .08em;
	color: var(--aark-blue-ink);
	margin-bottom: .85rem;
}

.aark-plan.is-featured .pnum { color: var(--aark-blue); }

.aark-plan h3 {
	font-family: var(--aark-serif);
	font-size: 1.6rem;
	color: var(--aark-navy);
	margin: 0 0 .5rem;
}

.aark-plan.is-featured h3 { color: var(--aark-white); }

.aark-plan .ptagline { margin: 0 0 1.5rem; color: var(--aark-slate); font-size: .92rem; line-height: 1.75; }

.aark-plan.is-featured .ptagline { color: rgba(255, 255, 255, .72); }

.aark-price-slot { border-block: 1px solid var(--aark-line); padding: 1.25rem 0; margin-bottom: 1.5rem; }

.aark-plan.is-featured .aark-price-slot { border-color: rgba(255, 255, 255, .2); }

.aark-price-amount { display: flex; align-items: baseline; gap: .3rem; font-family: var(--aark-mono); }

.aark-price-amount .cur { font-size: .9rem; color: var(--aark-slate); }

.aark-price-amount .fig {
	font-size: 2.4rem;
	font-weight: 600;
	color: var(--aark-navy);
	letter-spacing: -.03em;
}

.aark-price-amount .unit { font-size: .9rem; color: var(--aark-slate); }

.aark-price-amount .custom {
	font-size: 1.9rem;
	font-weight: 600;
	color: var(--aark-navy);
	font-family: var(--aark-serif);
}

.aark-plan.is-featured .aark-price-amount .fig,
.aark-plan.is-featured .aark-price-amount .custom { color: var(--aark-orange); }

.aark-plan.is-featured .aark-price-amount .cur,
.aark-plan.is-featured .aark-price-amount .unit { color: rgba(255, 255, 255, .7); }

.aark-price-note { margin: .5rem 0 0; font-size: .75rem; color: var(--aark-slate); line-height: 1.7; }

.aark-plan.is-featured .aark-price-note { color: rgba(255, 255, 255, .6); }

.aark-fit-label {
	font-family: var(--aark-mono);
	font-size: .65rem;
	letter-spacing: .1em;
	color: var(--aark-slate);
	margin-bottom: .75rem;
}

.aark-plan.is-featured .aark-fit-label { color: rgba(255, 255, 255, .6); }

.aark-plan ul { margin: 0 0 1.75rem; padding-left: 1.1rem; flex: 1; }

.aark-plan li { color: var(--aark-slate); font-size: .9rem; line-height: 1.9; }

.aark-plan.is-featured li { color: rgba(255, 255, 255, .8); }

.aark-plan > .aark-btn { width: 100%; }

.aark-plan.is-featured > .aark-btn {
	background: var(--aark-orange);
	color: var(--aark-white);
	border-color: var(--aark-orange-ink);
	font-weight: 900;
}

/* --- 包含 / 不包含 ---------------------------------------------------- */

.aark-scope-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

.aark-scope-col { border: 1px solid var(--aark-navy); padding: 2.25rem; background: var(--aark-paper); }

.aark-scope-col .sk {
	font-family: var(--aark-mono);
	font-size: .65rem;
	letter-spacing: .1em;
	margin-bottom: .75rem;
}

.aark-scope-col.is-included .sk { color: var(--aark-blue-ink); }

/* 不包含欄用警示色，但不是錯誤——只是要一眼分辨得出來 */
.aark-scope-col.is-excluded { background: var(--aark-danger-bg); border-color: var(--aark-danger-ink); }

.aark-scope-col.is-excluded .sk { color: var(--aark-danger-ink); }

.aark-scope-col h3 { font-family: var(--aark-serif); font-size: 1.35rem; color: var(--aark-navy); margin: 0 0 1.25rem; }

.aark-scope-col ul { margin: 0; padding-left: 1.1rem; }

.aark-scope-col li { color: var(--aark-slate); font-size: .92rem; line-height: 2; }

.aark-scope-col .aark-note-lead { margin-top: 1.5rem; font-size: .85rem; }

/* --- 加購列 ----------------------------------------------------------- */

.aark-addons { border-top: 2px solid var(--aark-navy); }

.aark-addon {
	display: grid;
	grid-template-columns: 220px 1fr auto;
	gap: 2rem;
	align-items: center;
	padding: 1.4rem 0;
	border-bottom: 1px solid var(--aark-line);
}

.aark-addon h3 { font-family: var(--aark-serif); font-size: 1.15rem; color: var(--aark-navy); margin: 0; }

.aark-addon p { margin: 0; color: var(--aark-slate); font-size: .9rem; }

/* --- 維護 ------------------------------------------------------------- */

.aark-maint { background: var(--aark-navy-deep); border-top: 0; }

.aark-maint-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }

.aark-maint h2 { color: var(--aark-white); margin: 0 0 1.25rem; }

.aark-maint .aark-eyebrow { color: var(--aark-blue); }

.aark-maint p { color: rgba(255, 255, 255, .72); margin: 0 0 1rem; }

.aark-maint-list { border-top: 1px solid rgba(255, 255, 255, .18); }

.aark-maint-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	padding: 1rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, .18);
	color: var(--aark-white);
	font-size: .95rem;
}

.aark-maint-item b { font-family: var(--aark-mono); font-size: .78rem; color: var(--aark-blue); font-weight: 600; }

/* --- 報價流程 --------------------------------------------------------- */

.aark-quote-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

.aark-quote-step { border-top: 2px solid var(--aark-navy); padding-top: 1.25rem; }

.aark-quote-step .qn {
	font-family: var(--aark-mono);
	font-size: .68rem;
	letter-spacing: .08em;
	color: var(--aark-orange-ink);
	margin-bottom: .75rem;
}

.aark-quote-step h3 { font-family: var(--aark-serif); font-size: 1.15rem; color: var(--aark-navy); margin: 0 0 .4rem; }

.aark-quote-step p { margin: 0; color: var(--aark-slate); font-size: .88rem; line-height: 1.75; }

/* --- 響應式 ----------------------------------------------------------- */

@media (max-width: 960px) {
	.aark-plans { grid-template-columns: 1fr; }
	.aark-scope-grid,
	.aark-maint-grid { grid-template-columns: 1fr; gap: 2rem; }
	.aark-quote-steps { grid-template-columns: 1fr 1fr; }
	.aark-addon { grid-template-columns: 1fr auto; gap: 1rem; }
	.aark-addon p { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
	.aark-plan,
	.aark-scope-col { padding: 1.75rem; }
	.aark-quote-steps { grid-template-columns: 1fr; }
	.aark-addon { grid-template-columns: 1fr; gap: .4rem; }
}


/* --- 網站類型卡的縮圖版位 --- */

.aark-numcard.has-shot { padding: 0; overflow: hidden; }

.aark-numcard.has-shot > .aark-imgslot,
.aark-numcard.has-shot > img {
	width: 100%;
	border-left: 0;
	border-right: 0;
	border-top: 0;
	margin-bottom: 1.25rem;
	display: block;
	object-fit: cover;
}

.aark-numcard.has-shot > .nk,
.aark-numcard.has-shot > h3,
.aark-numcard.has-shot > p { padding-inline: 1.75rem; }

.aark-numcard.has-shot > p { padding-bottom: 1.75rem; }

/* --- 首頁產品段的截圖版位 --- */

.aark-product-shot { margin-bottom: 2.5rem; max-width: 860px; }


/* --- 產品截圖 --- */

.aark-product-shot {
	margin: 0 0 2.5rem;
	max-width: 880px;
	border: 1px solid var(--aark-line);
	background: var(--aark-white);
	padding: .75rem;
}

.aark-product-shot img { display: block; width: 100%; height: auto; }

.aark-product-shot figcaption {
	font-family: var(--aark-mono);
	font-size: .72rem;
	color: var(--aark-slate);
	line-height: 1.7;
	padding: .75rem .25rem .25rem;
}


/* ==========================================================================
   需求表單（/contactus/）
   ========================================================================== */

.aark-form-layout {
	display: grid;
	grid-template-columns: 1.35fr .65fr;
	gap: 3rem;
	align-items: start;
}

/* --- 表單本體 --- */

.aark-form {
	background: var(--aark-white);
	border: 1px solid var(--aark-navy);
	padding: 2.5rem;
	box-shadow: 9px 9px 0 var(--aark-blue);
}

/* 蜜罐：必須「視覺上不存在」但仍留在 DOM 讓機器人填。
   不能用 display:none —— 部分機器人會跳過 hidden 的欄位。 */
.aark-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.aark-form-step {
	font-family: var(--aark-mono);
	font-size: .68rem;
	letter-spacing: .1em;
	color: var(--aark-blue-ink);
	margin: 0 0 1.5rem;
}

.aark-form-alert {
	border: 1px solid var(--aark-danger-ink);
	background: var(--aark-danger-bg);
	padding: 1rem 1.25rem;
	margin-bottom: 1.75rem;
}

.aark-form-alert b { color: var(--aark-danger-ink); font-size: .9rem; }
.aark-form-alert p { margin: .3rem 0 0; font-size: .9rem; color: var(--aark-ink); }

.aark-fieldset { border: 0; padding: 0; margin: 0 0 2.25rem; }

.aark-fieldset legend {
	font-family: var(--aark-serif);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--aark-navy);
	padding: 0;
	display: flex;
	align-items: baseline;
	gap: .75rem;
}

.aark-fieldset legend .fs-num {
	font-family: var(--aark-mono);
	font-size: .7rem;
	color: var(--aark-orange-ink);
	font-weight: 600;
}

.aark-fieldset .fs-hint {
	margin: .5rem 0 1.5rem;
	font-size: .85rem;
	color: var(--aark-slate);
}

.aark-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	margin-bottom: 1.25rem;
}

.aark-field.is-wide { grid-column: 1 / -1; }

.aark-field label {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	font-size: .85rem;
	font-weight: 700;
	color: var(--aark-navy);
	margin-bottom: .45rem;
}

.aark-field .req,
.aark-field .opt {
	font-family: var(--aark-mono);
	font-size: .58rem;
	letter-spacing: .06em;
	padding: 2px 6px;
	font-weight: 600;
}

.aark-field .req { background: var(--aark-orange); color: var(--aark-white); font-weight: 700; }
.aark-field .opt { background: var(--aark-mist); color: var(--aark-navy); }

.aark-field input,
.aark-field select,
.aark-field textarea {
	width: 100%;
	border: 1px solid var(--aark-navy);
	border-radius: 0;
	padding: .8rem .9rem;
	font: inherit;
	font-size: .95rem;
	color: var(--aark-ink);
	background: var(--aark-white);
}

.aark-field textarea { resize: vertical; min-height: 7rem; }

.aark-field input:focus,
.aark-field select:focus,
.aark-field textarea:focus {
	outline: 0;
	border-color: var(--aark-blue-ink);
	box-shadow: 0 0 0 3px rgba(130, 152, 255, .4);
}

/* 瀏覽器原生驗證：只在使用者動過之後才標紅，
   一進頁面就滿江紅會讓人直接關掉 */
.aark-field input:user-invalid,
.aark-field select:user-invalid,
.aark-field textarea:user-invalid { border-color: var(--aark-danger); }

.aark-consent {
	display: flex;
	gap: .75rem;
	align-items: flex-start;
	font-size: .88rem;
	line-height: 1.75;
	color: var(--aark-slate);
	margin-bottom: 1.75rem;
}

.aark-consent input { margin-top: .3rem; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; }

.aark-consent a {
	color: var(--aark-navy);
	font-weight: 700;
	border-bottom: 2px solid var(--aark-orange);
	text-decoration: none;
}

.aark-form > .aark-fieldset:last-of-type .aark-btn { width: 100%; }

.aark-form-note {
	margin: 1rem 0 0;
	font-size: .8rem;
	color: var(--aark-slate);
	text-align: center;
}

/* --- 側欄 --- */

.aark-form-aside { display: grid; gap: 1.25rem; position: sticky; top: 6rem; }

.aark-aside-block {
	border: 1px solid var(--aark-navy);
	background: var(--aark-white);
	padding: 1.75rem;
}

.aark-aside-block h2 {
	font-family: var(--aark-serif);
	font-size: 1.3rem;
	color: var(--aark-navy);
	margin: 0 0 1.25rem;
	line-height: 1.3;
}

/* 深色卡：文字色必須寫在比外層更高的優先級上。
   同樣的坑已經踩過三次（頁尾、GEO 卡、首頁 CTA 右卡）—— 深色元件不靠繼承。 */
.aark-aside-block.is-dark { background: var(--aark-navy); border-color: var(--aark-navy); }
.aark-aside-block.is-dark h2 { color: var(--aark-white); }
.aark-aside-block.is-dark .aark-eyebrow { color: var(--aark-blue); }
.aark-aside-block.is-dark span,
.aark-aside-block.is-dark li { color: rgba(255, 255, 255, .78); }

.aark-aside-steps { list-style: none; margin: 0; padding: 0; }

.aark-aside-steps li {
	display: grid;
	grid-template-columns: 2rem 1fr;
	gap: .75rem;
	padding: .7rem 0;
	border-top: 1px solid rgba(255, 255, 255, .18);
	font-size: .88rem;
	line-height: 1.6;
}

.aark-aside-steps li:first-child { border-top: 0; }

.aark-aside-steps b {
	font-family: var(--aark-mono);
	font-size: .72rem;
	color: var(--aark-orange);
	font-weight: 600;
}

.aark-cline {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: .6rem 0;
	border-top: 1px solid var(--aark-line);
	font-size: .88rem;
}

.aark-cline:first-of-type { border-top: 0; }

.aark-cline .ck { color: var(--aark-slate); flex: 0 0 auto; font-size: .8rem; }

.aark-cline .cv {
	font-family: var(--aark-mono);
	color: var(--aark-navy);
	text-align: right;
	text-decoration: none;
	font-size: .85rem;
}

.aark-cline a.cv { border-bottom: 1px solid var(--aark-line); }
.aark-cline a.cv:hover { border-bottom-color: var(--aark-orange); }
.aark-cline a.cv.is-link { font-family: var(--aark-sans); font-weight: 700; border-bottom: 2px solid var(--aark-orange); }

/* --- 感謝頁 --- */

.aark-thanks-grid {
	display: grid;
	grid-template-columns: 1.2fr .8fr;
	gap: 3rem;
	align-items: start;
}

.aark-thanks h2 {
	font-family: var(--aark-serif);
	font-size: clamp(1.8rem, 3.6vw, 2.6rem);
	color: var(--aark-navy);
	margin: 0 0 1rem;
}

.aark-thanks-actions { display: flex; gap: .875rem; flex-wrap: wrap; margin-top: 1.75rem; }

.aark-thanks a[href^="tel:"] {
	font-family: var(--aark-mono);
	color: var(--aark-navy);
	border-bottom: 2px solid var(--aark-orange);
	text-decoration: none;
}

/* --- 響應式 --- */

@media (max-width: 960px) {
	.aark-form-layout,
	.aark-thanks-grid { grid-template-columns: 1fr; gap: 2rem; }
	.aark-form-aside { position: static; }
}

@media (max-width: 600px) {
	.aark-form { padding: 1.5rem; box-shadow: 5px 5px 0 var(--aark-blue); }
	.aark-field-row { grid-template-columns: 1fr; gap: 1rem; }
	.aark-thanks-actions { display: grid; }
	.aark-thanks-actions .aark-btn { width: 100%; text-align: center; }
}


/* ==========================================================================
   /prices/ 的圖像化元件（試點）

   三種新元件，對應討論裡的三個等級：
     A 證據型　.aark-plan-shot     方案卡的代表作縮圖
     B 圖解型　.aark-matrix        三方案對照矩陣
                .aark-costgraph    費用組成圖
     氛圍型　  .aark-mood          全幅視覺休息帶

   圖解刻意用 HTML 表格與 SVG，不用點陣圖：
     表格對螢幕閱讀器與搜尋引擎都是可讀的內容，圖片不是；
     SVG 縮放不糊、檔案小、顏色跟著品牌 token 走。
   ========================================================================== */

/* --- A. 方案卡縮圖 --- */

.aark-plan-shot {
	position: relative;
	display: block;
	margin: -2.25rem -2.25rem 1.5rem;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--aark-navy);
}

.aark-plan-shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}

.aark-plan:hover .aark-plan-shot img { transform: scale(1.04); }

/* 縮圖上的說明：這是「這個方案做出來長這樣」的佐證，不是裝飾 */
.aark-plan-shot figcaption {
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 1.5rem 1rem .7rem;
	background: linear-gradient(to top, rgba(0, 0, 62, .92), rgba(0, 0, 62, 0));
	font-family: var(--aark-mono);
	font-size: .62rem;
	letter-spacing: .06em;
	color: rgba(255, 255, 255, .85);
}

.aark-plan.is-featured .aark-plan-shot { margin-top: -2.25rem; }

/* --- B1. 三方案對照矩陣 --- */

.aark-matrix-wrap { overflow-x: auto; }

.aark-matrix {
	width: 100%;
	border-collapse: collapse;
	font-size: .9rem;
	min-width: 640px;
}

.aark-matrix caption {
	text-align: left;
	font-family: var(--aark-mono);
	font-size: .68rem;
	letter-spacing: .1em;
	color: var(--aark-blue-ink);
	padding-bottom: 1rem;
}

.aark-matrix th,
.aark-matrix td {
	border: 1px solid var(--aark-line);
	padding: .85rem 1rem;
	text-align: left;
	vertical-align: middle;
}

.aark-matrix thead th {
	background: var(--aark-navy);
	color: var(--aark-white);
	font-family: var(--aark-serif);
	font-size: 1rem;
	text-align: center;
	border-color: var(--aark-navy);
}

/* 左上角那格沒有背景，但 thead th 的字是白的 —— 白字配白底＝隱形。
   顏色必須跟著背景一起改，不能只改 background。 */
.aark-matrix thead th:first-child {
	background: transparent;
	border-color: transparent;
	color: var(--aark-slate);
	font-family: var(--aark-mono);
	font-size: .68rem;
	letter-spacing: .08em;
	text-align: left;
}

/* 主推方案整欄反白，跟方案卡的視覺重音一致 */
.aark-matrix thead th.is-featured { background: var(--aark-orange); color: var(--aark-white); border-color: var(--aark-orange-ink); }
.aark-matrix td.is-featured { background: rgba(255, 110, 52, .07); }

.aark-matrix tbody th {
	font-weight: 700;
	color: var(--aark-navy);
	background: var(--aark-paper);
	width: 34%;
}

.aark-matrix td { text-align: center; font-family: var(--aark-mono); }

.aark-matrix .yes { color: var(--aark-orange-ink); font-weight: 600; }
.aark-matrix .no  { color: var(--aark-mist); }
.aark-matrix .opt { color: var(--aark-slate); font-size: .8rem; font-family: var(--aark-sans); }

.aark-matrix tbody tr:last-child td,
.aark-matrix tbody tr:last-child th { border-bottom-width: 2px; border-bottom-color: var(--aark-navy); }

/* --- B2. 費用組成圖 --- */

.aark-costgraph {
	background: var(--aark-white);
	border: 1px solid var(--aark-navy);
	padding: 2.25rem;
	box-shadow: 9px 9px 0 var(--aark-blue);
}

.aark-costgraph svg { width: 100%; height: auto; display: block; }

.aark-costgraph figcaption {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--aark-line);
	font-size: .88rem;
	line-height: 1.8;
	color: var(--aark-slate);
	max-width: 66ch;
}

.aark-costgraph figcaption strong { color: var(--aark-navy); }

/* --- 氛圍帶 --- */

.aark-mood {
	position: relative;
	min-height: 380px;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--aark-navy);
	border-top: 0;
	padding: 0;
}

.aark-mood > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .38;
}

.aark-mood .aark-imgslot {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	opacity: .55;
}

.aark-mood-copy {
	position: relative;
	z-index: 1;
	max-width: 46ch;
}

.aark-mood-copy p {
	font-family: var(--aark-serif);
	font-size: clamp(1.4rem, 2.8vw, 2.1rem);
	font-weight: 700;
	line-height: 1.45;
	color: var(--aark-white);
	margin: 0;
	letter-spacing: -.02em;
}

.aark-mood-copy cite {
	display: block;
	margin-top: 1.25rem;
	font-family: var(--aark-mono);
	font-size: .7rem;
	letter-spacing: .08em;
	font-style: normal;
	color: var(--aark-blue);
}

/* --- 響應式 --- */

@media (max-width: 960px) {
	.aark-mood { min-height: 300px; }
}

@media (max-width: 600px) {
	.aark-plan-shot { margin: -1.75rem -1.75rem 1.25rem; }
	.aark-costgraph { padding: 1.5rem; box-shadow: 5px 5px 0 var(--aark-blue); }
	.aark-mood { min-height: 260px; }
}

@media (prefers-reduced-motion: reduce) {
	.aark-plan-shot img,
	.aark-plan:hover .aark-plan-shot img { transition: none; transform: none; }
}


/* ==========================================================================
   全寬情境帶 .aark-band

   放在區段之間當視覺休息點。與 .aark-mood 的差別：
   .aark-mood 帶文案（用在 /prices/ 的引言），.aark-band 只有圖，
   純粹讓連續的文字區段之間有一口氣。

   2026-09-09 改成 Kadence rowlayout 的視差背景（bgImgAttachment: parallax）。
   Mark 要「底圖隨畫面上下移動、露出更多畫面」，同時把原本右下角
   「2013 年起累積的網站作品」那塊圖說拿掉（他認為沒有說明必要）。
   ⚠ 原本這裡寫的是「刻意不做視差」——那是舊的判斷，已被 Mark 推翻，不要改回去。
   ⚠ 圖已經不是 <img> 而是 rowlayout 的背景，所以下面 .aark-band > img
      那幾條是留給日後換回圖片版用的，現在不會命中。
   ========================================================================== */

.aark-band {
	position: relative;
	overflow: hidden;
	background: var(--aark-navy);
	border-top: 0;
	padding: 0;
}

/* ⚠ 待補框不能列進來：它需要 flex 才能把眉標／標題／說明堆成三行，
   設成 display:block 會讓三個 span 變 inline 擠成一行、互相重疊。 */
.aark-band,
.aark-band > img {
	display: block;
	width: 100%;
}

.aark-band > .aark-imgslot { width: 100%; }

.aark-band > img {
	height: clamp(240px, 34vw, 460px);
	object-fit: cover;
}

/*
 * ⚠ 必須給不透明底色。
 * .aark-band 的底色是深藏青，而待補框斜紋的第二個色是半透明的橘 ——
 * 縫隙會讓深藏青透上來，整片變暗，上面的深色說明字就看不見了。
 * 這是「半透明疊在深色底上」的老問題，第三次遇到。
 */
.aark-band > .aark-imgslot {
	aspect-ratio: 21 / 6;
	border-left: 0;
	border-right: 0;
	/* 寬幅版位的文字置中，靠左會被 21:6 的寬度稀釋掉 */
	align-items: center;
	text-align: center;
	justify-content: center;
}

/*
 * ⚠ 選擇器要 (0,3,0) 才贏得過 imgslot.css 的 .aark-imgslot.is-blocked (0,2,0)。
 * 兩者同分時後載入的檔案會贏，而 imgslot.css 排在 pages.css 之後；
 * 它用的又是 background 簡寫，會把這裡的 background-color 一起洗掉。
 * 色值直接寫死，不繞 var()，排除變數解析的變因。
 */
.aark-band > .aark-imgslot.is-blocked {
	display: flex;
	flex-direction: column;
	background-color: #f7f6f2;
	background-image: repeating-linear-gradient(
		45deg,
		transparent 0 10px,
		rgba(255, 110, 52, .18) 10px 20px
	);
}

.aark-band > .aark-imgslot .slot-d { max-width: 52ch; }

/* 圖說：壓在右下角，不遮主體 */
.aark-band figcaption {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: .55rem .9rem;
	background: rgba(0, 0, 62, .82);
	font-family: var(--aark-mono);
	font-size: .62rem;
	letter-spacing: .06em;
	color: rgba(255, 255, 255, .8);
}

/* --- 包含／不包含：左圖右文 --- */

.aark-scope-col.has-shot {
	display: grid;
	grid-template-columns: 34% 1fr;
	gap: 0;
	padding: 0;
	overflow: hidden;
	align-items: stretch;
}

.aark-scope-shot {
	position: relative;
	min-height: 100%;
	background: var(--aark-navy);
}

.aark-scope-shot img,
.aark-scope-shot .aark-imgslot {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: auto;
	border: 0;
}

/*
 * 窄直式版位的待補框
 *
 * 待補框原本是為橫向版位設計的（眉標 + 標題 + 兩行說明）。
 * 塞進這種 34% 寬的直條裡，說明文字會折成一團跟標題疊在一起，
 * 完全讀不出要放什麼 —— 反而失去「待補框要能自我說明」的用意。
 * 直條只留眉標與標題，說明改用 title 屬性（滑鼠移上去看得到）。
 */
.aark-scope-shot .aark-imgslot {
	justify-content: flex-end;
	padding: 1.1rem;
	gap: .3rem;
}

.aark-scope-shot .aark-imgslot .slot-d { display: none; }

.aark-scope-shot .aark-imgslot .slot-t { font-size: .95rem; line-height: 1.35; }

.aark-scope-shot .aark-imgslot .slot-k { font-size: .55rem; letter-spacing: .08em; }

/*
 * 直條裡的斜紋
 *
 * ⚠ 必須先給一層不透明的 background-color。
 * 斜紋的第二個色是半透明的橘（rgba .13），而 .aark-scope-shot 的底色是
 * 深藏青 —— 半透明縫隙會讓底下的深藏青透上來，結果整片變成深色，
 * 上面的深色標籤字就完全看不見了。
 * 這是「半透明疊在深色底上」的經典陷阱：看起來像顏色設錯，
 * 其實是少了一層不透明底。
 */
.aark-scope-shot .aark-imgslot.is-blocked {
	background-color: var(--aark-white);
	background-image: repeating-linear-gradient(
		45deg,
		transparent 0 9px,
		rgba(255, 110, 52, .16) 9px 18px
	);
}

.aark-scope-col.has-shot > .aark-scope-body { padding: 2.25rem; }

/* 不包含欄的圖用低飽和，暗示「這些不在範圍內」 */
.aark-scope-col.is-excluded .aark-scope-shot img { filter: grayscale(.75) contrast(.95); }

@media (max-width: 960px) {
	.aark-scope-col.has-shot { grid-template-columns: 1fr; }
	.aark-scope-shot { min-height: 200px; }
	.aark-scope-shot img,
	.aark-scope-shot .aark-imgslot { position: relative; height: 200px; }
}

@media (max-width: 600px) {
	.aark-scope-col.has-shot > .aark-scope-body { padding: 1.75rem; }
	.aark-band > img { height: clamp(180px, 40vw, 260px); }
}


/* --- 橘色元件的 hover（理由見 style.css 的說明） --- */

.aark-plan.is-featured > .aark-btn:hover,
.aark-plan.is-featured > .aark-btn:focus-visible {
	background: var(--aark-white);
	color: var(--aark-navy);
	border-color: var(--aark-white);
}

.aark-plan:not(.is-featured) > .aark-btn:hover,
.aark-plan:not(.is-featured) > .aark-btn:focus-visible {
	background: var(--aark-navy);
	color: var(--aark-white);
	border-color: var(--aark-navy);
}

/* 表單送出鈕 */
.aark-form .aark-btn-solid:hover,
.aark-form .aark-btn-solid:focus-visible {
	background: var(--aark-navy);
	color: var(--aark-white);
	border-color: var(--aark-navy);
}


/* ==========================================================================
   案例總覽 /showcase/
   ========================================================================== */

/* --- 分類卡格線 --- */

.aark-catgrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--aark-navy);
	border: 1px solid var(--aark-navy);
}

.aark-catcard {
	background: var(--aark-white);
	text-decoration: none;
	display: block;
	transition: background .18s ease;
}

.aark-catcard:hover { background: var(--aark-paper); }

.aark-catcard .cc-thumb {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--aark-mist);
	border-bottom: 1px solid var(--aark-navy);
}

.aark-catcard .cc-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
	transition: transform .5s ease;
}

.aark-catcard:hover .cc-thumb img { transform: scale(1.04); }

/* 0 件的分類（漫畫銷售網頁）：仍要可點、URL 維持 200，但視覺上降階 */
.aark-catcard.is-empty { opacity: .55; }
.aark-catcard .cc-thumb.is-blank { background: repeating-linear-gradient(45deg, var(--aark-paper) 0 8px, var(--aark-mist) 8px 16px); }

.aark-catcard .cc-body {
	padding: 1.1rem 1.25rem 1.35rem;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: .75rem;
}

.aark-catcard h3 {
	font-family: var(--aark-serif);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--aark-navy);
	margin: 0;
}

.aark-catcard .cc-n {
	font-family: var(--aark-mono);
	font-size: .72rem;
	color: var(--aark-slate);
	flex: 0 0 auto;
}

/* --- 完整作品列表 --- */

.aark-list-count {
	font-family: var(--aark-mono);
	font-size: .8rem;
	color: var(--aark-slate);
	margin: 0 0 1.25rem;
}

.aark-list-count b { color: var(--aark-navy); }

.aark-case-rows { border-top: 2px solid var(--aark-navy); }

.aark-case-row {
	display: grid;
	grid-template-columns: 56px 1fr 200px 24px;
	gap: 1.25rem;
	align-items: baseline;
	padding: .95rem .5rem;
	border-bottom: 1px solid var(--aark-line);
	text-decoration: none;
	transition: background .14s ease, padding-left .14s ease;
}

.aark-case-row:hover {
	background: var(--aark-paper);
	padding-left: 1rem;
}

.aark-case-row .cr-num {
	font-family: var(--aark-mono);
	font-size: .72rem;
	color: var(--aark-slate);
}

.aark-case-row h3 {
	font-family: var(--aark-serif);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--aark-navy);
	margin: 0;
	line-height: 1.4;
}

.aark-case-row .cr-cat {
	font-size: .82rem;
	color: var(--aark-slate);
	text-align: right;
}

.aark-case-row .cr-go {
	font-family: var(--aark-mono);
	color: var(--aark-orange-ink);
	text-align: right;
}

@media (max-width: 960px) {
	.aark-catgrid { grid-template-columns: repeat(2, 1fr); }
	.aark-case-row { grid-template-columns: 44px 1fr 24px; }
	.aark-case-row .cr-cat { grid-column: 2; text-align: left; font-size: .76rem; }
}

@media (max-width: 600px) {
	.aark-catgrid { grid-template-columns: 1fr; }
	.aark-case-row { padding: .8rem .25rem; }
	.aark-case-row:hover { padding-left: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
	.aark-catcard .cc-thumb img,
	.aark-catcard:hover .cc-thumb img,
	.aark-case-row { transition: none; transform: none; }
	.aark-case-row:hover { padding-left: .5rem; }
}


/* --- 勾選清單（品牌設計的三個層次） --- */

.aark-tick { list-style: none; margin: 1.25rem 0 0; padding: 0; }

.aark-tick li {
	position: relative;
	padding-left: 1.35rem;
	font-size: .88rem;
	line-height: 1.9;
	color: var(--aark-slate);
}

.aark-tick li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .78em;
	width: 7px;
	height: 7px;
	background: var(--aark-orange);
}

/* --- 案例卡：圖片位置留待補框時 --- */

/*
 * 待補框是絕對定位，不撐高度 —— 卡片本身必須有 min-height，
 * 否則整張卡塌成只剩下方的文字帶，看不出圖片要放哪。
 */
.aark-pcase.has-slot {
	background: var(--aark-paper);
	min-height: 320px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.aark-pcase.has-slot .aark-imgslot {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	border: 0;
	justify-content: flex-start;
	padding: 1.25rem;
}

/* 待補框上不要壓漸層，否則框裡的字讀不到 */
.aark-pcase.has-slot::after { background: none; }

.aark-pcase.has-slot .aark-pcase-copy {
	position: relative;
	background: var(--aark-navy);
	min-height: 0;
	margin-top: auto;
}

/* --- 頁首背景圖留待補框 --- */

.aark-phead .aark-phead-bg.aark-imgslot {
	aspect-ratio: auto;
	border: 0;
	justify-content: flex-end;
	padding: 1.5rem;
}


/* ==========================================================================
   SVG 線條 icon

   用 inline SVG 而不是圖檔或 icon font：
     stroke 走 currentColor，所以深色區段自動反白，不必準備兩份；
     縮放不糊、不增加請求數、不必管 retina 版本。
     方角（stroke-linecap: square）是刻意的 —— 跟品牌的硬邊語言一致，
     圓角會讓它看起來像市面上的通用圖示集。
   ========================================================================== */

.aark-icon {
	display: block;
	width: 40px;
	height: 40px;
	margin-bottom: 1rem;
	color: var(--aark-navy);
}

.aark-icon svg { width: 100%; height: 100%; display: block; }

.aark-on-dark .aark-icon,
.aark-geo .aark-icon { color: var(--aark-blue); }

/* 服務層次卡的 icon 用橘，跟編號卡區分 */
.aark-term .aark-icon { color: var(--aark-orange-ink); }

/* --- 流程圖解（深色底） --- */

.aark-flowgraph {
	background: var(--aark-navy-deep);
	border-color: rgba(255, 255, 255, .2);
	box-shadow: 9px 9px 0 rgba(130, 152, 255, .35);
	margin-bottom: 2rem;
}

.aark-flowgraph figcaption { border-top-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .72); }

@media (max-width: 600px) {
	.aark-icon { width: 32px; height: 32px; margin-bottom: .75rem; }
}


/* --- 文章卡（AI 行銷頁的延伸閱讀、部落格總覽） --- */

.aark-artcard {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	background: var(--aark-white);
	border: 1px solid var(--aark-navy);
	padding: 1.75rem;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease;
}

.aark-artcard:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--aark-blue);
}

.aark-artcard .ac-k {
	font-family: var(--aark-mono);
	font-size: .62rem;
	letter-spacing: .1em;
	color: var(--aark-blue-ink);
}

.aark-artcard h3 {
	font-family: var(--aark-serif);
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--aark-navy);
	margin: 0;
	line-height: 1.45;
	flex: 1;
}

.aark-artcard .ac-go {
	font-size: .84rem;
	font-weight: 700;
	color: var(--aark-orange-ink);
}

@media (prefers-reduced-motion: reduce) {
	.aark-artcard { transition: none; }
	.aark-artcard:hover { transform: none; }
}


/* ==========================================================================
   內容待補標記 .aark-todo

   與圖片待補框（.aark-imgslot）不同：那是「圖還沒接」，
   這是「資訊本身還沒有」—— 產品規格、時間軸年份、總監學經歷，
   舊站都沒有記載。編出來就是虛構內容，違反專案鐵則。

   做成畫面上看得到的標記，而不是留白：
   留白會讓人以為忘了寫，標記則說明「知道缺、正在等」。
   ⚠ 上線前這些必須補齊或移除。
   ========================================================================== */

.aark-todo {
	margin: 1.5rem 0 0;
	padding: 1rem 1.25rem;
	background: var(--aark-paper);
	border-left: 3px solid var(--aark-orange);
}

.aark-todo .td-k {
	font-family: var(--aark-mono);
	font-size: .6rem;
	letter-spacing: .1em;
	background: var(--aark-orange);
	color: var(--aark-white);
	padding: 2px 7px;
	font-weight: 700;
	display: inline-block;
	margin-bottom: .5rem;
}

.aark-todo b {
	display: block;
	font-size: .92rem;
	color: var(--aark-navy);
	margin-bottom: .3rem;
}

.aark-todo p { margin: 0; font-size: .84rem; line-height: 1.8; color: var(--aark-slate); }

.aark-on-dark .aark-todo,
.aark-geo .aark-todo { background: var(--aark-navy-raise); }
.aark-on-dark .aark-todo b { color: var(--aark-white); }
.aark-on-dark .aark-todo p { color: rgba(255, 255, 255, .72); }

/* --- 編號卡上方的截圖位 --- */

.aark-numcard.has-shot > .aark-imgslot {
	margin: -1.75rem -1.75rem 1.25rem;
	width: calc(100% + 3.5rem);
	border-left: 0;
	border-right: 0;
	border-top: 0;
}

/* --- 負責人區塊 --- */

.aark-director { display: grid; grid-template-columns: 300px 1fr; gap: 2.5rem; align-items: start; }

.aark-director-shot .aark-imgslot { width: 100%; }

.aark-director-body h3 {
	font-family: var(--aark-serif);
	font-size: 1.6rem;
	color: var(--aark-navy);
	margin: 0 0 .85rem;
}

.aark-director-body p { color: var(--aark-slate); font-size: .95rem; line-height: 1.9; margin: 0 0 1rem; }

.aark-director-body blockquote {
	margin: 1.25rem 0;
	padding: 1.25rem 1.5rem;
	background: var(--aark-paper);
	border-left: 3px solid var(--aark-navy);
	font-family: var(--aark-serif);
	font-size: 1.05rem;
	line-height: 1.8;
	color: var(--aark-navy);
}

@media (max-width: 782px) {
	.aark-director { grid-template-columns: 1fr; gap: 1.5rem; }
	.aark-director-shot { max-width: 260px; }
}


/* --- 文章列表（/marketing/）：比照 jidp.or.jp --- */

/*
 * 每一格上方是「分類標籤＋一條細線」，接著圖、日期、標題、兩行摘要。
 * 不畫卡片外框 —— 分隔完全交給那條線與留白，這是那個版面清爽的原因。
 */
.aark-jgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 40px;
	row-gap: 56px;
}

.aark-jcard {
	display: flex;
	flex-direction: column;
	text-decoration: none;
}

.aark-jcard .jc-cat {
	font-family: var(--aark-mono);
	font-size: .7rem;
	letter-spacing: .08em;
	color: var(--aark-navy);
	padding-bottom: .55rem;
	border-bottom: 1px solid var(--aark-navy);
}

.aark-jcard .jc-thumb {
	display: block;
	margin-top: 1.1rem;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--aark-mist);
}

.aark-jcard .jc-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}

.aark-jcard:hover .jc-thumb img { transform: scale(1.04); }

/* 精選圖與內文圖都沒有的舊文章，用全站共用的斜線底紋填滿同一個比例框 */
.aark-jcard .jc-thumb.is-blank {
	background: repeating-linear-gradient(45deg, var(--aark-paper) 0 8px, var(--aark-mist) 8px 16px);
}

.aark-jcard .jc-date {
	display: block;
	margin-top: .95rem;
	font-family: var(--aark-mono);
	font-size: .72rem;
	color: var(--aark-slate);
}

.aark-jcard h3 {
	margin: .3rem 0 0;
	font-family: var(--aark-serif);
	font-size: 1rem;
	line-height: 1.6;
	font-weight: 700;
	color: var(--aark-navy);
	transition: color .18s ease;
}

.aark-jcard:hover h3 { color: var(--aark-orange-ink); }

.aark-jcard .jc-ex {
	margin: .55rem 0 0;
	font-size: .82rem;
	line-height: 1.75;
	color: var(--aark-slate);
}

/* 「內容年份較早」標記 */
.aark-jcard .jc-old {
	display: inline-block;
	margin-left: .6rem;
	font-family: var(--aark-mono);
	font-size: .58rem;
	letter-spacing: .06em;
	background: var(--aark-mist);
	color: var(--aark-navy);
	padding: 2px 6px;
	vertical-align: middle;
	font-weight: 600;
}

@media (max-width: 960px) {
	.aark-jgrid { grid-template-columns: repeat(2, 1fr); column-gap: 32px; row-gap: 44px; }
}

@media (max-width: 600px) {
	.aark-jgrid { grid-template-columns: 1fr; row-gap: 40px; }
}

@media (prefers-reduced-motion: reduce) {
	.aark-jcard .jc-thumb img,
	.aark-jcard:hover .jc-thumb img { transition: none; transform: none; }
}


/* 可點擊的編號卡（漫畫作品列表） */

.aark-numcard.is-link { display: block; text-decoration: none; }
.aark-numcard.is-link p { color: var(--aark-orange-ink); font-weight: 700; margin-top: .75rem; }

/* 入門文章卡：比一般文章卡大一階 */

.aark-artcard.is-lead { padding: 2.5rem; }
.aark-artcard.is-lead h3 { font-size: 1.75rem; line-height: 1.35; }


/* ==========================================================================
   法務頁 /privacy/

   刻意不放圖、不放斜線裝飾、不放 CTA ——
   法務頁的工作是把條款講清楚，任何裝飾都是干擾。
   窄欄（.aark-wrap-narrow，820px）比全寬好讀。
   ========================================================================== */

/* 法務頁是一份長文件，留白跟著全站放大但維持比一般區段緊（2026-09-08） */
.aark-legal { padding-block: clamp(3rem, 6vw, 6rem) clamp(4rem, 8vw, 8rem); }

.aark-legal-meta {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
	padding-bottom: 1.5rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid var(--aark-line);
	font-family: var(--aark-mono);
	font-size: .78rem;
	color: var(--aark-slate);
}

.aark-legal-meta b { color: var(--aark-navy); }

.aark-legal h2 {
	font-family: var(--aark-serif);
	font-size: 1.4rem;
	font-weight: 900;
	color: var(--aark-navy);
	margin: 2.75rem 0 1rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--aark-line);
}

.aark-legal h2:first-of-type { margin-top: 0; }

.aark-legal h3 {
	font-family: var(--aark-serif);
	font-size: 1.1rem;
	color: var(--aark-navy);
	margin: 1.75rem 0 .75rem;
}

.aark-legal p { color: var(--aark-slate); font-size: .95rem; line-height: 2; margin: 0 0 1rem; }

.aark-legal ul { margin: 0 0 1.25rem; padding-left: 1.35rem; }
.aark-legal li { color: var(--aark-slate); font-size: .95rem; line-height: 2; }

.aark-legal a {
	color: var(--aark-navy);
	font-weight: 700;
	border-bottom: 2px solid var(--aark-orange);
	text-decoration: none;
}

.aark-legal-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5rem;
	font-size: .88rem;
}

.aark-legal-table th,
.aark-legal-table td {
	border: 1px solid var(--aark-line);
	padding: .65rem .85rem;
	text-align: left;
	vertical-align: top;
	color: var(--aark-slate);
}

.aark-legal-table thead th { background: var(--aark-navy); color: var(--aark-white); font-weight: 700; }
.aark-legal-table tbody th { background: var(--aark-paper); color: var(--aark-navy); font-weight: 700; width: 34%; }

@media (max-width: 600px) {
	.aark-legal-table { font-size: .8rem; }
	.aark-legal-table th, .aark-legal-table td { padding: .5rem .6rem; }
}


/* ==========================================================================
   共用元件：信任快照 .aark-proof、客戶引言 .aark-review

   2026-09-03 自 home.css 搬入。這兩個元件不只首頁用：/evaluation/ 與
   /aboutus/ 也有，而 home.css 只在首頁載入 —— 上線後那兩頁的數字帶與
   客戶引言其實一直沒有樣式（純文字堆疊）。與 .aark-section-head 當年
   搬進 style.css 是同一個坑。home.css 只留首頁專屬的 .aark-reviews 底色。
   ========================================================================== */

/* --- 信任快照（深藏青數字帶） --- */
.aark-proof {
	background: var(--aark-navy);
	color: var(--aark-white);
	/* 是一條「帶」，留白跟著區段放大但維持比區段緊（2026-09-08） */
	padding-block: clamp(2.5rem, 5vw, 5rem);
	border: 0;
}
.aark-proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.aark-proof-item {
	padding: .6rem 1.75rem;
	border-right: 1px solid rgba(255, 255, 255, .18);
}
.aark-proof-item:last-child { border-right: 0; }
.aark-proof-item b {
	display: block;
	font-family: var(--aark-serif);
	font-size: 1.5rem;
	color: var(--aark-orange);
}
.aark-proof-item:nth-child(3) b { color: var(--aark-blue); }
.aark-proof-item span { font-size: .82rem; color: rgba(255, 255, 255, .72); }

/* --- 三段式數字格：數字／單位／說明，數字放大置頂 ---------------------
 *
 * 首頁的四格改成三個段落（數字、單位、說明）之後才吃這組樣式。用 :has()
 * 判斷「有沒有第三段」，所以 /aboutus/ 與 /evaluation/ 那兩頁維持兩段、
 * 維持原樣，不必為了這次改版動它們的內容。
 *
 * 數字本身仍然是後台可以直接編輯的純文字（<b>85</b>），計數動畫由
 * assets/js/aark-count.js 讀取這個數字後跑，沒有第二份數字要同步。
 */
.aark-proof-item:has(> .kt-inside-inner-col > p:nth-of-type(3)) { padding-block: 1.4rem; }

.aark-proof-item .kt-inside-inner-col:has(> p:nth-of-type(3)) > p:nth-of-type(1) b {
	font-size: clamp(3.1rem, 5vw, 4.5rem);
	line-height: .92;
	letter-spacing: -.045em;
	font-variant-numeric: tabular-nums;
	margin-bottom: .45rem;
}

.aark-proof-item .kt-inside-inner-col:has(> p:nth-of-type(3)) > p:nth-of-type(2) span {
	display: block;
	font-family: var(--aark-mono);
	font-size: .76rem;
	letter-spacing: .1em;
	color: rgba(255, 255, 255, .92);
	margin-bottom: .55rem;
}

.aark-proof-item .kt-inside-inner-col:has(> p:nth-of-type(3)) > p:nth-of-type(3) span {
	font-size: .8rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, .6);
}


/* --- 客戶引言（左引言、右狀態） --- */
.aark-review {
	display: grid;
	grid-template-columns: 1fr .95fr;
	border: 1px solid var(--aark-navy);
}
.aark-review-quote {
	padding: 3.5rem;
	background: var(--aark-mist);
	color: var(--aark-navy);
}
.aark-review-quote .aark-eyebrow { color: var(--aark-navy); opacity: .65; }
.aark-review-quote blockquote {
	margin: 1.25rem 0 1.5rem;
	font-family: var(--aark-serif);
	font-size: clamp(1.15rem, 1.9vw, 1.5rem);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: -.01em;
	border: 0;
	padding: 0;
}
.aark-review-quote cite { font-style: normal; font-size: .875rem; font-weight: 700; }
.aark-review-status {
	padding: 3.5rem;
	background: var(--aark-white);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.aark-review-status h3 {
	font-family: var(--aark-serif);
	font-size: 1.5rem;
	margin: .9rem 0 .6rem;
}
.aark-review-status p { color: var(--aark-slate); font-size: .92rem; margin: 0 0 .9rem; }

/*
 * 區塊版相容（Row Layout / Column / core/quote / 群組）
 *
 * Row Layout 版的客戶引言掛 .aark-review-row（不是 .aark-review）：
 * 格線由 Kadence 的欄容器負責，邊框打在 .kt-row-column-wrap 上，
 * 兩欄各自掛 .aark-review-quote / .aark-review-status，沿用上面的規則。
 */
.aark-review-row .kt-row-column-wrap { border: 1px solid var(--aark-navy); }
.wp-block-kadence-column.aark-review-quote > .kt-inside-inner-col,
.wp-block-kadence-column.aark-review-status > .kt-inside-inner-col,
.wp-block-kadence-column.aark-proof-item > .kt-inside-inner-col { display: block; }
/* core/quote 會把引言包成 <p>，原本沒有這層 */
.single-content .aark-review-quote blockquote p { margin: 0; }
/* Kadence 主題會把 blockquote 裡的 cite 染成 palette5（橘）；設計要的是繼承引言的藏青 */
.single-content .aark-review-quote cite { color: inherit; font-style: normal; }

/*
 * 區塊版文章卡：core/group 掛 .aark-artcard（原本是整張 <a>），內容為
 * p.ac-k / h3（標題連結）/ p.ac-go（閱讀連結）。群組本身不能是連結，
 * 整卡可點的版本等拿到 Kadence Column 設連結後的正規標記再補。
 */
.single-content .wp-block-group.aark-artcard { margin: 0; }
.aark-artcard > .wp-block-group__inner-container { display: flex; flex-direction: column; gap: .6rem; }
.aark-artcard > .wp-block-group__inner-container > * { max-width: none; margin: 0 !important; }
.single-content .aark-artcard p { margin: 0; }
.aark-artcard h3 a,
.aark-artcard .ac-go a { color: inherit; text-decoration: none; }

/* --- 區塊版作品卡 .aark-pcase：Kadence Column（整卡連結＝kb-section-link-overlay）+ core/image + 群組 .aark-pcase-copy --- */
.wp-block-kadence-column.aark-pcase > .kt-inside-inner-col { display: block; }
/* 主題的 .single-content figure.wp-block-image 是 (0,2,1)，這裡要 (0,3,1) 才贏得過 */
.single-content .aark-pcase figure.wp-block-image { margin: 0; }
.aark-pcase .kb-section-link-overlay { z-index: 2; }
.single-content .wp-block-group.aark-pcase-copy { margin: 0; }
.aark-pcase-copy > .wp-block-group__inner-container > * { max-width: none; margin-inline: 0 !important; }
.single-content .aark-pcase-copy p { margin: 0; }
/* 6 張作品卡拆成兩個 3 欄 Row Layout（Kadence 編輯器會把超過欄數的子欄位砍掉），兩排之間補回格線間距 */
.wp-block-kadence-rowlayout.aark-pcase-row + .wp-block-kadence-rowlayout.aark-pcase-row { margin-top: 1.5rem; }

/* --- 區塊版聯絡頁側欄：Column 掛 .aark-form-aside（sticky），群組掛 .aark-aside-block --- */
.single-content .wp-block-kadence-column.aark-form-aside { position: sticky; top: 6rem; }
/* ⚠ align-content:start：Row Layout 預設把兩欄拉成等高，側欄的 grid 會把多出來的高度平均分給三個區塊（每個各高 31px）。
   列容器也一併改靠上，跟手寫版 .aark-form-layout 的 align-items:start 一致。 */
.wp-block-kadence-column.aark-form-aside > .kt-inside-inner-col { display: grid; gap: 1.25rem; align-content: start; }
.aark-form-row .kt-row-column-wrap { align-items: start; }
.single-content .wp-block-group.aark-aside-block { margin: 0; }
.aark-aside-block > .wp-block-group__inner-container > * { max-width: none; margin-inline: 0 !important; }
.single-content p.aark-cline { margin: 0; }
.aark-aside-block h2 + .aark-cline { border-top: 0; }
.single-content ol.aark-aside-steps { margin: 0; padding: 0; }

/* --- 區塊版情境帶：core/image 掛 .aark-band（圖＋圖說，可在編輯器直接換圖） --- */
.single-content figure.wp-block-image.aark-band { margin: 0; }
.aark-band.wp-block-image > img { height: clamp(240px, 34vw, 460px); object-fit: cover; }

@media (max-width: 960px) {
	.single-content .wp-block-kadence-column.aark-form-aside { position: static; }
}

/* --- 區塊版：圖示（core/image 掛 .aark-icon，SVG 檔顏色已內建）--- */
.single-content figure.wp-block-image.aark-icon { margin: 0 0 1rem; width: 40px; height: 40px; }
.aark-icon img { width: 100%; height: 100%; display: block; }

/* --- 區塊版時間軸：群組 .aark-step 的 inner-container 透明化，p.step-year + 群組 成為 grid 的兩格 --- */
.single-content .wp-block-group.aark-steps,
.single-content .wp-block-group.aark-step,
.single-content .aark-step .wp-block-group { margin: 0; }
.aark-steps > .wp-block-group__inner-container > *,
.aark-step .wp-block-group__inner-container > * { max-width: none; margin-inline: 0 !important; }
.aark-step > .wp-block-group__inner-container { display: contents; }
.aark-step p.step-year { font-family: var(--aark-mono); font-size: .72rem; letter-spacing: .08em; color: var(--aark-blue-ink); margin: 0; }
.single-content .aark-step p { margin: 0; }

/* --- 區塊版負責人：群組 .aark-director 透明化，shot 與 body 兩個群組成為 grid 的兩格 --- */
.single-content .wp-block-group.aark-director,
.single-content .wp-block-group.aark-director-shot,
.single-content .wp-block-group.aark-director-body { margin: 0; }
.aark-director > .wp-block-group__inner-container { display: contents; }
.aark-director-shot > .wp-block-group__inner-container > *,
.aark-director-body > .wp-block-group__inner-container > * { max-width: none; margin-inline: 0 !important; }
.single-content .aark-director-shot figure.wp-block-image { margin: 0; }
.aark-director-shot img { width: 100%; display: block; }
.single-content .aark-director-body blockquote p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }

/* --- 區塊版產品截圖：core/image 掛 .aark-product-shot --- */
.single-content figure.wp-block-image.aark-product-shot { margin: 0 0 2.5rem; }

/* 深色區段裡的 note-lead（手寫版用 inline style，區塊版改由這裡給） */
.aark-geo .aark-note-lead { border-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .72); }
.aark-geo .aark-note-lead a { color: #fff; }

/* --- 區塊版有縮圖的編號卡：Column 掛 .aark-numcard.has-shot，圖在最上、文字有內距 --- */
.aark-numcard.has-shot .kt-inside-inner-col > figure { margin: 0 0 1.25rem; }
.aark-numcard.has-shot .kt-inside-inner-col > figure img { display: block; width: 100%; aspect-ratio: var(--ratio, 16 / 9); object-fit: cover; }
.aark-numcard.has-shot .kt-inside-inner-col > .nk,
.aark-numcard.has-shot .kt-inside-inner-col > h3,
.aark-numcard.has-shot .kt-inside-inner-col > p { padding-inline: 1.75rem; }
.aark-numcard.has-shot .kt-inside-inner-col > p:last-child { padding-bottom: 1.75rem; }

/*
 * 網站類型那四張卡的縮圖是 16:10（1200×750），不是預設的 16:9。
 *
 * ⚠ 比例寫在這裡，不要寫成 <figure style="--ratio:16/10">。
 *   那是 core/image 區塊，Mark 在 Kadence 裡點開圖片重存之後，
 *   Gutenberg 會依區塊屬性重新輸出 HTML，行內 style 會被丟掉，
 *   比例就悄悄變回 16:9、上下各裁掉約 5%（圖上的橘色外框會被切）。
 *   寫成 CSS 才不會因為他編輯就壞。
 */
#types .aark-numcard.has-shot .kt-inside-inner-col > figure img { aspect-ratio: 16 / 10; }


/* ==========================================================================
   建置流程頁的六張階段卡：串線 + 突顯客戶那一段

   六張卡排成 3+3，讀者的眼睛不會自動從 03 跳到下一列的 04，流程感只靠
   STEP 編號硬撐。這裡補兩件事：

   1. 同一列內的卡片之間畫一段細線加箭頭（畫在 24px 的欄間距裡）。
      ⚠ 只在桌機做。平板兩欄、手機單欄時卡片是直向堆疊，本來就有順序，
        再畫箭頭反而會指錯方向。
   2. 換列的地方（03 → 04）刻意「不畫」箭頭。畫一個往下的箭頭會指到 06
      的位置，比沒有箭頭更誤導。

   ⚠ 不要為了對稱把箭頭補到第 3、6 張右邊——那會指向版面外。
   ========================================================================== */

#steps .aark-numcard { position: relative; }

@media (min-width: 1025px) {
	#steps .aark-numcard:not(:nth-child(3n))::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 100%;
		width: 24px;
		height: 1px;
		background: var(--aark-navy);
		opacity: .3;
	}

	#steps .aark-numcard:not(:nth-child(3n))::before {
		content: "";
		position: absolute;
		top: 50%;
		left: calc(100% + 16px);
		width: 6px;
		height: 6px;
		border-top: 1px solid var(--aark-navy);
		border-right: 1px solid var(--aark-navy);
		transform: translateY(-50%) rotate(45deg);
		opacity: .45;
	}
}

/* --- 「這一段在你手上」：客戶要交資料的那張卡 --- */

#steps .aark-numcard.is-yours {
	background: var(--aark-paper);
	border-color: var(--aark-orange);
}

#steps .aark-numcard.is-yours .nk { color: var(--aark-orange-ink); }

/* ==========================================================================
   服務頁上的精簡流程列 .aark-stepbar（六格，只有編號與標題）

   母頁只負責「幾步、怎麼走」，說明留給 /webdesign/process/。所以這一組
   刻意沒有內文段落——卡片矮、字級小、六格一列掃完。

   ⚠ 這是「等圖版位」：之後 Mark 給六張 1200×750 的圖，
     只要在每個 column 的 className 加上 has-shot 並塞一個 core/image，
     既有的 .aark-numcard.has-shot 規則就會接手（圖在上、文字有內距）。
   ========================================================================== */

.aark-stepbar .aark-numcard {
	padding: 1.1rem 1rem 1.2rem;
	text-align: center;
	position: relative;
}

/* 卡片之間的箭頭：畫在 24px 的欄間距正中央
 *
 * ⚠ 只在桌機（六格一列）畫。平板三格、手機兩格時會換列，
 *   往右的箭頭會指到下一列的開頭，方向是錯的，所以直接不畫。
 * ⚠ 第 6 格右邊不畫，會指向版面外。
 */
@media (min-width: 1025px) {
	.aark-stepbar .aark-numcard:not(:nth-child(6))::after {
		content: "";
		position: absolute;
		top: 50%;
		left: calc(100% + 8px);
		width: 7px;
		height: 7px;
		border-top: 1.5px solid var(--aark-navy);
		border-right: 1.5px solid var(--aark-navy);
		transform: translateY(-50%) rotate(45deg);
		opacity: .55;
	}
}

.aark-stepbar .aark-numcard .nk { font-size: .62rem; margin-bottom: .5rem; }

.aark-stepbar .aark-numcard h3 {
	font-size: .98rem;
	line-height: 1.4;
	margin: 0;
}

.aark-stepbar .aark-numcard.is-yours {
	background: var(--aark-paper);
	border-color: var(--aark-orange);
}

.aark-stepbar .aark-numcard.is-yours .nk { color: var(--aark-orange-ink); }

@media (max-width: 767px) {
	.aark-stepbar .aark-numcard { padding: .9rem .85rem 1rem; }
	.aark-stepbar .aark-numcard h3 { font-size: .9rem; }
}

#steps .flow-tag {
	display: inline-block;
	font-family: var(--aark-mono);
	font-size: .62rem;
	letter-spacing: .1em;
	line-height: 1;
	background: var(--aark-orange);
	color: var(--aark-white);
	padding: .32rem .5rem;
	margin: 0 0 .7rem;
}

/* --- 勾選清單 core/list 掛 .aark-tick --- */
.single-content ul.aark-tick { margin: 1.25rem 0 0; padding: 0; }

/* --- 「待補」框裡的 p：容器的 p 規則（.aark-director-body p 等 (0,1,1)）會蓋掉 .aark-todo p 的 margin，提高分數重申 --- */
.single-content .aark-todo p { margin: 0; font-size: .84rem; line-height: 1.8; }

/* --- 區塊版 FAQ：Kadence Accordion 掛 .aark-faq-list、Pane 掛 .aark-faq-item --- */
.wp-block-kadence-accordion.aark-faq-list .kt-accordion-wrap { max-width: none; }
.aark-faq-item .kt-blocks-accordion-header {
	width: 100%; background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; text-align: left;
	padding: 1.35rem .5rem 1.35rem 0; font-weight: 700; color: var(--aark-navy); font-size: 1.02rem; line-height: 1.6;
}
.aark-faq-item .kt-blocks-accordion-header:hover,
.aark-faq-item .kt-blocks-accordion-header:focus-visible { background: none; color: var(--aark-orange-ink); }
.aark-faq-item .kt-blocks-accordion-header.kt-accordion-panel-active { background: none; color: var(--aark-navy); }
/* ⚠ 不要自己畫 +/−：Kadence 用 ::before/::after 兩根橫條，只調尺寸與顏色；展開狀態是 .kt-accordion-panel-active */
.aark-faq-item .kt-blocks-accordion-icon-trigger::before,
.aark-faq-item .kt-blocks-accordion-icon-trigger::after,
.aark-faq-item .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger::before,
.aark-faq-item .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger::after,
.aark-faq-item .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger::before,
.aark-faq-item .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger::after {
	background-color: var(--aark-orange-ink); height: 2px; width: 15px; left: 5px; top: 11px;
}
.aark-faq-item .kt-accordion-panel,
.aark-faq-item .kt-accordion-panel-inner { background: transparent; border: 0; box-shadow: none; }
.aark-faq-item .kt-accordion-panel-inner { padding: 0 2.5rem 1.5rem 0; }
.single-content .aark-faq-item .kt-accordion-panel-inner p { margin: 0 0 1rem; color: var(--aark-slate); font-size: .95rem; line-height: 1.9; max-width: 70ch; }
.aark-faq-item .kt-accordion-panel-inner a { color: var(--aark-navy); font-weight: 700; border-bottom: 2px solid var(--aark-orange); text-decoration: none; }

/* --- 區塊版文章卡（Column 版，整卡連結）--- */
.wp-block-kadence-column.aark-artcard { height: 100%; }
.wp-block-kadence-column.aark-artcard > .kt-inside-inner-col { display: flex; flex-direction: column; gap: .6rem; height: 100%; }

/* --- 區塊版作品卡（待補圖版 has-slot：米白底、文案在底部的藏青框）--- */
.wp-block-kadence-column.aark-pcase.has-slot > .kt-inside-inner-col { display: flex; flex-direction: column; justify-content: flex-end; min-height: 320px; }
.aark-pcase.has-slot figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --- 區塊版流程圖（原本是 inline SVG）：三個階段框 + 橘色箭頭，改成可編輯的 Column --- */
.aark-flow-row .kt-row-column-wrap { align-items: stretch; }
.wp-block-kadence-column.aark-flowbox { position: relative; background: var(--aark-navy-raise); border: 1px solid var(--aark-blue); padding: 1.75rem; }
.wp-block-kadence-column.aark-flowbox.is-final { background: var(--aark-orange); border-color: var(--aark-orange); }
.aark-flowbox .fk { font-family: var(--aark-mono); font-size: .72rem; letter-spacing: .12em; color: var(--aark-blue); margin: 0 0 .85rem; }
.aark-flowbox h3 { font-family: var(--aark-sans); font-size: 1.35rem; font-weight: 700; color: var(--aark-white); margin: 0 0 .7rem; }
.single-content .aark-flowbox p { margin: 0; font-size: .95rem; line-height: 1.7; color: rgba(255, 255, 255, .72); }
.aark-flowbox.is-final .fk,
.single-content .aark-flowbox.is-final p { color: var(--aark-white); }
.aark-flowbox + .aark-flowbox::before { content: ""; position: absolute; left: -62px; top: 50%; width: 48px; height: 2px; background: var(--aark-orange); }
.aark-flowbox + .aark-flowbox::after { content: ""; position: absolute; left: -16px; top: 50%; margin-top: -7px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid var(--aark-orange); }
.single-content p.aark-flow-note { margin: 1.25rem 0 0; font-size: .95rem; color: rgba(255, 255, 255, .6); }

@media (max-width: 960px) {
	.aark-flowbox + .aark-flowbox::before, .aark-flowbox + .aark-flowbox::after { display: none; }
}

@media (max-width: 600px) {
	.single-content figure.wp-block-image.aark-icon { width: 32px; height: 32px; margin-bottom: .75rem; }
}
/* 數字帶的 <b>／<span> 在區塊版各自包在 <p> 裡 */
.single-content .aark-proof-item p { margin: 0; }
/* 群組版容器：Kadence 主題的 .wp-block-group 下邊距歸零、解除 constrained 限寬 */
.single-content .wp-block-group.aark-proof { margin: 0; }
.single-content .wp-block-group.aark-todo { margin: 1.5rem 0 0; }
/*
 * ⚠ .aark-wrap 本身一定要保留 margin-inline:auto。
 * 原本這裡把 `.aark-proof > inner-container > *`（也就是 .aark-wrap 自己）
 * 一起設成 margin-inline:0 !important，結果整條數字帶靠左貼齊視窗，
 * 跟上下區段（.aark-services 的 wrap 在 100px）對不齊。
 * 只解開 constrained layout 的限寬，不要碰它的左右外距。
 */
.aark-proof > .wp-block-group__inner-container > * {
	max-width: none;
}

/* 這一層是 wrap 裡面的內容，要撐滿 wrap，歸零才對 */
.aark-proof .aark-wrap > .wp-block-group__inner-container > * {
	max-width: none;
	margin-inline: 0 !important;
}

@media (max-width: 960px) {
	.aark-proof-grid { grid-template-columns: 1fr 1fr; }
	.aark-proof-item:nth-child(2) { border-right: 0; }
	.aark-review { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.aark-proof-grid { grid-template-columns: 1fr; }
	.aark-proof-item { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .18); }
	.aark-proof-item:last-child { border-bottom: 0; }
	.aark-review-quote,
	.aark-review-status { padding: 2rem; }
}
/* ==========================================================================
   區塊版相容 II（2026-09-04）：/webdesign/、/prices/、/thank-you/、/privacy/
   原則同上：外框 class 不變，只補「群組多一層 inner-container」與
   「Kadence 主題把 p / 群組 / figure 的 margin 拉大」這兩類差異。
   ========================================================================== */
/* --- 方案預告卡（/webdesign/ #pricing-teaser）：群組版 --- */
.single-content .wp-block-group.aark-price-teaser,
.single-content .aark-price-teaser .wp-block-group { margin: 0; }
.wp-block-group.aark-price-teaser { display: block; }
.aark-price-teaser > .wp-block-group__inner-container { display: grid; grid-template-columns: 1fr auto; gap: 2.5rem; align-items: center; }
.aark-price-teaser > .wp-block-group__inner-container > * { max-width: none; margin-inline: 0 !important; }
.aark-price-teaser .wp-block-group > .wp-block-group__inner-container > * { margin-inline: 0 !important; }
.single-content .aark-price-teaser p { margin: 0; }
.single-content .aark-price-teaser h3 { margin: .85rem 0 .6rem; }
.single-content .aark-price-teaser .wp-block-buttons,
.single-content .aark-price-teaser .wp-block-button { margin: 0; }
@media (max-width: 960px) {
	.aark-price-teaser > .wp-block-group__inner-container { grid-template-columns: 1fr; }
}
/* --- 有圖數字卡 4:3（/webdesign/ #types） --- */
.aark-numcard.has-shot.ratio-4x3 .kt-inside-inner-col > figure img { aspect-ratio: 4 / 3; }
/* --- 方案卡（/prices/ #plans）：Kadence Column 版。價格的大字用 <strong>，不靠 span class --- */
.wp-block-kadence-column.aark-plan { position: relative; display: flex; flex-direction: column; }
.wp-block-kadence-column.aark-plan > .kt-inside-inner-col { position: static; flex: 1; display: flex; flex-direction: column; }
.aark-plan .wp-block-group__inner-container > * { max-width: none; margin-inline: 0 !important; }
.single-content .aark-plan figure.wp-block-image.aark-plan-shot { flex: none; margin: -2.25rem -2.25rem 1.5rem; }
.aark-plan-shot figcaption.wp-element-caption { text-align: left; margin: 0; }
.single-content .aark-plan p { margin: 0; }
.single-content .aark-plan p.pnum { margin: 0 0 .85rem; }
.single-content .aark-plan p.ptagline { margin: 0 0 1.5rem; }
.single-content .aark-plan p.aark-price-note { margin: .5rem 0 0; }
.single-content .aark-plan p.aark-fit-label { margin: 0 0 .75rem; }
.single-content .aark-plan h3 { margin: 0 0 .5rem; }
.single-content .aark-plan ul { margin: 0 0 1.75rem; padding-left: 1.1rem; flex: 1; }
.single-content .wp-block-group.aark-price-slot { margin: 0 0 1.5rem; }
.aark-price-amount { font-size: .9rem; color: var(--aark-slate); }
.aark-price-amount strong { font-size: 2.4rem; font-weight: 600; color: var(--aark-navy); letter-spacing: -.03em; }
.aark-price-amount.is-custom strong { font-size: 1.9rem; font-family: var(--aark-serif); }
.aark-plan.is-featured .aark-price-amount { color: rgba(255, 255, 255, .7); }
.aark-plan.is-featured .aark-price-amount strong { color: var(--aark-orange); }
.aark-plan .wp-block-buttons { margin: 0; width: 100%; }
.aark-plan .wp-block-buttons .wp-block-button { width: 100%; }
.aark-plan .wp-block-button__link { width: 100%; }
.aark-plan.is-featured .wp-block-button.aark-btn-solid .wp-block-button__link { background: var(--aark-orange); color: var(--aark-white); border-color: var(--aark-orange-ink); font-weight: 900; }
.aark-plan.is-featured .wp-block-button.aark-btn-solid .wp-block-button__link:hover,
.aark-plan.is-featured .wp-block-button.aark-btn-solid .wp-block-button__link:focus-visible { background: var(--aark-white); color: var(--aark-navy); border-color: var(--aark-white); }
@media (max-width: 600px) {
	.single-content .aark-plan figure.wp-block-image.aark-plan-shot { margin: -1.75rem -1.75rem 1.25rem; }
}
/* --- 三方案對照矩陣：core/table 版。表格區塊沒有儲存格 class，改用 nth-child(3) 標主打欄，✓ 用 <strong>、選配文字用 <em> --- */
.single-content p.aark-matrix-cap { margin: 2rem 0 0; padding-bottom: 1rem; font-family: var(--aark-mono); font-size: .68rem; letter-spacing: .1em; color: var(--aark-blue-ink); }
.single-content figure.wp-block-table.aark-matrix-wrap { margin: 0; overflow-x: auto; }
.aark-matrix-wrap table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 640px; }
.aark-matrix-wrap thead { border-bottom: 0; }
.single-content .aark-matrix-wrap th,
.single-content .aark-matrix-wrap td { border: 1px solid var(--aark-line); padding: .85rem 1rem; text-align: left; vertical-align: middle; }
.single-content .aark-matrix-wrap thead th { background: var(--aark-navy); color: var(--aark-white); font-family: var(--aark-serif); font-size: 1rem; text-align: center; border-color: var(--aark-navy); }
.single-content .aark-matrix-wrap thead th:first-child { background: transparent; border-color: transparent; color: var(--aark-slate); font-family: var(--aark-mono); font-size: .68rem; letter-spacing: .08em; text-align: left; }
.single-content .aark-matrix-wrap thead th:nth-child(3) { background: var(--aark-orange); border-color: var(--aark-orange-ink); }
.single-content .aark-matrix-wrap tbody th { font-weight: 700; color: var(--aark-navy); background: var(--aark-paper); width: 34%; }
.single-content .aark-matrix-wrap td { text-align: center; font-family: var(--aark-mono); }
.single-content .aark-matrix-wrap td:nth-child(3) { background: rgba(255, 110, 52, .07); }
.aark-matrix-wrap td strong { color: var(--aark-orange-ink); font-weight: 600; }
.aark-matrix-wrap td em { font-style: normal; color: var(--aark-slate); font-size: .8rem; font-family: var(--aark-sans); }
.single-content .aark-matrix-wrap tbody tr:last-child td,
.single-content .aark-matrix-wrap tbody tr:last-child th { border-bottom-width: 2px; border-bottom-color: var(--aark-navy); }
/* --- 包含／不包含（/prices/ #scope）：Column 版，左圖右文的格線移到 .kt-inside-inner-col --- */
.wp-block-kadence-column.aark-scope-col.has-shot { display: block; padding: 0; }
.wp-block-kadence-column.aark-scope-col.has-shot > .kt-inside-inner-col { display: grid; grid-template-columns: 34% 1fr; align-items: stretch; height: 100%; }
.single-content .aark-scope-col .wp-block-group { margin: 0; }
.aark-scope-col .wp-block-group__inner-container > * { max-width: none; margin-inline: 0 !important; }
.aark-scope-col.has-shot .kt-inside-inner-col > .aark-scope-body { padding: 2.25rem; }
.single-content .aark-scope-shot figure.wp-block-image { margin: 0; }
.single-content .aark-scope-col p.sk { margin: 0 0 .75rem; }
.single-content .aark-scope-col h3 { margin: 0 0 1.25rem; }
.single-content .aark-scope-col ul { margin: 0; padding-left: 1.1rem; }
.single-content .aark-scope-col p.aark-note-lead { margin: 1.5rem 0 0; font-size: .85rem; }
@media (max-width: 960px) {
	.wp-block-kadence-column.aark-scope-col.has-shot > .kt-inside-inner-col { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.aark-scope-col.has-shot .kt-inside-inner-col > .aark-scope-body { padding: 1.75rem; }
}
/* --- 加購項目列（/prices/ #addons）：群組版 --- */
.single-content .wp-block-group.aark-addons,
.single-content .wp-block-group.aark-addon { margin: 0; }
.aark-addons > .wp-block-group__inner-container > * { max-width: none; margin-inline: 0 !important; }
.wp-block-group.aark-addon { display: block; }
.aark-addon > .wp-block-group__inner-container { display: grid; grid-template-columns: 220px 1fr auto; gap: 2rem; align-items: center; }
.aark-addon > .wp-block-group__inner-container > * { max-width: none; margin: 0 !important; }
@media (max-width: 960px) {
	.aark-addon > .wp-block-group__inner-container { grid-template-columns: 1fr auto; gap: 1rem; }
	.aark-addon > .wp-block-group__inner-container > p:not(.aark-pending) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
	.aark-addon > .wp-block-group__inner-container { grid-template-columns: 1fr; gap: .4rem; }
}
/* --- 維護方案（/prices/ #maintenance）：群組版 --- */
.wp-block-group.aark-maint-grid { display: block; }
.aark-maint-grid > .wp-block-group__inner-container { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.aark-maint-grid > .wp-block-group__inner-container > * { max-width: none; margin: 0 !important; }
.single-content .aark-maint .wp-block-group { margin: 0; }
.aark-maint .wp-block-group > .wp-block-group__inner-container > * { margin-inline: 0 !important; }
.single-content .aark-maint h2 { margin: 0 0 1.25rem; }
.single-content .aark-maint p { margin: 0 0 1rem; }
.single-content .aark-maint p.aark-maint-fine { font-size: .875rem; }
.single-content p.aark-maint-item { margin: 0; color: var(--aark-white); }
.aark-maint-item strong { font-family: var(--aark-mono); font-size: .78rem; color: var(--aark-blue); font-weight: 600; }
@media (max-width: 960px) {
	.aark-maint-grid > .wp-block-group__inner-container { grid-template-columns: 1fr; gap: 2rem; }
}
/* --- 費用組成圖（/prices/ #cost）：原本是 inline SVG，改成可編輯的方塊列；+ 與 = 用 ::before 畫在欄距裡 --- */
.single-content .wp-block-group.aark-costgraph { margin: 0; }
.aark-costgraph > .wp-block-group__inner-container > * { max-width: none; margin-inline: 0 !important; }
.single-content p.aark-cg-label { margin: 0 0 1rem; font-family: var(--aark-mono); font-size: .72rem; letter-spacing: .1em; color: var(--aark-blue); }
.single-content p.aark-cg-label.is-annual { margin-top: 2.25rem; padding-top: 2.25rem; border-top: 1px solid var(--aark-line); }
.aark-cost-row .kt-row-column-wrap { align-items: stretch; }
.wp-block-kadence-column.aark-costbox { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 72px; padding: .9rem 1.25rem; }
.wp-block-kadence-column.aark-costbox > .kt-inside-inner-col,
.wp-block-kadence-column.aark-quote-step > .kt-inside-inner-col { display: block; }
.aark-costbox.is-navy { background: var(--aark-navy); }
.aark-costbox.is-orange { background: var(--aark-orange); }
.aark-costbox.is-dashed { border: 1px dashed var(--aark-navy); }
.aark-costbox.is-dashed-gray { border: 1px dashed var(--aark-slate); }
.aark-costbox.is-paper { background: var(--aark-paper); }
.single-content .aark-costbox p { margin: 0; }
.aark-costbox p.ck { font-weight: 700; font-size: .95rem; color: var(--aark-navy); }
.single-content .aark-costbox p.cd { font-size: .78rem; color: var(--aark-slate); margin-top: .2rem; }
.aark-costbox.is-navy p.ck, .aark-costbox.is-orange p.ck { color: var(--aark-white); }
.single-content .aark-costbox.is-navy p.cd { font-family: var(--aark-mono); font-size: .82rem; color: var(--aark-orange); }
.single-content .aark-costbox.is-orange p.cd { color: rgba(255, 255, 255, .86); }
.aark-costbox.is-plus::before { content: "+"; }
.aark-costbox.is-equals::before { content: "="; }
.aark-costbox.is-plus::before, .aark-costbox.is-equals::before { position: absolute; left: -60px; top: 50%; width: 60px; transform: translateY(-50%); text-align: center; font-family: var(--aark-mono); font-size: 1.6rem; line-height: 1; color: var(--aark-slate); }
.single-content p.aark-cg-caption { margin: 1.25rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--aark-line); font-size: .88rem; line-height: 1.8; color: var(--aark-slate); max-width: 66ch; }
.aark-cg-caption strong { color: var(--aark-navy); }
@media (max-width: 960px) {
	.aark-costbox.is-plus::before, .aark-costbox.is-equals::before { display: none; }
}
/* --- 報價流程（/prices/ #quote）：Column 版 --- */
.single-content .aark-quote-step p { margin: 0; }
.single-content .aark-quote-step p.qn { margin: 0 0 .75rem; }
.single-content .aark-quote-step h3 { margin: 0 0 .4rem; }
/* --- 氛圍帶（/prices/）：群組版。背景斜紋用 ::before 畫，之後換真圖時直接在群組設背景圖 --- */
.single-content .wp-block-group.aark-mood,
.single-content .aark-mood .wp-block-group { margin: 0; }
.wp-block-group.aark-mood { display: flex; align-items: center; }
.wp-block-group.aark-mood::before { content: ""; position: absolute; inset: 0; background-color: var(--aark-paper); background-image: repeating-linear-gradient(45deg, transparent 0 10px, rgba(255, 110, 52, .18) 10px 20px); opacity: .55; }
.aark-mood > .wp-block-group__inner-container { position: relative; z-index: 1; width: 100%; }
.aark-mood .wp-block-group__inner-container > * { max-width: none; margin-inline: 0 !important; }
.aark-mood .wp-block-quote.aark-mood-copy { border: 0; padding: 0; margin: 0 auto !important; max-width: 46ch; background: none; font-style: normal; }
.single-content .aark-mood-copy p { margin: 0; font-family: var(--aark-serif); font-size: clamp(1.4rem, 2.8vw, 2.1rem); font-weight: 700; line-height: 1.45; color: var(--aark-white); letter-spacing: -.02em; }
.single-content .aark-mood-copy cite { display: block; margin-top: 1.25rem; font-family: var(--aark-mono); font-size: .7rem; letter-spacing: .08em; font-style: normal; color: var(--aark-blue); }
/* --- 感謝頁（/thank-you/）：群組版 --- */
.wp-block-group.aark-thanks-grid { display: block; }
.aark-thanks-grid > .wp-block-group__inner-container { display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: start; }
.aark-thanks-grid > .wp-block-group__inner-container > * { max-width: none; margin: 0 !important; }
.aark-thanks .wp-block-group > .wp-block-group__inner-container > * { margin-inline: 0 !important; }
.single-content .aark-thanks h2 { margin: 0 0 1rem; }
.single-content .wp-block-buttons.aark-thanks-actions { margin: 1.75rem 0 0; gap: .875rem; }
.single-content .aark-thanks-actions .wp-block-button { margin: 0; }
@media (max-width: 960px) {
	.aark-thanks-grid > .wp-block-group__inner-container { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 600px) {
	.wp-block-buttons.aark-thanks-actions { display: grid; }
	.aark-thanks-actions .wp-block-button, .aark-thanks-actions .wp-block-button__link { width: 100%; }
}
/* --- 隱私權（/privacy/）：窄欄群組 + core/table 版 --- */
.aark-wrap-narrow > .wp-block-group__inner-container > * { max-width: none; margin-inline: 0 !important; }
.single-content .wp-block-group.aark-legal-meta { margin: 0 0 2rem; display: block; }
.aark-legal-meta > .wp-block-group__inner-container { display: flex; gap: 2rem; flex-wrap: wrap; }
.aark-legal-meta > .wp-block-group__inner-container > * { max-width: none; margin: 0 !important; }
.single-content .aark-legal-meta p { font-family: var(--aark-mono); font-size: .78rem; color: var(--aark-slate); line-height: 1.6; }
.aark-legal-meta strong { color: var(--aark-navy); }
.single-content .aark-legal h2 { margin: 2.75rem 0 1rem; }
.single-content .aark-legal h2:first-of-type { margin-top: 0; }
.single-content .aark-legal h3 { margin: 1.75rem 0 .75rem; }
.single-content .aark-legal p { margin: 0 0 1rem; }
.single-content .aark-legal ul { margin: 0 0 1.25rem; padding-left: 1.35rem; }
.single-content figure.wp-block-table.aark-legal-table { margin: 0 0 1.5rem; }
.aark-legal-table table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.aark-legal-table thead { border-bottom: 0; }
.single-content .aark-legal-table th,
.single-content .aark-legal-table td { border: 1px solid var(--aark-line); padding: .65rem .85rem; text-align: left; vertical-align: top; color: var(--aark-slate); }
.single-content .aark-legal-table thead th { background: var(--aark-navy); color: var(--aark-white); font-weight: 700; }
.single-content .aark-legal-table tbody th { background: var(--aark-paper); color: var(--aark-navy); font-weight: 700; width: 34%; }
@media (max-width: 600px) {
	.aark-legal-table table { font-size: .8rem; }
	.single-content .aark-legal-table th, .single-content .aark-legal-table td { padding: .5rem .6rem; }
}
/* .aark-pending 在區塊版是段落，會被 .single-content p (0,2,0) 蓋掉字級 */
.single-content p.aark-pending { font-size: .68rem; line-height: 1.6; }