/* ==========================================================================
   皇御匠藝｜內頁自訂區塊（服務流程 /process/、聯絡我們 /contact/、常見問題 /contact/faq/、服務項目 /service/、
   關於皇御 /about/、加盟專區 /franchise/，只在這六頁載入）
   ==========================================================================
   全站共用的樣式（色盤、字體、按鈕、標題字級、頁首頁尾）在 Blocksy 主題設定；
   這裡只放主題沒有的版面。視覺語彙跟首頁同一套（ra-home.css）：
     區塊標籤（香檳金線＋Cardo 英文）、Cardo 斜體大編號（金與藍紫交錯）、
     照片滿版＋深藍漸層面板（色彩增值）、米白漸層底、預約導引的皇冠與膠囊鈕。
   顏色讀主題色盤，h2／h3 字級沿用主題設定。
   斷點用 Blocksy 的兩個：999.98px（平板）、689.98px（手機）；照片＋面板的區塊另在 1279.98px 改成面板蓋滿
   （同 ra-site.css 第 5 段的 Banner：面板寬度跟著文字欄走，窄桌機會把照片主體切半）。
   進場動效在 ra-pages.js，這裡最後一段是各動效的起始狀態。
   正本在本機 12_全站上稿/共用/assets/css/，不要直接在主機上改。
   ========================================================================== */

.ra-pg {
	--pg-navy: var(--theme-palette-color-1, #162447);
	--pg-gold: var(--theme-palette-color-2, #C8A24A);
	--pg-ink: var(--theme-palette-color-3, #353536);
	--pg-heading: var(--theme-palette-color-4, #162447);
	--pg-mist: var(--theme-palette-color-5, #ABB6C1);
	--pg-cream: var(--theme-palette-color-6, #F6F6F1);
	--pg-champ: var(--theme-palette-color-7, #C8B380);
	--pg-peri: #8097D2;    /* 首頁的輔助色 2（服務編號），不在主題色盤 */
	--pg-slate: #5B6E7D;   /* 設計稿 text1，不在主題色盤 */
	--pg-fog: #EDEDED;
	--pg-line: color-mix(in srgb, var(--pg-mist) 65%, transparent);
	--pg-latin: "Cardo", var(--theme-font-family), serif;
	--pg-wrapw: min(var(--theme-normal-container-max-width, 1290px), 90vw);
	--pg-side: calc((100% - var(--pg-wrapw)) / 2);
	--pg-veil: rgba(22, 36, 71, .95) 28.8%, rgba(22, 36, 71, .8) 100%;   /* 首頁深藍面板的漸層 */
	--pg-ease: cubic-bezier(.4, 0, .2, 1);
	--pg-ease-soft: cubic-bezier(.22, 1, .36, 1);
	--pg-sec: 120px;       /* 區塊上下留白 */
	--pg-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2v14M4.5 10.5 10 16l5.5-5.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
	--pg-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4.2 4L16 6' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");
	color: var(--pg-ink);
}

/* 滿版：突破內容區的 1290 容器，區塊底色才能左右滿版 */
.entry-content > .ra-pg.alignfull {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

/* 只限這些區塊的重設：主題內文區的段落、清單間距不套進來。
   用 :where() 把權重壓在 0,1,0（只算 .ra-pg）：蓋得過主題的 p、ul 等元素預設，
   又不會蓋掉後面各元件自己設的外距與內距 */
.ra-pg :where(p, h1, h2, h3, ol, ul, li, dl, dt, dd, figure) {
	margin: 0;
	padding: 0;
}
.ra-pg :where(ol, ul) {
	list-style: none;
}
.ra-pg :where(img) {
	display: block;
	max-width: 100%;
	height: auto;
}
.ra-pg :is(h2, h3) {
	color: var(--pg-heading);
}

/* ── 共用元件 ──────────────────────────────────────────────────────── */

.ra-pg-wrap {
	width: var(--theme-container-width, 90vw);
	max-width: var(--theme-normal-container-max-width, 1290px);
	margin-inline: auto;
}
.ra-pg-sec {
	padding-block: var(--pg-sec);
}
/* 米白漸層底（同首頁客戶回饋與品牌專欄那一段） */
.ra-pg-sec--light {
	background: linear-gradient(to bottom, var(--pg-cream) 0%, var(--pg-cream) 47.4%, #fff 100%);
}

/* 區塊開頭：標籤＋標題＋導言，置中 */
.ra-pg-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	margin-bottom: 72px;
	text-align: center;
}
/* 區塊標籤：上方 3px 香檳金線＋英文＋中文（同首頁） */
.ra-pg-label {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 22px;
	padding-top: 6px;
	color: var(--pg-slate);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .1em;
	line-height: 1.75;
	white-space: nowrap;
}
.ra-pg-label::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: var(--pg-champ);
	transform-origin: left center;
}
.ra-pg-label[data-ra-origin="center"]::before {
	transform-origin: center;
}
.ra-pg-label--dark {
	color: var(--pg-mist);
}
.ra-pg-en {
	font-family: var(--pg-latin);
	font-weight: 400;
	letter-spacing: .1em;
}
.ra-pg-label .ra-pg-en {
	font-size: 18px;
}
.ra-pg-h2 {
	letter-spacing: .15em;
}
/* 中文標題只在逗號處換行：逗號前後各包一個 ra-pg-nobr，片語本身不拆開
   （手機上「先找出漏水原因」不會斷成「漏水原／因」） */
.ra-pg-nobr {
	display: inline-block;
}
.ra-pg-lead {
	max-width: 40em;
	color: var(--pg-slate);
	text-wrap: pretty;
}

/* 膠囊鈕（同首頁預約導引：實心、右上角圓角；金色款滑過掃一道光）。
   桌機跟首頁一樣高 32px，點擊區另外撐到 44px；平板以下直接 44px */
.ra-pg-pill {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 32px;
	padding: 0 15px;
	border-top-right-radius: 12px;
	color: var(--pg-fog);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .1em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: filter .3s var(--pg-ease);
}
.ra-pg-pill:hover,
.ra-pg-pill:focus-visible {
	color: var(--pg-fog);
	filter: brightness(1.08);
}
.ra-pg-pill:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}
.ra-pg-pill::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 44px;
	transform: translateY(-50%);
}
.ra-pg-pill img {
	width: 16px;
	height: auto;
}
.ra-pg-pill--slate img {
	width: 12px;
}
.ra-pg-pill--gold {
	background: var(--pg-gold) linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .5) 50%, transparent 58%) no-repeat 117% 0 / 220% 100%;
}
.ra-pg-pill--gold:hover,
.ra-pg-pill--gold:focus-visible {
	animation: ra-pg-shine .9s var(--pg-ease) 1 both;
}
.ra-pg-pill--slate {
	background: var(--pg-slate);
}
@keyframes ra-pg-shine {
	from { background-position: 117% 0; }
	to { background-position: -17% 0; }
}

/* ── 1. 導言＋作業流程六步驟 ────────────────────────────────────────── */

.ra-pr-intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: center;
	gap: 80px;
}
.ra-pr-intro__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}
/* 六步驟：兩欄、由上往下排（同首頁服務項目），斜體大編號＋名稱＋說明，底線與編號同色 */
.ra-pr-steps {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(3, auto);
	gap: 30px 48px;
}
.ra-pr-steps__item {
	--line: var(--pg-gold);
	position: relative;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	column-gap: 16px;
	align-items: center;
	align-content: center;   /* 同一列另一欄比較高時，名稱與說明仍靠在一起，不被拉開 */
	padding-bottom: 14px;
}
.ra-pr-steps__item--peri {
	--line: var(--pg-peri);
}
.ra-pr-steps__item::after {
	content: "";
	position: absolute;
	left: 80px;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--line);
	opacity: .6;
}
.ra-pr-steps__no {
	grid-row: 1 / span 2;
	color: var(--line);
	font-family: var(--pg-latin);
	font-size: 54px;
	font-style: italic;
	letter-spacing: 0;
	line-height: 1;
	text-align: center;
}
.ra-pr-steps__name {
	color: var(--pg-heading);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: .15em;
	line-height: 1.5;
}
.ra-pr-steps__desc {
	color: var(--pg-slate);
	font-size: 14px;
	letter-spacing: .08em;
	line-height: 1.7;
	word-break: keep-all;      /* 窄欄時只在標點、空白處換行（「師傅到場研判，／提供報價」） */
	overflow-wrap: anywhere;
}

/* ── 2. 詳細流程：三個階段，照片與文字左右交錯 ─────────────────────── */

.ra-pr-stage {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: 96px;
}
.ra-pr-stage + .ra-pr-stage,
.ra-pr-branch + .ra-pr-stage {
	margin-top: 150px;
}
.ra-pr-stage--rev .ra-pr-stage__media {
	order: 2;
}
/* 照片：右下錯開一個香檳金細框（STEP 2 照片在右邊，框往左下錯開） */
.ra-pr-stage__media {
	position: relative;
}
.ra-pr-stage__media::before {
	content: "";
	position: absolute;
	inset: 28px -28px -28px 28px;
	border: 1px solid var(--pg-champ);
	pointer-events: none;
}
.ra-pr-stage--rev .ra-pr-stage__media::before {
	inset: 28px 28px -28px -28px;
}
.ra-pr-stage__photo {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--pg-mist);
}
.ra-pr-stage__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ra-pr-stage__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
/* STEP＋斜體大編號（同首頁服務編號） */
.ra-pr-stage__kicker {
	display: flex;
	align-items: baseline;
	gap: 14px;
	color: var(--pg-slate);
}
.ra-pr-stage__kicker .ra-pg-en {
	font-size: 15px;
	letter-spacing: .3em;
}
.ra-pr-stage__no {
	color: var(--pg-gold);
	font-family: var(--pg-latin);
	font-size: 72px;
	font-style: italic;
	letter-spacing: 0;
	line-height: .95;
}
.ra-pr-stage__title {
	margin-top: 10px;
	letter-spacing: .15em;
}
.ra-pr-stage__lead {
	margin-top: 16px;
	color: var(--pg-slate);
	font-size: 16px;
	line-height: 1.95;
	text-wrap: pretty;
}
/* STEP 2 的重點句：白底、左側金線 */
.ra-pr-stage__point {
	margin-top: 22px;
	padding: 16px 22px;
	border-left: 3px solid var(--pg-gold);
	background: #fff;
	color: var(--pg-ink);
	font-size: 15px;
	letter-spacing: .06em;
	line-height: 1.9;
	text-wrap: pretty;
}
.ra-pr-stage__point strong {
	color: var(--pg-navy);
	font-weight: 600;
}

/* 時間軸：深藍編號圓圈，圓心之間一條金色細線；沒有編號的步驟是香檳金圓點 */
.ra-pr-tl {
	display: grid;
	gap: 22px;
	width: 100%;
	margin-top: 30px;
}
.ra-pr-tl__item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 18px;
}
.ra-pr-tl__item:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 18px;
	left: 18px;
	width: 1px;
	height: calc(100% + 22px);
	background: color-mix(in srgb, var(--pg-gold) 55%, transparent);
}
.ra-pr-tl__no {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 37px;
	height: 37px;
	border-radius: 50%;
	background: var(--pg-navy);
	color: #fff;
	font-family: var(--pg-latin);
	font-size: 17px;
	line-height: 1;
}
.ra-pr-tl__item--dot .ra-pr-tl__no {
	background: none;
}
.ra-pr-tl__item--dot .ra-pr-tl__no::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--pg-champ);
	box-shadow: 0 0 0 4px var(--pg-cream);   /* 圓點跟細線之間留一圈底色，看起來是串在線上 */
}
.ra-pr-tl__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding-top: 4px;
}
.ra-pr-tl__title {
	color: var(--pg-heading);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1.6;
}
.ra-pr-tl__desc {
	color: var(--pg-slate);
	font-size: 14px;
	letter-spacing: .06em;
	line-height: 1.7;
}

/* STEP 1 的備註 */
.ra-pr-note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 26px;
	font-size: 14px;
	letter-spacing: .06em;
	line-height: 1.8;
}
.ra-pr-note__tag {
	flex: 0 0 auto;
	margin-top: 2px;
	padding: 1px 10px;
	border-radius: 0 8px 0 0;
	background: var(--pg-navy);
	color: #fff;
	font-size: 12px;
	letter-spacing: .12em;
}

/* STEP 2：判斷菱形，往下分成兩條路徑 */
.ra-pr-branch {
	margin-top: 96px;
}
.ra-pr-decision {
	position: relative;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 6px;
	width: 240px;
	aspect-ratio: 1;
	margin-inline: auto;
	text-align: center;
}
.ra-pr-decision::before {
	content: "";
	position: absolute;
	inset: 15%;
	border: 1px solid var(--pg-gold);
	background: var(--pg-navy);
	box-shadow: 0 0 0 8px color-mix(in srgb, var(--pg-gold) 12%, transparent);
	transform: rotate(45deg);
}
.ra-pr-decision > * {
	position: relative;
}
.ra-pr-decision__q {
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: .1em;
	line-height: 1.5;
}
.ra-pr-decision__a {
	max-width: 11em;
	color: var(--pg-champ);
	font-size: 13px;
	letter-spacing: .08em;
	line-height: 1.6;
}
/* 菱形底端往下一條線，分岔到兩欄中央 */
.ra-pr-paths {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px;
	max-width: 980px;
	margin-inline: auto;
	padding-top: 56px;
}
.ra-pr-paths::before,
.ra-pr-paths::after,
.ra-pr-path::before {
	content: "";
	position: absolute;
	background: var(--pg-gold);
}
.ra-pr-paths::before {
	top: 0;
	left: 50%;
	width: 1px;
	height: 28px;
}
.ra-pr-paths::after {
	top: 28px;
	left: calc(25% - 12px);
	right: calc(25% - 12px);
	height: 1px;
}
.ra-pr-path {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.ra-pr-path::before {
	top: -28px;
	left: 50%;
	width: 1px;
	height: 28px;
}
.ra-pr-path__tag {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 12px 16px;
	border-radius: 0 12px 0 0;
	background: var(--pg-navy);
	color: #fff;
	text-align: center;
}
.ra-pr-path--direct .ra-pr-path__tag {
	background: var(--pg-champ);
	color: var(--pg-navy);
}
.ra-pr-path__name {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1.5;
}
.ra-pr-path__sub {
	font-size: 13px;
	letter-spacing: .1em;
	line-height: 1.6;
	opacity: .85;
}

/* 路徑裡的節點（白底卡片，右上角圓角同品牌按鈕） */
.ra-pr-node {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 76px;
	padding: 16px 22px;
	border: 1px solid var(--pg-line);
	border-radius: 0 12px 0 0;
	background: #fff;
}
.ra-pr-no {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--pg-navy);
	color: #fff;
	font-size: 17px;
	letter-spacing: 0;
	line-height: 1;
}
.ra-pr-no--dot {
	background: none;
}
.ra-pr-no--dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pg-champ);
}
.ra-pr-node__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.ra-pr-node__title {
	color: var(--pg-heading);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: .1em;
	line-height: 1.5;
	text-wrap: balance;   /* 平板最窄時才會折成兩行，平均分成「檢測後提供／修繕報價單」，不會剩「價單」兩個字 */
}
.ra-pr-node__desc {
	color: var(--pg-slate);
	font-size: 14px;
	letter-spacing: .06em;
	line-height: 1.7;
}
/* 兩條路徑的終點都是「修繕報價單」，金框標出來，接到 STEP 3 */
.ra-pr-node--quote {
	border-color: var(--pg-gold);
	background: color-mix(in srgb, var(--pg-gold) 7%, #fff);
}
/* 直排節點之間的向下箭頭，對齊編號圓圈的中心 */
.ra-pr-col {
	--gap: 36px;
	display: grid;
	gap: var(--gap);
}
.ra-pr-col > li + li::before {
	content: "";
	position: absolute;
	top: calc(var(--gap) / -2 - 10px);
	left: 33px;
	width: 20px;
	height: 20px;
	background: var(--pg-gold);
	-webkit-mask: var(--pg-arrow) center / contain no-repeat;
	mask: var(--pg-arrow) center / contain no-repeat;
}
.ra-pr-why {
	padding: 24px 26px;
	border: 1px dashed color-mix(in srgb, var(--pg-gold) 70%, transparent);
	border-radius: 0 12px 0 0;
	background: rgba(255, 255, 255, .6);
}
.ra-pr-why__title {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--pg-heading);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .1em;
}
.ra-pr-why__title::before {
	content: "";
	width: 18px;
	height: 18px;
	background: var(--pg-gold);
	-webkit-mask: var(--pg-check) center / contain no-repeat;
	mask: var(--pg-check) center / contain no-repeat;
}
.ra-pr-why__list {
	display: grid;
	gap: 2px;
	margin-top: 10px;
}
.ra-pr-why__list li {
	position: relative;
	padding-left: 18px;
	font-size: 15px;
	letter-spacing: .06em;
	line-height: 1.9;
}
.ra-pr-why__list li::before {
	content: "";
	position: absolute;
	top: .8em;
	left: 2px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pg-champ);
}

/* ── 3. 保固與保障：照片滿版、右側深藍面板（同首頁「浸泡式防水工法」）──────
   照片左半是浴室鏡櫃，右半是淋浴區；面板蓋右邊，左邊的鏡面與燈光露出來 */

.ra-pr-warranty {
	position: relative;
	overflow: hidden;
	background: var(--pg-navy);
	color: rgba(255, 255, 255, .86);
}
.ra-pr-warranty__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.ra-pr-warranty__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 30% 50%;
}
.ra-pr-warranty__shade {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: calc(var(--pg-side) + 560px);
	background: linear-gradient(128deg, var(--pg-veil));
	opacity: .95;
	mix-blend-mode: multiply;
}
.ra-pr-warranty__inner {
	position: relative;
	padding: var(--pg-sec) 0 calc(var(--pg-sec) + 8px) 632px;
}
.ra-pr-warranty__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
}
.ra-pr-warranty .ra-pg-h2 {
	color: #fff;
}
/* 四項保障：兩欄，每項左側一條金色直線（同首頁「關於皇御」的數據） */
.ra-pr-promise__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 44px 48px;
	margin-top: 56px;
}
.ra-pr-promise__item {
	position: relative;
	padding-left: 24px;
}
.ra-pr-promise__item::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 0;
	width: 2px;
	height: 66px;
	background: var(--pg-gold);
}
.ra-pr-promise__no {
	color: var(--pg-champ);
	font-size: 34px;
	line-height: 1.15;
}
.ra-pr-promise__title {
	margin-top: 6px;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1.5;
}
.ra-pr-promise__desc {
	margin-top: 8px;
	color: rgba(255, 255, 255, .78);
	font-size: 15px;
	letter-spacing: .05em;
	line-height: 1.9;
	text-wrap: pretty;
}

/* ── 4. 費用說明：白底卡片、上緣金線（卡片外框同首頁品牌專欄） ─────────── */

.ra-pr-fees__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}
.ra-pr-fee {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 32px 28px 30px;
	border: 1px solid var(--pg-line);
	border-top: 2px solid var(--pg-gold);
	border-radius: 0 12px 0 0;
	background: #fff;
	box-shadow: 0 0 15px 1.5px rgba(139, 154, 192, .12);
}
.ra-pr-fee__name {
	color: var(--pg-heading);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1.5;
}
.ra-pr-fee__amount {
	display: flex;
	align-items: baseline;
	gap: 6px;
	min-height: 48px;
	color: var(--pg-navy);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .1em;
}
.ra-pr-fee__amount .ra-pg-en {
	font-size: 40px;
	letter-spacing: .02em;
	line-height: 1.2;
}
.ra-pr-fee__amount--text {
	align-items: center;
	font-size: 20px;
	line-height: 1.5;
}
.ra-pr-fee__desc {
	margin-top: 4px;
	padding-top: 14px;
	border-top: 1px solid var(--pg-line);
	color: var(--pg-slate);
	font-size: 14px;
	letter-spacing: .05em;
	line-height: 1.9;
	text-wrap: pretty;
}

/* ── 5. 預約導引（同首頁：照片滿版、右側深藍面板、內容置中） ──────────── */

.ra-pr-cta {
	position: relative;
	overflow: hidden;
	background: #6b7279;
}
.ra-pr-cta__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.ra-pr-cta__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ra-pr-cta__shade {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: calc(var(--pg-side) + var(--pg-wrapw) * .432);   /* 首頁：1290 稿的 557.25px */
	background: linear-gradient(115deg, var(--pg-veil));
	opacity: .95;
	mix-blend-mode: multiply;
}
.ra-pr-cta__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-left: calc(var(--pg-side) + var(--pg-wrapw) * .432);
	padding: 100px 5vw 108px;
	color: #fff;
	text-align: center;
}
.ra-pr-cta__crown {
	width: 30px;
	height: auto;
}
.ra-pg .ra-pr-cta__title {
	margin-top: 12px;
	color: #fff;
}
.ra-pr-cta__body {
	margin-top: 22px;
	color: var(--pg-fog);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: .15em;
	line-height: 1.75;
}
.ra-pr-cta__body > span {
	display: block;
}
.ra-pr-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
	margin-top: 32px;
}

/* ── 6. 聯絡我們：深藍底，左邊聯絡資訊、右邊線上諮詢表單（Fluent Forms #3） ────────
   第五輪（Kevin 10-21：業主不喜歡整塊白色，多用海軍藍）：整段改成深藍底（同首頁服務項目），聯絡資訊白字、霧金；
   表單維持白底卡片（深色底上填寫最清楚），右下錯開一個香檳金細框（同服務流程頁的照片框）。
   表單用「繼承主題樣式」，Fluent 的樣式產生器沒有用；欄位外觀都在這裡，選擇器都從 .ra-ct-form 開頭 */

/* 第六輪（Kevin：區塊分太多）：頁面不放標題區，Banner 那張楓樹清水模中庭改當這一段的背景，疊一層半透明深藍；
   左邊（聯絡資訊）深一點讓白字清楚，右邊淡一點讓樹冠與天空透出來 */
.ra-ct-main {
	position: relative;
	isolation: isolate;   /* 背景照片（z-index: -1）留在這一段的深藍底上面；不加 overflow，加了左欄的 sticky 會失效 */
	background: var(--pg-navy);
	color: rgba(255, 255, 255, .86);
}
.ra-ct-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}
.ra-ct-bg img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 70% 30%;
}
.ra-ct-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, rgba(22, 36, 71, .92) 0%, rgba(22, 36, 71, .88) 38%, rgba(22, 36, 71, .62) 100%);
}
.ra-ct-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: start;
	gap: 80px;
}
.ra-ct-info .ra-pg-h2 {
	color: #fff;
}
.ra-ct-info .ra-pg-lead {
	color: rgba(255, 255, 255, .78);
}
.ra-ct-info {
	position: sticky;   /* 表單比左欄長，捲動時聯絡資訊停在畫面上（頁首高 85px） */
	top: 120px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	padding-top: 12px;
}
/* 聯絡資訊：一列一項，淡灰藍細線分隔；項目名霧金、內容白字，號碼用 Cardo 數字 */
.ra-ct-list {
	width: 100%;
	margin-top: 4px;
	border-top: 1px solid rgba(171, 182, 193, .26);
}
.ra-ct-item {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	align-items: baseline;
	gap: 16px;
	padding: 15px 0;
	border-bottom: 1px solid rgba(171, 182, 193, .26);
}
.ra-ct-item dt {
	color: var(--pg-champ);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .12em;
}
.ra-ct-item dd {
	color: #fff;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.6;
}
.ra-ct-item dd a {
	color: inherit;
	text-decoration: none;
	transition: color .3s var(--pg-ease);
}
.ra-ct-item dd a:hover,
.ra-ct-item dd a:focus-visible {
	color: var(--pg-champ);
}
.ra-ct-item dd .ra-pg-en {
	font-size: 22px;
	letter-spacing: .06em;
	line-height: 1.3;
}
.ra-ct-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-top: 8px;
}

/* 表單卡片：白底、上緣金線、右上角圓角（同品牌按鈕）。外層畫一個往右下錯開的香檳金細框，卡片疊在框上面 */
.ra-ct-formwrap {
	position: relative;
}
.ra-ct-formwrap::before {
	content: "";
	position: absolute;
	inset: 28px -28px -28px 28px;
	border: 1px solid rgba(200, 179, 128, .55);
	border-radius: 0 18px 0 0;
	pointer-events: none;
}
.ra-ct-form {
	position: relative;
	padding: 44px 48px 40px;
	border-top: 3px solid var(--pg-gold);
	border-radius: 0 18px 0 0;
	background: #fff;
	box-shadow: 0 24px 48px -24px rgba(5, 12, 30, .55);
}
.ra-ct-form__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 30px;
}
.ra-ct-form__note {
	color: var(--pg-slate);
	font-size: 14px;
	letter-spacing: .06em;
	line-height: 1.8;
}
.ra-ct-form__req {
	display: inline-block;
	margin-left: 8px;
}
.ra-ct-form__req > span,
.ra-ct-form .ff-el-is-required.asterisk-right label::after {
	color: var(--pg-gold);
}
/* 兩欄：Fluent 預設 768px 以上才並排，改成跟全站一樣 690px 以上並排 */
.ra-ct-form .frm-fluent-form .ff-t-container {
	display: flex;
	gap: 20px;
}
.ra-ct-form .frm-fluent-form .ff-t-cell {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0;
}
.ra-ct-form .fluentform .ff-el-group {
	margin-bottom: 24px;
}
.ra-ct-form .fluentform .ff-el-input--label {
	margin-bottom: 8px;
}
.ra-ct-form .fluentform .ff-el-input--label label {
	color: var(--pg-heading);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.6;
}
.ra-ct-form .fluentform .ff-el-is-required.asterisk-right label::after {
	content: "*";
	margin-left: 4px;
}
.ra-ct-form .fluentform .ff_ahm {   /* 標籤下的說明（「可複選」）：獨佔一行，排在選項上方 */
	flex: 0 0 100%;
	margin: -4px 0 2px;
	color: var(--pg-slate);
	font-size: 13px;
	font-style: normal;
	letter-spacing: .06em;
}
/* 輸入框：細框、右上圓角，聚焦時框線轉金色並帶一圈淡金光暈 */
.ra-ct-form .fluentform .ff-el-form-control {
	width: 100%;
	height: 50px;
	min-height: 0;
	padding: 0 16px;
	border: 1px solid var(--pg-line);
	border-radius: 0 10px 0 0;
	background: #fff;
	box-shadow: none;
	color: var(--pg-ink);
	font-family: inherit;
	font-size: 16px;
	letter-spacing: .04em;
	transition: border-color .3s var(--pg-ease), box-shadow .3s var(--pg-ease);
}
.ra-ct-form .fluentform textarea.ff-el-form-control {
	height: auto;
	min-height: 150px;
	padding: 14px 16px;
	line-height: 1.8;
	resize: vertical;
}
.ra-ct-form .fluentform .ff-el-form-control::placeholder {
	color: #98A3AE;
	opacity: 1;
}
.ra-ct-form .fluentform .ff-el-form-control:hover {
	border-color: var(--pg-mist);
}
.ra-ct-form .fluentform .ff-el-form-control:focus {
	border-color: var(--pg-gold);
	box-shadow: 0 0 0 3px rgba(200, 162, 74, .16);
	outline: none;
}
/* 所在地區、詢問項目：選項做成膠囊按鈕，選中變深藍底白字；原生的圓圈與方框只藏起來、仍然能用鍵盤操作 */
.ra-ct-form .fluentform .ra-ct-chips .ff-el-input--content {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.ra-ct-form .fluentform .ra-ct-chips .ff-el-form-check {
	display: block;
	margin: 0;
}
.ra-ct-form .fluentform .ra-ct-chips .ff-el-form-check-label {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid var(--pg-line);
	border-radius: 0 10px 0 0;
	background: #fff;
	color: var(--pg-ink);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .08em;
	cursor: pointer;
	transition: background-color .3s var(--pg-ease), border-color .3s var(--pg-ease), color .3s var(--pg-ease);
}
.ra-ct-form .fluentform .ra-ct-chips .ff-el-form-check-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}
.ra-ct-form .fluentform .ra-ct-chips .ff-el-form-check-label:hover {
	border-color: var(--pg-champ);
}
.ra-ct-form .fluentform .ra-ct-chips .ff-el-form-check-label:has(input:checked),
.ra-ct-form .fluentform .ra-ct-chips .ff_item_selected .ff-el-form-check-label {
	border-color: var(--pg-navy);
	background: var(--pg-navy);
	color: #fff;
}
/* 複選的打勾記號：選中時在字前面出現一個金色勾 */
.ra-ct-form .fluentform .ra-ct-chips input[type="checkbox"] + span::before {
	content: "";
	display: inline-block;
	width: 0;
	height: 12px;
	margin-right: 0;
	background: var(--pg-champ);
	-webkit-mask: var(--pg-check) center / contain no-repeat;
	mask: var(--pg-check) center / contain no-repeat;
	vertical-align: -1px;
	transition: width .2s var(--pg-ease), margin .2s var(--pg-ease);
}
.ra-ct-form .fluentform .ra-ct-chips input[type="checkbox"]:checked + span::before {
	width: 12px;
	margin-right: 6px;
}
.ra-ct-form .fluentform .ra-ct-chips .ff-el-form-check-label:has(input:focus-visible) {
	outline: 2px solid var(--pg-gold);
	outline-offset: 2px;
}
/* 錯誤提示 */
.ra-ct-form .fluentform .ff-el-is-error .ff-el-form-control,
.ra-ct-form .fluentform .ff-el-is-error .ff-el-form-check-label {
	border-color: #B4472F;
}
.ra-ct-form .fluentform .error.text-danger {
	margin-top: 6px;
	color: #B4472F;
	font-size: 13px;
	letter-spacing: .04em;
}
.ra-ct-form .fluentform .ra-ct-chips .ff-el-input--content > .error {   /* 選項排成一列列，錯誤提示另起一行 */
	flex: 0 0 100%;
	margin-top: 0;
}
.ra-ct-form .ra-ct-privacy {
	margin: 0;
	color: var(--pg-slate);
	font-size: 13px;
	letter-spacing: .06em;
}
/* 人機驗證（Turnstile）原本排在送出鈕後面，移到送出鈕前面；不用 JS 搬動，搬了會重置驗證 */
.ra-ct-form .fluentform fieldset {
	display: flex;
	flex-direction: column;
}
.ra-ct-form .fluentform fieldset > .cf-turnstile {
	order: 98;
	margin: -6px 0 18px;
}
.ra-ct-form .fluentform fieldset > .ff_submit_btn_wrapper {
	order: 99;
	margin-bottom: 0;
}
.ra-ct-form .fluentform .cf-turnstile-br {
	display: none;
}
/* 送出鈕：金色膠囊鈕（同首頁預約導引，大一號）。
   主題對 Fluent 的按鈕有專用規則（.fluentform .ff-el-group button.ff-btn，權重比這裡高），底色與內距讀主題的按鈕變數，
   所以在這裡改變數，不拚權重 */
.ra-ct-form .fluentform .ff-btn-submit {
	--theme-button-background-initial-color: var(--pg-gold);
	--theme-button-background-hover-color: var(--pg-gold);
	--theme-button-text-initial-color: var(--pg-fog);
	--theme-button-text-hover-color: var(--pg-fog);
	--theme-button-padding: 0 40px;
	--theme-button-min-height: 52px;
	--theme-button-border-radius: 0 12px 0 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 200px;
	height: 52px;
	padding: 0 40px;
	border: 0;
	border-radius: 0 12px 0 0;
	background: var(--pg-gold) linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .5) 50%, transparent 58%) no-repeat 117% 0 / 220% 100%;
	color: var(--pg-fog);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .2em;
	cursor: pointer;
	transition: filter .3s var(--pg-ease);
}
.ra-ct-form .fluentform .ff-btn-submit:hover,
.ra-ct-form .fluentform .ff-btn-submit:focus-visible {
	filter: brightness(1.08);
	animation: ra-pg-shine .9s var(--pg-ease) 1 both;
}
.ra-ct-form .fluentform .ff-btn-submit:focus-visible {
	outline: 2px solid var(--pg-navy);
	outline-offset: 3px;
}
.ra-ct-form .fluentform .ff-btn-submit[disabled] {
	opacity: .65;
	cursor: wait;
}
/* 送出後的感謝訊息 */
.ra-ct-form .ff-message-success {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}
.ra-ct-done {
	padding: 32px 28px;
	border-left: 3px solid var(--pg-gold);
	background: var(--pg-cream);
	color: var(--pg-ink);
	font-size: 15px;
	letter-spacing: .06em;
	line-height: 1.9;
}
.ra-ct-done p {
	margin: 0;
}
.ra-ct-done__title {
	margin-bottom: 6px !important;
	color: var(--pg-heading);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: .12em;
}
.ra-ct-done a {
	color: var(--pg-navy);
	font-weight: 600;
}

/* 頁尾前的導引：米白底一條，右邊描邊按鈕（同首頁「了解服務」） */
.ra-ct-next {
	padding-block: 56px;
	background: var(--pg-cream);
}
.ra-ct-next__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.ra-ct-next__text {
	color: var(--pg-heading);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1.6;
}
/* 描邊按鈕（直角，滑過由左往右填色，同首頁 .ra-btn） */
.ra-pg-btn {
	--btn-c: var(--pg-navy);
	--btn-ink: #fff;
	position: relative;
	isolation: isolate;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 10px;
	height: 44px;
	padding: 0 18px;
	border: 1px solid var(--btn-c);
	color: var(--btn-c);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .1em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: color .42s var(--pg-ease);
}
.ra-pg-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--btn-c);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .42s var(--pg-ease);
}
.ra-pg-btn:hover,
.ra-pg-btn:focus-visible {
	color: var(--btn-ink);
}
.ra-pg-btn:hover::before,
.ra-pg-btn:focus-visible::before {
	transform: scaleX(1);
}
.ra-pg-arrow {
	width: 22px;
	height: 7px;
	overflow: visible;
	fill: none;
	stroke: currentColor;
	stroke-width: 1px;
	transition: transform .3s var(--pg-ease);
}
.ra-pg-btn:hover .ra-pg-arrow,
.ra-pg-btn:focus-visible .ra-pg-arrow {
	transform: translateX(4px);
}
/* 導引列的兩顆按鈕：看服務流程、看常見問題（10-22 加常見問題頁） */
.ra-ct-next__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ── 7. 常見問題 /contact/faq/：舊官網「防水小知識」的題目分成五類，點問題展開回答 ─────────
   Kevin 10-22 晚：「常見問題太多了，它應該要分不同的分類，然後整個呈現的樣式上要看起來更加精緻、有質感」。
   桌機：左欄選分類（米白底，跟工程實績篩選鈕同一個顏色；目前的分類左邊一條金線、編號轉金色），往下捲時停在頁首下方；
         右欄是該類的編號、英文標籤、標題、說明，接著是問答。
   平板與手機：分類改成一行左右滑的分頁籤，外觀與滑法同工程實績的篩選列（ra-site.css 3-6）。
   沒選到的分類加 hidden="until-found"：內容一直在頁面裡，瀏覽器「尋找」找到時會自動切過去。切換、鍵盤、網址錨點在 ra-pages.js。
   問答用原生 details／summary，沒有 JS 也能開合：題號 Cardo 斜體，右邊細框圓鈕「＋」，展開後變深藍底「－」；
   回答的清單：項目符號用香檳金圓點，編號用金色 Cardo 斜體（同首頁服務編號） */
.ra-faq {
	--faq-stick: calc(var(--header-sticky-height, 84px) + 40px);   /* 左欄停住的位置、錨點捲動時讓出的高度：固定頁首＋40px */
}
.ra-faq-body {
	display: grid;
	grid-template-columns: 296px minmax(0, 1fr);
	gap: 0 96px;
	align-items: start;
}
.ra-faq-side {
	position: sticky;
	top: var(--faq-stick);
}

/* 左欄的分類：一列一類，編號、名稱、題數；項目之間一條左右內縮的細線（第一項上面、最後一項下面不畫） */
.ra-faq-nav {
	padding: 12px 0;
	border-top-right-radius: 12px;
	background: var(--pg-cream);
}
.ra-faq-nav__list {
	display: flex;
	flex-direction: column;
}
.ra-faq-nav__link {
	position: relative;
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 0 10px;
	padding: 17px 28px;
	color: var(--pg-slate);
	text-decoration: none;
	transition: color .3s var(--pg-ease);
}
.ra-faq-nav__link + .ra-faq-nav__link::after {
	content: "";
	position: absolute;
	top: 0;
	left: 28px;
	right: 28px;
	height: 1px;
	background: var(--pg-line);
}
/* 目前的分類：左邊一條金線，從中間往上下長出來 */
.ra-faq-nav__link::before {
	content: "";
	position: absolute;
	left: 0;
	top: 16px;
	bottom: 16px;
	width: 3px;
	background: var(--pg-gold);
	transform: scaleY(0);
	transition: transform .35s var(--pg-ease);
}
.ra-faq-nav__link.is-active::before {
	transform: scaleY(1);
}
.ra-faq-nav__link:hover,
.ra-faq-nav__link:focus-visible,
.ra-faq-nav__link.is-active {
	color: var(--pg-navy);
}
.ra-faq-nav__link:focus-visible {
	outline: 2px solid var(--pg-gold);
	outline-offset: -2px;
}
.ra-faq-nav__no {
	color: var(--pg-champ);
	font-family: var(--pg-latin);
	font-size: 18px;
	font-style: italic;
	transition: color .3s var(--pg-ease);
}
.ra-faq-nav__link.is-active .ra-faq-nav__no {
	color: var(--pg-gold);
}
.ra-faq-nav__name {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .1em;
	line-height: 1.6;
}
.ra-faq-nav__count {
	color: var(--pg-slate);
	font-size: 13px;
	letter-spacing: .05em;
	white-space: nowrap;
}
/* 分類下面一行：找不到問題時的去處（次要動作，文字＋箭頭，滑過箭頭往右） */
.ra-faq-side__help {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	margin-top: 26px;
	padding-left: 28px;
	color: var(--pg-slate);
	font-size: 15px;
	letter-spacing: .06em;
}
.ra-faq-side__help a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--pg-heading);
	font-weight: 600;
	letter-spacing: .1em;
	text-decoration: none;
}
.ra-faq-side__help a:hover .ra-pg-arrow,
.ra-faq-side__help a:focus-visible .ra-pg-arrow {
	transform: translateX(4px);
}

/* 右欄：每一類一個區塊，切換時淡入上浮 */
.ra-faq-panel {
	scroll-margin-top: var(--faq-stick);
}
.ra-faq-panel:not([hidden]) {
	animation: ra-faq-in .6s var(--pg-ease-soft) both;
}
@keyframes ra-faq-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
}
/* 區塊開頭：金色斜體編號＋英文標籤、標題、說明；底下一條細線，左端一小段金色（同首頁區塊標籤的語彙） */
.ra-faq-panel__head {
	position: relative;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--pg-line);
}
.ra-faq-panel__head::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 56px;
	height: 1px;
	background: var(--pg-gold);
}
.ra-faq-panel__en {
	display: flex;
	align-items: baseline;
	gap: 16px;
	color: var(--pg-slate);
	font-family: var(--pg-latin);
	font-size: 15px;
	letter-spacing: .2em;
	line-height: 1.4;
}
.ra-faq-panel__no {
	color: var(--pg-gold);
	font-size: 26px;
	font-style: italic;
	letter-spacing: 0;
	line-height: 1;
}
.ra-faq .ra-faq-panel__title {
	margin-top: 14px;
	font-size: 30px;
	font-weight: 600;
	letter-spacing: .15em;
	line-height: 1.4;
}
/* 說明只在標點、空白處換行（「彈性水泥的特／性」不會被拆開）；桌機寬度夠就排成一行 */
.ra-faq-panel__desc {
	margin-top: 14px;
	color: var(--pg-slate);
	line-height: 1.85;
	text-wrap: pretty;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* 問答：題號、題目、圓鈕三欄；題與題之間一條細線 */
.ra-faq__item {
	scroll-margin-top: var(--faq-stick);   /* 從錨點連過來時，題目不被固定的頁首蓋住 */
}
.ra-faq__item + .ra-faq__item {
	border-top: 1px solid var(--pg-line);
}
.ra-faq__q {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) 36px;
	align-items: baseline;
	gap: 0 18px;
	padding: 28px 0;
	cursor: pointer;
	list-style: none;
}
.ra-faq__q::-webkit-details-marker {
	display: none;
}
.ra-faq__q:focus-visible {
	outline: 2px solid var(--pg-gold);
	outline-offset: 4px;
}
.ra-faq__no {
	color: var(--pg-champ);
	font-family: var(--pg-latin);
	font-size: 20px;
	font-style: italic;
	line-height: 1.6;
	transition: color .3s var(--pg-ease);
}
.ra-faq .ra-faq__title {
	min-width: 0;
	margin: 0;
	color: var(--pg-heading);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.6;
	transition: color .3s var(--pg-ease);
}
/* 題目與 Banner 導言只在標點處換行（同 ra-site.css 4-3 工程實績標題）：
   「家裡有做過防水了，／但為什麼又有壁癌呢？」不會剩「呢？」一行；整段排不下時照常逐字斷 */
.ra-faq .ra-faq__title,
body:has(.ra-faq) .hero-section .page-description {
	word-break: keep-all;
	overflow-wrap: anywhere;
}
.ra-faq__q:hover .ra-faq__title {
	color: var(--pg-slate);
}
.ra-faq__q:hover .ra-faq__no,
.ra-faq__item[open] .ra-faq__no {
	color: var(--pg-gold);
}
/* 圓鈕：細框＋深藍「＋」；滑過框線轉金色，展開後深藍底白色「－」。對齊題目第一行的中線 */
.ra-faq__icon {
	position: relative;
	align-self: start;
	width: 36px;
	height: 36px;
	margin-top: -3px;
	border: 1px solid var(--pg-line);
	border-radius: 50%;
	transition: background-color .35s var(--pg-ease), border-color .35s var(--pg-ease);
}
.ra-faq__icon::before,
.ra-faq__icon::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 2px;
	margin: -1px 0 0 -6px;
	background: var(--pg-navy);
	transition: transform .35s var(--pg-ease), background-color .35s var(--pg-ease);
}
.ra-faq__icon::after {
	transform: rotate(90deg);
}
.ra-faq__q:hover .ra-faq__icon {
	border-color: var(--pg-gold);
}
.ra-faq__item[open] .ra-faq__icon {
	border-color: var(--pg-navy);
	background: var(--pg-navy);
}
.ra-faq__item[open] .ra-faq__icon::before,
.ra-faq__item[open] .ra-faq__icon::after {
	background: #fff;
}
.ra-faq__item[open] .ra-faq__icon::after {
	transform: rotate(90deg) scaleX(0);
}
/* 回答：左邊對齊題目文字（題號 40px＋間距 18px） */
.ra-faq__a {
	padding: 0 54px 34px 58px;
	line-height: 1.95;
}
.ra-faq__a > * + * {
	margin-top: 14px;
}
.ra-faq__a li + li {
	margin-top: 8px;
}
.ra-faq__a ul > li {
	position: relative;
	padding-left: 1.3em;
}
.ra-faq__a ul > li::before {
	content: "";
	position: absolute;
	left: .25em;
	top: .82em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pg-champ);
}
.ra-faq__a ol {
	counter-reset: ra-faq;
}
.ra-faq__a ol > li {
	position: relative;
	padding-left: 2.2em;
	counter-increment: ra-faq;
}
.ra-faq__a ol > li::before {
	content: counter(ra-faq, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	color: var(--pg-gold);
	font-family: var(--pg-latin);
	font-style: italic;
}
.ra-faq__a strong {
	color: var(--pg-heading);
	font-weight: 600;
}
.ra-faq__more {
	color: var(--pg-slate);
	font-size: 15px;
}
.ra-faq__more a {
	color: var(--pg-heading);
	text-decoration: underline;
	text-decoration-color: var(--pg-champ);
	text-underline-offset: 4px;
	transition: color .3s var(--pg-ease);
}
.ra-faq__more a:hover,
.ra-faq__more a:focus-visible {
	color: var(--pg-slate);
}
/* 展開、收合時高度滑動（Chrome 131 起；其他瀏覽器直接開合） */
@supports (interpolate-size: allow-keywords) {
	.ra-faq {
		interpolate-size: allow-keywords;
	}
	.ra-faq__item::details-content {
		block-size: 0;
		overflow-y: clip;
		transition: block-size .45s var(--pg-ease), content-visibility .45s allow-discrete;
	}
	.ra-faq__item[open]::details-content {
		block-size: auto;
	}
}
@media (prefers-reduced-motion: reduce) {
	.ra-faq-panel:not([hidden]) {
		animation: none;
	}
	.ra-faq__item::details-content {
		transition: none;
	}
}
/* 列印：五類全部印出來，不印左欄 */
@media print {
	.ra-faq-body {
		display: block;
	}
	.ra-faq-side {
		display: none;
	}
	.ra-faq-panel[hidden] {
		display: block !important;
		content-visibility: visible !important;
	}
	.ra-faq-panel + .ra-faq-panel {
		margin-top: 48px;
	}
}

/* ── 8. 服務項目 /service/（10-23 總覽頁）：導言＋五大服務索引、五項服務、浸泡式防水工法、流程摘要、預約導引 ──
   照片章節（左右交錯、金色錯位細框）、六步驟、三個重點、預約導引直接沿用服務流程頁的元件（ra-pr-*），
   這裡只放服務頁自己的部分。每項服務與浸泡式工法都有錨點（#leak-repair 等），主選單下拉、頁尾、首頁連到這裡 */

/* 8-0 錨點跳過來時停在固定頁首下方（頁首桌機 85px、平板 72px、手機 64px）；點索引平順捲動，減少動態時直接跳 */
.ra-service :is(.ra-sv-item, .ra-sv-soak) {
	scroll-margin-top: 100px;
}
@media (prefers-reduced-motion: no-preference) {
	html:has(.ra-service) {
		scroll-behavior: smooth;
	}
}
/* Banner 導言只在標點處換行：10-23 第二次起是全站規範（ra-site.css 第 5 段「Banner 說明一律兩行」） */

/* 8-1 五大服務索引：一欄五列，斜體大編號（金與藍紫交錯）＋名稱＋一句說明＋箭頭（同首頁服務項目）。
   整列是連結，點了捲到下面那一項；滑過時底線變實、箭頭轉金色往右 */
.ra-sv-index {
	display: grid;
	gap: 8px;
}
.ra-sv-index__item {
	--line: var(--pg-gold);
}
.ra-sv-index__item--peri {
	--line: var(--pg-peri);
}
.ra-sv-index__item > a {
	position: relative;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	column-gap: 16px;
	align-items: center;
	padding: 8px 0 14px;
	color: inherit;
	text-decoration: none;
}
.ra-sv-index__item > a::after {
	content: "";
	position: absolute;
	left: 80px;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--line);
	opacity: .6;
	transition: opacity .3s var(--pg-ease);
}
.ra-sv-index__no {
	grid-row: 1 / span 2;
	color: var(--line);
	font-family: var(--pg-latin);
	font-size: 54px;
	font-style: italic;
	letter-spacing: 0;
	line-height: 1;
	text-align: center;
}
.ra-sv-index__name {
	color: var(--pg-heading);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: .15em;
	line-height: 1.5;
}
.ra-sv-index__desc {
	grid-column: 2;
	color: var(--pg-slate);
	font-size: 14px;
	letter-spacing: .08em;
	line-height: 1.7;
}
.ra-sv-index .ra-pg-arrow {
	grid-column: 3;
	grid-row: 1 / span 2;
	color: var(--pg-mist);
	transition: transform .3s var(--pg-ease), color .3s var(--pg-ease);
}
.ra-sv-index__item > a:is(:hover, :focus-visible)::after {
	opacity: 1;
}
.ra-sv-index__item > a:is(:hover, :focus-visible) .ra-pg-arrow {
	color: var(--pg-gold);
	transform: translateX(4px);
}

/* 8-2 每一項服務：英文副標、細項（菱形記號，同浸泡式工法的小標圖示）、檢測方式標籤、相關實績與延伸閱讀 */
.ra-sv-item__en {
	margin-top: 6px;
	color: var(--pg-slate);
	font-size: 13px;
	letter-spacing: .24em;
	line-height: 1.6;
}
.ra-sv-item__detail {
	width: 100%;
	margin-top: 26px;
}
.ra-sv-item__label {
	color: var(--pg-heading);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1.6;
}
.ra-sv-item__label > span {
	margin-left: 12px;
	color: var(--pg-slate);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: .06em;
}
.ra-sv-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}
.ra-pr-stage__body > .ra-sv-tags {
	margin-top: 26px;
}
.ra-sv-tags > li {
	padding: 5px 14px;
	border: 1px solid var(--pg-line);
	border-radius: 0 10px 0 0;
	background: #fff;
	color: var(--pg-ink);
	font-size: 14px;
	letter-spacing: .06em;
	line-height: 1.6;
}
.ra-sv-items {
	width: 100%;
	margin-top: 26px;
	border-top: 1px solid var(--pg-line);
}
.ra-sv-items > li {
	display: grid;
	grid-template-columns: 7.5em minmax(0, 1fr);
	column-gap: 16px;
	align-items: baseline;
	padding: 12px 0;
	border-bottom: 1px solid var(--pg-line);
}
.ra-sv-items__name {
	position: relative;
	padding-left: 18px;
	color: var(--pg-heading);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .1em;
	line-height: 1.6;
}
.ra-sv-items__name::before {
	content: "";
	position: absolute;
	top: .62em;
	left: 1px;
	width: 6px;
	height: 6px;
	background: var(--pg-gold);
	transform: rotate(45deg);
}
.ra-sv-items__desc {
	color: var(--pg-slate);
	font-size: 15px;
	letter-spacing: .06em;
	line-height: 1.7;
}
.ra-sv-item .ra-pr-stage__point a {
	color: var(--pg-navy);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--pg-gold);
	text-underline-offset: 4px;
}
.ra-sv-rel {
	display: grid;
	gap: 6px;
	width: 100%;
	margin-top: 26px;
}
.ra-sv-rel__row {
	display: grid;
	grid-template-columns: 5.5em minmax(0, 1fr);
	column-gap: 12px;
	align-items: baseline;
}
.ra-sv-rel dt {
	color: var(--pg-slate);
	font-size: 13px;
	letter-spacing: .12em;
	line-height: 1.8;
}
.ra-sv-rel dd {
	display: flex;
	flex-wrap: wrap;
	gap: 0 20px;
}
/* 相關連結：深藍字＋金色箭頭（同工程實績案例頁「看更多…實績 →」），上下各留 3px，點擊區高 30px 左右 */
.ra-sv-rel a {
	padding-block: 3px;
	color: var(--pg-navy);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.6;
	text-decoration: none;
	transition: color .3s var(--pg-ease);
}
.ra-sv-rel a::after {
	content: "→";
	display: inline-block;
	margin-left: 6px;
	color: var(--pg-gold);
	transition: transform .3s var(--pg-ease);
}
.ra-sv-rel a:is(:hover, :focus-visible) {
	color: var(--pg-gold);
}
.ra-sv-rel a:is(:hover, :focus-visible)::after {
	transform: translateX(3px);
}

/* 8-3 浸泡式防水工法：深藍底（同首頁服務項目那一段），標題置中，三個重點三欄（樣式同服務流程頁的保固與保障）；
   描邊按鈕改香檳金（同首頁深色區塊的按鈕） */
.ra-sv-soak {
	padding-block: var(--pg-sec);
	background: var(--pg-navy);
	color: rgba(255, 255, 255, .86);
}
.ra-sv-soak__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	text-align: center;
}
.ra-sv-soak__tag {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--pg-peri);
	font-size: 15px;
	letter-spacing: .12em;
	line-height: 1.6;
}
.ra-sv-soak__tag img {
	width: 15px;
	height: auto;
}
.ra-sv-soak .ra-pg-h2 {
	color: #fff;
}
.ra-pr-promise__grid.ra-sv-soak__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 1040px;
	margin: 64px auto 0;
}
.ra-sv-soak__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 64px;
}
.ra-pg-btn--gold {
	--btn-c: var(--pg-champ);
	--btn-ink: var(--pg-navy);
}

/* 8-4 服務流程摘要：六步驟改成三欄兩列、由左往右（服務流程頁是兩欄三列放在文字旁邊；這裡獨立一段） */
.ra-pr-steps.ra-sv-steps {
	grid-auto-flow: row;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: none;
	gap: 36px 48px;
}
.ra-sv-process__more {
	display: flex;
	justify-content: center;
	margin-top: 64px;
}

/* ── 9. 頁面翻新中（關於皇御 /about/、加盟專區 /franchise/，10-23） ──────────────
   Kevin：「關於皇御跟加盟專區，因為目前資訊上還在處理，所以請先放一個「頁面翻新中」的通知說明」。
   區塊開頭（標籤＋標題＋導言）沿用服務流程頁，下面一排按鈕連到已經做好的頁面；關於皇御另外接預約導引（ra-pr-cta） */
.ra-renew__notice .ra-pg-head {
	margin-bottom: 56px;
}
.ra-renew__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

/* ── 照片＋面板的區塊：窄桌機起面板蓋滿 ≤ 1279.98px ───────────────────── */

@media (max-width: 1279.98px) {
	.ra-pr-warranty__shade {
		left: 0;
		background: linear-gradient(116deg, var(--pg-veil));
	}
	.ra-pr-warranty__inner {
		padding-left: 0;
	}
	/* 費用卡四欄變窄：「訂金・中款・尾款」才排得進一行 */
	.ra-pr-fee {
		padding-inline: 22px;
	}
	.ra-pr-fee__amount--text {
		font-size: 18px;
	}
}
/* 窄桌機（1000～1279px）：聯絡頁的表單卡片只剩 480～620px，兩欄並排時「LINE ID」的提示字會被截掉，改成一欄 */
@media (min-width: 1000px) and (max-width: 1279.98px) {
	.ra-ct-form .frm-fluent-form .ff-t-container {
		display: block;
	}
}

/* ── 平板 ≤ 999.98px ───────────────────────────────────────────────── */

@media (max-width: 999.98px) {
	.ra-pg {
		--pg-sec: 88px;
	}
	.ra-pg-head {
		margin-bottom: 56px;
	}
	.ra-pg-pill {
		gap: 8px;
		height: 44px;
		padding: 0 22px;
	}
	.ra-pg-pill img {
		width: 18px;
	}
	.ra-pg-pill--slate img {
		width: 14px;
	}

	.ra-pr-intro__grid {
		grid-template-columns: 1fr;
		gap: 56px;
	}

	/* 照片在上、文字在下 */
	.ra-pr-stage {
		grid-template-columns: 1fr;
		gap: 56px;
	}
	.ra-pr-stage--rev .ra-pr-stage__media {
		order: 0;
	}
	.ra-pr-stage + .ra-pr-stage,
	.ra-pr-branch + .ra-pr-stage {
		margin-top: 112px;
	}
	.ra-pr-stage__media {
		margin-right: 20px;
	}
	.ra-pr-stage__media::before,
	.ra-pr-stage--rev .ra-pr-stage__media::before {
		inset: 20px -20px -20px 20px;
	}
	.ra-pr-stage__photo {
		aspect-ratio: 16 / 9;
	}
	.ra-pr-branch {
		margin-top: 80px;
	}
	.ra-pr-paths {
		gap: 32px;
	}
	.ra-pr-paths::after {
		left: calc(25% - 8px);
		right: calc(25% - 8px);
	}

	.ra-pr-promise__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 48px;
	}

	.ra-pr-fees__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* 預約導引：面板蓋滿（同首頁平板版） */
	.ra-pr-cta__shade {
		left: 0;
	}
	.ra-pr-cta__panel {
		margin-left: 0;
		padding: 88px 5vw 96px;
	}

	/* 聯絡我們：聯絡資訊在上、表單在下。
	   欄寬用 minmax(0, 1fr)：寫 1fr 時欄寬最小會被內容撐開，表單裡 300px 寬的人機驗證會把整欄撐到 352px，
	   390px 以下的手機整個聯絡區往右超出、被畫面切掉（10-22 RWD 檢查） */
	.ra-ct-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 56px;
	}
	.ra-ct-info {
		position: static;
		padding-top: 0;
	}
	.ra-ct-formwrap {
		margin-right: 20px;   /* 錯開的細框留在內容區裡 */
	}
	.ra-ct-formwrap::before {
		inset: 20px -20px -20px 20px;
	}
	.ra-ct-form {
		padding: 40px 36px 36px;
	}

	/* 常見問題：左欄的分類改成內容上方一行左右滑的分頁籤。外觀與滑法同工程實績的篩選列（ra-site.css 3-6）：
	   米白底、深藍字、右上角圓角，目前的分類深藍底白字；左邊往外多 20px 當淡出區，右緣淡出提示還有更多 */
	.ra-faq-body {
		grid-template-columns: minmax(0, 1fr);
	}
	.ra-faq-side {
		position: static;
	}
	.ra-faq-nav {
		margin-bottom: 48px;
		padding: 0;
		border-radius: 0;
		background: none;
	}
	.ra-faq-nav__list {
		flex-direction: row;
		gap: 10px;
		overflow-x: auto;
		scrollbar-width: none;
		margin-left: -20px;
		padding-left: 20px;
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 40px), transparent);
		mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 40px), transparent);
	}
	.ra-faq-nav__list::-webkit-scrollbar {
		display: none;
	}
	/* 最後一顆可以完整滑出淡出區 */
	.ra-faq-nav__list::after {
		content: "";
		flex: 0 0 30px;
	}
	.ra-faq-nav__link {
		display: block;
		flex: none;
		padding: 10px 20px;
		border-top-right-radius: 12px;
		background: var(--pg-cream);
		color: var(--pg-navy);
		font-size: 14px;
		font-weight: 500;
		letter-spacing: .1em;
		line-height: 1.4;
		white-space: nowrap;
		transition: background-color .12s cubic-bezier(.455, .03, .515, .955), color .12s cubic-bezier(.455, .03, .515, .955);
	}
	.ra-faq-nav__link:hover,
	.ra-faq-nav__link:focus-visible,
	.ra-faq-nav__link.is-active {
		background: var(--pg-navy);
		color: #fff;
	}
	.ra-faq-nav__name {
		font: inherit;
		letter-spacing: inherit;
	}
	.ra-faq-nav__link::before,
	.ra-faq-nav__link + .ra-faq-nav__link::after,
	.ra-faq-nav__no,
	.ra-faq-nav__count,
	.ra-faq-side__help {
		display: none;
	}
	.ra-faq__a {
		padding-right: 36px;
	}

	/* 服務項目：錨點避開較矮的頁首；浸泡式工法三個重點維持三欄（兩欄會剩一個落單）；
	   流程摘要改回服務流程頁的兩欄三列（三欄在平板太窄，名稱會擠到編號） */
	.ra-service :is(.ra-sv-item, .ra-sv-soak) {
		scroll-margin-top: 84px;
	}
	.ra-pr-promise__grid.ra-sv-soak__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px 28px;
		margin-top: 52px;
	}
	.ra-sv-soak__actions {
		margin-top: 52px;
	}
	.ra-pr-steps.ra-sv-steps {
		grid-auto-flow: column;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(3, auto);
		gap: 30px 40px;
	}
	.ra-sv-process__more {
		margin-top: 52px;
	}
}

/* ── 手機 ≤ 689.98px ──────────────────────────────────────────────── */

@media (max-width: 689.98px) {
	.ra-pg {
		--pg-sec: 72px;
	}
	.ra-pg-head {
		gap: 16px;
		margin-bottom: 44px;
	}
	.ra-pg-label {
		gap: 14px;
		font-size: 14px;
	}
	.ra-pg-label .ra-pg-en {
		font-size: 16px;
	}
	.ra-pg-h2 {
		letter-spacing: .1em;
	}

	.ra-pr-intro__grid {
		gap: 44px;
	}
	.ra-pr-intro__text {
		gap: 18px;
	}
	/* 六步驟：一欄 */
	.ra-pr-steps {
		grid-auto-flow: row;
		grid-template-columns: 1fr;
		grid-template-rows: none;
		gap: 22px;
	}
	.ra-pr-steps__item {
		grid-template-columns: 52px minmax(0, 1fr);
		column-gap: 14px;
		padding-bottom: 12px;
	}
	.ra-pr-steps__item::after {
		left: 66px;
	}
	.ra-pr-steps__no {
		font-size: 44px;
	}
	.ra-pr-steps__name {
		font-size: 18px;
		letter-spacing: .12em;
	}
	.ra-pr-steps__desc {
		font-size: 13.5px;
		letter-spacing: .05em;
	}

	.ra-pr-stage {
		gap: 44px;
	}
	.ra-pr-stage + .ra-pr-stage,
	.ra-pr-branch + .ra-pr-stage {
		margin-top: 88px;
	}
	.ra-pr-stage__media {
		margin-right: 12px;
	}
	.ra-pr-stage__media::before,
	.ra-pr-stage--rev .ra-pr-stage__media::before {
		inset: 12px -12px -12px 12px;
	}
	.ra-pr-stage__photo {
		aspect-ratio: 3 / 2;
	}
	.ra-pr-stage__no {
		font-size: 58px;
	}
	.ra-pr-stage__lead {
		font-size: 15.5px;
	}
	.ra-pr-stage__point {
		padding: 14px 18px;
	}
	.ra-pr-tl {
		gap: 18px;
		margin-top: 26px;
	}
	.ra-pr-tl__item {
		gap: 14px;
	}
	.ra-pr-tl__item:not(:last-child)::after {
		left: 17px;
		height: calc(100% + 18px);
	}
	.ra-pr-tl__no {
		width: 35px;
		height: 35px;
		font-size: 16px;
	}
	.ra-pr-tl__title {
		font-size: 17px;
		letter-spacing: .1em;
	}
	.ra-pr-tl__desc {
		font-size: 13.5px;
		letter-spacing: .04em;
	}

	/* 兩條路徑上下排，中間標「或」；菱形縮小、分岔線只留往下那一段 */
	.ra-pr-branch {
		margin-top: 64px;
	}
	.ra-pr-decision {
		width: 200px;
	}
	.ra-pr-decision__q {
		font-size: 18px;
	}
	.ra-pr-paths {
		grid-template-columns: 1fr;
		gap: 0;
		padding-top: 40px;
	}
	.ra-pr-paths::before {
		height: 40px;
	}
	.ra-pr-paths::after,
	.ra-pr-path::before {
		content: none;
	}
	.ra-pr-path + .ra-pr-path::before {
		content: "或";
		position: static;
		align-self: center;
		margin: 8px 0 -4px;
		background: none;
		color: var(--pg-slate);
		font-size: 14px;
		letter-spacing: .2em;
	}
	.ra-pr-path {
		gap: 20px;
	}
	.ra-pr-node {
		gap: 14px;
		min-height: 68px;
		padding: 14px 18px;
	}
	.ra-pr-no {
		width: 36px;
		height: 36px;
		font-size: 16px;
	}
	.ra-pr-col > li + li::before {
		left: 31px;
	}
	.ra-pr-node__title {
		font-size: 17px;
		letter-spacing: .08em;
	}
	.ra-pr-node__desc {
		font-size: 13.5px;
		letter-spacing: .04em;
	}
	.ra-pr-why {
		padding: 20px 20px 18px;
	}

	.ra-pr-promise__grid {
		grid-template-columns: 1fr;
		gap: 32px;
		margin-top: 44px;
	}
	.ra-pr-promise__item::before {
		height: 56px;
	}
	.ra-pr-promise__no {
		font-size: 30px;
	}
	.ra-pr-promise__title {
		font-size: 18px;
	}

	.ra-pr-fees__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.ra-pr-fee {
		padding: 26px 22px 24px;
	}
	.ra-pr-fee__amount .ra-pg-en {
		font-size: 36px;
	}
	.ra-pr-fee__amount--text {
		font-size: 19px;
	}

	.ra-pr-cta__panel {
		padding: 64px 5vw 72px;
	}
	.ra-pr-cta__body {
		font-size: 16px;
		letter-spacing: .08em;
	}
	/* 按鈕直排、撐滿（同首頁手機版） */
	.ra-pr-cta__actions {
		display: grid;
		grid-template-columns: 1fr;
		gap: 12px;
		width: 100%;
		max-width: 320px;
	}

	/* 聯絡我們 */
	.ra-ct-item {
		grid-template-columns: 76px minmax(0, 1fr);
		gap: 12px;
		padding: 13px 0;
	}
	.ra-ct-item dd {
		font-size: 16px;
	}
	.ra-ct-item dd .ra-pg-en {
		font-size: 20px;
	}
	.ra-ct-actions {
		display: grid;
		grid-template-columns: 1fr;
		gap: 12px;
		width: 100%;
		max-width: 320px;
	}
	.ra-ct-formwrap {
		margin-right: 12px;
	}
	.ra-ct-formwrap::before {
		inset: 12px -12px -12px 12px;
		border-radius: 0 14px 0 0;
	}
	.ra-ct-form {
		padding: 30px 20px 26px;
		border-radius: 0 14px 0 0;
	}
	/* 人機驗證（Cloudflare Turnstile）固定 300px 寬，手機上卡片的內容區不夠（390px 寬時只有 291px）：
	   讓它用到卡片左右的內距、置中，360px 以上的手機都放得下；更窄的手機再等比縮小（zoom，點擊位置跟著縮） */
	.ra-ct-form .fluentform fieldset > .cf-turnstile {
		display: flex;
		justify-content: center;
		margin-inline: -20px;
	}
	.ra-ct-form__head {
		margin-bottom: 24px;
	}
	.ra-ct-form .frm-fluent-form .ff-t-container {
		display: block;
	}
	.ra-ct-form .fluentform .ff-el-group {
		margin-bottom: 20px;
	}
	.ra-ct-form .fluentform .ra-ct-chips .ff-el-input--content {
		gap: 8px;
	}
	.ra-ct-form .fluentform .ra-ct-chips .ff-el-form-check-label {
		min-height: 42px;
		padding: 0 14px;
		font-size: 14.5px;
		letter-spacing: .06em;
	}
	.ra-ct-form .fluentform .ff-btn-submit {
		width: 100%;
	}
	.ra-ct-next {
		padding-block: 44px;
	}
	.ra-ct-next__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}
	.ra-ct-next__text {
		font-size: 18px;
		letter-spacing: .1em;
	}
	.ra-faq-nav {
		margin-bottom: 40px;
	}
	.ra-faq-panel__head {
		padding-bottom: 24px;
	}
	.ra-faq-panel__no {
		font-size: 22px;
	}
	.ra-faq .ra-faq-panel__title {
		margin-top: 10px;
		font-size: 24px;
		letter-spacing: .12em;
	}
	.ra-faq-panel__desc {
		margin-top: 10px;
		font-size: 15px;
	}
	.ra-faq__q {
		grid-template-columns: 28px minmax(0, 1fr) 32px;
		gap: 0 12px;
		padding: 22px 0;
	}
	.ra-faq__no {
		font-size: 17px;
	}
	.ra-faq .ra-faq__title {
		font-size: 17px;
		letter-spacing: .05em;
	}
	.ra-faq__icon {
		width: 32px;
		height: 32px;
		margin-top: -2px;
	}
	/* 手機寬度有限，回答不縮排，從題號底下開始 */
	.ra-faq__a {
		padding: 0 0 26px;
	}

	/* 服務項目：索引的編號縮小（同六步驟的手機版）；浸泡式工法三個重點、流程摘要都改一欄；
	   細項的名稱欄縮窄，相關連結的標籤獨佔一行 */
	.ra-service :is(.ra-sv-item, .ra-sv-soak) {
		scroll-margin-top: 76px;
	}
	.ra-sv-index__item > a {
		grid-template-columns: 52px minmax(0, 1fr) auto;
		column-gap: 14px;
		padding: 6px 0 12px;
	}
	.ra-sv-index__item > a::after {
		left: 66px;
	}
	.ra-sv-index__no {
		font-size: 44px;
	}
	.ra-sv-index__name {
		font-size: 18px;
		letter-spacing: .12em;
	}
	.ra-sv-index__desc {
		font-size: 13.5px;
		letter-spacing: .05em;
	}
	.ra-sv-items > li {
		grid-template-columns: 6.5em minmax(0, 1fr);
		column-gap: 12px;
	}
	.ra-sv-items__desc {
		font-size: 14.5px;
	}
	.ra-sv-rel__row {
		grid-template-columns: 1fr;
	}
	.ra-pr-promise__grid.ra-sv-soak__grid {
		grid-template-columns: 1fr;
		gap: 32px;
		margin-top: 44px;
	}
	.ra-sv-soak__actions {
		display: grid;
		grid-template-columns: 1fr;
		width: 100%;
		max-width: 320px;
		margin: 44px auto 0;
	}
	.ra-sv-soak__actions .ra-pg-btn {
		justify-content: center;
	}
	.ra-pr-steps.ra-sv-steps {
		grid-auto-flow: row;
		grid-template-columns: 1fr;
		grid-template-rows: none;
		gap: 22px;
	}
	.ra-sv-process__more {
		margin-top: 44px;
	}
	/* 9 頁面翻新中：按鈕一欄、置中（同服務項目的浸泡式按鈕） */
	.ra-renew__notice .ra-pg-head {
		margin-bottom: 40px;
	}
	.ra-renew__actions {
		display: grid;
		grid-template-columns: 1fr;
		width: 100%;
		max-width: 320px;
		margin-inline: auto;
	}
	.ra-renew__actions .ra-pg-btn {
		justify-content: center;
	}
}
/* 360px 以下的小手機（320px 的舊 iPhone、280px 的摺疊機）連用到卡片內距都放不下 300px 的人機驗證，等比縮小 */
@media (max-width: 359.98px) {
	.ra-ct-form .fluentform fieldset > .cf-turnstile > * {
		zoom: .88;
	}
}
@media (max-width: 319.98px) {
	.ra-ct-form .fluentform fieldset > .cf-turnstile > * {
		zoom: .76;
	}
}

/* ── 進場動效的起始狀態（ra-pages.js 只替「還在視窗下方」的元素掛 .ra-pre，捲到時拿掉）──
   沒有 JS、網址帶 ?ra-nomotion、系統開啟減少動態時都不會掛，元素直接是最終狀態。
   時間與 easing 同首頁：進場 0.8 秒、面板掃入 1.3 秒、照片定格 2.4 秒 */

.ra-pg [data-ra-anim]:not(.ra-pre) {
	transition-property: opacity, transform;
	transition-duration: .8s;
	transition-timing-function: var(--pg-ease-soft);
	transition-delay: var(--ra-d, 0ms);
}
.ra-pg [data-ra-anim^="wipe"]:not(.ra-pre) {
	transition-duration: 1.3s;
}
.ra-pg [data-ra-anim="settle"]:not(.ra-pre) {
	transition-duration: 1s, 2.4s;
}
.ra-pg .ra-pre:is([data-ra-anim="fade-up"], [data-ra-anim="row"]) {
	opacity: 0;
	transform: translateY(22px);
}
.ra-pg .ra-pre[data-ra-anim="settle"] {
	opacity: 0;
	transform: scale(1.08);
}
.ra-pg .ra-pre[data-ra-anim="wipe-r"] {
	transform: scaleX(0);
	transform-origin: left center;
}
.ra-pg .ra-pre[data-ra-anim="wipe-l"] {
	transform: scaleX(0);
	transform-origin: right center;
}
.ra-pg [data-ra-anim="wipe-r"] {
	transform-origin: left center;
}
.ra-pg [data-ra-anim="wipe-l"] {
	transform-origin: right center;
}
/* 區塊標籤：金線由左（置中的由中間）畫開，文字淡入 */
.ra-pg .ra-pre[data-ra-anim="label"] {
	opacity: 0;
}
.ra-pg .ra-pre[data-ra-anim="label"]::before {
	transform: scaleX(0);
}
.ra-pg [data-ra-anim="label"]:not(.ra-pre)::before {
	transition: transform 1.1s var(--pg-ease-soft) var(--ra-d, 0ms);
}
@media print {
	.ra-pg .ra-pre {
		opacity: 1 !important;
		transform: none !important;
	}
}