/* =========================================================
   Peng Xiang Professional Advisory Theme — 2026
   Inspired by modern US management-consulting editorial UX:
   restrained palette, strong typography, whitespace, clear CTA.
   ========================================================= */
:root {
  --px-navy: #0b1f33;
  --px-navy-2: #12304d;
  --px-blue: #275d8c;
  --px-gold: #b18a52;
  --px-ink: #17212b;
  --px-muted: #66727e;
  --px-line: #dfe5ea;
  --px-soft: #f5f7f9;
  --px-white: #ffffff;
  --px-shadow: 0 18px 48px rgba(11,31,51,.09);
  --px-radius: 4px;
}

html { scroll-behavior: smooth; }
body {
  font-family: Inter, "Noto Sans TC", "Microsoft JhengHei", system-ui, -apple-system, sans-serif !important;
  color: var(--px-ink) !important;
  background: var(--px-white) !important;
  line-height: 1.75;
  letter-spacing: .01em;
}

/* Header / navigation */
.header {
  min-height: 78px;
  padding: 0 !important;
  background: rgba(255,255,255,.97) !important;
  border-bottom: 1px solid var(--px-line) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px);
}
.header .container-xl { min-height: 78px; }
.header .logo h1,
.header .logo .mb-0 {
  color: var(--px-navy) !important;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem) !important;
  line-height: 1.2;
  font-weight: 750 !important;
  letter-spacing: -.025em !important;
}
.navbar a,
.navbar a:focus {
  color: var(--px-ink) !important;
  font-size: .94rem !important;
  font-weight: 650 !important;
  padding: 29px 0 25px 30px !important;
  letter-spacing: .01em;
}
.navbar a:hover,
.navbar .active,
.navbar .active:focus { color: var(--px-blue) !important; }
.navbar a::after { display: none !important; }
.navbar li:last-child a {
  margin-left: 24px;
  padding: 10px 17px !important;
  border: 1px solid var(--px-navy);
  color: var(--px-navy) !important;
}
.navbar li:last-child a:hover { background: var(--px-navy); color: #fff !important; }

/* Hero */
.page-index .hero {
  min-height: 690px;
  padding: 170px 0 105px !important;
  background:
    linear-gradient(90deg, rgba(8,29,48,.96) 0%, rgba(8,29,48,.90) 52%, rgba(8,29,48,.72) 100%),
    url('../img/hero-bg.jpg') center/cover no-repeat !important;
  color: #fff;
}
.page-index .hero::before { background: none !important; }
.hero .consulting-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  color: #d9c09a;
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero .consulting-eyebrow::before { content: ""; width: 34px; height: 1px; background: #d9c09a; }
.page-index .hero h2 {
  max-width: 840px;
  font-family: Georgia, "Noto Serif TC", serif;
  font-size: clamp(2.5rem, 5.2vw, 4.85rem) !important;
  line-height: 1.08 !important;
  font-weight: 600 !important;
  letter-spacing: -.035em;
  color: #fff !important;
}
.page-index .hero .lead {
  max-width: 710px;
  margin: 28px 0 34px !important;
  font-size: clamp(1.05rem, 1.55vw, 1.3rem) !important;
  line-height: 1.7;
  color: rgba(255,255,255,.83) !important;
}
.page-index .hero .btn { border-radius: 2px !important; min-width: 150px; padding: 13px 24px !important; font-weight: 700; }
.page-index .hero .btn-primary { background: #fff !important; border-color: #fff !important; color: var(--px-navy) !important; }
.page-index .hero .btn-primary:hover { background: #e8edf1 !important; transform: translateY(-2px) !important; box-shadow: none !important; }
.page-index .hero .btn-outline-primary { border-color: rgba(255,255,255,.62) !important; color: #fff !important; }
.page-index .hero .btn-outline-primary:hover { background: rgba(255,255,255,.09) !important; border-color: #fff !important; transform: translateY(-2px) !important; }
.hero-decoration { display: none !important; }
.hero-trustline { margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.72); font-size: .92rem; }
.hero-trustline span { display: inline-block; margin-right: 30px; }
.hero-trustline i { margin-right: 7px; color: #d9c09a; }

/* Sections */
section { padding-top: 86px !important; padding-bottom: 86px !important; }
.section-header { max-width: 760px; margin-left: auto; margin-right: auto; }
.section-header h2,
.section-title h2 {
  font-family: Georgia, "Noto Serif TC", serif;
  font-size: clamp(2rem, 3.2vw, 3rem) !important;
  font-weight: 600 !important;
  line-height: 1.2;
  color: var(--px-navy) !important;
  letter-spacing: -.025em;
}
.section-header h2::after { display: none !important; }
.section-header p { color: var(--px-muted) !important; font-size: 1.05rem !important; }
.section-kicker {
  display: block; margin-bottom: 11px; color: var(--px-blue); font-size: .77rem;
  font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}

/* Advisory cards */
.card, .card-hover, .post-box, .contact-info-card {
  border-radius: var(--px-radius) !important;
  border: 1px solid var(--px-line) !important;
  box-shadow: none !important;
  background: #fff !important;
}
.card-hover, .post-box, .contact-info-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-hover:hover, .post-box:hover, .contact-info-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--px-shadow) !important;
  border-color: #c8d2da !important;
}
.card-body { padding: 32px !important; }
.card-body i, .services-list .card > i { color: var(--px-blue) !important; font-size: 2rem !important; }
.card-title, .card h4, .post-title { color: var(--px-navy) !important; font-weight: 750 !important; }
.text-primary { color: var(--px-blue) !important; }
.bg-light, .services-highlight { background: var(--px-soft) !important; }

/* About image + content */
.about img { border-radius: 2px !important; box-shadow: none !important; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.about .content h3 { color: var(--px-navy); font-family: Georgia, "Noto Serif TC", serif; font-size: clamp(1.6rem, 2.5vw, 2.35rem); line-height: 1.3; }
.advisory-principles { margin-top: 30px; border-top: 1px solid var(--px-line); }
.advisory-principle { padding: 18px 0; border-bottom: 1px solid var(--px-line); }
.advisory-principle strong { color: var(--px-navy); }

/* Breadcrumb / interior masthead */
.breadcrumbs {
  min-height: 410px !important;
  margin-top: 78px;
  position: relative;
  background-position: center !important;
}
.breadcrumbs::before { background: linear-gradient(90deg, rgba(8,29,48,.91), rgba(8,29,48,.64)) !important; }
.breadcrumbs .container { align-items: flex-start !important; text-align: left !important; }
.breadcrumbs h2 { max-width: 750px; color: #fff !important; font-family: Georgia, "Noto Serif TC", serif; font-size: clamp(2.4rem, 5vw, 4rem) !important; font-weight: 600 !important; letter-spacing: -.03em; }
.breadcrumbs ol { justify-content: flex-start !important; }

/* Contact */
.contact-icon { background: var(--px-soft) !important; border-radius: 2px !important; }
.contact-icon i { color: var(--px-blue) !important; }
.contact-info-card a { color: var(--px-blue); text-decoration: none; }
.contact-info-card a:hover { text-decoration: underline; }
.corporate-facts { background: var(--px-navy); color: #fff; }
.corporate-facts .fact-label { color: #aebdca; font-size: .78rem; letter-spacing: .11em; text-transform: uppercase; }
.corporate-facts .fact-value { color: #fff; font-size: 1rem; font-weight: 650; word-break: break-word; }

/* Footer */
.footer, .footer.bg-dark, .footer-content, .footer-legal { background: var(--px-navy) !important; color: #fff !important; }
.footer { padding-top: 58px !important; }
.footer .fs-3, .footer-info span { font-size: 1.45rem !important; color: #fff !important; font-weight: 700 !important; }
.footer h5, .footer h4 { color: #fff !important; font-size: .92rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.footer a, .footer a.text-white-50 { color: #b8c3cc !important; text-decoration: none !important; }
.footer a:hover { color: #fff !important; }
.footer .text-white-50, .footer address, .footer p { color: #aeb9c3 !important; }
.footer .copyright, .footer-legal { border-color: rgba(255,255,255,.13) !important; color: #8f9da9 !important; }
.footer-company-meta { margin-top: 14px; font-size: .9rem; line-height: 1.8; }

/* CTA */
.advisory-cta { background: var(--px-navy); color: #fff; }
.advisory-cta h2 { color: #fff !important; font-family: Georgia, "Noto Serif TC", serif; font-size: clamp(2rem, 3vw, 3rem); }
.advisory-cta p { color: #c7d0d8; }
.advisory-cta .btn { border-radius: 2px; padding: 12px 22px; }

/* Responsive */
@media (max-width: 991.98px) {
  .header, .header .container-xl { min-height: 68px; }
  .header .logo { max-width: calc(100% - 54px); }
  .header .logo h1 { font-size: 1rem !important; white-space: normal !important; }
  .mobile-nav-toggle { color: var(--px-navy) !important; font-size: 30px !important; }
  .navbar ul { background: #fff !important; border-radius: 0 !important; }
  .navbar a, .navbar a:focus { padding: 14px 20px !important; }
  .navbar li:last-child a { margin: 8px 20px 16px !important; text-align: center; }
  .page-index .hero { min-height: auto; padding: 132px 0 76px !important; text-align: left !important; }
  .page-index .hero h2 { font-size: clamp(2.45rem, 8vw, 4rem) !important; }
  .hero-trustline span { display: block; margin: 8px 0; }
  .breadcrumbs { min-height: 330px !important; margin-top: 68px; }
}
@media (max-width: 767.98px) {
  section { padding-top: 64px !important; padding-bottom: 64px !important; }
  .page-index .hero { padding-top: 118px !important; }
  .page-index .hero .btn { width: 100%; margin: 0 0 10px !important; }
  .card-body { padding: 25px !important; }
  .breadcrumbs { min-height: 280px !important; }
  .breadcrumbs .container { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 420px) {
  .header .logo h1 { font-size: .9rem !important; }
  .page-index .hero h2 { font-size: 2.25rem !important; }
  .page-index .hero .lead { font-size: 1rem !important; }
}

/* =========================================================
   2026-09-08 Navigation CTA contrast fix
   Ensure the "業務專區" CTA always has sufficient contrast across
   default / visited / hover / focus / active states and mobile menu.
   ========================================================= */
.navbar li:last-child > a,
.navbar li:last-child > a:link,
.navbar li:last-child > a:visited,
.navbar li:last-child > a:focus,
.navbar li:last-child > a:active {
  background: var(--px-navy) !important;
  border: 1px solid var(--px-navy) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #ffffff !important;
}

.navbar li:last-child > a:hover {
  background: var(--px-blue) !important;
  border-color: var(--px-blue) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.navbar li:last-child > a:focus-visible {
  outline: 3px solid rgba(39, 93, 140, .28) !important;
  outline-offset: 3px;
}

@media (min-width: 992px) {
  .navbar li:last-child > a {
    border-radius: 999px !important;
    padding: 10px 18px !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 991.98px) {
  .navbar li:last-child > a,
  .navbar li:last-child > a:link,
  .navbar li:last-child > a:visited,
  .navbar li:last-child > a:focus,
  .navbar li:last-child > a:active {
    display: block !important;
    background: var(--px-navy) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-radius: 6px !important;
  }
}