/* 澳門紅線牽戀 — 全站樣式
   顏色、字體大細等等都集中喺 :root 入面，想調就改呢度。 */

:root {
  --red: #c54f5f;          /* 主色（標題、按鈕、選單當前項） */
  --red-soft: #cd5c5c;
  --red-dark: #a83f4e;
  --pink: #fff9f9;         /* 淡粉底色 */
  --pink-2: #fdeef0;
  --ink: #5a5a5a;
  --ink-dark: #333;
  --muted: #888;
  --line: #ecdfe1;
  --page-max: 1180px;
  --pad: clamp(20px, 5vw, 60px);
  --gap: clamp(1.5rem, 4vw, 2.5rem);
  --section-y: clamp(2.8rem, 7vw, 5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  font-family: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang TC", "PingFang HK",
    "Microsoft JhengHei", Helvetica, Arial, sans-serif;
  font-size: clamp(.95rem, .92rem + .18vw, 1.0625rem);
  line-height: 1.9;
  font-weight: 400;
  color: var(--ink);
  background: #fff;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--red); }
h1, h2, h3, h4 { line-height: 1.45; font-weight: 500; color: var(--ink-dark); margin: 0 0 .8rem; }
h2 { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem); color: var(--red); }
h3 { font-size: clamp(1.05rem, .98rem + .5vw, 1.25rem); }

.container { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--pad); width: 100%; }
.center { text-align: center; }
.mt { margin-top: 1.6rem; }
.eyebrow { color: var(--red-soft); letter-spacing: .18em; font-size: .8rem; margin: 0 0 .3rem; text-transform: uppercase; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--red); color: #fff; padding: 10px 16px; z-index: 200; }
.skip:focus { left: 0; }

.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  background: none; color: var(--red); border: 1px solid var(--red);
  padding: 9px 30px; border-radius: 3px; font: inherit; font-size: .95rem;
}
.btn:hover { background: var(--red); color: #fff; }

.section { padding-block: var(--section-y); }
.section--soft { background: var(--pink); }

/* ------------------------------------------------------ 頁頭 */

/* 原站：76px 高、白底、底部陰影；標誌 31px 高；選單 16px 中粗、每項相隔 22px */
.topbar { background: #fff; position: relative; z-index: 50; box-shadow: 0 4px 19px -6px rgba(0, 0, 0, .2); }
.topbar .container { max-width: none; width: 95%; padding-inline: 0; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; padding-block: 0; }
.topbar__logo img { width: auto; height: 31px; }

.nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 0 22px; }
.nav__list a { display: block; padding: 25px 0; color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 500; line-height: 26px; white-space: nowrap; }
.nav__list a:hover, .nav__list .is-current { color: var(--red); }

.nav__toggle { display: none; align-items: center; gap: 8px; background: none; border: 0; color: var(--ink); padding: 8px 0; font: inherit; cursor: pointer; }
.nav__bars { display: grid; gap: 5px; }
.nav__bars i { display: block; width: 22px; height: 2px; background: var(--red); }
.nav__toggle em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nav__bars i { width: 26px; height: 3px; border-radius: 2px; }

@media (max-width: 1100px) and (min-width: 981px) { .nav__list { gap: 0 14px; } .nav__list a { font-size: 15px; } }
@media (max-width: 980px) {
  /* 手機版：標誌上下置中（頁頭 81px 高），選單撳咗先由頁頭下面彈出，唔會擠走標誌 */
  .topbar .container { width: 76%; }
  .topbar__inner { min-height: 81px; }
  .nav__toggle { display: flex; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
    background: #fff; box-shadow: 0 8px 19px -8px rgba(0, 0, 0, .25);
  }
  .nav__list { display: none; flex-direction: column; gap: 0; padding: 0 12%; }
  .nav__list.is-open { display: flex; }
  .nav__list > li + li { border-top: 1px solid var(--line); }
  .nav__list a { padding: 13px 2px; }
}

/* ------------------------------------------------------ 內頁橫額 */

.pagehero {
  background-size: cover; background-position: center; position: relative;
  min-height: clamp(180px, 24vw, 300px); display: flex; align-items: center; color: #fff;
}
.pagehero::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .42); }
.pagehero .container { position: relative; }
.pagehero__eyebrow { color: rgba(255, 255, 255, .85); letter-spacing: .2em; font-size: .8rem; margin: 0 0 .2rem; }
.pagehero h1 { color: #fff; margin: 0; font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.2rem); text-shadow: 0 2px 12px rgba(0, 0, 0, .4); }

/* ------------------------------------------------------ 簡介 */

.intro { display: grid; grid-template-columns: 260px 1fr; gap: var(--gap); align-items: center; }
.intro__mark img { width: 100%; }
.intro__body p { margin: 0 0 1em; max-width: 46em; }
@media (max-width: 820px) {
  .intro { grid-template-columns: 1fr; }
  .intro__mark { max-width: 220px; margin-inline: auto; }
}

/* ------------------------------------------------------ 圖文 / 影片 */

.textmedia { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: center; }
.textmedia--flip .textmedia__media { order: -1; }
.textmedia--wide { grid-template-columns: 1fr; }
.textmedia__body p { margin: 0 0 1em; }
.textmedia__media img, .textmedia__media video { width: 100%; border-radius: 4px; }
@media (max-width: 820px) {
  .textmedia { grid-template-columns: 1fr; }
  .textmedia--flip .textmedia__media { order: 0; }
}

/* ------------------------------------------------------ 影片牆 */

.vwall { display: grid; gap: 12px; }
.vwall__video { width: 100%; border-radius: 4px; background: #000; }
.vwall__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 620px) { .vwall__thumbs { grid-template-columns: repeat(2, 1fr); } }
.vwall__thumb {
  border: 0; padding: 0; cursor: pointer; aspect-ratio: 16 / 11; border-radius: 4px;
  background-size: cover; background-position: center; position: relative;
}
.vwall__thumb::after {
  content: "▶"; position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 1.4rem; text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
  background: rgba(0, 0, 0, .18); border-radius: 4px;
}
.vwall__thumb:hover::after { background: rgba(0, 0, 0, .35); }

/* ------------------------------------------------------ 文章列表 */

.pcards { display: grid; gap: var(--gap); grid-template-columns: repeat(3, 1fr); }
.pcards--portrait { grid-template-columns: repeat(4, 1fr); }
.pcards--wide { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .pcards, .pcards--portrait, .pcards--wide { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pcards, .pcards--portrait, .pcards--wide { grid-template-columns: 1fr; } }

.pcard a { display: block; text-decoration: none; color: inherit; height: 100%; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; }
.pcard a:hover { border-color: var(--red); }
.pcard__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pcards--portrait .pcard__media img { aspect-ratio: 3 / 4; }
.pcard__body { padding: .9rem 1.1rem 1.2rem; }
.pcard__body time { color: var(--muted); font-size: .8rem; }
.pcard__body h3 { margin: .2rem 0 .4rem; font-size: 1rem; line-height: 1.6; }
.pcard__body p { margin: 0 0 .6rem; font-size: .85rem; color: var(--muted); }
.pcard__more { color: var(--red); font-size: .85rem; }

/* ------------------------------------------------------ 編號卡（成功案例） */

.ncards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
@media (max-width: 700px) { .ncards { grid-template-columns: 1fr; } }
.ncard {
  display: flex; gap: 16px; align-items: flex-start; text-decoration: none;
  border-bottom: 1px solid var(--line); padding-bottom: 1.2rem;
}
.ncard__no { color: var(--red); font-size: 1.6rem; line-height: 1.2; flex: none; }
.ncard h3 { margin: 0; color: var(--ink-dark); font-weight: 400; font-size: 1rem; }
.ncard:hover h3 { color: var(--red); }

/* ------------------------------------------------------ 內文 */

.prose { max-width: 46em; }
.prose h2 { font-size: clamp(1.1rem, 1rem + .6vw, 1.35rem); margin: 2rem 0 .6rem; }
.prose p { margin: 0 0 1.2em; }
.prose ul { margin: 0 0 1.2em; padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }
.prose img { margin: 1.4rem 0; border-radius: 4px; }

/* ------------------------------------------------------ 推薦文章 */

.rels { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-top: 1.4rem; }
@media (max-width: 900px) { .rels { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .rels { grid-template-columns: 1fr; } }
.rel { display: block; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.rel:hover { border-color: var(--red); }
.rel__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.rel__body { display: block; padding: .8rem 1rem 1.1rem; }
.rel__body strong { display: block; font-weight: 500; font-size: .95rem; line-height: 1.6; margin-bottom: .3rem; }
.rel__body em { font-style: normal; color: var(--muted); font-size: .82rem; }

/* ------------------------------------------------------ 聯絡 */

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
@media (max-width: 820px) { .contact { grid-template-columns: 1fr; } }
.contact__logo { width: 190px; margin-bottom: 1rem; }
.contact__name { color: var(--red); font-size: 1.1rem; margin: 0; }
.contact__en { color: var(--muted); font-size: .85rem; margin: 0 0 1rem; }
.contact p { margin: .2rem 0; }
.sns { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .7rem; }
.sns li { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: baseline; }
.sns span { color: var(--muted); font-size: .85rem; }

/* ------------------------------------------------------ 步驟 */

.steps__intro { max-width: 46em; margin: 0 auto 2rem; text-align: center; }
.steps__group { margin-bottom: 2.4rem; }
.steps__group h3 { color: var(--red); }
.steps__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--gap); margin-top: 1rem; }
.step { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 1.1rem 1.2rem; }
.step h4 { color: var(--red); margin: 0 0 .4rem; font-size: .95rem; }
.step p { margin: 0; font-size: .88rem; }

/* ======================================================
   對返原站版面（第二輪修正）
   ====================================================== */

.section--tight { padding-block: clamp(1.4rem, 3.5vw, 2.4rem); }

/* ------------------------------------------------------ 大字英文 + 中文標題 */

.bigtitle { display: flex; align-items: baseline; gap: clamp(6px, 1.5vw, 18px); flex-wrap: wrap; }
.bigtitle__en {
  font-family: "Abhaya Libre", Georgia, "Times New Roman", serif;
  font-weight: 700; line-height: 1; color: var(--pink-2);
  font-size: clamp(2.2rem, 1.2rem + 4.6vw, 4.8rem);
  letter-spacing: .01em;
}
.bigtitle__zh {
  color: var(--ink-dark); font-weight: 400; margin: 0;
  font-size: clamp(1.1rem, 1rem + .8vw, 1.5rem);
  margin-left: clamp(-2.6rem, -3vw, -1rem);
}
.bigtitle__en--inline { color: var(--red); margin: 0 0 .4rem; }
.bigtitle__en--inline em { font-style: normal; color: var(--ink-dark); font-size: .5em; margin-left: .3em; }
.bigtitle__en--solid { color: var(--red); margin: 0; }

/* ------------------------------------------------------ 編號列（之字排） */

.ncards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 3vw, 2.6rem) var(--gap); }
@media (max-width: 700px) { .ncards { grid-template-columns: 1fr; } }
.ncards .ncard:nth-child(even) { margin-top: clamp(2rem, 5vw, 4rem); }
@media (max-width: 700px) { .ncards .ncard:nth-child(even) { margin-top: 0; } }

.ncard {
  display: flex; gap: clamp(10px, 1.6vw, 18px); align-items: center;
  text-decoration: none; border: 0; padding: 0;
}
.ncard__no {
  color: var(--pink-2); flex: none; line-height: 1; font-weight: 700;
  font-family: "Abhaya Libre", Georgia, serif;
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem);
}
.ncard__pic { flex: none; }
.ncard__pic img { width: 58px; height: 58px; border-radius: 12px; object-fit: cover; }
.ncard__t { color: var(--ink-dark); font-size: clamp(.95rem, .9rem + .35vw, 1.1rem); line-height: 1.65; }
.ncard__t span { display: block; }
.ncard__t i { font-style: normal; color: var(--red); margin-left: .3em; }
.ncard:hover .ncard__t { color: var(--red); }

/* ------------------------------------------------------ 聯絡頁 SNS（置中 + 圖示） */

.contact__col--mark img { width: 100%; max-width: 340px; margin-inline: auto; }
.contact .hl { color: var(--red); }

.sns__title { color: var(--ink-dark); font-weight: 400; margin: 0 0 2rem; }
.sns { display: grid; gap: clamp(1.6rem, 4vw, 2.6rem); justify-items: center; grid-template-columns: 1fr; }
.sns a, .sns > div { display: grid; justify-items: center; gap: 4px; text-decoration: none; }
.sns span { color: var(--ink); font-size: .95rem; }
.sns em { font-style: normal; color: var(--red); font-size: 1.05rem; line-height: 1.6; text-align: center; }
.sns__ico { width: 42px; height: 42px; margin-bottom: .3rem; }
.sns__ico--fb { fill: #1877f2; }
.sns__ico--wa { fill: #25d366; }
.sns__ico--wc { fill: #07c160; }
.sns__ico--img { width: 42px; height: 42px; object-fit: contain; }

/* ------------------------------------------------------ 報名表 / 香港站入口 */

.slinks { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
@media (max-width: 700px) { .slinks { grid-template-columns: 1fr; } }
.slink {
  display: grid; gap: .3rem; text-decoration: none; background: #fff;
  border: 1px solid var(--line); border-radius: 6px;
  padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1.2rem, 3vw, 1.8rem);
}
.slink:hover { border-color: var(--red); }
.slink strong { color: var(--red); font-weight: 500; font-size: 1.05rem; }
.slink strong::after { content: " ↗"; font-size: .85em; }
.slink em { font-style: normal; color: var(--muted); font-size: .88rem; }

/* ======================================================
   Divi 式版面（首頁 / 關於我們 / 服務）
   數值全部照原站量度：桌面 1440、手機 375。
   段 .lay → 行 .row → 欄 .col → 模組 .dm
   ====================================================== */

.lay { position: relative; padding: var(--pt, 0) 0 var(--pb, 0); min-height: var(--mh, 0); }
.lay--bgi { background-image: var(--bgi); background-size: cover; background-position: center; }
.lay--shadow { box-shadow: 0 2px 29px -16px rgba(0, 0, 0, .3); }

.row {
  position: relative; width: var(--rw, 80%); max-width: 1080px; margin-inline: auto;
  padding: var(--rpt, 27px) 0 var(--rpb, 27px);
  display: grid; grid-template-columns: var(--cols, 1fr); column-gap: 5.5%;
}
/* 原站闊行喺大螢幕封頂 1440px，唔會無限拉闊 */
.row--wide { width: 85%; max-width: 1440px; }
.row--full { width: 100%; max-width: 1440px; }
.row--split { max-width: none; }
.row--hero { width: 95%; max-width: none; }
.row--stats { max-width: 768px; }
.row--vcenter { align-items: center; }
.row[style*="--rw"] { max-width: none; }
.col { min-width: 0; }
.row--card { background: var(--card); border-radius: 8px; padding-inline: 32px; margin-bottom: 24px; }
.lay--gap64 .row--card { margin-bottom: 64px; }
.row--svc { grid-template-columns: repeat(6, 1fr); }

/* 模組 */
.dm { margin: 0 0 var(--mb, 0); }
.is-center { text-align: center; }
.dm-h {
  font-size: 24px; line-height: 36px; font-weight: 500; color: var(--red);
  letter-spacing: 1.2px; margin-bottom: var(--mb, 8px); padding: 0 0 10px;
}
.dm-p { font-size: 17.6px; line-height: 26.4px; color: var(--ink); padding-bottom: var(--pb, 16px); }
.dm-p p { margin: 0; padding-bottom: 1em; }
.dm-p p:last-child { padding-bottom: 0; }
.dm-div { width: 80px; height: 23px; margin-bottom: 8px; position: relative; }
.dm-div::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; border-top: 1px solid var(--red); }

.dm-img { margin-bottom: var(--mb, 2.75%); margin-top: var(--top, 0); max-width: var(--w, none); }
.dm-img img { width: 100%; }
.dm-img.is-center { margin-left: auto; margin-right: auto; }
.dm-img.is-right { margin-left: auto; }
.col > .dm-img:last-child, .col > .dm-video:last-child { margin-bottom: 0; }
.dm-bgimg { height: var(--h, 341px); background-size: cover; background-position: center; }
.dm-video { margin-bottom: var(--mb, 0); }
.dm-video video { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.dm-video--gap { margin-bottom: 2.75%; }

/* 按鈕：20px、上下 6 左右 40、圓角 4；outline = 白底紅字，solid = 紅底白字 */
.dm-btn { margin-top: 8px; }
.btn2 {
  display: inline-block; font-size: 20px; line-height: 34px; font-weight: 500; letter-spacing: 1.2px;
  padding: 6px 40px; border: 1px solid var(--red); border-radius: 4px; text-decoration: none;
  transition: background-color .3s, color .3s;
}
.btn2--outline { background: #fff; color: var(--red); }
.btn2--outline:hover { background: var(--red); color: #fff; }
.btn2--solid { background: var(--red); color: #fff; }
.btn2--solid:hover { background: #fff; color: var(--red); }

/* ABOUT US 關於我們：英文 Abhaya Libre 36px 紅色，中文 26px 灰 */
.dm-t { display: flex; align-items: flex-start; gap: 0 12px; margin-bottom: var(--mb, 33.6px); }
.dm-t__en { margin: 0; font-family: "Abhaya Libre", Georgia, "Times New Roman", serif; font-weight: 700; font-size: 36px; line-height: 30.6px; color: var(--red); white-space: nowrap; }
.dm-t__zh { margin: 1px 0 0; font-size: 26.08px; line-height: 39.12px; font-weight: 400; color: #787878; letter-spacing: .9px; padding-bottom: 10px; }
.dm-t.is-center { flex-direction: column; align-items: center; }
.dm-t.is-center .dm-t__zh { margin-top: 16px; }

/* 服務版淡色超大英文字 */
.row--ghost { width: 75%; max-width: 1080px; margin-left: 0; }
.dm-g { height: 81px; position: relative; }
.dm-g__en {
  margin: 0; font-family: "Abhaya Libre", Georgia, serif; font-weight: 700; font-size: 76.8px; line-height: 115.2px;
  color: var(--red); filter: opacity(.15); white-space: nowrap; margin-top: -27px;
}
.dm-g__zh { position: absolute; left: var(--gx); top: 23px; margin: 0; font-size: 27px; line-height: 30.6px; font-weight: 400; color: var(--ink); letter-spacing: 0; }

/* 服務版左右分欄 */
.row--split { grid-template-columns: 1fr 1fr; }
.dm-p--split { margin-top: 130px; padding: 0 30px 5px; margin-bottom: 64px; }
.row--split-flip .dm-p--split { margin-top: 136px; margin-bottom: 45px; }
.dm-img--deco { margin-bottom: 0; }
.dm-img--cover img { height: 341px; object-fit: cover; }
.dm-img--bleed { margin: 0 0 0 -60px; }
.dm-img--bleed img { width: 100%; height: 349px; object-fit: cover; }
.dm-p--intro { margin-top: -5px; margin-bottom: 29.7px; }

/* 真實客戶評價長條 */
.row--quote-left, .row--quote-right { margin-bottom: 20px; }
.row--quote-left { width: 80%; max-width: 1150px; margin-left: -5px; margin-right: auto; }
.row--quote-right { width: 75%; max-width: 1080px; margin-left: auto; margin-right: 0; }
.dm-review { margin: 0; background: #fbeeee; padding: 27px 0; }
.row--quote-left, .row--quote-right { padding: 0; }
.dm-review h3 { font-size: 20px; line-height: 30px; font-weight: 700; color: var(--red); margin: 0 0 12px; }
.dm-review blockquote { margin: 0 0 17px; font-size: 17.6px; line-height: 26.4px; color: var(--ink); }
.dm-review figcaption { font-size: 17.6px; line-height: 26.4px; text-align: right; }
.dm-review--left { padding-left: 100px; padding-right: 20px; }
.dm-review--left blockquote { margin-right: 80px; }
.dm-review--right { padding-left: 25px; padding-right: 20px; }

/* 首頁數字 */
.dm-stat { text-align: center; }
.dm-stat img { width: 48px; height: 48px; margin: 0 auto; }
.dm-stat__v { margin: -5px 0 0; font-size: 48px; line-height: 72px; font-weight: 500; color: var(--red); }
.dm-stat__l { margin: 5px 0 0; font-size: 18px; line-height: 27px; }

/* 首頁六個服務圖示 */
.dm-svc { text-align: center; }
.dm-svc img { width: 64px; height: 64px; margin: 0 auto; }
.dm-svc p { margin: 5px 0 0; font-size: 18px; line-height: 27px; }

/* 客戶分享卡 */
.dm-quote { margin: 0; }
.dm-quote h3 { font-size: 17.6px; line-height: 26.4px; font-weight: 500; letter-spacing: .9px; color: var(--red); margin: 0 0 8px; padding-bottom: 10px; }
.dm-quote blockquote { margin: 0; font-size: 17.6px; line-height: 26.4px; }
.dm-quote figcaption { padding-top: 16px; font-size: 17.6px; line-height: 26.4px; text-align: right; }

/* 我們的優勢（圖 + 標題 + 內文） */
.dm-blurb { margin-bottom: 30px; }
.dm-blurb:last-child { margin-bottom: 0; }
.dm-blurb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 30px; }
.dm-blurb h3 { font-size: 24px; line-height: 36px; font-weight: 500; letter-spacing: 1.2px; color: var(--red); margin: 0; padding-bottom: 10px; }
.dm-blurb p { margin: 0; font-size: 17.6px; line-height: 26.4px; }

/* 關於我們 SERVICE 服務 橫幅 */
.dm-band__t { margin: 0 0 11px; font-family: "Abhaya Libre", Georgia, serif; font-weight: 800; font-size: 36px; line-height: 54px; color: var(--red); letter-spacing: 2px; }
.dm-band__t em { font-style: normal; font-family: "Noto Sans SC", sans-serif; font-weight: 500; letter-spacing: 1px; }
.dm-band__lead { margin: 0 0 29px; font-size: 18px; line-height: 27px; }
.dm-band__list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 34px; }
.dm-band__list li { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; line-height: 31px; color: #c24455; }
.dm-band__list img { width: 25px; height: 25px; object-fit: contain; }

/* 關於我們橫額左邊字 */
.dm-hero__logo { width: 128px; height: 32px; margin-bottom: 8px; }
.dm-hero__t { margin: 0; font-size: 36px; line-height: 54px; font-weight: 400; color: #fff; }
.dm-finder { display: flex; justify-content: center; }
.lay--ahero .row { align-items: start; }

/* 服務版細紅心 */
.dm-icon img { width: 33px; height: 33px; margin: 0 auto; }

/* 關於我們：「我們的使命」嗰行向上疊（原站排法） */
.row--pullup { margin-top: -144px; }

/* ------------------------------------------------------ 脫單交友活動影片 */
.dm-vs { margin-bottom: var(--mb, 2.75%); }
.vs__main { position: relative; }
.vs__video { width: 100%; aspect-ratio: 16 / 9; background: #000; display: block; }
.vs__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 64px; border: 0; background: rgba(0, 0, 0, .15); color: #fff;
  font-size: 48px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .2s;
}
.vs__arrow--prev { left: 0; }
.vs__arrow--next { right: 0; }
.vs__main:hover .vs__arrow, .vs__arrow:focus-visible { opacity: 1; }
@media (hover: none) { .vs__arrow { opacity: .8; } }
.vs__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2%; margin-top: 2%; }
.vs__thumb {
  position: relative; aspect-ratio: 4 / 3; border: 0; padding: 0; cursor: pointer;
  background-size: cover; background-position: center;
}
.vs__thumb::after {
  content: "▶"; position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff9f9; font-size: 28px; background: rgba(0, 0, 0, 0); transition: background .2s;
}
.vs__thumb.is-on::after, .vs__thumb:hover::after { background: rgba(0, 0, 0, .6); }

/* ------------------------------------------------------ 首頁影片橫額 + 尋找伴侶卡 */
.vhero { position: relative; height: 720px; overflow: hidden; background: var(--red); }
.vhero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.vhero__inner { position: relative; display: flex; justify-content: center; padding-top: 180px; }

.finder {
  width: 320px; background: #fff; border-radius: 23px; padding: 47px 32px 32px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .1); text-align: center; color: var(--ink);
}
.finder__icon { display: block; width: 34px; height: 34px; margin: 0 auto 8px; }
.finder__brand { margin: 0; padding-bottom: 10px; font-size: 24px; line-height: 24px; font-weight: 500; letter-spacing: 1.2px; color: var(--red); }
.finder__q { margin: 0; padding-bottom: 10px; font-size: 16px; line-height: 24px; font-weight: 400; color: var(--ink); letter-spacing: 0; }
.finder__form { margin: 0; }
.finder__row { display: flex; justify-content: center; align-items: center; height: 49px; }
.finder__row label { font-size: 14px; font-weight: 700; line-height: 30.6px; margin: 10px 10px 0 0; }
.finder__row:first-child label { margin-right: 0; }
.finder__row select {
  height: 44px; margin-top: 5px; padding: 0 10px; font-size: 13.33px; line-height: 1; font-family: inherit;
  color: #4e4e4e; background: #fff; border: 1px solid #ccc; border-radius: 4px;
}
.finder__go { margin: 0; }
.finder__btn {
  margin-top: 10px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 24px; font-family: inherit; color: #fff; background: #c24455;
  border: 0; border-radius: 22px; padding: 6px 24px; cursor: pointer;
}
.finder__btn:hover { background: var(--red-dark); }

/* ------------------------------------------------------ 活動報名 OR 認識對象（頁尾表單） */
.cta { background: var(--pink); }
.cta__inner {
  width: 80%; max-width: 1080px; margin-inline: auto; padding: 72px 0;
  display: grid; grid-template-columns: 396fr 624fr; column-gap: 5.5%;
}
.cta__title { margin: 0 0 29.7px; font-size: 24px; line-height: 30.6px; color: var(--red); }
.cta__text { margin: 0 0 29.7px; font-size: 17.6px; line-height: 26.4px; }
.cta__img { width: 320px; }
.cta__form { margin: 0; }
.cta__field { margin: 0 0 19.3px; }
.cta__form input, .cta__form select {
  width: 100%; height: 52px; border: 0; border-radius: 0; background: #fff;
  padding: 16px; font-size: 14px; line-height: 20px; font-family: inherit; color: #666;
  -webkit-appearance: none; appearance: none;
}
.cta__form select {
  background-image: linear-gradient(45deg, transparent 50%, #999 50%), linear-gradient(135deg, #999 50%, transparent 50%);
  background-position: calc(100% - 22px) 23px, calc(100% - 17px) 23px; background-size: 5px 5px; background-repeat: no-repeat;
}
.cta__form input::placeholder { color: #666; }
.cta__note { margin: 0 0 10px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.cta__submit {
  display: block; width: 100%; border: 0; border-radius: 3px; background: var(--red); color: #fff;
  font-size: 16px; line-height: 27px; font-family: inherit; padding: 5px 16px; cursor: pointer;
}
.cta__submit:hover { background: var(--red-dark); }

/* ------------------------------------------------------ 頁尾 + WhatsApp 浮標 */
.footer { background: var(--red); color: #fff; }
.footer a { color: #fff; text-decoration: none; }
.footer__inner { width: 80%; max-width: 1080px; margin-inline: auto; padding: 24px 0 16px; text-align: center; }
.footer__logo { width: 128px; height: 32px; margin: 0 auto; }
.footer__copy { margin: 0 0 8px; font-size: 14.08px; line-height: 30.6px; font-weight: 300; }
.footer__legal { margin: 0; font-size: 12px; line-height: 30.6px; font-weight: 300; }

.wa-float {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  width: 52px; height: 52px; border-radius: 50%; background: #25d366;
  display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.wa-float svg { width: 30px; height: 30px; fill: #fff; }
.wa-float:hover { background: #1fb855; }
@media print { .wa-float { display: none; } }

/* ------------------------------------------------------ 平板 / 手機（Divi ≤980 欄目上下疊） */
@media (max-width: 980px) {
  .lay { min-height: var(--mhm, var(--mh, 0)); }
  .row, .row--split { grid-template-columns: 1fr; padding: var(--rptm, var(--rpt, 30px)) 0 var(--rpbm, var(--rpb, 30px)); }
  .row--stats { width: 100%; }
  .row--svc { width: 70%; grid-template-columns: 1fr; row-gap: 20px; }
  .col + .col { margin-top: 30px; }
  .row--svc .col + .col, .row--split .col + .col { margin-top: 0; }
  .hide-m { display: none !important; }
  .lay--bgi.lay--band { background-image: none; box-shadow: none; }
  .row--pullup { margin-top: 0; }
  .dm-img { margin-top: 0; }
  .row--card { padding-inline: 32px; }

  .dm-t__en { font-size: 32px; }
  .dm-t__zh { font-size: 22.4px; line-height: 33.6px; margin-top: -1px; }
  .dm-t.is-center .dm-t__en { font-size: 36px; }
  .dm-t.is-center .dm-t__zh { font-size: 26.08px; line-height: 39.12px; }

  .row--ghost { width: 80%; }
  .dm-g { height: 48px; }
  .dm-g__en { font-size: 38.4px; line-height: 57.6px; margin-top: -8px; }
  .dm-g__zh { left: var(--gxm); top: 9px; font-size: 16px; }
  .dm-bgimg { height: 341px; }
  .dm-p--split, .row--split-flip .dm-p--split { margin: 30px 0 20px; padding: 0 30px; }
  .row--split-flip .col:first-child { order: 2; }
  .dm-img--bleed { margin: 0; }
  .dm-img--bleed img { height: auto; aspect-ratio: 960 / 452; }
  .dm-img--deco { max-width: 100%; }
  .row--quote-left, .row--quote-right { width: 100%; margin: 20px 0; }
  .dm-review--left, .dm-review--right { padding: 30px 24px; }
  .dm-review--left blockquote { margin-right: 0; }

  .dm-band__t { font-size: 32px; }
  .dm-band__t em { font-size: 22.4px; }
  .dm-band__list { flex-direction: column; gap: 30px; margin-bottom: 0; }
  .lay--band .dm-btn { margin-top: 30px; }

  .vhero { height: 400px; }
  .vhero__inner { padding-top: 41px; }

  .cta__inner { grid-template-columns: 1fr; row-gap: 30px; padding: 50px 0; }
  .cta__img { width: 100%; max-width: 320px; }
}
@media (max-width: 767px) {
  .vs__thumb::after { font-size: 16px; }
}

/* 關於我們 SERVICE 橫幅：相片上面蓋一層粉紅漸變（原站 86% 不透明） */
.lay--band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 249, 249, .86) 50%, rgba(169, 133, 129, .86) 100%); }
.lay--band .row { z-index: 1; }
@media (max-width: 980px) { .lay--band::before { display: none; } }
