/* ============================================================
   ANJIA ADVISORY — Midnight Navy / Champagne Gold
   精致、专业、克制的品牌编辑风格。
   ============================================================ */

:root {
  --paper: #ffffff;
  --ivory: #fafaf6;
  --ink: #102a43;
  --ink-2: #314b63;
  --muted: #6f7f8c;
  --line: #e5e4dc;
  --line-strong: #d4d1c4;
  --gold: #d6b36a;
  --gold-deep: #9b752d;
  --black: #102a43;
  --danger: #8f3a34;
  --ok: #3c6b4f;
  --serif: "Helvetica Neue", Helvetica, Arial, "Songti SC", "STSong", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration-color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--gold-deep); }
img { max-width: 100%; }

.container { max-width: 1160px; margin: 0 auto; padding: 0 28px; }

/* ---------- Header ---------- */
.site-header {
  background: rgba(250, 250, 246, 0.97);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(16px);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 92px; }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand-logo { display: block; height: 62px; width: auto; }
.footer-logo { display: block; height: 72px; width: auto; }
.site-nav { display: flex; gap: 34px; align-items: center; }
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown > summary {
  display: inline-flex;
  align-items: center;
  list-style: none;
  cursor: pointer;
  color: var(--ink);
  font-size: 11.5px;
  line-height: 1.2;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown > summary::after { content: "▾"; margin-left: 6px; color: var(--gold-deep); font-size: 10px; line-height: 1; transform: translateY(-1px); }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 15px);
  right: 0;
  display: grid;
  min-width: 250px;
  padding: 8px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 14px 32px rgba(16, 42, 67, 0.12);
}
.site-nav .nav-dropdown-menu a { padding: 11px 0; font-size: 10px; letter-spacing: 1px; }
.mobile-nav-tools { display: grid; padding: 14px 0 4px; border-bottom: 1px solid var(--line); }
.mobile-nav-tools > span { color: var(--gold-deep); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.mobile-nav-tools a { padding-left: 14px; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: 11.5px;
  line-height: 1.2;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--gold); }
.nav-cta {
  border: 1px solid var(--ink) !important;
  padding: 10px 20px !important;
  color: var(--ink) !important;
}
.nav-cta:hover { background: var(--ink); color: var(--ivory) !important; }
.nav-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 1px; background: var(--ink); margin: 7px 0; }
.mobile-nav { display: none; flex-direction: column; padding: 8px 28px 22px; background: var(--ivory); border-bottom: 1px solid var(--line); }
.mobile-nav a {
  padding: 14px 0;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 860px) {
  .header-inner { height: 80px; }
  .brand-logo { height: 52px; }
  .site-nav { display: none; }
  .nav-toggle { display: block; }
  .mobile-nav.open { display: flex; }
}

/* ---------- Hero（满版图片 + 文字压图） ---------- */
.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: var(--ink);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('/img/hero-residential-v2.jpg');
  background-size: cover;
  background-position: center 52%;
  transform: scale(1.01);
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(16, 42, 67, 0.82) 0%, rgba(16, 42, 67, 0.62) 43%, rgba(16, 42, 67, 0.12) 76%, rgba(16, 42, 67, 0.28) 100%),
    linear-gradient(0deg, rgba(16, 42, 67, 0.58) 0%, rgba(16, 42, 67, 0.04) 58%, rgba(16, 42, 67, 0.14) 100%);
}
.hero-content { position: relative; z-index: 1; width: 100%; padding-top: 108px; padding-bottom: 108px; max-width: 1160px; }
.hero-content .hero-eyebrow { color: #ead9b4; text-shadow: 0 1px 12px rgba(16, 42, 67, 0.48); }
.hero-content .hero-rule { background: var(--gold); }
.hero-content h1 { color: var(--ivory); text-shadow: 0 2px 28px rgba(16, 42, 67, 0.58); }
.hero-content p.lede { color: rgba(250, 250, 246, 0.94); text-shadow: 0 1px 16px rgba(16, 42, 67, 0.52); font-weight: 500; }
.hero-content .btn:not(.btn-outline) {
  background: rgba(16, 42, 67, 0.9);
  border-color: rgba(214, 179, 106, 0.76);
  backdrop-filter: blur(8px);
}
.hero-content .btn:not(.btn-outline):hover { background: var(--gold-deep); border-color: var(--gold-deep); }
.hero-content .btn-outline { border-color: rgba(250, 250, 246, 0.78); color: var(--ivory); }
.hero-content .btn-outline:hover { background: rgba(250, 250, 246, 0.14); border-color: var(--ivory); color: #fff; }
@media (max-width: 640px) {
  .hero { min-height: 560px; align-items: center; }
  .hero-bg { background-position: 62% center; transform: none; }
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(16, 42, 67, 0.14) 0%, rgba(16, 42, 67, 0.58) 46%, rgba(16, 42, 67, 0.96) 100%),
      linear-gradient(90deg, rgba(16, 42, 67, 0.48) 0%, rgba(16, 42, 67, 0.08) 100%);
  }
  .hero-content { padding-top: 44px; padding-bottom: 44px; }
}

/* ---------- 首屏后的当前利率：主信息 + 市场参考 ---------- */
.rate-strip {
  background: linear-gradient(180deg, #fff 0%, var(--ivory) 100%);
  border-bottom: 1px solid rgba(214, 179, 106, 0.52);
}
.rate-strip-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 28px 56px;
  padding-top: 24px;
  padding-bottom: 22px;
}
.rate-strip-cells {
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.rate-strip-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 58px;
  padding: 0 38px;
}
.rate-strip-cell:first-child { padding-left: 0; }
.rate-strip-cell + .rate-strip-cell { border-left: 1px solid rgba(16, 42, 67, 0.18); }
.rate-strip-cell--headline { min-width: 242px; }
.rate-strip-cell--benchmark { min-width: 156px; }
.rate-strip-cell-label {
  color: var(--gold-deep);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.rate-strip-cell-value {
  color: var(--ink);
  font-size: 23px;
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.rate-strip-cell--headline .rate-strip-cell-value {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.92;
}
.rate-strip-cell-note { color: var(--muted); font-size: 11px; }
.rate-strip-foot {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px 20px;
  flex-wrap: wrap;
  margin: 0;
}
.rate-strip-date { color: var(--muted); font-size: 11px; white-space: nowrap; }
.rate-strip-link {
  color: var(--gold-deep);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 1.35px;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.rate-strip-link:hover { color: var(--ink); }

/* ---------- 首屏下方：三项房贷比较依据 ---------- */
.comparison-foundation { background: var(--paper); }
.service-fee-banner {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 0.8fr);
  gap: 24px 48px;
  align-items: center;
  margin: 0 0 64px;
  padding: 26px 32px;
  background: var(--ink);
  border-left: 5px solid var(--gold);
  color: var(--ivory);
}
.service-fee-banner strong { font-family: var(--serif); font-size: clamp(21px, 2.4vw, 29px); line-height: 1.3; }
.service-fee-banner span {
  color: rgba(250, 250, 246, 0.9);
  font-size: clamp(15px, 1.25vw, 17px);
  font-weight: 600;
  line-height: 1.55;
}
.comparison-foundation-head { margin-bottom: 48px; }
.comparison-foundation-head .section-eyebrow { margin: 0 0 16px; }
.comparison-foundation-head h2 { max-width: none; margin: 0; text-wrap: balance; }
.proof-subtitle {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: clamp(15px, 1.55vw, 19px);
  line-height: 1.55;
}
.proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--gold); border-bottom: 1px solid var(--line); }
.proof-item { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; min-width: 0; padding: 30px 26px 30px 0; }
.proof-item + .proof-item { padding-left: 26px; border-left: 1px solid var(--line); }
.proof-index { color: var(--gold-deep); font-family: var(--serif); font-size: 14px; line-height: 1.55; }
.proof-item h3 { margin: 0 0 9px; color: var(--ink); font-family: var(--serif); font-size: 18px; font-weight: 700; line-height: 1.4; }
.proof-item p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.72; }
.decision-note { max-width: 760px; margin: 24px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.decision-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.35px;
  text-decoration: none;
  text-transform: uppercase;
}
.decision-link span { transition: transform 0.2s ease; }
.decision-link:hover span { transform: translateX(4px); }

/* ---------- 匿名客户情境 ---------- */
.section-cases { background: var(--paper); }
.section-cases > .container > h2 { text-wrap: balance; }
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  background: var(--line);
  gap: 1px;
}
.case-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 34px 30px 32px;
  background: var(--paper);
  border-top: 3px solid var(--gold);
}
.testimonial-quote {
  margin: 0 0 26px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.65;
}
.testimonial-quote::before {
  content: "“";
  display: block;
  margin-bottom: 10px;
  color: var(--gold);
  font-size: 44px;
  line-height: 0.6;
}
.testimonial-meta {
  margin: auto 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: 0.3px;
}
.testimonial-meta strong { color: var(--ink); font-weight: 650; }

@media (max-width: 900px) {
  .proof-grid { grid-template-columns: 1fr; }
  .proof-item { padding: 24px 0; }
  .proof-item + .proof-item { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
  .case-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .rate-strip-inner { display: block; padding-top: 20px; padding-bottom: 18px; }
  .rate-strip-cells { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
  .rate-strip-cell { min-height: auto; padding: 0 0 0 20px; }
  .rate-strip-cell:first-child { padding: 0 22px 0 0; }
  .rate-strip-cell--headline { grid-row: span 2; min-width: 0; }
  .rate-strip-cell--benchmark { min-width: 0; }
  .rate-strip-cell--benchmark + .rate-strip-cell--benchmark { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(16, 42, 67, 0.16); }
  .rate-strip-cell-label { font-size: 8.5px; letter-spacing: 1px; }
  .rate-strip-cell-value { font-size: 20px; }
  .rate-strip-cell--headline .rate-strip-cell-value { font-size: 42px; }
  .rate-strip-cell-note { font-size: 10.5px; }
  .rate-strip-foot { justify-content: space-between; margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(16, 42, 67, 0.15); }
  .rate-strip-date { font-size: 10.5px; }
  .service-fee-banner { grid-template-columns: 1fr; gap: 8px; margin-bottom: 46px; padding: 24px 22px; }
  .comparison-foundation-head { margin-bottom: 34px; }
  .comparison-foundation-head h2 { max-width: 18ch; }
  .proof-item { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 20px 0; }
  .proof-item p { font-size: 14px; line-height: 1.7; }
  .case-card { padding: 30px 24px 28px; }
  .testimonial-quote { font-size: 17px; }
}

/* ---------- 流程区（图片背景 + 悬浮卡片） ---------- */
.process-photo {
  position: relative;
  overflow: hidden;
  background: var(--black);
}
.process-photo-bg {
  position: absolute;
  inset: 0;
  background-image: url('/img/residence-building.jpg');
  background-size: cover;
  background-position: center 30%;
}
.process-photo-scrim { position: absolute; inset: 0; background: rgba(16, 42, 67, 0.78); }
.process-photo .container { position: relative; z-index: 1; }
.process-photo .section-eyebrow { color: #ead9b4; }
.process-photo h2 { color: #f7f4ec; }
.process-photo .section-sub { color: rgba(247, 244, 236, 0.92); }
.process-photo .steps { border-color: transparent; background: transparent; gap: 20px; }
.process-photo .step { border: 1px solid rgba(231, 227, 218, 0.35); background: rgba(250, 249, 246, 0.96); }

.lang-switch { margin-left: 10px; padding-left: 18px; border-left: 1px solid var(--line-strong); }
.lang-switch a { color: var(--gold-deep) !important; }
.hero-eyebrow {
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 26px;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(38px, 5.4vw, 64px);
  line-height: 1.12;
  margin: 0 0 30px;
  max-width: 17ch;
  letter-spacing: 0.2px;
}
html[lang="en"] .hero h1 {
  max-width: 30ch;
  font-size: clamp(42px, 4.1vw, 56px);
  font-weight: 700;
}
.hero p.lede {
  font-size: 17px;
  color: rgba(247, 244, 236, 0.92);
  max-width: 52ch;
  margin: 0 0 44px;
  font-weight: 400;
}
.hero-rule { width: 64px; height: 1px; background: var(--gold); margin-bottom: 30px; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .hero-eyebrow { margin-bottom: 18px; }
  .hero-rule { margin-bottom: 22px; }
  .hero h1 {
    font-size: clamp(35px, 10.5vw, 44px);
    line-height: 1.12;
    margin-bottom: 22px;
    max-width: 12ch;
    overflow-wrap: break-word;
  }
  html[lang^="zh"] .hero h1 {
    max-width: none;
    font-size: clamp(28px, 7.8vw, 34px);
    letter-spacing: -0.3px;
    white-space: nowrap;
  }
  html[lang="en"] .hero h1 {
    max-width: 13ch;
    font-size: clamp(31px, 8.7vw, 38px);
    line-height: 1.1;
    letter-spacing: 0;
  }
  .hero p.lede { font-size: 15.5px; line-height: 1.65; margin-bottom: 30px; max-width: 34ch; }
  .hero .cta-row { display: grid; grid-template-columns: 1fr; width: min(100%, 280px); }
  .hero .btn { text-align: center; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 15px 30px;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--ivory);
  font-weight: 650;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }
.btn-outline { background: transparent; color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-brand { background: var(--ink); }
.btn-small { padding: 11px 20px; font-size: 10px; }

/* ---------- Sections ---------- */
.section { padding: 96px 0; }
.section-alt { background: var(--ivory); }
.section + .section { border-top: 1px solid var(--line); }
.section-alt + .section, .section + .section-alt { border-top: 1px solid var(--line); }
.section-eyebrow {
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 16px;
}
.section-kicker {
  margin: 0 0 16px;
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.4px;
}
.section h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  margin: 0 0 14px;
  letter-spacing: 0.2px;
}
.section .section-sub { color: var(--muted); margin: 0 0 52px; max-width: 62ch; font-weight: 400; }
.group-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 20px;
  margin: 44px 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.page-title { font-family: var(--serif); font-weight: 700; font-size: clamp(30px, 3.6vw, 42px); margin: 0 0 12px; }
.mb-12 { margin-bottom: 12px; }
.mb-20 { margin-bottom: 20px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mtb-24 { margin: 24px 0; }
.fw-600 { font-weight: 600; }
.mw-420 { max-width: 420px; margin-bottom: 18px; }
.mw-480 { max-width: 480px; }
.mw-560 { max-width: 560px; }
.mt-26 { margin-top: 26px; }

/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.card-grid--2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.services-grid {
  gap: 1px;
  border: 0;
  background: transparent;
}
.services-grid > .card { outline: 1px solid var(--line); }
@media (max-width: 680px) {
  .card-grid--2x2 { grid-template-columns: 1fr; }
}
.card { background: var(--paper); padding: 36px 32px; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 48px rgba(16, 42, 67, 0.08); }
.card h3 { font-family: var(--serif); font-weight: 700; font-size: 21px; margin: 0 0 12px; color: var(--ink); }
.service-name-en { display: block; margin: -5px 0 14px; color: var(--gold-deep); font-size: 10px; font-weight: 700; letter-spacing: 0.6px; }
.card p { margin: 0 0 14px; color: var(--ink-2); font-size: 14.5px; font-weight: 400; }
.card .meta { font-size: 12px; color: var(--muted); letter-spacing: 0.3px; }
.card .btn { margin-top: 10px; }
#services .card--other {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(180px, 0.75fr) minmax(0, 1.75fr) auto;
  align-items: center;
  gap: 24px 36px;
  padding-top: 26px;
  padding-bottom: 26px;
}
#services .card--other h3,
#services .card--other p { margin: 0; }
#services .card--other .btn { margin: 0; white-space: nowrap; }
@media (max-width: 680px) {
  #services .card--other { display: block; padding: 30px 24px 28px; }
  #services .card--other p { margin: 0 0 14px; }
  #services .card--other .btn { margin-top: 10px; }
}

/* ---------- Rate cards ---------- */
.rate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.rate-card { background: var(--paper); padding: 32px 30px; display: flex; flex-direction: column; }
.sora-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sora-grid .rate-card { min-width: 0; }
.sora-grid .rate-kind { min-height: 2.8em; }
.sora-grid .rate-detail { margin-bottom: 0; }
.rate-kind {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--muted);
  margin: 0 0 18px;
}
.rate-value {
  font-family: var(--sans);
  font-weight: 650;
  font-size: 52px;
  letter-spacing: -0.5px;
  line-height: 1;
  color: var(--ink);
  margin: 0 0 20px;
}
.rate-value small { font-family: var(--sans); font-size: 12px; color: var(--muted); margin-left: 8px; letter-spacing: 0.5px; }
.rate-detail { font-size: 13.5px; color: var(--ink-2); margin: 0 0 16px; flex: 1; font-weight: 400; }
.rate-detail a { color: var(--gold-deep); }
.rate-date { font-size: 12px; color: var(--muted); }
.badge-stale, .badge-spread {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid;
  vertical-align: middle;
  margin-left: 10px;
}
.badge-stale { color: var(--gold-deep); border-color: var(--gold); background: var(--ivory); }
.badge-spread { color: var(--ink-2); border-color: var(--line-strong); background: var(--ivory); }

/* ---------- Categorised bank-rate tables ---------- */
.rate-tables { display: grid; gap: 32px; }
.rate-table-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.rate-table-panel:hover {
  border-color: var(--line-strong);
  box-shadow: 0 18px 48px rgba(16, 42, 67, 0.08);
  transform: translateY(-2px);
}
.rate-table-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 26px 30px 24px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(105deg, var(--ink) 0%, #173a5b 100%);
}
.rate-table-heading > div {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 16px;
  align-items: baseline;
}
.rate-table-index {
  grid-row: 1 / span 2;
  margin: 0;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1;
}
.rate-table-heading h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ivory);
}
.rate-table-heading p:not(.rate-table-index) { margin: 3px 0 0; color: rgba(250, 250, 246, 0.7); font-size: 12.5px; }
.rate-table-heading .btn-outline { border-color: rgba(214, 179, 106, 0.72); color: var(--ivory); }
.rate-table-heading .btn-outline:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.rate-table-wrap { overflow-x: auto; }
.rate-package-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.rate-package-card { min-width: 0; background: var(--paper); }
.rate-package-card h4 {
  margin: 0;
  padding: 14px 24px;
  border-bottom: 2px solid var(--gold);
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.3;
}
.rate-comparison-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.rate-comparison-table th,
.rate-comparison-table td { text-align: left; border-right: 1px solid var(--line); }
.rate-comparison-table th:last-child,
.rate-comparison-table td:last-child { border-right: 0; }
.rate-comparison-table th {
  padding: 13px 24px;
  background: #f6f3eb;
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.35px;
  text-transform: uppercase;
}
.rate-comparison-table th:first-child { width: 25%; }
.rate-comparison-table th:nth-child(2),
.rate-comparison-table th:nth-child(3) { width: 37.5%; }
.rate-comparison-table--floating-only th:first-child { width: 38%; }
.rate-comparison-table--floating-only th:nth-child(2) { width: 62%; }
.rate-comparison-table--package th:first-child { width: 42%; }
.rate-comparison-table--package th:nth-child(2) { width: 58%; }
.rate-comparison-table td {
  padding: 19px 24px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  vertical-align: middle;
}
.rate-comparison-table tbody tr:first-child td { border-top: 0; }
.rate-comparison-table tbody tr:nth-child(even) td { background: var(--ivory); }
.rate-comparison-table td:first-child strong { font-weight: 550; color: var(--ink); }
.rate-offer-value { display: block; color: var(--gold-deep); font-size: 19px; line-height: 1.25; font-weight: 560; }
.rate-offer-detail { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; }
.rate-not-available { color: var(--muted); font-size: 12px; }
.rate-table-date { margin: 0; padding: 12px 30px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; text-align: right; }
@media (max-width: 720px) {
  .rate-table-heading { align-items: flex-start; padding: 24px 22px; }
  .rate-table-heading .btn { display: none; }
  .rate-table-heading > div { column-gap: 12px; }
  .rate-table-index { font-size: 24px; }
  .rate-table-heading h3 { font-size: 20px; }
  .rate-package-grid { grid-template-columns: 1fr; }
  .rate-package-card h4 { padding: 13px 16px; font-size: 15px; }
  .rate-comparison-table th,
  .rate-comparison-table td { padding: 14px 12px; }
  .rate-comparison-table th { font-size: 9px; letter-spacing: 1px; }
  .rate-comparison-table td:first-child strong { font-size: 13px; }
  .rate-offer-value { font-size: 15.5px; }
  .rate-offer-detail { font-size: 10.5px; }
  .rate-table-date { padding: 12px 16px; text-align: left; }
}

/* ---------- Process steps ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.step { background: var(--paper); padding: 34px 30px; }
.step-num {
  font-family: var(--serif);
  font-size: 30px;
  color: var(--gold);
  display: block;
  margin-bottom: 16px;
}
.step h3 { font-family: var(--serif); font-weight: 700; font-size: 18px; margin: 0 0 10px; }
.keep-together { white-space: nowrap; }
.step p { margin: 0; font-size: 13.5px; color: var(--ink-2); font-weight: 400; }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-of-type { border-top: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer;
  padding: 22px 4px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 22px; color: var(--gold); font-weight: 300; flex-shrink: 0; }
.faq-item[open] summary::after { content: "–"; }
.faq-item .faq-body { padding: 0 4px 24px; color: var(--ink-2); font-size: 14.5px; max-width: none; font-weight: 400; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; }
.contact-grid > * { min-width: 0; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }
.contact-channel {
  display: block;
  text-decoration: none;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.contact-channel:first-of-type { border-top: 1px solid var(--line); }
.contact-channel:hover strong { color: var(--gold-deep); }
.contact-channel strong { display: block; font-family: var(--serif); font-weight: 700; font-size: 19px; transition: color 0.2s; }
.contact-channel span { font-size: 12.5px; color: var(--muted); letter-spacing: 0.3px; }
.contact-channel--combined { display: grid; gap: 4px; }
.contact-channel-actions { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
.contact-channel-actions a { color: var(--ink); font-size: 13px; font-weight: 650; text-decoration-color: var(--gold); }
.contact-channel-actions a + a { padding-left: 18px; border-left: 1px solid var(--line); }

/* ---------- Company details and resource network ---------- */
.about-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.company-details-list { display: grid; gap: 16px; margin: 0; }
.company-details-list div { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.company-details-list div:last-child { padding-bottom: 0; border-bottom: 0; }
.company-details-list dt { color: var(--gold-deep); font-size: 9.5px; font-weight: 700; letter-spacing: 1.35px; text-transform: uppercase; }
.company-details-list dd { margin: 4px 0 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
}
.contact-direct-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  border-top: 4px solid var(--gold);
}
.contact-direct-details { display: grid; gap: 18px; align-content: start; }
.contact-direct-details .contact-channel-actions { margin-top: 4px; }
.contact-direct-details .contact-channel-actions a {
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  text-decoration-color: var(--gold);
}
.contact-direct-details .meta { margin: 0; color: var(--muted); font-size: 13px; }
.contact-email-display {
  display: grid;
  gap: 6px;
  margin: 6px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.contact-email-display--first { margin-top: 0; padding-top: 0; border-top: 0; }
.contact-email-display strong { color: var(--gold-deep); font-size: 10px; letter-spacing: 1.25px; text-transform: uppercase; }
.contact-email-display span,
.contact-email-display a { color: var(--ink); font-size: 15px; overflow-wrap: anywhere; }
.contact-email-link { text-decoration-color: var(--gold-deep); text-underline-offset: 3px; }
.contact-wechat-card {
  display: grid;
  justify-items: start;
  gap: 6px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.contact-wechat-card strong {
  color: var(--gold-deep);
  font-size: 10px;
  letter-spacing: 1.25px;
  text-transform: uppercase;
}
.contact-wechat-qr {
  display: block;
  width: min(100%, 260px);
  height: auto;
  margin-top: 8px;
  border: 1px solid var(--line);
  background: #fff;
}
.contact-card { border: 1px solid var(--line); padding: 40px 36px; background: var(--paper); }
.contact-card h3 { font-family: var(--serif); font-weight: 700; font-size: 22px; margin: 0 0 24px; }

/* ---------- Forms ---------- */
form.stack { display: grid; gap: 22px; }
.field label, .field .field-label { display: block; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  font: inherit;
  font-size: 14.5px;
  background: var(--paper);
  color: var(--ink);
  transition: border-color 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--black); }
.field input[type="checkbox"], .field input[type="radio"] { width: auto; }
.field .hint { font-size: 12px; color: var(--muted); margin-top: 6px; letter-spacing: 0.2px; }
.field .error-text, .error-text { font-size: 12.5px; color: var(--danger); margin-top: 6px; }
.checkbox-field { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; text-transform: none; letter-spacing: 0; color: var(--ink-2); }
.checkbox-field input { margin-top: 4px; }
.form-status { padding: 16px 18px; font-size: 14px; border: 1px solid; }
.form-status.success { background: #f4f7f5; border-color: #cfdcd4; color: var(--ok); }
.form-status.error { background: #faf4f3; border-color: #e3cfcd; color: var(--danger); }
.hp-field { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.fallback-links { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.turnstile-field { min-height: 65px; }
.turnstile-field[hidden] { display: none; }
.inline-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) {
  .inline-fields { grid-template-columns: 1fr; }
  .contact-card { padding: 32px 24px; }
}
@media (min-width: 861px) {
  #process .section-sub { max-width: none; white-space: nowrap; }
}
fieldset.group { border: 1px solid var(--line-strong); padding: 20px; margin: 0; }
fieldset.group legend { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; padding: 0 8px; color: var(--ink-2); }
.segment { display: inline-flex; border: 1px solid var(--line-strong); }
.segment button {
  border: 0;
  background: var(--paper);
  padding: 11px 20px;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-2);
  border-right: 1px solid var(--line-strong);
}
.segment button:last-child { border-right: 0; }
.segment button.active { background: var(--black); color: #fff; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.data { border-collapse: collapse; width: 100%; font-size: 13.5px; background: var(--paper); }
table.data th, table.data td { border-bottom: 1px solid var(--line); padding: 11px 14px; text-align: left; vertical-align: top; }
table.data th {
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  border-bottom: 1px solid var(--line-strong);
}
table.data caption { text-align: left; font-size: 12.5px; color: var(--muted); padding: 8px 0; letter-spacing: 0.3px; }

/* ---------- 历史序列 dropdown（勾选面板） ---------- */
.dd { position: relative; }
.dd > summary {
  list-style: none;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  padding: 13px 38px 13px 14px;
  font-size: 14.5px;
  color: var(--ink);
  position: relative;
  min-width: 240px;
}
.dd > summary::-webkit-details-marker { display: none; }
.dd > summary::after {
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 12px;
}
.dd[open] > summary { border-color: var(--black); }
.dd-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  box-shadow: 0 8px 24px rgba(20, 19, 17, 0.08);
  max-height: 260px;
  overflow-y: auto;
}
.dd-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 11px 14px;
  font-size: 13.5px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ink-2);
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}
.dd-item:last-child { border-bottom: 0; }
.dd-item:hover { background: var(--ivory); }
.dd-item input { margin: 0; }
.history-controls {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px 26px;
  align-items: flex-end;
  border: 1px solid var(--line);
  padding: 28px;
  margin-bottom: 32px;
  background: var(--paper);
}
.history-controls .field { min-width: 0; }
.history-controls .field:nth-child(1) { grid-column: span 3; }
.history-controls .field:nth-child(2) { grid-column: span 3; }
.history-controls .field:nth-child(3) { grid-column: span 6; }
.history-controls .field:nth-child(4),
.history-controls .field:nth-child(5) { grid-column: span 3; }
.range-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.range-btns button {
  border: 1px solid var(--line-strong);
  background: var(--paper);
  padding: 8px 16px;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-2);
}
.range-btns button.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.chart-box { position: relative; border: 1px solid var(--line); padding: 28px; margin-bottom: 28px; background: var(--paper); }
.chart-box svg { width: 100%; height: auto; display: block; }
.chart-help { margin: 0 0 14px; color: var(--muted); font-size: 12px; letter-spacing: 0.2px; }
.stats-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: 28px; background: var(--line); border: 1px solid var(--line); }
.stat { background: var(--paper); padding: 20px 24px; min-width: 0; display: flex; flex-direction: column; }
.stat .stat-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 10px; min-height: 3.4em; }
.stat .stat-value { font-family: var(--sans); font-weight: 400; font-size: clamp(20px, 2vw, 24px); line-height: 1.2; color: var(--ink); margin-top: auto; white-space: nowrap; }
.chart-point { pointer-events: none; }
.chart-point-hit {
  fill: transparent;
  stroke: transparent;
  pointer-events: all;
  cursor: crosshair;
}
.chart-point-hit:focus {
  fill: rgba(165, 133, 74, 0.14);
  stroke: var(--gold);
  stroke-width: 2;
  outline: none;
}
.chart-tooltip { pointer-events: none; }
.chart-tooltip rect { fill: var(--ink); stroke: var(--gold); stroke-width: 1; }
.chart-tooltip .chart-tooltip-title { fill: var(--ivory); font-family: var(--sans); font-size: 12px; font-weight: 600; }
.chart-tooltip .chart-tooltip-detail { fill: #ead9b4; font-family: var(--sans); font-size: 11px; }

@media (max-width: 960px) {
  .history-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history-controls .field:nth-child(n) { grid-column: span 1; }
  .history-controls .field:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .section { padding: 72px 0; }
  .section .section-sub { margin-bottom: 38px; }
  .history-controls { grid-template-columns: 1fr; padding: 28px; }
  .history-controls .field:nth-child(n) { grid-column: 1; }
  .dd > summary { min-width: 0; width: 100%; }
  .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 20px 18px; }
  .stat .stat-label { min-height: 3.8em; }
  .stat .stat-value { font-size: 22px; }
  .chart-box { padding: 14px 10px; }
  .sora-grid { grid-template-columns: 1fr; }
  .sora-grid .rate-kind { min-height: 0; }
}

/* ---------- Calculator pages ---------- */
.calc-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 940px) { .calc-layout { grid-template-columns: 1fr; } }
.calc-layout-3 { grid-template-columns: 1fr 1fr 1fr; align-items: stretch; gap: 32px; }
@media (max-width: 940px) { .calc-layout-3 { grid-template-columns: 1fr; } }
.calc-form-card { border: 1px solid var(--line); padding: 36px 32px; background: var(--paper); }
.calc-form-card h3 { font-family: var(--serif); font-weight: 700; font-size: 19px; margin: 0 0 20px; }
.calc-results { border: 1px solid var(--line); padding: 36px 32px; background: var(--ivory); }
.calc-results h2 { font-family: var(--serif); font-weight: 700; font-size: 20px; margin: 0 0 18px; }
.result-big { font-family: var(--sans); font-weight: 400; letter-spacing: -0.5px; font-size: 44px; color: var(--ink); margin: 6px 0 22px; line-height: 1; }
.result-big small { font-family: var(--sans); font-size: 13px; color: var(--muted); }
.result-rows { display: grid; gap: 0; margin-bottom: 20px; }
.result-row { display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); padding: 10px 0; font-size: 13.5px; }
.result-row .k { color: var(--muted); }
.result-row .v { font-weight: 500; text-align: right; }
.note {
  font-size: 12.5px;
  color: var(--muted);
  border-left: 2px solid var(--gold);
  padding: 4px 0 4px 16px;
  line-height: 1.7;
}
.note.warn { color: var(--gold-deep); border-left-color: var(--gold-deep); }
.card-h { margin-top: 0; }
.mono-sm { font-family: monospace; font-size: 0.85rem; }
.fs-075 { font-size: 0.75rem; }
.fs-082 { font-size: 0.82rem; }
.fs-085-muted { font-size: 0.85rem; color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: rgba(250, 250, 246, 0.7); padding: 72px 0 40px; margin-top: 0; }
.site-footer a { color: rgba(250, 250, 246, 0.86); text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); gap: 48px; padding-bottom: 44px; border-bottom: 1px solid rgba(214, 179, 106, 0.24); }
.footer-brand { font-family: var(--serif); font-size: 20px; color: var(--ivory); }
.footer-heading { font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; }
.site-footer .footer-brand { margin: 0; }
.site-footer .footer-heading--about { margin: 28px 0 14px; }
.footer-links-block { padding-top: 100px; }
.footer-contact-list { display: grid; gap: 15px; margin-top: 0; }
.footer-contact-row { display: block; min-width: 0; color: rgba(250, 250, 246, 0.78); }
.footer-contact-copy { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.footer-contact-copy small { color: var(--gold); font-size: 9px; font-weight: 700; letter-spacing: 0.75px; text-transform: uppercase; }
.footer-contact-copy strong { color: rgba(250, 250, 246, 0.78); font-size: 13.5px; font-weight: 400; line-height: 1.55; }
a.footer-contact-row:hover .footer-contact-copy strong { color: var(--ivory); }
.footer-contact-row--email .footer-contact-copy strong { text-decoration: underline; text-decoration-color: rgba(214, 179, 106, 0.55); text-underline-offset: 3px; }
.footer-subgroup { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(214, 179, 106, 0.2); }
.site-footer p { font-size: 13.5px; line-height: 1.9; margin: 0 0 8px; font-weight: 400; }
.footer-legal { padding-top: 28px; font-size: 12px; color: rgba(250, 250, 246, 0.5); }
.footer-legal p { font-size: 12px; }
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-links-block { padding-top: 0; }
}

/* ---------- Legal page ---------- */
.legal-doc { max-width: 780px; }
.legal-doc h2 { font-family: var(--serif); font-weight: 700; font-size: 22px; margin: 36px 0 10px; }
.legal-doc p { color: var(--ink-2); font-weight: 400; }
.legal-status { border-left: 2px solid var(--gold); padding: 6px 0 6px 16px; font-size: 13px; color: var(--gold-deep); }

/* ---------- Error page ---------- */
.error-box { text-align: center; padding: 130px 0; }
.error-box h1 { font-family: var(--serif); font-weight: 500; font-size: 72px; margin: 0 0 14px; color: var(--ink); }
.error-box p { color: var(--muted); margin-bottom: 30px; }

/* ---------- Admin ---------- */
.admin-body { background: var(--ivory); }
.admin-nav { background: var(--ink); }
.admin-nav .container { display: flex; align-items: center; gap: 26px; height: 62px; }
.admin-nav strong { font-family: var(--serif); font-weight: 700; letter-spacing: 0.5px; color: var(--ivory); }
.admin-nav a { color: #b9b4a9; text-decoration: none; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; }
.admin-nav a:hover { color: #fff; }
.admin-nav .spacer { flex: 1; }
.admin-nav form { margin: 0; }
.admin-nav button {
  background: none;
  border: 1px solid #4a443a;
  color: #d8d2c4;
  padding: 7px 14px;
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.admin-nav button:hover { border-color: var(--gold); color: var(--gold); }
.admin-main { padding: 48px 0 80px; }
.admin-main h1 { font-family: var(--serif); font-weight: 700; font-size: 30px; margin: 0 0 28px; }
.admin-card { background: var(--paper); border: 1px solid var(--line); padding: 28px; margin-bottom: 24px; }
.admin-card h2 { font-family: var(--serif); font-weight: 700; font-size: 19px; margin: 0 0 18px; }
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.admin-actions form { display: inline; }
.btn-admin {
  border: 1px solid var(--line-strong);
  background: var(--paper);
  padding: 7px 14px;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--ink-2);
  text-decoration: none;
  display: inline-block;
}
.btn-admin:hover { border-color: var(--black); color: var(--black); }
.btn-admin.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-admin.primary:hover { background: var(--gold-deep); border-color: var(--gold-deep); }
.btn-admin.danger { color: var(--danger); border-color: #e3cfcd; }
.pill { display: inline-block; padding: 3px 10px; font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; border: 1px solid; }
.pill.published { color: var(--ok); border-color: #cfdcd4; background: #f4f7f5; }
.pill.draft { color: var(--muted); border-color: var(--line-strong); }
.pill.expired { color: var(--danger); border-color: #e3cfcd; background: #faf4f3; }
.login-box { max-width: 420px; margin: 110px auto; }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-bottom: 28px; }
.stat-cards .result-big { margin: 0; }
.admin-title-sm { font-family: var(--serif); font-weight: 700; font-size: 22px; margin: 0 0 18px; }
.admin-title-md { font-family: var(--serif); font-weight: 700; font-size: 19px; }

/* ---------- Motion and floating enquiry ---------- */
.floating-enquiry {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 50px;
  padding: 0 20px;
  border: 1px solid rgba(214, 179, 106, 0.8);
  border-radius: 999px;
  background: rgba(16, 42, 67, 0.96);
  box-shadow: 0 14px 38px rgba(16, 42, 67, 0.24);
  color: var(--ivory);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.55px;
  text-decoration: none;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.floating-enquiry.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.floating-enquiry:hover {
  transform: translateY(-3px);
  background: var(--gold-deep);
  box-shadow: 0 18px 44px rgba(16, 42, 67, 0.3);
  color: #fff;
}
.floating-enquiry-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(214, 179, 106, 0.6);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-bg { animation: hero-breathe 18s ease-in-out infinite alternate; }
  .hero-content > * { opacity: 0; animation: hero-enter 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
  .hero-content > :nth-child(2) { animation-delay: 0.08s; }
  .hero-content > :nth-child(3) { animation-delay: 0.16s; }
  .hero-content > :nth-child(4) { animation-delay: 0.24s; }
  .hero-content > :nth-child(5) { animation-delay: 0.32s; }
  .motion-ready [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .motion-ready [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
  .floating-enquiry-dot { animation: enquiry-pulse 2.6s ease-out infinite; }
}

@keyframes hero-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-breathe {
  from { transform: scale(1.01); }
  to { transform: scale(1.055); }
}
@keyframes enquiry-pulse {
  0% { box-shadow: 0 0 0 0 rgba(214, 179, 106, 0.55); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(214, 179, 106, 0); }
}

@media (max-width: 640px) {
  .floating-enquiry { right: 16px; bottom: 16px; min-height: 46px; padding: 0 17px; }
}

/* ---------- Admin publishing workspace ---------- */
.inline-fields-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.admin-page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 28px;
}
.admin-page-heading h1 { margin-bottom: 8px; }
.admin-page-heading p { margin: 0; max-width: 72ch; }
.export-workspace { display: grid; grid-template-columns: minmax(320px, 0.72fr) minmax(500px, 1.28fr); gap: 24px; align-items: start; }
.export-editor { position: sticky; top: 84px; }
.export-preview-card { min-width: 0; }
.export-preview-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.export-preview-heading p { margin: -10px 0 18px; }
.rate-data-source {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 8px 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.875rem;
}
.rate-data-source strong,
.rate-data-source a { grid-column: 1 / -1; }
.rate-data-source strong { font-family: var(--serif); letter-spacing: 0.035em; }
.rate-data-source span { color: var(--muted); }
.rate-data-source a { color: var(--gold-deep); font-weight: 700; white-space: nowrap; }
#rate-export-canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  background: var(--ivory);
  box-shadow: 0 18px 48px rgba(16, 42, 67, 0.1);
}
#rate-export-status:empty { display: none; }

@media (max-width: 980px) {
  .admin-nav .container { gap: 16px; overflow-x: auto; }
  .admin-nav a { white-space: nowrap; }
  .export-workspace { grid-template-columns: 1fr; }
  .export-editor { position: static; }
}
@media (max-width: 720px) {
  .inline-fields-3 { grid-template-columns: 1fr; }
  .admin-page-heading { display: block; }
  .admin-page-heading .btn-admin { margin-top: 16px; }
  .admin-card { padding: 20px; }
  .rate-data-source { grid-template-columns: 1fr; }
}