/* ===============================================================
   EDITORIAL — MAGAZINE / INTERIOR CATALOG MODE
   Applied AFTER styles.css to override the dark-luxe theme into
   a cream-based editorial layout inspired by interior-design
   landing catalogs.
   ============================================================ */

:root{
  /* ---- Cream palette ---- */
  --ed-bg:        #faf7f1;
  --ed-bg-warm:   #f3ede2;
  --ed-bg-pure:   #ffffff;
  --ed-ink:       #1a1a1a;
  --ed-ink-2:     #5e5852;
  --ed-muted:     #8a8378;
  --ed-line:      rgba(26,26,26,.10);
  --ed-line-2:    rgba(26,26,26,.18);
  --ed-gold:      #a07e3b;
  --ed-gold-2:    #84682c;
  --ed-gold-tint: rgba(160,126,59,.10);
}

/* Override legacy tokens so existing components inherit the cream theme */
:root{
  --bg: var(--ed-bg) !important;
  --bg-2: var(--ed-bg-pure) !important;
  --bg-3: var(--ed-bg-warm) !important;
  --card: var(--ed-bg-pure) !important;
  --card-2: var(--ed-bg-warm) !important;
  --ink: var(--ed-ink) !important;
  --ink-2: var(--ed-ink-2) !important;
  --muted: var(--ed-muted) !important;
  --line: var(--ed-line) !important;
  --line-2: var(--ed-line-2) !important;
  --gold: var(--ed-gold) !important;
  --gold-deep: var(--ed-gold-2) !important;
}

html, body{
  background: var(--ed-bg);
  color: var(--ed-ink);
}

/* ---- Editorial typography (sans-serif, restored) ---- */
body{
  font-family: 'Inter', 'Noto Sans HK', 'Helvetica Neue', system-ui, sans-serif;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  letter-spacing: .005em;
}

h1, h2, h3,
.hsy-hero h1,
.hsy-page-hero h1,
.hsy-section-head h2,
.hsy-section-head h1{
  font-family: 'Inter', 'Noto Sans HK', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ed-ink);
}

.eyebrow, .ed-meta, .eyebrow-w{
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ed-ink-2);
}

/* ============================================================
   ============= EDITORIAL HEADER (centered logo) =============
============================================================ */
.nav{
  background: var(--ed-bg);
  border-bottom: 1px solid var(--ed-line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav.scrolled{
  background: rgba(250,247,241,.96);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}

/* Utility topbar (injected via HTML <div class="ed-topbar">) */
.ed-topbar{
  background: var(--ed-bg-warm);
  border-bottom: 1px solid var(--ed-line);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ed-ink-2);
  font-weight: 500;
}
.ed-topbar-inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ed-topbar a{
  color: var(--ed-ink-2);
  text-decoration: none;
  transition: color .2s ease;
}
.ed-topbar a:hover{color: var(--ed-gold)}
.ed-topbar .sep{color: var(--ed-line-2); user-select:none}

/* Main nav: simple 2-row centered layout (logo top, links bottom) */
.nav .nav-inner{
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  gap: 8px;
  padding-top: 18px;
  padding-bottom: 8px;
  max-width: 1280px;
  position: relative;
}
.nav .logo-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav .logo-img{
  height: 64px !important;
  width: auto !important;
  max-width: none !important;
}

/* Hide the experimental loc/cta mini (kept in HTML for fallback) */
.nav-loc-mini,
.nav-cta-mini{display: none !important}

/* Nav links centered on row 2 — desktop only, mobile burger overrides */
@media(min-width: 881px){
  .nav .nav-links{
    justify-content: center !important;
    flex-wrap: wrap;
    display: flex !important;
    gap: 4px 28px;
    padding-top: 6px;
    border-top: 1px solid var(--ed-line);
    width: 100%;
  }
}
.nav .nav-links > a,
.nav .nav-links .has-dd > a{
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ed-ink);
  padding: 12px 2px;
  position: relative;
  text-decoration: none;
}
.nav .nav-links > a::after,
.nav .nav-links .has-dd > a::after{
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background: var(--ed-gold);
  transition: width .25s ease;
}
.nav .nav-links > a:hover::after,
.nav .nav-links .has-dd:hover > a::after{width: 100%}
.nav .nav-links > a:hover,
.nav .nav-links .has-dd:hover > a{color: var(--ed-gold)}

/* Keep inline 免費評估 CTA visible (outlined editorial style) */
.nav .nav-links .nav-cta{
  background: transparent !important;
  border: 1px solid var(--ed-ink) !important;
  color: var(--ed-ink) !important;
  padding: 8px 14px !important;
  border-radius: 0 !important;
  font-size: 11.5px !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  margin-left: 4px;
}
.nav .nav-links .nav-cta::after{display: none !important}
.nav .nav-links .nav-cta:hover{
  background: var(--ed-ink) !important;
  color: var(--ed-bg) !important;
}

/* Dropdown polish */
.nav .dd-menu{
  background: var(--ed-bg-pure);
  border: 1px solid var(--ed-line-2);
  border-radius: 0;
  box-shadow: 0 18px 40px rgba(0,0,0,.06);
  padding: 12px 0;
}
.nav .dd-menu a{
  color: var(--ed-ink);
  padding: 9px 22px;
  font-size: 13px;
  letter-spacing: .8px;
}
.nav .dd-menu a:hover{
  background: var(--ed-bg-warm);
  color: var(--ed-gold);
}

/* Burger */
.nav .burger{
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.nav .burger span{background: var(--ed-ink)}

/* ---- Mobile header ---- */
@media (max-width: 880px){
  .nav .nav-inner{padding-top: 12px; padding-bottom: 6px}
  .nav .logo-img{height: 52px !important}
}

/* ---- Mobile drawer (fix dark-on-dark issue) ---- */
@media (max-width: 980px){
  .nav-links{
    background: var(--ed-bg-pure) !important;
    border-left: 1px solid var(--ed-line) !important;
    box-shadow: -12px 0 40px rgba(0,0,0,.10) !important;
  }

  /* Auto-expand "服務" dropdown on mobile so user sees all services
     without needing to tap to expand */
  .has-dd .dd-menu{
    max-height: 600px !important;
    padding: 6px 0 14px 14px !important;
    overflow: visible !important;
  }
  .has-dd .caret{transform: rotate(180deg) !important}
  .nav-links > a,
  .nav-links .has-dd > a{
    color: var(--ed-ink) !important;
    border-bottom: 1px solid var(--ed-line) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
  }
  .nav-links > a::after,
  .nav-links .has-dd > a::after{display: none !important}
  .nav-links .has-dd .dd-menu{
    background: var(--ed-bg-warm) !important;
    border: none !important;
    box-shadow: none !important;
  }
  .nav-links .has-dd .dd-menu a{
    color: var(--ed-ink) !important;
    border-bottom: 1px solid var(--ed-line) !important;
    font-size: 14.5px !important;
  }
  .nav-links .nav-cta{
    background: var(--ed-ink) !important;
    color: var(--ed-bg) !important;
    border: 1px solid var(--ed-ink) !important;
    text-transform: uppercase !important;
    letter-spacing: 1.6px !important;
    font-size: 13px !important;
    margin-top: 22px !important;
    min-height: 48px !important;
  }
  .burger{
    background: var(--ed-bg-warm) !important;
    border: 1px solid var(--ed-line) !important;
  }
  .burger.open{background: var(--ed-ink) !important}
  .burger span{background: var(--ed-ink) !important}
  .burger.open span{background: var(--ed-bg) !important}
  .nav-backdrop{
    background: rgba(26,26,26,.45) !important;
  }
}

/* ============================================================
   ============= STICKY NAV (normal flow, sticks on scroll) ====
   Nav sits in normal flow at the top of the page. As the user
   scrolls past it, position:sticky keeps it pinned to the top.
   No body padding-top hack — hero starts right under the nav.
============================================================ */
.nav{
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgba(250,247,241,.97) !important;
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--ed-line) !important;
}
.nav.scrolled{
  background: rgba(250,247,241,.99) !important;
  border-bottom-color: rgba(26,26,26,.12) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.04) !important;
}
.nav.scrolled .logo-img{
  height: 48px !important;
  transition: height .3s ease;
}
.nav .logo-img{transition: height .3s ease}

@media (max-width: 980px){
  .nav{background: var(--ed-bg) !important}
}

/* Hide the gold scroll-progress bar at the very top of the page */
.progress{display: none !important}

/* ============================================================
   ============= FLOATING WHATSAPP BUTTON (right bottom) =======
============================================================ */
.fab-whatsapp{
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 90;
  box-shadow: 0 8px 22px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.10) !important;
  transition: transform .25s ease, box-shadow .25s ease;
  animation: fabPulse 2.4s ease-in-out infinite;
}
.fab-whatsapp:hover{
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 14px 36px rgba(0,0,0,.22), 0 4px 10px rgba(0,0,0,.14) !important;
  animation: none;
}
.fab-whatsapp svg{width: 30px; height: 30px}

@keyframes fabPulse{
  0%, 100%{box-shadow: 0 8px 22px rgba(0,0,0,.18), 0 0 0 0 rgba(37,211,102,.45)}
  50%{box-shadow: 0 8px 22px rgba(0,0,0,.18), 0 0 0 14px rgba(37,211,102,0)}
}
@media(max-width: 600px){
  .fab-whatsapp{
    right: 16px; bottom: 16px;
    width: 52px; height: 52px;
  }
  .fab-whatsapp svg{width: 26px; height: 26px}
}

/* ============================================================
   ============= EDITORIAL HERO (homepage) =====================
   Replace dark overlay hero with cream side-by-side layout.
============================================================ */
.hsy-hero{
  background: var(--ed-bg);
  padding: 32px 24px 64px;
}
.hsy-hero-card{
  background: var(--ed-bg);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  grid-template-rows: auto auto;
  gap: 48px;
  max-width: 1280px;
  margin: 0 auto;
  min-height: auto;
}
.hsy-hero-card .photo{
  position: relative;
  grid-column: 2;
  grid-row: 1 / 3;
  height: 100%;
  min-height: 520px;
}
.hsy-hero-card .photo img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.hsy-hero-card .scrim{display: none}
.hsy-hero-card .overlay{
  position: static;
  grid-column: 1;
  grid-row: 1;
  padding: 48px 0 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 100%;
}
.hsy-hero-card .overlay .eyebrow-w{
  color: var(--ed-muted);
  margin-bottom: 28px;
}
.hsy-hero-card .overlay h1{
  font-family: 'Inter', 'Noto Sans HK', sans-serif;
  font-size: clamp(34px, 4.8vw, 58px);
  line-height: 1.18;
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--ed-ink);
  letter-spacing: -.02em;
}
.hsy-hero-card .overlay h1 span{
  color: var(--ed-gold) !important;
  font-weight: 700;
}
.hsy-hero-card .overlay .lead{
  color: var(--ed-ink-2);
  font-size: 15.5px;
  line-height: 1.85;
  max-width: 520px;
  margin-bottom: 36px;
}

/* Editorial pill rework: outlined rectangles */
.hsy-pill,
.bhu-pill,
.case-cta,
.hsy-pills > a{
  background: transparent !important;
  border: 1px solid var(--ed-ink) !important;
  color: var(--ed-ink) !important;
  border-radius: 0 !important;
  padding: 14px 24px !important;
  font-size: 12px !important;
  letter-spacing: 2.2px !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  font-family: 'Inter', sans-serif !important;
  box-shadow: none !important;
  transition: background .2s ease, color .2s ease !important;
}
.hsy-pill:hover{
  background: var(--ed-ink) !important;
  color: var(--ed-bg) !important;
  transform: none !important;
}
.hsy-pill.amber{
  background: var(--ed-ink) !important;
  color: var(--ed-bg) !important;
  border-color: var(--ed-ink) !important;
}
.hsy-pill.amber:hover{
  background: var(--ed-gold) !important;
  border-color: var(--ed-gold) !important;
  color: var(--ed-bg-pure) !important;
}
.hsy-pill.ghost{
  background: transparent !important;
  color: var(--ed-ink) !important;
  border-color: var(--ed-line-2) !important;
}
.hsy-pill.ghost:hover{
  background: var(--ed-bg-warm) !important;
  color: var(--ed-ink) !important;
}
.hsy-pill.dark{
  background: var(--ed-ink) !important;
  color: var(--ed-bg) !important;
}
.hsy-pill.dark:hover{background: var(--ed-gold) !important}

/* Hero stat card: minimal editorial */
.hsy-stat-card{
  position: static;
  grid-column: 1;
  grid-row: 2;
  background: var(--ed-bg-warm);
  border: 1px solid var(--ed-line);
  border-radius: 0;
  box-shadow: none;
  padding: 28px 28px 24px;
  margin-top: 32px;
  max-width: 520px;
}
.hsy-stat-card h3{
  font-family: 'Inter', 'Noto Sans HK', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ed-ink);
  margin-bottom: 6px;
  letter-spacing: -.01em;
}
.hsy-stat-card p{
  font-size: 13px;
  color: var(--ed-ink-2);
  margin-bottom: 18px;
  line-height: 1.6;
}
.hsy-stat-row{display: grid; grid-template-columns: repeat(3,1fr); gap: 12px}
.hsy-stat .num{
  font-family: 'Inter', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--ed-gold);
  display: block;
  letter-spacing: -.02em;
}
.hsy-stat .lbl{
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ed-muted);
  font-weight: 500;
}

@media(max-width: 900px){
  .hsy-hero-card{grid-template-columns: 1fr; gap: 32px}
  .hsy-hero-card .photo{
    grid-column: 1;
    grid-row: 1;
    min-height: 360px;
  }
  .hsy-hero-card .overlay{
    grid-column: 1;
    grid-row: 2;
    padding-top: 16px;
  }
  .hsy-stat-card{
    grid-column: 1;
    grid-row: 3;
    max-width: 100%;
  }
}

/* ============================================================
   ============= EDITORIAL PAGE HERO (.hsy-page-hero) =========
============================================================ */
.hsy-page-hero{
  background: var(--ed-bg) !important;
  padding: 32px 24px 64px !important;
  border-bottom: 1px solid var(--ed-line);
}
.hsy-page-hero .card{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 48px;
  align-items: center;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 !important;
  overflow: visible !important;
  min-height: auto !important;
}
.hsy-page-hero .card .photo{
  position: relative !important;
  height: 100% !important;
  min-height: 380px;
  border-radius: 0 !important;
  overflow: hidden;
}
.hsy-page-hero .card .photo img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
}
.hsy-page-hero .card .scrim{display: none !important}
.hsy-page-hero .card .text{
  position: static !important;
  padding: 0 !important;
  background: transparent !important;
}
.hsy-page-hero .card .crumb{
  font-size: 10.5px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ed-muted);
  font-weight: 500;
  margin-bottom: 24px;
}
.hsy-page-hero .card h1{
  font-family: 'Inter', 'Noto Sans HK', sans-serif !important;
  font-size: clamp(30px, 4.4vw, 50px) !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  color: var(--ed-ink) !important;
  margin-bottom: 22px !important;
}
.hsy-page-hero .card h1 span{
  color: var(--ed-gold) !important;
  font-weight: 700 !important;
}
.hsy-page-hero .card .lead{
  color: var(--ed-ink-2) !important;
  font-size: 16px !important;
  line-height: 1.85 !important;
  margin-bottom: 32px;
}
@media(max-width: 900px){
  .hsy-page-hero .card{grid-template-columns: 1fr !important; gap: 28px}
  .hsy-page-hero .card .photo{min-height: 320px}
}

/* ============================================================
   ============= SECTION HEADERS — editorial ==================
============================================================ */
.hsy-section-head,
.hsy-section-head.split{
  border-top: 1px solid var(--ed-line);
  padding-top: 32px;
  text-align: left;
  max-width: 1280px;
}
.hsy-section-head h2,
.hsy-section-head h1{
  font-family: 'Inter', 'Noto Sans HK', sans-serif;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ed-ink);
}
.hsy-section-head h2 .accent,
.hsy-section-head h2 span{
  color: var(--ed-gold);
  font-weight: 700;
}
.hsy-section-head p{
  color: var(--ed-ink-2);
  font-size: 15px;
  line-height: 1.85;
}

/* ============================================================
   ============= CARDS / GRIDS — slim editorial ===============
============================================================ */
.case-card,
.svc-card,
.bhu-stage,
.bhu-flow-step,
.bhu-story-card,
.bhu-pw-card,
.cardL,
.team-card,
.cred-card{
  background: var(--ed-bg-pure) !important;
  border: 1px solid var(--ed-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: border-color .2s ease, transform .25s ease !important;
}
.case-card:hover,
.svc-card:hover,
.bhu-stage:hover,
.bhu-flow-step:hover,
.bhu-story-card:hover,
.bhu-pw-card:hover{
  border-color: var(--ed-ink) !important;
  transform: translateY(-2px) !important;
  box-shadow: none !important;
  background: var(--ed-bg-pure) !important;
}
.case-img,
.svc-card .photo{border-radius: 0 !important}
.case-img img,
.svc-card .photo img{border-radius: 0 !important}

/* Tags = thin uppercase labels */
.case-tag,
.bhu-tag,
.bhu-flow-tag,
.bhu-story-tag,
.bhu-pw-tag,
.cred-tag,
.tag-pill{
  background: transparent !important;
  border: 1px solid var(--ed-line-2) !important;
  border-radius: 0 !important;
  color: var(--ed-ink-2) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  font-weight: 500 !important;
  padding: 4px 10px !important;
}

/* Dark sections (e.g. emergency band, flow): keep dark but use warm dark */
.hsy-dark,
.bhu-flow,
.bhu-final-cta{
  background: #1a1815 !important;
  color: var(--ed-bg) !important;
  border-radius: 0 !important;
  border: 1px solid var(--ed-line);
}
.bhu-flow .bhu-flow-step{
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.10) !important;
}
.bhu-flow .bhu-flow-step:hover{
  border-color: var(--ed-gold) !important;
  background: rgba(255,255,255,.05) !important;
}
.bhu-flow .bhu-flow-body h4{color: var(--ed-bg)}
.bhu-flow .bhu-flow-body p{color: rgba(255,255,255,.65)}
.bhu-flow .bhu-flow-num{
  background: rgba(160,126,59,.15);
  border-color: rgba(160,126,59,.4);
  color: #d4b478;
}

/* ============================================================
   ============= TIMELINE / TIMELINE-GRID =====================
============================================================ */
.bhu-timeline{
  background: var(--ed-bg);
  padding: 64px 24px;
}
.bhu-timeline-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 28px;
}
.bhu-stage{
  padding: 28px 26px !important;
  background: var(--ed-bg-pure) !important;
  border: 1px solid var(--ed-line) !important;
}
.bhu-stage.hot{
  background: var(--ed-bg-warm) !important;
  border-color: var(--ed-gold) !important;
}
.bhu-stage h3{
  font-family: 'Inter', 'Noto Sans HK', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--ed-ink);
  letter-spacing: -.01em;
  margin: 10px 0 10px;
}
.bhu-date{
  font-size: 10.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ed-gold);
  font-weight: 500;
  margin-bottom: 4px;
}
.bhu-stage p{color: var(--ed-ink-2); font-size: 14px; line-height: 1.75}

@media(max-width: 880px){
  .bhu-timeline-grid{grid-template-columns: 1fr}
}

/* ============================================================
   ============= CTA BAND — editorial light card ==============
============================================================ */
.cta-band{
  padding: 56px 24px 72px !important;
  background: var(--ed-bg) !important;
}
.cta-band-card,
.cta-band-inner{
  background: var(--ed-bg-warm) !important;
  border: 1px solid var(--ed-line) !important;
  border-radius: 0 !important;
  padding: 56px 32px !important;
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
  box-shadow: none !important;
  color: var(--ed-ink) !important;
}
.cta-band-card::before,
.cta-band-card::after{display: none !important}
.cta-band-inner{padding: 56px 32px !important; position: relative; z-index: 1}
/* If inner is wrapped in card, just clear inner card styles */
.cta-band-card .cta-band-inner{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.cta-band h3,
.cta-band-card h3{
  font-size: clamp(22px, 2.8vw, 30px) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--ed-ink) !important;
  margin-bottom: 14px !important;
  letter-spacing: -.01em;
}
.cta-band h3 strong,
.cta-band-card h3 strong{
  color: var(--ed-gold) !important;
  background: transparent !important;
  -webkit-text-fill-color: var(--ed-gold) !important;
  font-weight: 700;
}
.cta-band p,
.cta-band-card p{
  font-size: 15px !important;
  line-height: 1.85 !important;
  color: var(--ed-ink-2) !important;
  margin-bottom: 28px !important;
  max-width: 640px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.cta-band .btn,
.cta-band-card .btn{
  border-radius: 0 !important;
  padding: 14px 24px !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}
.cta-band .btn-primary,
.cta-band-card .btn-primary{
  background: var(--ed-ink) !important;
  border: 1px solid var(--ed-ink) !important;
  color: var(--ed-bg) !important;
}
.cta-band .btn-primary:hover{background: var(--ed-gold) !important; border-color: var(--ed-gold) !important}
.cta-band .btn-ghost,
.cta-band-card .btn-ghost{
  background: transparent !important;
  border: 1px solid var(--ed-ink) !important;
  color: var(--ed-ink) !important;
}
.cta-band .btn-ghost:hover{background: var(--ed-ink) !important; color: var(--ed-bg) !important}

/* ============================================================
   ============= FOOTER — slim editorial =======================
============================================================ */
footer,
.site-footer,
.foot{
  background: var(--ed-bg-warm) !important;
  color: var(--ed-ink) !important;
  border-top: 1px solid var(--ed-line);
  padding: 60px 0 24px;
}
footer::before,
.site-footer::before,
.foot::before{display: none !important}

/* Body text */
footer p, .site-footer p, .foot p,
footer li, .site-footer li, .foot li{
  color: var(--ed-ink) !important;
}
footer a, .site-footer a, .foot a{
  color: var(--ed-ink) !important;
  text-decoration: none;
}
footer a:hover, .site-footer a:hover, .foot a:hover{color: var(--ed-gold) !important}

/* Column headings */
.foot-grid h5,
footer h5,
.site-footer h5{
  color: var(--ed-gold) !important;
  font-size: 11px !important;
  letter-spacing: 2.2px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  margin-bottom: 18px !important;
}

/* Footer brand block (logo + tag) */
.foot-brand{
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
}
.foot-brand img{
  filter: none !important;
  max-width: 200px;
  height: auto;
}
.foot-brand .zh{color: var(--ed-ink) !important; font-weight: 700; font-size: 15px}
.foot-brand .en{
  color: var(--ed-gold) !important;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
}

/* Bottom bar */
.foot-bar{
  border-top: 1px solid var(--ed-line) !important;
  color: var(--ed-ink-2) !important;
  padding-top: 20px !important;
}
.foot-bar a{
  color: var(--ed-ink-2) !important;
}
.foot-bar a:hover{color: var(--ed-gold) !important}

/* Strong / active link in footer */
.foot-grid a strong{color: var(--ed-gold) !important; font-weight: 700}

/* ============================================================
   ============= SELF-CHECK FORM polish =======================
============================================================ */
.bhu-selfcheck{
  background: var(--ed-bg-warm) !important;
  border: 1px solid var(--ed-line) !important;
  border-radius: 0 !important;
}
.bhu-selfcheck-form{
  background: var(--ed-bg-pure) !important;
  border: 1px solid var(--ed-line) !important;
  border-radius: 0 !important;
}
.bhu-sc-options label{
  border-radius: 0 !important;
  border-color: var(--ed-line) !important;
}
.bhu-sc-contact{
  background: var(--ed-ink) !important;
  border-radius: 0 !important;
}

/* ============================================================
   ============= FAQ — editorial =============================
============================================================ */
.bhu-faq{
  background: var(--ed-bg) !important;
  border: none !important;
  border-radius: 0 !important;
  border-top: 1px solid var(--ed-line) !important;
}
.bhu-faq .faq-item{
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--ed-line) !important;
  border-radius: 0 !important;
}
.bhu-faq .faq-item:last-child{border-bottom: none !important}
.bhu-faq .faq-item:hover{
  background: transparent !important;
  border-color: var(--ed-line) !important;
  border-bottom-color: var(--ed-ink) !important;
}
.bhu-faq .faq-q{
  font-family: 'Inter', 'Noto Sans HK', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -.005em !important;
}
.bhu-faq .faq-q .icon{font-family: 'Inter', sans-serif !important}

/* ============================================================
   ============= UTILITIES =====================================
============================================================ */
.ed-rule{
  display: block;
  width: 100%;
  border-top: 1px solid var(--ed-line);
  margin: 36px 0;
}
.ed-eyebrow{
  font-size: 10.5px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ed-muted);
  font-weight: 500;
}

/* Disable distracting glow/shadow on cards & sections (selective) */
.case-card, .svc-card, .bhu-stage, .bhu-story-card, .bhu-pw-card,
.cardL, .team-card, .cred-card, .bhu-selfcheck-form, .bhu-flow-step,
.hsy-stat-card, .hsy-hero-card, .page-hero, .bhu-final-cta,
.hsy-dark, .bhu-timeline, .bhu-selfcheck, .bhu-faq, .bhu-founder,
.bhu-projects-wall, .bhu-flow, footer, .site-footer{
  box-shadow: none !important;
}

/* Re-enable subtle shadow only on dropdown menu */
.nav .dd-menu{box-shadow: 0 18px 40px rgba(0,0,0,.06) !important}

/* ---- Mobile topbar: hide separators, smaller text ---- */
@media (max-width: 600px){
  .ed-topbar-inner{
    font-size: 10px;
    letter-spacing: 1.4px;
    padding: 6px 16px;
    gap: 8px;
  }
  .ed-topbar-inner > span:first-child,
  .ed-topbar-inner > span:last-child{display: none}
  .ed-topbar-inner .sep:first-of-type{display: none}
}

/* ---- Hide aside stat card on legacy hero overlay if page doesn't fit ---- */
.hsy-hero-card .scrim{display: none !important}

/* ---- Section padding rhythm ---- */
.bhu-timeline,
.bhu-selfcheck,
.bhu-flow,
.bhu-faq,
.bhu-final-cta,
.bhu-founder,
.bhu-projects-wall{
  border-radius: 0 !important;
  margin: 0 auto !important;
  max-width: 1280px;
  padding: 64px 32px !important;
}
@media(max-width: 680px){
  .bhu-timeline, .bhu-selfcheck, .bhu-flow, .bhu-faq,
  .bhu-final-cta, .bhu-founder, .bhu-projects-wall{
    padding: 44px 22px !important;
  }
}

/* ---- Hero: remove old radius/border ---- */
.hsy-hero-card{border: none !important}

/* ---- Accent gold across all heading spans (no italic) ---- */
h1 .accent, h2 .accent, h3 .accent,
.hsy-hero h1 span, .hsy-page-hero h1 span,
.hsy-section-head h2 span{
  font-weight: 700 !important;
  color: var(--ed-gold) !important;
}

/* ---- Article body editorial fonts (sans-serif restored) ---- */
.article-body h2, .article-body h3, .article-body h4{
  font-family: 'Inter', 'Noto Sans HK', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}
.article-body p, .article-body li{
  color: var(--ed-ink-2) !important;
  font-size: 16px !important;
  line-height: 1.85 !important;
}

/* ---- Image rounded corners removed for editorial look ---- */
img{border-radius: 0 !important}
.logo-img{border-radius: 0 !important}

/* ---- Hero stat numbers: align baseline ---- */
.hsy-stat{display: flex; flex-direction: column; gap: 4px}

/* ============================================================
   ============= PHOTO WALL — masonry editorial ===============
============================================================ */
.photo-wall{
  column-count: 4;
  column-gap: 16px;
  margin-top: 24px;
}
.photo-wall figure{
  break-inside: avoid;
  margin: 0 0 16px 0;
  background: var(--ed-bg-warm);
  border: 1px solid var(--ed-line);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.photo-wall figure:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
}
.photo-wall figure img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
@media (max-width: 1100px){
  .photo-wall{column-count: 3}
}
@media (max-width: 780px){
  .photo-wall{column-count: 2; column-gap: 10px}
  .photo-wall figure{margin-bottom: 10px}
}
@media (max-width: 480px){
  .photo-wall{column-count: 2}
}

/* ============================================================
   CASE GALLERY (5-image per case, with thumbnail strip + lightbox)
   ============================================================ */
.case-gallery{
  position: relative;
  display: block;
  background: var(--ed-bg-pure, #faf7f1);
}
.case-gallery-main{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--ed-bg, #f3eee6);
  overflow: hidden;
  cursor: zoom-in;
}
.case-gallery-main img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
  transition: opacity .28s ease, transform .6s ease, filter .3s ease;
  filter: contrast(1.02);
}
.case-gallery-main.is-loading img{opacity: .35}
.case-card:hover .case-gallery-main img{transform: scale(1.03)}
.case-gallery-main::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,.18) 100%);
  pointer-events: none;
}
.case-gallery-main::before{
  content: '⤢';
  position: absolute;
  right: 10px; top: 10px;
  z-index: 2;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  font-size: 14px; color: #fff;
  background: rgba(0,0,0,.45);
  border-radius: 999px;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.case-card:hover .case-gallery-main::before{opacity: 1}

.case-gallery-thumbs{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 4px;
  background: var(--ed-bg-pure, #faf7f1);
  border-top: 1px solid var(--ed-line, rgba(26,26,26,.08));
}
.case-gallery-thumbs .thumb{
  position: relative;
  padding: 0;
  margin: 0;
  background: var(--ed-bg, #f3eee6);
  border: 1px solid transparent;
  border-radius: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  transition: border-color .2s ease, transform .2s ease;
}
.case-gallery-thumbs .thumb img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: .65;
  transition: opacity .2s ease, transform .35s ease;
  border-radius: 0 !important;
}
.case-gallery-thumbs .thumb:hover img,
.case-gallery-thumbs .thumb:focus-visible img{opacity: 1}
.case-gallery-thumbs .thumb:hover{transform: translateY(-1px)}
.case-gallery-thumbs .thumb.is-active{
  border-color: var(--ed-gold, #b08a3e);
}
.case-gallery-thumbs .thumb.is-active img{opacity: 1}
.case-gallery-thumbs .thumb.is-active::after{
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--ed-gold, #b08a3e);
}

@media (max-width: 480px){
  .case-gallery-thumbs{gap: 3px; padding: 3px}
}

/* ===== LIGHTBOX (click main image to enlarge) ===== */
.case-lightbox{
  position: fixed; inset: 0;
  background: rgba(10,10,12,.92);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.case-lightbox.is-open{display: flex}
.case-lightbox-img{
  max-width: min(94vw, 1400px);
  max-height: 86vh;
  width: auto; height: auto;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  user-select: none;
}
.case-lightbox-close,
.case-lightbox-prev,
.case-lightbox-next{
  position: absolute;
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 22px; line-height: 1;
  cursor: pointer;
  border-radius: 999px;
  transition: background .2s ease, transform .2s ease;
}
.case-lightbox-close:hover,
.case-lightbox-prev:hover,
.case-lightbox-next:hover{background: rgba(255,255,255,.18); transform: scale(1.05)}
.case-lightbox-close{top: 18px; right: 18px}
.case-lightbox-prev{left: 18px; top: 50%; transform: translateY(-50%)}
.case-lightbox-next{right: 18px; top: 50%; transform: translateY(-50%)}
.case-lightbox-prev:hover{transform: translateY(-50%) scale(1.05)}
.case-lightbox-next:hover{transform: translateY(-50%) scale(1.05)}
.case-lightbox-counter{
  position: absolute;
  bottom: 22px; left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.8);
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 600;
}
body.lightbox-lock{overflow: hidden}

@media (max-width: 720px){
  .case-lightbox-prev,
  .case-lightbox-next{width: 38px; height: 38px; font-size: 18px}
  .case-lightbox-prev{left: 8px}
  .case-lightbox-next{right: 8px}
  .case-lightbox-close{top: 10px; right: 10px; width: 38px; height: 38px}
}

/* ============================================================
   KNOWLEDGE ARTICLE COVERS
   ============================================================ */
.article-card .article-cover{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  background: #111;
  border-bottom: 1px solid var(--ed-line, rgba(26,26,26,.08));
}
.article-card .article-cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
  transition: transform .6s ease, filter .3s ease;
}
.article-card:hover .article-cover img{
  transform: scale(1.04);
  filter: brightness(.96) contrast(1.04);
}
.article-card .article-cover::after{
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.42) 38%, rgba(0,0,0,.08) 72%),
    linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.36) 100%);
  pointer-events: none;
}
.article-card .article-cover figcaption{
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #fff;
  font-size: clamp(17px, 2.1vw, 24px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.5px;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}
.article-card .article-cover figcaption span{
  display: block;
  max-width: 11em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 560px){
  .article-card .article-cover figcaption{
    left: 16px;
    right: 16px;
    bottom: 14px;
    font-size: 20px;
  }
}