/* ==========================================================================
   皇御匠藝 ROYAL ARTISAN｜首頁區塊樣式（只在首頁載入）
   ==========================================================================
   由 腳本/port_home_css.py 從首頁切版稿 11_首頁切版/assets/css/style.css 轉出，不要直接改這份。
   換算：數字都是「1440 稿的 px」，寫成 calc(var(--u) * N)；--u 在視窗 1433px 以上等於 1px，
         以下隨 90vw（Blocksy 的容器寬）等比縮。
   顏色與字型讀主題設定（外觀 → 自訂 → 色彩／字體），改色盤首頁會一起變。
   全站共用的樣式（色盤、字體、按鈕、頁首、頁尾）都在主題設定，不在這裡。
   ========================================================================== */

.ra-home {
  --u: min(1px, calc(90vw / 1290));
  --ra-navy: var(--theme-palette-color-1, #162447);
  --ra-gold: var(--theme-palette-color-2, #C8A24A);
  --ra-ink: var(--theme-palette-color-3, #353536);
  --ra-mist: var(--theme-palette-color-5, #ABB6C1);
  --ra-cream: var(--theme-palette-color-6, #F6F6F1);
  --ra-champ: var(--theme-palette-color-7, #C8B380);
  --ra-peri: #8097D2;   /* 輔助色2：主題色盤 8 格已滿，只有首頁用 */
  --ra-slate: #5B6E7D;  /* text1 */
  --ra-fog: #EDEDED;    /* BG */
  --ra-serif: var(--theme-font-family, "Noto Serif TC"), "Noto Serif CJK TC", serif;
  --ra-latin: "Cardo", var(--ra-serif);
  --ra-ease: cubic-bezier(.4, 0, .2, 1);
  --ra-ease-soft: cubic-bezier(.22, 1, .36, 1);
  --ra-side: calc((100% - var(--u) * 1290) / 2);
  --ra-veil: color-mix(in srgb, var(--ra-navy) 95%, transparent) 28.8%, color-mix(in srgb, var(--ra-navy) 80%, transparent) 100%;
  position: relative; overflow-x: clip;
  color: var(--ra-ink); font-family: var(--ra-serif);
  /* 切版稿的 body 是瀏覽器預設的字距與行高；主題的內文字距 0.05em、行高 1.9 不能繼承進來，
     否則沒有自訂字距的元素會變寬（服務編號 01～08 會斷成兩行） */
  letter-spacing: normal; line-height: normal;
  -webkit-font-smoothing: antialiased;
}
/* 滿版：首頁區塊突破內容區的 1290 容器 */
.entry-content > .ra-home.alignfull { width: 100%; max-width: none; margin-inline: 0; }

/* 只限首頁區塊的重設（權重 0,1,1，蓋過 Blocksy 內文區；元件規則 0,2,0 以上再蓋過這裡） */
.ra-home :is(img, svg) { display: block; max-width: none; }
.ra-home a { color: inherit; text-decoration: none; background-image: none; }
.ra-home :is(p, h1, h2, h3, h4, ul, ol, li, blockquote, figure) { margin: 0; padding: 0; }
.ra-home :is(h1, h2, h3, h4) { color: inherit; font-family: var(--ra-serif); }
.ra-home :is(ul, ol) { list-style: none; }
/* 主題的引言樣式（左側直線、引號、字級）不套到客戶回饋卡片 */
.ra-home blockquote { border: 0; background: none; quotes: none; }
.ra-home blockquote::before, .ra-home blockquote::after { content: none; }
.ra-home button {
  min-height: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: none; color: inherit; font: inherit; cursor: pointer;
}
.ra-home :focus-visible { outline: 2px solid var(--ra-gold); outline-offset: 3px; }

.ra-home .ra-wrap { position: relative; width: calc(var(--u) * 1290); margin-inline: auto; }
.ra-home .ra-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 字級（Figma 文字樣式 × 0.75） ───────────────────────────────────── */
.ra-home .ra-h2 { font-size: calc(var(--u) * 30); font-weight: 600; letter-spacing: .15em; line-height: 1.5; }
.ra-home .ra-h3 { font-size: calc(var(--u) * 21); font-weight: 500; letter-spacing: .1em; line-height: 1.55; }
.ra-home .ra-h4 { font-size: calc(var(--u) * 18); font-weight: 500; letter-spacing: .15em; line-height: 1.55; }
.ra-home .ra-h5 { font-size: calc(var(--u) * 15); font-weight: 600; letter-spacing: .1em; line-height: 1.75; }
.ra-home .ra-sub { font-size: max(12px, calc(var(--u) * 13.5)); font-weight: 600; letter-spacing: .1em; line-height: 1.75; }
.ra-home .ra-en {
  font-family: var(--ra-latin); font-size: calc(var(--u) * 18); font-weight: 400;
  letter-spacing: .1em; line-height: 1.75;
}

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

/* 區塊標籤：上方 4px 香檳金線 + 英文 + 中文 */
.ra-home .ra-label {
  position: relative;
  display: inline-flex; align-items: center; gap: calc(var(--u) * 22.5);
  padding-top: calc(var(--u) * 3);
  color: var(--ra-slate);
  white-space: nowrap;
}
.ra-home .ra-label::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: calc(var(--u) * 3); background: var(--ra-champ);
  transform-origin: left center;
}
.ra-home .ra-label--dark { color: var(--ra-mist); }
.ra-home .ra-label[data-ra-origin="center"]::before { transform-origin: center; }
.ra-home .ra-label[data-ra-origin="right"]::before { transform-origin: right center; }

/* 描邊按鈕（直角，hover 由左往右填色） */
.ra-home .ra-btn {
  --btn-c: var(--ra-navy);
  --btn-ink: #fff;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: calc(var(--u) * 7.5);
  height: calc(var(--u) * 31.5);
  padding: 0 calc(var(--u) * 9);
  border: 1px solid var(--btn-c);
  color: var(--btn-c);
  font-size: calc(var(--u) * 15); font-weight: 600; letter-spacing: .1em; line-height: 1;
  white-space: nowrap;
  transition: color 420ms var(--ra-ease);
}
.ra-home .ra-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-c);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 420ms var(--ra-ease);
}
.ra-home .ra-btn::after { /* 點擊區撐到 44px */
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: max(44px, 100%); transform: translateY(-50%);
}
.ra-home .ra-btn:hover, .ra-home .ra-btn:focus-visible { color: var(--btn-ink); }
.ra-home .ra-btn:hover::before, .ra-home .ra-btn:focus-visible::before { transform: scaleX(1); }
.ra-home .ra-btn--gold { --btn-c: var(--ra-champ); --btn-ink: var(--ra-navy); }

.ra-home .ra-arrow {
  width: calc(var(--u) * 18); height: calc(var(--u) * 6);
  overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1px; vector-effect: non-scaling-stroke;
  transition: transform 300ms var(--ra-ease);
}
.ra-home .ra-arrow path { vector-effect: non-scaling-stroke; }
.ra-home .ra-btn:hover .ra-arrow, .ra-home .ra-btn:focus-visible .ra-arrow { transform: translateX(calc(var(--u) * 4)); }

/* 實心膠囊鈕（右上角圓角，頁首與預約導引） */
.ra-home .ra-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: calc(var(--u) * 6);
  height: calc(var(--u) * 31.5);
  padding: 0 calc(var(--u) * 15);
  border-top-right-radius: calc(var(--u) * 12);
  color: var(--ra-fog);
  font-size: calc(var(--u) * 15); font-weight: 600; letter-spacing: .1em; line-height: 1;
  white-space: nowrap;
  transition: filter 300ms var(--ra-ease);
}
.ra-home .ra-pill img { width: calc(var(--u) * 15.75); height: auto; }
.ra-home .ra-pill--slate img { width: calc(var(--u) * 12); }
.ra-home .ra-pill--gold { background: var(--ra-gold); }
.ra-home .ra-pill--slate { background: var(--ra-slate); }
.ra-home .ra-pill:hover, .ra-home .ra-pill:focus-visible { filter: brightness(1.08); }
.ra-home .ra-pill:focus-visible { outline-color: #fff; }
/* 金色膠囊鈕：hover 時掃過一道光（與預約導引進場的掃光同一套） */
.ra-home .ra-pill--gold {
  background-image: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .5) 50%, transparent 58%);
  background-repeat: no-repeat; background-size: 220% 100%; background-position: 117% 0;
}
.ra-home .ra-pill--gold:hover, .ra-home .ra-pill--gold:focus-visible { animation: ra-shine 900ms var(--ra-ease) 1 both; }

/* 星形 */
.ra-home .ra-stars { display: flex; gap: calc(var(--u) * 4.5); color: var(--ra-champ); }
.ra-home .ra-stars svg { width: calc(var(--u) * 15); height: calc(var(--u) * 15); fill: currentColor; }

/* ── 01 Hero ───────────────────────────────────────────────────────── */
.ra-home .ra-hero { position: relative; z-index: 3; height: calc(var(--u) * 699); }
.ra-home .ra-hero__media { position: absolute; inset: 0; overflow: hidden; background: #d9dde0; }
.ra-home .ra-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.ra-home .ra-hero__inner { height: 100%; }
.ra-home .ra-hero__tagline {
  position: absolute; left: 0; top: calc(var(--u) * 426);
  color: var(--ra-slate); white-space: nowrap;
}
.ra-home .ra-hero__title { position: absolute; left: 0; top: calc(var(--u) * 472.5); }
.ra-home .ra-mask { display: block; overflow: hidden; }
.ra-home .ra-hero__royal { width: calc(var(--u) * 309.4); height: calc(var(--u) * 65.6); }
.ra-home .ra-hero__artisan {
  position: absolute; left: 0; top: calc(var(--u) * 85.5);
  width: calc(var(--u) * 423.75); height: calc(var(--u) * 66);
}
.ra-home .ra-mask img { width: 100%; height: 100%; }
.ra-home .ra-hero__lead {
  position: absolute; left: calc(var(--u) * 330.75); top: calc(var(--u) * 472.5);
  color: var(--ra-navy); white-space: nowrap;
}
.ra-home .ra-hero__actions {
  position: absolute; left: calc(var(--u) * 459.75); top: calc(var(--u) * 590.25);
  display: flex; gap: calc(var(--u) * 24);
}
.ra-home .ra-hero__scroll {
  position: absolute; right: calc(var(--u) * -15); top: calc(var(--u) * 548.25);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 8);
  color: #fff;
  font-size: calc(var(--u) * 15); font-weight: 600; letter-spacing: .1em; line-height: 1.75;
}
.ra-home .ra-hero__scroll img { width: calc(var(--u) * 29.6); height: auto; transition: translate 300ms var(--ra-ease); }
.ra-home .ra-hero__scroll:hover img, .ra-home .ra-hero__scroll:focus-visible img { translate: 0 calc(var(--u) * 6); }
.ra-home .ra-hero__band {
  position: absolute; z-index: 2;
  left: calc(var(--ra-side) + var(--u) * 612.75); right: 0;
  top: calc(var(--u) * 681); height: calc(var(--u) * 36);
  background: var(--ra-navy);
  transform-origin: left center;
}

/* ── 02 關於皇御 ───────────────────────────────────────────────────── */
.ra-home .ra-about { position: relative; z-index: 2; height: calc(var(--u) * 624); background: var(--ra-navy); }
.ra-home .ra-about__media { position: absolute; inset: 0; overflow: hidden; }
.ra-home .ra-about__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.ra-home .ra-about__shade, .ra-home .ra-svc__strip {
  position: absolute; left: 0; top: 0;
  width: calc(var(--ra-side) + var(--u) * 1011);
  background: linear-gradient(116deg, var(--ra-veil));
  opacity: .95; mix-blend-mode: multiply;
}
.ra-home .ra-about__shade { height: 100%; }
.ra-home .ra-svc__strip { height: calc(var(--u) * 34.5); }
.ra-home .ra-about__inner { height: 100%; }
.ra-home .ra-about__main { position: absolute; left: calc(var(--u) * 45); top: calc(var(--u) * 147); color: #fff; }
.ra-home .ra-about__title { margin-top: calc(var(--u) * 30); white-space: nowrap; }
.ra-home .ra-about__body { margin-top: calc(var(--u) * 21.75); white-space: nowrap; }
.ra-home .ra-about__btn { margin-top: calc(var(--u) * 46.65); }
.ra-home .ra-stats { position: absolute; left: calc(var(--u) * 612.75); top: calc(var(--u) * 211.5); }
.ra-home .ra-stat { position: relative; padding-left: calc(var(--u) * 22.5); }
.ra-home .ra-stat + .ra-stat { margin-top: calc(var(--u) * 29.85); }
.ra-home .ra-stat::before { /* 金色直線 */
  content: ""; position: absolute; left: 0; top: calc(var(--u) * 11.25);
  width: calc(var(--u) * 2.25); height: calc(var(--u) * 66);
  background: var(--ra-gold);
  transform-origin: center top;
}
.ra-home .ra-stat__num {
  color: var(--ra-champ); white-space: nowrap;
  font-family: var(--ra-latin); font-size: calc(var(--u) * 45); letter-spacing: .1em; line-height: 1.2;
}
.ra-home .ra-stat__unit { /* 數字後面已有 .1em 字距，這裡只補設計稿的實際間隔（年 12px、大 4px，皆為 1920 稿） */
  margin-left: calc(var(--u) * 4.5);
  font-family: var(--ra-serif); font-size: calc(var(--u) * 36); font-weight: 400; letter-spacing: .1em;
}
.ra-home .ra-stat__unit--tight { margin-left: calc(var(--u) * -1.5); }
.ra-home .ra-stat__label { color: #fff; white-space: nowrap; }

/* ── 03 服務項目 ───────────────────────────────────────────────────── */
.ra-home .ra-svc { position: relative; z-index: 1; height: calc(var(--u) * 689.25); background: var(--ra-navy); overflow: hidden; }
.ra-home .ra-svc__drop {
  position: absolute; mix-blend-mode: color-dodge; transform-origin: 0 0;
  pointer-events: none;
}
.ra-home .ra-svc__drop--l {
  left: calc(var(--u) * 12); top: calc(var(--u) * 113.25);
  width: calc(var(--u) * 125.25); height: calc(var(--u) * 152.25);
  rotate: -34.8deg;
}
.ra-home .ra-svc__drop--r {
  left: calc(100% - var(--u) * 90.75); top: calc(var(--u) * 379.5);
  width: calc(var(--u) * 141.75); height: calc(var(--u) * 117.75);
  rotate: 61.5deg;
}
.ra-home .ra-svc__inner { height: 100%; }
.ra-home .ra-svc__label {
  position: absolute; left: 0; right: 0; top: calc(var(--u) * 93.75);
  width: max-content; margin-inline: auto;
  font-weight: inherit;
}
.ra-home .ra-svc__list {
  position: absolute; left: calc(var(--u) * 133.5); top: calc(var(--u) * 174);
  display: grid; grid-auto-flow: column;
  grid-template-columns: repeat(2, calc(var(--u) * 470.25));
  grid-template-rows: repeat(4, calc(var(--u) * 54.75));
  column-gap: calc(var(--u) * 60); row-gap: calc(var(--u) * 30);
}
.ra-home .ra-svc__item { --line: var(--ra-champ); position: relative; }
.ra-home .ra-svc__item--peri { --line: var(--ra-peri); }
.ra-home .ra-svc__item a { position: absolute; inset: 0; color: #fff; }
.ra-home .ra-svc__item a::after, .ra-home .ra-svc__item a::before { /* 底線，與編號同色；hover 時金線由左畫過 */
  content: ""; position: absolute; left: calc(var(--u) * 77.25); right: 0; top: 100%;
  height: 1px; background: var(--line);
  transform-origin: left center;
}
.ra-home .ra-svc__item a::before {
  z-index: 1; background: var(--ra-gold); transform: scaleX(0);
  transition: transform 500ms var(--ra-ease);
}
.ra-home .ra-svc__no {
  position: absolute; left: 0; top: calc(var(--u) * 7.5); width: calc(var(--u) * 62.25);
  color: var(--line); text-align: center;
  font-family: var(--ra-latin); font-style: italic; font-size: calc(var(--u) * 60); line-height: 1;
}
.ra-home .ra-svc__name {
  position: absolute; left: calc(var(--u) * 76.5); top: calc(var(--u) * 12);
  font-size: calc(var(--u) * 30); font-weight: 600; letter-spacing: .15em; line-height: 1.5;
  white-space: nowrap;
}
.ra-home .ra-svc__name--long { top: calc(var(--u) * 16.3); font-size: calc(var(--u) * 24); }
.ra-home .ra-svc__desc {
  position: absolute; left: calc(var(--u) * 277.5); top: calc(var(--u) * 22.8);
  color: var(--ra-mist);
  font-size: calc(var(--u) * 18); font-weight: 500; letter-spacing: .15em; line-height: 1.55;
  white-space: nowrap;
  transition: color 300ms var(--ra-ease);
}
.ra-home .ra-svc__item a:hover .ra-svc__desc, .ra-home .ra-svc__item a:focus-visible .ra-svc__desc { color: #fff; }
.ra-home .ra-svc__item .ra-arrow {
  position: absolute; left: calc(var(--u) * 450); top: calc(var(--u) * 33);
  color: var(--ra-mist);
  transition: transform 300ms var(--ra-ease), color 300ms var(--ra-ease);
}
.ra-home .ra-svc__item a:hover::before, .ra-home .ra-svc__item a:focus-visible::before { transform: scaleX(1); }
.ra-home .ra-svc__item a:hover .ra-arrow, .ra-home .ra-svc__item a:focus-visible .ra-arrow { /* 1px 斜線在深藍底上，金色 #C8A24A 太暗看不出箭頭，用較亮的香檳金 */
  color: var(--ra-champ); transform: translateX(calc(var(--u) * 6));
}
.ra-home .ra-svc__more { position: absolute; left: calc(var(--u) * 144); top: calc(var(--u) * 558); }
.ra-home .ra-svc__thumbs {
  position: absolute; top: calc(var(--u) * 554.25); right: 0;
  left: calc(var(--ra-side) + var(--u) * 672);
  height: calc(var(--u) * 135);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 9);
}
.ra-home .ra-svc__thumbs li { overflow: hidden; }
.ra-home .ra-svc__thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* ── 04 浸泡式防水工法 ─────────────────────────────────────────────── */
.ra-home .ra-sig { position: relative; height: calc(var(--u) * 617.25); background: #3a3d40; overflow: hidden; }
.ra-home .ra-sig__media { position: absolute; inset: 0; overflow: hidden; }
.ra-home .ra-sig__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.ra-home .ra-sig__shade {
  position: absolute; top: 0; bottom: 0; right: 0;
  left: calc(var(--ra-side) + var(--u) * 672);
  background: linear-gradient(128deg, var(--ra-veil));
  opacity: .95; mix-blend-mode: multiply;
}
.ra-home .ra-sig__inner { height: 100%; }
.ra-home .ra-sig__text {
  position: absolute; right: calc(var(--u) * 45); top: calc(var(--u) * 114.75);
  display: flex; flex-direction: column; align-items: flex-end;
  color: #fff; text-align: right;
}
.ra-home .ra-sig__tag {
  display: flex; align-items: center; gap: calc(var(--u) * 15);
  margin-right: calc(var(--u) * 17.25);
  color: var(--ra-peri); white-space: nowrap;
}
.ra-home .ra-sig__tag img { width: calc(var(--u) * 15); height: auto; }
.ra-home .ra-sig__label { margin-top: calc(var(--u) * 2.1); margin-right: calc(var(--u) * 17.25); }
.ra-home .ra-sig__title { margin-top: calc(var(--u) * 32.25); margin-right: calc(var(--u) * 8.25); white-space: nowrap; }
.ra-home .ra-sig__body { margin-top: calc(var(--u) * 30); }
.ra-home .ra-sig__body span { display: block; white-space: nowrap; }
.ra-home .ra-sig__btn { margin-top: calc(var(--u) * 59.4); margin-right: calc(var(--u) * 9.75); }

/* ── 05 客戶回饋 ＋ 06 品牌專欄 ─────────────────────────────────────── */
.ra-home .ra-light { background: linear-gradient(to bottom, var(--ra-cream) 0%, var(--ra-cream) 47.4%, #fff 100%); }
.ra-home .ra-voice { position: relative; height: calc(var(--u) * 520.5); }
.ra-home .ra-voice__inner, .ra-home .ra-news__inner { height: 100%; }
.ra-home .ra-voice .ra-label, .ra-home .ra-news .ra-label { position: absolute; left: calc(var(--u) * 6); }
.ra-home .ra-voice .ra-label { top: calc(var(--u) * 66.75); }
.ra-home .ra-voice__title {
  position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 116.25);
  color: var(--ra-ink); white-space: nowrap;
}
.ra-home .ra-score {
  position: absolute; left: calc(var(--u) * 73.5); top: calc(var(--u) * 198.75);
  width: calc(var(--u) * 153.75);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  color: var(--ra-ink);
}
.ra-home .ra-score__num {
  color: var(--ra-navy);
  font-family: var(--ra-latin); font-size: calc(var(--u) * 96); line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.ra-home .ra-stars--lg { margin-top: calc(var(--u) * 9.3); gap: calc(var(--u) * 6); color: var(--ra-gold); }
.ra-home .ra-stars--lg svg { width: calc(var(--u) * 21); height: calc(var(--u) * 21); }
.ra-home .ra-score__brand { margin-top: calc(var(--u) * 11.25); white-space: nowrap; }
.ra-home .ra-score__count { white-space: nowrap; }
.ra-home .ra-voice__carousel {
  position: absolute; left: calc(var(--u) * 301.5); top: calc(var(--u) * 198.75);
  width: calc(var(--u) * 924); height: calc(var(--u) * 212.25);
}
.ra-home .ra-voice__viewport { width: 100%; height: 100%; overflow: hidden; }
.ra-home .ra-voice__track {
  display: flex; gap: calc(var(--u) * 12); height: 100%;
  transform: translateX(calc(var(--i, 0) * var(--u) * -312 + var(--drag, 0px)));
}
.ra-motion .ra-home .ra-voice__track.is-sliding { transition: transform 800ms var(--ra-ease-soft); }
.ra-home .ra-voice__viewport.is-drag .ra-voice__track { transition: none; }
.ra-home .ra-voice__card {
  position: relative; flex: 0 0 calc(var(--u) * 300); height: 100%;
  background: rgba(255, 255, 255, .6);
  border: 1px solid var(--ra-mist);
  border-top-right-radius: calc(var(--u) * 18);
}
.ra-home .ra-voice__card blockquote {
  position: absolute; left: calc(var(--u) * 25.5); top: calc(var(--u) * 30);
  width: calc(var(--u) * 249.75);
  color: var(--ra-slate); text-align: justify; text-justify: inter-character;
}
.ra-home .ra-voice__who {
  position: absolute; left: calc(var(--u) * 25.5); top: calc(var(--u) * 153.75);
  display: flex; align-items: center; gap: calc(var(--u) * 15.75);
}
.ra-home .ra-voice__avatar {
  display: grid; place-items: center;
  width: calc(var(--u) * 40.5); height: calc(var(--u) * 40.5); border-radius: 50%;
  background: var(--ra-navy); color: var(--ra-champ);
  font-size: calc(var(--u) * 18); font-weight: 500; line-height: 1;
}
.ra-home .ra-voice__next {
  position: absolute; left: calc(var(--u) * 948); top: calc(var(--u) * 92.25);
  display: grid; place-items: center;
  width: calc(var(--u) * 28.5); height: calc(var(--u) * 28.5); border-radius: 50%;
  background: var(--ra-navy); color: #fff;
  transition: background 300ms var(--ra-ease);
}
.ra-home .ra-voice__next::after { content: ""; position: absolute; inset: calc((var(--u) * 28.5 - 44px) / 2); }
.ra-home .ra-voice__next svg {
  width: calc(var(--u) * 14.25); height: auto; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.5px;
}
.ra-home .ra-voice__next svg path { vector-effect: non-scaling-stroke; }
.ra-home .ra-voice__next:hover, .ra-home .ra-voice__next:focus-visible { background: var(--ra-gold); }
.ra-home .ra-voice__dots {
  position: absolute; left: 0; right: 0; top: calc(var(--u) * 242.25);
  display: flex; justify-content: center; gap: calc(var(--u) * 15);
}
.ra-home .ra-voice__dots button {
  position: relative; width: calc(var(--u) * 15); height: calc(var(--u) * 3);
  background: var(--ra-navy);
  transition: width 500ms var(--ra-ease), background 500ms var(--ra-ease);
}
.ra-home .ra-voice__dots button::after { /* 指示條間隔只有約 13px，點擊區左右只能撐到填滿間隙，否則會互相重疊 */
  content: ""; position: absolute; left: calc(var(--u) * -7); right: calc(var(--u) * -7); top: -20px; bottom: -20px;
}
.ra-home .ra-voice__dots button[aria-selected="true"] { width: calc(var(--u) * 39); background: var(--ra-champ); }
/* 自動播放時，選取中的指示條兼作倒數進度：底色轉淡，香檳金由左填滿。
   （用深一階的金色 #C8A24A 填，跟香檳金太接近，實際上看不出進度） */
.ra-home .ra-voice__dots button::before {
  content: ""; position: absolute; inset: 0; background: var(--ra-champ);
  transform: scaleX(0); transform-origin: left center;
}
.ra-home .ra-voice__dots.is-playing button[aria-selected="true"] { background: rgba(200, 179, 128, .32); }
.ra-home .ra-voice__dots.is-playing button[aria-selected="true"]::before {
  animation: ra-dotfill var(--ra-interval, 6000ms) linear 1 both;
}
@keyframes ra-dotfill { to { transform: scaleX(1); } }
.ra-home .ra-voice__viewport { cursor: grab; }
.ra-home .ra-voice__viewport.is-drag { cursor: grabbing; }
.ra-home .ra-voice__viewport.is-drag * { user-select: none; }

.ra-home .ra-news { position: relative; height: calc(var(--u) * 797.25); }
.ra-home .ra-news .ra-label { top: calc(var(--u) * 68.25); }
.ra-home .ra-news__title {
  position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 117.75);
  color: var(--ra-navy); white-space: nowrap;
}
.ra-home .ra-news__lead {
  position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 165.75);
  color: var(--ra-slate); white-space: nowrap;
}
.ra-home .ra-news__list {
  position: absolute; left: calc(var(--u) * 89.625); top: calc(var(--u) * 242.25);
  display: grid; grid-template-columns: repeat(3, calc(var(--u) * 350.25)); gap: calc(var(--u) * 30);
}
.ra-home .ra-card a {
  display: block; height: calc(var(--u) * 387); overflow: hidden;
  background: #fff;
  border: 1px solid var(--ra-mist); border-radius: calc(var(--u) * 12);
  transition: border-color 400ms var(--ra-ease), box-shadow 400ms var(--ra-ease);
}
.ra-home .ra-card__img {
  display: block; height: calc(var(--u) * 197.25); overflow: hidden;
  border-bottom: 1px solid var(--ra-mist);
  transition: border-color 400ms var(--ra-ease);
}
.ra-home .ra-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ra-ease-soft); }
.ra-home .ra-card__body { display: block; padding: calc(var(--u) * 15) calc(var(--u) * 30) 0; }
.ra-home .ra-card__date { display: block; color: var(--ra-slate); }
.ra-home .ra-card__title { /* 負邊界抵掉行尾那一格字距，斷行位置才會跟 Figma 一樣 */
  display: block; margin-right: -.15em;
  color: var(--ra-ink); overflow-wrap: anywhere;
}
.ra-home .ra-card__more {
  display: block; width: max-content; margin-top: calc(var(--u) * 12.75);
  color: var(--ra-gold);
  font-family: var(--ra-latin); font-size: max(11px, calc(var(--u) * 10.5)); letter-spacing: .05em; line-height: 1.75;
  transition: transform 300ms var(--ra-ease);
}
.ra-home .ra-card a:hover .ra-card__more, .ra-home .ra-card a:focus-visible .ra-card__more { transform: translateX(calc(var(--u) * 4)); }
.ra-home .ra-card a:hover, .ra-home .ra-card a:focus-visible {
  border-color: var(--ra-champ);
  box-shadow: 0 0 calc(var(--u) * 15) calc(var(--u) * 1.5) rgba(139, 154, 192, .25);
}
.ra-home .ra-card a:hover .ra-card__img, .ra-home .ra-card a:focus-visible .ra-card__img { border-color: var(--ra-champ); }
.ra-home .ra-card a:hover .ra-card__img img, .ra-home .ra-card a:focus-visible .ra-card__img img { transform: scale(1.05); }
.ra-home .ra-news__more {
  position: absolute; left: 0; right: 0; top: calc(var(--u) * 689.25);
  width: max-content; margin-inline: auto;
}

/* ── 07 預約導引 ───────────────────────────────────────────────────── */
.ra-home .ra-cta { position: relative; height: calc(var(--u) * 436.5); background: #6b7279; overflow: hidden; }
.ra-home .ra-cta__media { position: absolute; inset: 0; overflow: hidden; }
.ra-home .ra-cta__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.ra-home .ra-cta__shade, .ra-home .ra-cta__panel {
  position: absolute; top: 0; bottom: 0; right: 0;
  left: calc(var(--ra-side) + var(--u) * 557.25);
}
.ra-home .ra-cta__shade { background: linear-gradient(115deg, var(--ra-veil)); opacity: .95; mix-blend-mode: multiply; }
.ra-home .ra-cta__panel {
  display: flex; flex-direction: column; align-items: center;
  padding-top: calc(var(--u) * 102);
  color: #fff; text-align: center;
}
.ra-home .ra-cta__crown { width: calc(var(--u) * 30); height: auto; }
.ra-home .ra-cta__title { margin-top: calc(var(--u) * 9); white-space: nowrap; }
.ra-home .ra-cta__body { margin-top: calc(var(--u) * 22.5); color: var(--ra-fog); white-space: nowrap; }
.ra-home .ra-cta__actions { margin-top: calc(var(--u) * 29.55); display: flex; gap: calc(var(--u) * 15); }
.ra-home .ra-cta__actions .ra-pill::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 44px; transform: translateY(-50%);
}

/* ==========================================================================
   動效
   ==========================================================================
   原則
     1  只動 transform 與 opacity（按鈕掃光另用 background-position），
        不用 clip-path、left、top、width 這類每一格都要重畫的屬性，不做彈跳與回彈。
     2  進場寫法：fade-up、fade、fade-down、mask、line、label、stat、row、
        wipe-r、wipe-l、settle、drift。
     3  時間值：300ms（狀態切換）、420ms（按鈕填色）、800ms（進場）、
        1100ms（遮罩揭示）、1300ms（深藍面板掃入）、2400ms（照片定格）。
     4  easing 只有兩種：--ra-ease 給狀態切換、--ra-ease-soft 給進場與揭示。
     5  每個進場只播一次。
   安全機制
     所有初始狀態都掛在 .ra-motion 底下（<head> 的一行腳本掛上）。沒有 JS、
     JS 出錯、網址帶 ?ra-nomotion、或系統開啟減少動態時都不會出現，
     元素直接是最終狀態。.is-ready 由 JS 在字型與 Hero 照片就緒後才掛上，
     掛上之前 transition 是關的，初始狀態不會自己倒著播一次。
   ========================================================================== */
.ra-motion .ra-home [data-ra-anim] { transition: none; }
.ra-motion.is-ready .ra-home [data-ra-anim] {
  transition-property: opacity, transform;
  transition-duration: 800ms;
  transition-timing-function: var(--ra-ease-soft);
  transition-delay: var(--ra-d, 0ms);
}

.ra-motion .ra-home [data-ra-anim="fade-up"] { opacity: 0; transform: translateY(calc(var(--u) * 22)); }
.ra-motion .ra-home [data-ra-anim="fade-down"] { opacity: 0; transform: translateY(calc(var(--u) * -14)); }
.ra-motion .ra-home [data-ra-anim="fade"] { opacity: 0; }
.ra-motion .ra-home [data-ra-anim="mask"] { transform: translateY(105%); }
.ra-motion.is-ready .ra-home [data-ra-anim="mask"] { transition-duration: 1100ms; }
.ra-motion .ra-home [data-ra-anim="line"] { transform: scaleX(0); }
.ra-motion.is-ready .ra-home [data-ra-anim="line"] { transition-duration: 1100ms; }
/* 深藍面板掃入用 scaleX，不用 clip-path：clip-path 動畫每一格都要重畫整塊增值面板，
   實測 1512 寬 Retina 捲動時掉 9% 的畫面；scaleX 交給 GPU，掉格歸零。漸層很淡，拉伸看不出來。 */
.ra-motion .ra-home [data-ra-anim="wipe-r"] { transform: scaleX(0); transform-origin: left center; }
.ra-motion .ra-home [data-ra-anim="wipe-l"] { transform: scaleX(0); transform-origin: right center; }
.ra-motion.is-ready .ra-home [data-ra-anim^="wipe"] { transition-duration: 1300ms; }
.ra-motion .ra-home [data-ra-anim="settle"] { transform: scale(1.08); }
.ra-motion .ra-home [data-ra-anim="drift"] { transform: translateX(-3%) scale(1.06); }
.ra-motion.is-ready .ra-home [data-ra-anim="settle"], .ra-motion.is-ready .ra-home [data-ra-anim="drift"] { transition-duration: 2400ms; }
/* 大面積的面板與照片先升成 GPU 圖層，開播第一格不用臨時點陣化；進場播完拿掉屬性就自動釋放 */
.ra-motion .ra-home [data-ra-anim^="wipe"], .ra-motion .ra-home [data-ra-anim="settle"], .ra-motion .ra-home [data-ra-anim="drift"] { will-change: transform; }
.ra-motion .ra-home [data-ra-anim].is-in { opacity: 1; transform: none; }

/* 標籤：金線畫出，文字隨後淡入 */
.ra-motion .ra-home [data-ra-anim="label"]::before { transform: scaleX(0); }
.ra-motion .ra-home [data-ra-anim="label"] > span { opacity: 0; }
.ra-motion.is-ready .ra-home [data-ra-anim="label"]::before { transition: transform 900ms var(--ra-ease-soft) var(--ra-d, 0ms); }
.ra-motion.is-ready .ra-home [data-ra-anim="label"] > span { transition: opacity 800ms var(--ra-ease-soft) calc(var(--ra-d, 0ms) + 200ms); }
.ra-motion .ra-home [data-ra-anim="label"].is-in::before { transform: none; }
.ra-motion .ra-home [data-ra-anim="label"].is-in > span { opacity: 1; }

/* 數據：金色直線由上長出，數字與說明升起 */
.ra-motion .ra-home [data-ra-anim="stat"]::before { transform: scaleY(0); }
.ra-motion .ra-home [data-ra-anim="stat"] > p { opacity: 0; transform: translateY(calc(var(--u) * 16)); }
.ra-motion.is-ready .ra-home [data-ra-anim="stat"]::before { transition: transform 800ms var(--ra-ease-soft) var(--ra-d, 0ms); }
.ra-motion.is-ready .ra-home [data-ra-anim="stat"] > p {
  transition: opacity 800ms var(--ra-ease-soft), transform 800ms var(--ra-ease-soft);
  transition-delay: calc(var(--ra-d, 0ms) + 180ms);
}
.ra-motion.is-ready .ra-home [data-ra-anim="stat"] > p + p { transition-delay: calc(var(--ra-d, 0ms) + 280ms); }
.ra-motion .ra-home [data-ra-anim="stat"].is-in::before { transform: none; }
.ra-motion .ra-home [data-ra-anim="stat"].is-in > p { opacity: 1; transform: none; }

/* 服務列：整列升起，底線隨後畫出 */
.ra-motion .ra-home [data-ra-anim="row"] { opacity: 0; transform: translateY(calc(var(--u) * 18)); }
.ra-motion .ra-home [data-ra-anim="row"] a::after { transform: scaleX(0); }
.ra-motion.is-ready .ra-home [data-ra-anim="row"] a::after { transition: transform 900ms var(--ra-ease-soft) calc(var(--ra-d, 0ms) + 200ms); }
.ra-motion .ra-home [data-ra-anim="row"].is-in a::after { transform: none; }

/* Hero：照片在就緒後由 1.08 慢慢定格；SCROLL 箭頭輕輕上下 */
.ra-motion .ra-home .ra-hero__img { transform: scale(1.08); }
.ra-motion.is-ready .ra-home .ra-hero__img { transform: none; transition: transform 2600ms var(--ra-ease-soft); }
.ra-motion .ra-home .ra-hero__scroll img { animation: ra-bob 2400ms var(--ra-ease) infinite; }
@keyframes ra-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--u) * 6)); } }

/* 水珠：極緩的漂浮 */
.ra-motion .ra-home .ra-svc__drop { animation: ra-float 7000ms ease-in-out infinite alternate; }
.ra-motion .ra-home .ra-svc__drop--r { animation-duration: 8500ms; animation-delay: -3000ms; }
@keyframes ra-float { from { translate: 0 0; } to { translate: 0 calc(var(--u) * -10); } }

/* 評分星星：依序點亮（初始狀態綁在 [data-ra-anim] 上，進場結束拿掉屬性後就是最終狀態） */
.ra-motion .ra-home .ra-score[data-ra-anim] .ra-stars svg { opacity: .18; transform: scale(.82); }
.ra-motion.is-ready .ra-home .ra-score[data-ra-anim] .ra-stars svg { transition: opacity 500ms var(--ra-ease-soft), transform 500ms var(--ra-ease-soft); }
.ra-motion .ra-home .ra-score[data-ra-anim].is-in .ra-stars svg { opacity: 1; transform: none; }
.ra-home .ra-score.is-in .ra-stars svg:nth-child(1) { transition-delay: calc(var(--ra-d, 0ms) + 700ms); }
.ra-home .ra-score.is-in .ra-stars svg:nth-child(2) { transition-delay: calc(var(--ra-d, 0ms) + 800ms); }
.ra-home .ra-score.is-in .ra-stars svg:nth-child(3) { transition-delay: calc(var(--ra-d, 0ms) + 900ms); }
.ra-home .ra-score.is-in .ra-stars svg:nth-child(4) { transition-delay: calc(var(--ra-d, 0ms) + 1000ms); }
.ra-home .ra-score.is-in .ra-stars svg:nth-child(5) { transition-delay: calc(var(--ra-d, 0ms) + 1100ms); }

/* 預約導引：金色按鈕進場後掃過一道光。
   用背景漸層移動，不用偽元素加 overflow:hidden（那會把 44px 點擊區一起裁掉）。 */
.ra-home .ra-pill--shine {
  background-image: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .5) 50%, transparent 58%);
  background-repeat: no-repeat; background-size: 220% 100%; background-position: 117% 0;
}
.ra-motion .ra-home [data-ra-anim].is-in .ra-pill--shine { animation: ra-shine 1400ms var(--ra-ease) calc(var(--ra-d, 0ms) + 700ms) 1 both; }
@keyframes ra-shine { from { background-position: 117% 0; } to { background-position: -17% 0; } }

/* 頁首：進場時由上滑入（往上藏的距離要蓋過吊在下方的 Logo 方塊） */

@media (prefers-reduced-motion: reduce) {
  .ra-home .ra-btn, .ra-home .ra-btn::before, .ra-home .ra-arrow, .ra-home .ra-pill, .ra-home .ra-card a, .ra-home .ra-card__img img, .ra-home .ra-voice__dots button, .ra-home .ra-svc__item a::before {
    transition: none !important;
  }
}