/* =========================================================
   Office-Directory.com — user.css (Cleaned + grouped)
   - Removed <style> wrappers (user.css should be pure CSS)
   - Scoped “Guide” styles to avoid affecting whole site
   ========================================================= */

/* =========================================================
   GLOBAL DESIGN FOUNDATION (Corporate)
   - Put at TOP of user.css
   - Minimal, stable, site-wide
   ========================================================= */

/* ========== GLOBAL FONT SYSTEM (ONE SOURCE OF TRUTH) ========== */
/* =========================================================
   GLOBAL DESIGN FOUNDATION (Corporate) — CLEAN
   Put at TOP of user.css
   ========================================================= */

:root{
  /* Font */
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue",
               "Segoe UI", Roboto, Arial, "Noto Sans",
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  /* Type */
  --fs-base: 16.5px;
  --lh-base: 1.68;

  --h1: clamp(2.0rem, 3.0vw, 2.8rem);
  --h2: clamp(1.45rem, 1.8vw, 2.0rem);
  --h3: clamp(1.20rem, 1.2vw, 1.55rem);

  /* Colors */
  --ink: #0f172a;
  --text: #334155;
  --muted: #64748b;
  --line: rgba(2,6,23,.10);

  --brand: #1d4ed8;
  --brand-600: #1e40af;
  --active: #f59e0b;

  --bg: #ffffff;

  /* Radius / shadow */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;

  --shadow-soft: 0 10px 30px rgba(2,6,23,.08);

  /* Rail (safe) */
  --rail-max: 1480px;
  --rail: min(92vw, var(--rail-max));
  --pad: 24px;
}

/* Base typography */
html, body{
  font-family: var(--font-sans) !important;
  font-size: var(--fs-base) !important;
  line-height: var(--lh-base) !important;
  color: var(--text) !important;
  background: var(--bg) !important;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

p, li{ color: var(--text) !important; }
small, .text-muted{ color: var(--muted) !important; }

/* Headings */
h1,h2,h3,h4,h5,h6{
  font-family: var(--font-sans) !important;
  color: var(--ink) !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em;
  line-height: 1.18;
}
h1{ font-size: var(--h1) !important; }
h2{ font-size: var(--h2) !important; }
h3{ font-size: var(--h3) !important; }

/* Force UI elements to same font */
.navbar, .nav-link, .btn, button,
input, select, textarea,
.card, .breadcrumb, .page-header{
  font-family: var(--font-sans) !important;
}

/* Links / buttons */
a{ color: var(--brand); text-decoration: none; }
a:hover{ color: var(--brand-600); text-decoration: underline; }
.btn, button, input[type="submit"]{ border-radius: var(--r-sm) !important; }

/* Content rail (SAFER: only main content) */
main .container-component{
  max-width: var(--rail) !important;
  padding-left: var(--pad) !important;
  padding-right: var(--pad) !important;
}

/* Card polish */
.card{
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-soft);
}

/* Header (frosted light) */
.container-header,
.container-headerbar,
header.header{
  background: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}
.container-header .navbar{
  --bs-navbar-color: var(--ink) !important;
  --bs-navbar-hover-color: var(--brand) !important;
  --bs-navbar-active-color: var(--active) !important;
}
.container-header .navbar .nav-link{ font-weight: 600 !important; }

/* Mobile */
@media (max-width: 575.98px){
  :root{ --fs-base: 15.8px; --pad: 16px; }
}

/* =========================================================
   A) Advisory Page (page-so-advisory)
   ========================================================= */

/* ----- Layout container ----- */
body.page-so-advisory .so-adv{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 22px 44px;
}

/* ----- Base typography ----- */
body.page-so-advisory .so-adv p,
body.page-so-advisory .so-adv li{
  font-size: 1.06rem;
  line-height: 1.75;
  color: #374151;
}
body.page-so-advisory .so-adv h2{
  font-size: 1.65rem;
  font-weight: 650;
  margin: 36px 0 12px;
  color: #111827;
}

body.page-so-advisory .so-hero-title{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(29,78,216,.14), rgba(29,78,216,.06));
  border: 1px solid rgba(29,78,216,.18);
}

/* ----- Hero ----- */
body.page-so-advisory .so-hero{
  padding: 18px 0 28px;
  border-bottom: 1px solid rgba(0,0,0,.12);
  margin-bottom: 18px;
}
body.page-so-advisory .hero-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 34px;
  align-items: center;
}
body.page-so-advisory .hero-lead{
  font-size: 1.18rem;
  line-height: 1.7;
  margin: 0 0 14px;
  color: #1f2937;
  max-width: 62ch;
}
body.page-so-advisory .hero-note{
  margin: 12px 0 0;
  color: #6b7280;
  font-size: .98rem;
}
body.page-so-advisory .hero-cta{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}
body.page-so-advisory .hero-cta a{
  display: inline-block;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 650;
  text-decoration: none;
}
body.page-so-advisory .hero-cta .btn-primary{
  background: #1d4ed8;
  color: #fff;
  border: 1px solid #1d4ed8;
  box-shadow: 0 10px 26px rgba(29,78,216,.18);
}
body.page-so-advisory .hero-cta .btn-ghost{
  background: #fff;
  color: #0f172a;
  border: 1px solid rgba(29,78,216,.22);
}
body.page-so-advisory .hero-cta .btn-ghost:hover{
  border-color: rgba(29,78,216,.45);
}


/* ----- Content images (between sections) ----- */
body.page-so-advisory figure.advisory-figure{
  margin: 22px 0 26px;
}
body.page-so-advisory img.advisory-image{
  width: 100%;
  height: 360px;          /* mid-page image: keep restrained */
  object-fit: cover;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
}
body.page-so-advisory figure.advisory-figure figcaption{
  margin-top: 10px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #6b7280;
}

/* ----- Decision 2-column cards ----- */
body.page-so-advisory .decision-columns{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 14px;
}
body.page-so-advisory .decision-card{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 18px 18px 14px;
  background: #fff;
}

/* ----- Principle line (simple + stable) ----- */
body.page-so-advisory .decision-principle{
  margin: 12px 0 16px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: #111827;
}

/* ----- Key Considerations (grey cards) ----- */
body.page-so-advisory .kc-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}
body.page-so-advisory .kc-card{
  background: #f7f8fa;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 18px 18px 16px;
}
body.page-so-advisory .kc-card h4{
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 650;
  color: #111827;
}
body.page-so-advisory .kc-card p{
  margin: 0;
  color: #4b5563;
  line-height: 1.65;
}

/* ----- How We Support (4-step flow) ----- */
body.page-so-advisory .support-flow{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 16px;
}
body.page-so-advisory .support-step{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
body.page-so-advisory .step-badge{
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.22);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 650;
  line-height: 1;
  margin-top: 2px;
}
body.page-so-advisory .step-body h4{
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 650;
  color: #111827;
}
body.page-so-advisory .step-body p{
  margin: 0;
  color: #4b5563;
  line-height: 1.6;
}
body.page-so-advisory .support-footnote{
  margin: 18px 0 0;
  color: #6b7280;
  max-width: 80ch;
}

/* ----- Page rhythm: stable spacing + optional banding ----- */
body.page-so-advisory .advisory-section{
  margin: 0 !important;              /* prevent stacking gaps */
  padding: 44px 0 !important;        /* single source of truth */
  background: transparent;
  border: 0;
}

/* If you want grey banding, add class="advisory-section is-alt" in HTML */
body.page-so-advisory .advisory-section.is-alt{
  background: #f7f9fc;
  border-top: 1px solid rgba(15,23,42,.06);
  border-bottom: 1px solid rgba(15,23,42,.06);
}

/* Headings inside section */
body.page-so-advisory .advisory-section h2{
  margin: 0 0 18px !important;
}

/* Text width */
body.page-so-advisory .advisory-section p{
  max-width: 78ch;
}

/* Ensure page stays white */
body.page-so-advisory,
body.page-so-advisory main,
body.page-so-advisory .com-content,
body.page-so-advisory .com-content-article{
  background: #fff !important;
}
body.page-so-advisory .decision-card,
body.page-so-advisory .kc-card{
  box-shadow: 0 10px 28px rgba(2,6,23,.06);
}

/* ----- Responsive ----- */
@media (max-width: 1200px){
  body.page-so-advisory .support-flow{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px){
  body.page-so-advisory .hero-grid{ grid-template-columns: 1fr; }
  body.page-so-advisory .so-adv{ padding: 0 16px 38px; }
  body.page-so-advisory .decision-columns{ grid-template-columns: 1fr; }
  body.page-so-advisory .kc-grid{ grid-template-columns: 1fr; }
  body.page-so-advisory img.advisory-image{ height: 240px; }
}
@media (max-width: 640px){
  body.page-so-advisory .support-flow{ grid-template-columns: 1fr; }
}


/* =========================================
   Advisory grey background fix
   - keep HERO white
   - prevent full-page grey
   ========================================= */

body.page-so-advisory{
  background: #fff !important;
}

/* Hero 必須永遠白底 */
body.page-so-advisory .so-hero{
  background: transparent !important;
}

/* 防止第一段 section 被 nth-of-type 染灰 */
body.page-so-advisory .advisory-section:first-of-type{
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* 若灰色來自父層（最常見）就直接 reset */
body.page-so-advisory main,
body.page-so-advisory .com-content,
body.page-so-advisory .com-content-article{
  background: transparent !important;
}

/* =========================================================
   B) Serviced Office Guide — Layout (Category Blog with left menu)
   Applies when viewing category blog layout
   ========================================================= */

/* Define comfortable rail sizes */
body.com_content.view-category.layout-blog{
  --guide-page: 70vw;       /* overall width (includes sidebar) */
  --guide-max: 1140px;      /* hard cap on large screens */
  --guide-pad: 24px;
  --guide-main: 1120px;     /* readable column cap */
}

/* Keep the page container tidy (not full-bleed) */
body.com_content.view-category.layout-blog .container-component{
  width: var(--guide-page) !important;
  max-width: var(--guide-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--guide-pad) !important;
  padding-right: var(--guide-pad) !important;
}

/* Ensure inner wrappers don't fight width */
body.com_content.view-category.layout-blog .com-content-article,
body.com_content.view-category.layout-blog main{
  max-width: none !important;
}

/* Cap the blog list + category desc (readable area) */
body.com_content.view-category.layout-blog .category-desc,
body.com_content.view-category.layout-blog .blog-items{
  max-width: var(--guide-main) !important;
}

/* Desktop: keep readable area aligned beside left menu */
@media (min-width: 992px){
  body.com_content.view-category.layout-blog .category-desc,
  body.com_content.view-category.layout-blog .blog-items{
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

/* Mobile: full width, no squeezing */
@media (max-width: 991.98px){
  body.com_content.view-category.layout-blog .container-component{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.com_content.view-category.layout-blog .category-desc,
  body.com_content.view-category.layout-blog .blog-items{
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* =========================================================
   C) Serviced Office Guide — Single Article (Read more)
   Applies when viewing an article
   ========================================================= */

body.com_content.view-article .container-component,
body.com_content.view-article .container{
  max-width: 1200px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

body.com_content.view-article .com-content-article{
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.com_content.view-article .com-content-article h1,
body.com_content.view-article .com-content-article h2,
body.com_content.view-article .com-content-article p{
  margin-top: 1rem;
  margin-bottom: 1rem;
}

body.com_content.view-article .readmore a{
  font-weight: 600 !important;
  text-decoration: underline !important;
}

@media (max-width: 991.98px){
  body.com_content.view-article .container-component,
  body.com_content.view-article .container{
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body.com_content.view-article .com-content-article{
    max-width: 100% !important;
  }
}


/* =========================================================
   D) Serviced Office Guide — Color & UI upgrade
   IMPORTANT: Scoped to Guide pages ONLY
   - Works if you set Page Class Suffix containing 'serviced-office-guide'
   - Also applies to category blog layout as a fallback
   ========================================================= */

/* Guide variables ONLY (scoped) */
body[class*="serviced-office-guide"],
body.com_content.view-category.layout-blog,
body.com_content.view-article{
  --guide-primary: #1f3a5f;
  --guide-text: #2f3a4a;
  --guide-muted: #6b7280;
  --guide-border: #e6e9ee;
}

/* Titles */
body[class*="serviced-office-guide"] .com-content-article .page-header h1,
body.com_content.view-category.layout-blog .com-content-article .page-header h1{
  font-size: 2rem;
  font-weight: 700;
  color: var(--guide-primary);
  margin-bottom: 1.2rem;
  border-left: 4px solid var(--guide-primary);
  padding-left: 14px;
}

/* Category page heading */
body[class*="serviced-office-guide"] .com-content-category-blog h1,
body.com_content.view-category.layout-blog .com-content-category-blog h1{
  color: var(--guide-primary);
  font-weight: 700;
}

/* Intro paragraph separator (single article) */
body[class*="serviced-office-guide"] .com-content-article article > p:first-of-type,
body.com_content.view-article .com-content-article article > p:first-of-type{
  color: var(--guide-text);
  font-size: 1.05rem;
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--guide-border);
}

/* Breadcrumb */
body[class*="serviced-office-guide"] .breadcrumb,
body.com_content.view-category.layout-blog .breadcrumb,
body.com_content.view-article .breadcrumb{
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

body[class*="serviced-office-guide"] .breadcrumb a,
body.com_content.view-category.layout-blog .breadcrumb a,
body.com_content.view-article .breadcrumb a{
  color: var(--guide-primary);
}

/* Read more button */
body[class*="serviced-office-guide"] .com-content-category-blog .readmore a,
body.com_content.view-category.layout-blog .com-content-category-blog .readmore a{
  border: 1px solid var(--guide-border);
  padding: 6px 12px;
  border-radius: 6px;
  color: var(--guide-primary);
  font-size: 0.9rem;
}

body[class*="serviced-office-guide"] .com-content-category-blog .readmore a:hover,
body.com_content.view-category.layout-blog .com-content-category-blog .readmore a:hover{
  background: var(--guide-primary);
  color: #fff;
}

/* Left menu links — scoped (avoid global override) */
body[class*="serviced-office-guide"] .moduletable ul li a,
body.com_content.view-category.layout-blog .moduletable ul li a{
  color: var(--guide-primary);
}

body[class*="serviced-office-guide"] .moduletable ul li a:hover,
body.com_content.view-category.layout-blog .moduletable ul li a:hover{
  text-decoration: underline;
}


/* =========================================================
   HOMEPAGE / LANDING (itemid-101) — Corporate System (SINGLE)
   Replace old "LANDING PAGE" + "Corporate Scale Upgrade" blocks
   ========================================================= */

/* Scope: home only */
body.itemid-101,
body.homepage{
  background: #fff;

body.itemid-101 h2{
  color: #1f3a5f;   /* advisory navy */
}  
  /* Type scale (home only) */
  --home-body: 18px;
  --home-lead: 19.5px;

  --home-h1: clamp(2.6rem, 3.6vw, 3.4rem);
  --home-h2: clamp(1.9rem, 2.4vw, 2.4rem);
  --home-h3: 1.15rem;

  /* Rhythm (reduce empty space) */
  --home-hero-pad-top: 56px;
  --home-hero-pad-bot: 40px;
  --home-section-pad: 56px;
  --home-module-gap: 26px;
}

/* Container discipline (home only) */
body.itemid-101 main .container-component,
body.homepage main .container-component{
  max-width: 1200px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Make text actually bigger (home only) */
body.itemid-101 p,
body.homepage p{
  font-size: 18.5px;      /* real corporate reading size */
  line-height: 1.65;     /* tighter = stronger */
  color: var(--text);
}

/* Lead paragraphs */
body.itemid-101 .lead,
body.homepage .lead,
body.itemid-101 .section-lead,
body.homepage .section-lead{
  font-size: var(--home-lead) !important;
  line-height: 1.7 !important;
  color: var(--muted) !important;
  max-width: 72ch;
}

/* Headings */
body.itemid-101 h1,
body.homepage h1{
  font-size: var(--home-h1) !important;
  line-height: 1.12 !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em;
  color: var(--ink) !important;
  margin-bottom: 14px !important;
}

body.itemid-101 h2,
body.homepage h2{
  font-size: clamp(2.1rem, 2.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
}

body.itemid-101 h3,
body.homepage h3{
  font-size: var(--home-h3) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

/* ================================
   HOMEPAGE HERO — Advisory Grade
   ================================ */

body.itemid-101 .lp-hero{
  padding: 88px 0 64px;        /* 放大但唔空 */
}

body.itemid-101 .lp-hero h1{
  font-size: clamp(2.8rem, 3.8vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 20ch;
  margin-bottom: 20px;
  color: var(--ink);
}

body.itemid-101 .lp-hero p{
  font-size: 1.25rem;          /* 關鍵：明顯大咗 */
  line-height: 1.75;
  color: var(--text);
  max-width: 72ch;
  margin-bottom: 26px;
}

body.itemid-101 .lp-hero .btn{
  padding: 14px 22px;
  font-size: 1rem;
  font-weight: 650;
}

/* SECTION RHYTHM */
body.itemid-101 .lp-section,
body.homepage .lp-section{
  padding: 48px 0;   /* tighter, more executive */
}
body.itemid-101 .moduletable,
body.itemid-101 .mod-custom{
  margin-bottom: 32px !important;
}

/* Cards */
body.itemid-101 .lp-card,
body.homepage .lp-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px !important;
  box-shadow: var(--shadow-soft);
}
body.itemid-101 .lp-card p,
body.homepage .lp-card p{
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--text) !important;
    box-shadow: 0 12px 32px rgba(15,23,42,.08);
}

/* Stats */
body.itemid-101 .lp-stat-number,
body.homepage .lp-stat-number{
  font-size: 2.35rem !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
}
body.itemid-101 .lp-stat-label,
body.homepage .lp-stat-label{
  font-size: 1.02rem !important;
  color: var(--muted) !important;
}

/* Testimonials */
body.itemid-101 .lp-quote,
body.homepage .lp-quote{
  font-size: 1.08rem !important;
  line-height: 1.75 !important;
  color: var(--text) !important;
}
body.itemid-101 .lp-quote cite,
body.homepage .lp-quote cite{
  font-size: 0.98rem !important;
  color: var(--muted) !important;
}

/* Reduce empty vertical gaps between modules */
body.itemid-101 .moduletable,
body.itemid-101 .mod-custom{
  margin-bottom: var(--home-module-gap) !important;
}

/* MOBILE */
@media (max-width: 768px){
  body.itemid-101,
  body.homepage{
    --home-body: 16.6px;
    --home-lead: 17.5px;
    --home-hero-pad-top: 46px;
    --home-hero-pad-bot: 34px;
    --home-section-pad: 44px;
  }

  body.itemid-101 .lp-stats,
  body.homepage .lp-stats{
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   HOMEPAGE HEADER — Cleaner corporate white
   ========================================================= */

body.itemid-101 header.header,
body.itemid-101 .container-header,
body.itemid-101 .container-headerbar{
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  : 1px solid rgba(2,6,23,.08) !important;
}

/* =========================================================
   HOMEPAGE HEADINGS — Force single color system
   ========================================================= */

/* 所有 section 標題一律用 ink（深色） */
body.itemid-101 h2,
body.itemid-101 .section-title,
body.itemid-101 .section-heading,
body.itemid-101 .block-title,
body.itemid-101 .mod-title{
  color: var(--ink) !important;
}

/* 若有 span / strong 被染藍，一併拉返黑 */
body.itemid-101 h2 span,
body.itemid-101 h2 strong{
  color: var(--ink) !important;
}

/* 品牌藍只留俾 underline / 裝飾線 */
body.itemid-101 .section-title::after,
body.itemid-101 h2::after{
  background-color: var(--brand) !important;
}

/* =========================================================
   HEADER — Corporate layout + logo visibility
   ========================================================= */

/* 1) Header container: shorter + clearer */
.container-header,
.container-headerbar,
header.header{
  background: rgba(248,250,252,.96) !important;   /* slightly tinted (not pure white) */
  border-bottom: 1px solid rgba(2,6,23,.10) !important;
  box-shadow: 0 8px 24px rgba(2,6,23,.06);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}

/* 2) Reduce header vertical padding (removes “empty space”) */
.container-header .grid-child,
header.header .container-nav{
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* 3) Put logo/title and menu nicely aligned */
.container-header .navbar{
  align-items: center !important;
}

/* 4) If you use Site Title instead of image logo */
.container-header .site-title,
.container-header .site-title a{
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
  font-size: 18px !important;
  text-transform: none !important;
}

/* Tagline smaller (optional) */
.container-header .site-description{
  color: var(--muted) !important;
  font-size: 12.5px !important;
  margin-top: 2px !important;
}

/* 5) Menu typography: more corporate */
.container-header .navbar .nav-link{
  font-weight: 650 !important;
  font-size: 15.5px !important;
  padding: 10px 12px !important;
}

/* Active / hover */
.container-header .navbar .nav-link:hover{ color: var(--brand) !important; }
.container-header .navbar .nav-link.active{ color: var(--brand) !important; }

/* 6) If there IS a logo image, control its size */
.container-header .navbar-brand img,
.container-header img.logo,
.container-header .site-logo img{
  height: 36px !important;
  width: auto !important;
  display: block !important;
}

/* Give logo a background pill (optional, makes it always visible) */
.container-header .navbar-brand,
.container-header .site-logo{
  background: #fff !important;
  border: 1px solid rgba(2,6,23,.08) !important;
  border-radius: 12px !important;
  padding: 6px 10px !important;
}

/* =========================================================
   HEADER — Reduce Top Bar Height (Corporate Compact)
   ========================================================= */

/* Kill excess vertical height */
header.header,
.container-header,
.container-headerbar{
  min-height: unset !important;
}

/* Reduce vertical padding */
header.header .container-nav,
.container-header .grid-child{
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Navbar itself tighter */
.container-header .navbar{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 48px !important;   /* ← target height */
}

/* Menu items tighter */
.container-header .navbar .nav-link{
  padding: 8px 12px !important;
  line-height: 1.2 !important;
}

/* Logo size control */
.container-header .navbar-brand img,
.container-header .site-logo img{
  height: 32px !important;
}

/* HOMEPAGE — tighter rhythm */
body.itemid-101 .lp-section,
body.homepage .lp-section{
  padding: 56px 0 !important; /* was 72 */
}

body.itemid-101 .moduletable,
body.itemid-101 .mod-custom{
  margin-bottom: 32px !important; /* was 48 */
}

body.itemid-101 h1,
body.itemid-101 h2,
body.itemid-101 h3{
  color: var(--ink) !important;   /* navy */
}
body.itemid-101 .title-underline,
body.itemid-101 .section-underline,
body.itemid-101 .lp-underline{
  background: var(--brand) !important;
}

/* ========== Noosphere Breadcrumb ========== */
.nb-breadcrumb {
  font-size: 14px;
  margin: 12px 0 18px;
}

.nb-breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.nb-breadcrumb li::after {
  content: "›";
  margin-left: 6px;
  color: #9ca3af;
}

.nb-breadcrumb li:last-child::after {
  content: "";
}

.nb-breadcrumb a {
  color: #2563eb;
  text-decoration: none;
}

.nb-breadcrumb .is-current {
  color: #111827;
  font-weight: 600;
}

/* =========================================================
   NOOSPHERE HEADER – CLEAN SINGLE SOURCE (REPLACE ALL OLD)
   Logo + Menu + CTA in ONE LINE (Desktop)
   ========================================================= */

/* A) Reduce header whitespace */
.container-header {
  padding: 10px 0 !important;
}

/* B) Force header inner row as flex */
.container-header .grid-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

/* C) Logo block: remove “box feel” + allow bigger logo */
.container-header .navbar-brand {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 260px !important;
}

/* If your logo is inside a module box, neutralize it */
.container-header .navbar-brand,
.container-header .site-branding,
.container-header .moduletable,
.container-header .card,
.container-header .well {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Actual logo image size (desktop) */
.container-header .navbar-brand img,
.container-header .brand-logo img,
.container-header .site-logo img {
  max-height: 92px !important; /* ✅ bigger: 80–110 都得 */
  width: auto !important;
  height: auto !important;
  display: block !important;
}

/* D) Menu: keep in one row and align middle/right */
.container-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 1 1 auto !important;
}

/* Ensure menu UL stays horizontal */
.container-nav .navbar-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Menu link spacing */
.container-nav .navbar-nav .nav-link {
  padding: 10px 8px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

/* E) CTA area (if you have one) */
.header-cta {
  display: flex !important;
  align-items: center !important;
  margin-left: 14px !important;
}
.header-cta .cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

/* F) Mobile: stack nicely */
@media (max-width: 991.98px) {
  .container-header .grid-child {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .container-header .navbar-brand {
    min-width: auto !important;
  }

  .container-header .navbar-brand img,
  .container-header .brand-logo img,
  .container-header .site-logo img {
    max-height: 54px !important;
  }

  .container-nav {
    width: 100% !important;
    justify-content: space-between !important;
  }

  .container-nav .navbar-nav {
    gap: 14px !important;
    flex-wrap: wrap !important;
  }
}

/* =========================================================
   FINAL HEADER OVERRIDE – TAKE OVER CASSIOPEIA
   Logo | Menu | WhatsApp in ONE LINE
   ========================================================= */

/* 1️⃣ Kill Cassiopeia grid, force flex */
.container-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 24px !important;
}

/* Remove grid behavior */
.container-header > .grid-child {
  display: contents !important;
}

/* 2️⃣ Logo */
.navbar-brand {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.navbar-brand img {
  max-height: 72px !important;   /* ← 你而家理想尺寸 */
  width: auto !important;
  height: auto !important;
}

/* 3️⃣ Menu */
.container-nav {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
}

.container-nav .navbar-nav {
  display: flex !important;
  flex-direction: row !important;
  gap: 24px !important;
  margin: 0 !important;
}

/* 4️⃣ WhatsApp CTA icon */
.container-nav .whatsapp,
.container-nav img[src*="whatsapp"] {
  width: 42px;
  height: 42px;
}

/* 5️⃣ Mobile fallback */
@media (max-width: 991px) {
  .container-header {
    flex-wrap: wrap !important;
  }

  .container-nav {
    width: 100%;
    justify-content: center;
    margin-top: 10px;
  }

  .navbar-brand img {
    max-height: 56px !important;
  }
}

/* =========================================================
   SERVICED OFFICE PAGES — CLEAN CSS
   Applies to:
   - Serviced Office Search: body.itemid-218
   - Find an Office:        body.itemid-138
   Notes:
   - Keeps Top-A and Top-B separate
   - Search bar LEFT aligned
   - Does NOT break OSProperty listing cards
   ========================================================= */


/* =========================================================
   1) INTRO MODULE (ns-intro) — clean, no box, readable
   Apply Module Class Suffix: ns-intro
   ========================================================= */

.ns-intro{
  margin: 14px 0 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Neutralize Joomla module chrome INSIDE ns-intro only */
.ns-intro,
.ns-intro .moduletable,
.ns-intro .module-body,
.ns-intro .module-content,
.ns-intro .mod-custom,
.ns-intro .card,
.ns-intro .card-body,
.ns-intro .well{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ns-intro *:first-child{ margin-top: 0 !important; }
.ns-intro *:last-child{ margin-bottom: 0 !important; }

/* Optional badge */
.ns-intro .ns-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(2,6,23,.12);
  background: rgba(2,6,23,.04);
  color: #0f172a;
  margin: 0 0 10px 0;
}

/* Title */
.ns-intro h1,
.ns-intro h2,
.ns-intro h3{
  margin: 0 0 8px 0 !important;
  font-size: 26px !important;
  line-height: 1.16 !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em;
  color: #0f172a !important;
}

/* Copy */
.ns-intro p{
  margin: 0 !important;
  font-size: 15.5px !important;
  line-height: 1.7 !important;
  color: #475569 !important;
  max-width: 92ch;
}

@media (max-width: 991.98px){
  .ns-intro{ margin: 12px 0 10px !important; }
  .ns-intro h1,.ns-intro h2,.ns-intro h3{ font-size: 20px !important; }
  .ns-intro p{ font-size: 14.5px !important; line-height: 1.65 !important; }
}


/* =========================================================
   2) SEARCH BAR + CTA — safe styling (only our blocks)
   - We target by IDs/classes you already use: #ns-form / .ns-searchcta
   ========================================================= */

/* Remove card look ONLY for our Top-A/Top-B blocks (not listing cards) */
body.itemid-218 .container-top-a .card,
body.itemid-218 .container-top-b .card,
body.itemid-138 .container-top-a .card,
body.itemid-138 .container-top-b .card{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Remove padding that creates “extra space” in those top blocks */
body.itemid-218 .container-top-a .card-body,
body.itemid-218 .container-top-b .card-body,
body.itemid-138 .container-top-a .card-body,
body.itemid-138 .container-top-b .card-body{
  padding: 0 !important;
}

/* Search form: always LEFT aligned */
body.itemid-218 #ns-form,
body.itemid-138 #ns-form{
  margin: 0 !important;
}

/* The inline wrapper div in your HTML: remove auto-centering */
body.itemid-218 #ns-form > div,
body.itemid-138 #ns-form > div{
  margin-left: 0 !important;
  margin-right: auto !important; /* ✅ keep left */
  max-width: 960px !important;
  width: 100% !important;
}

/* If any theme tries to right-align Top-B, force start */
body.itemid-218 .container-top-b,
body.itemid-138 .container-top-b{
  justify-content: flex-start !important;
  text-align: left !important;
}

/* CTA module wrapper */
.ns-searchcta{
  margin: 8px 0 0 !important;
  padding: 0 !important;
}

/* remove <p> spacing around button */
.ns-searchcta p{ margin: 0 !important; }

/* Make CTA always look like a button + fix hover text */
.ns-searchcta a.btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  line-height: 1.1 !important;
}

/* Fix: outline button hover text “disappears” */
.ns-searchcta a.btn:hover,
.ns-searchcta a.btn:focus{
  color: #fff !important;
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
}


/* =========================================================
   3) PAGE LAYOUT — keep Top-A and Top-B separate (NO merging)
   - Top-A: intro text area
   - Top-B: search + CTA area
   - Keep listing area stable
   ========================================================= */

/* Make these pages use same rail width */
body.itemid-218 .container-top-a,
body.itemid-218 .container-top-b,
body.itemid-138 .container-top-a,
body.itemid-138 .container-top-b{
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Top-A spacing */
body.itemid-218 .container-top-a,
body.itemid-138 .container-top-a{
  padding-top: 22px !important;
  padding-bottom: 6px !important;
}

/* Top-B spacing */
body.itemid-218 .container-top-b,
body.itemid-138 .container-top-b{
  padding-top: 8px !important;
  padding-bottom: 12px !important;
}

/* IMPORTANT:
   Keep Top-B as a normal block flow so it won't push search to right.
   Also keep your two “cards” in Top-B stacked (search first, CTA second) */
body.itemid-218 .container-top-b,
body.itemid-138 .container-top-b{
  display: block !important;
}

/* Reduce the “big empty gap” before listing grid (if any) */
body.itemid-218 .container-top-b{ margin-bottom: 10px !important; }
body.itemid-138 .container-top-b{ margin-bottom: 10px !important; }

/* Listing container: keep it stable and NOT affected by our resets */
body.itemid-218 .container-component,
body.itemid-138 .container-component{
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Mobile */
@media (max-width: 991.98px){
  body.itemid-218 .container-top-a,
  body.itemid-218 .container-top-b,
  body.itemid-218 .container-component,
  body.itemid-138 .container-top-a,
  body.itemid-138 .container-top-b,
  body.itemid-138 .container-component{
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Let search wrapper be full width on mobile */
  body.itemid-218 #ns-form > div,
  body.itemid-138 #ns-form > div{
    max-width: 100% !important;
  }
}



/* =========================================================
   FIX: FontAwesome icons turning into hamburger
   ========================================================= */

/* Font Awesome Free (solid/regular) */
.fa, .fas, .far, .fal,
[class^="fa-"], [class*=" fa-"]{
  font-family: "Font Awesome 6 Free" !important;
  font-style: normal !important;
}

/* Solid weight (most Joomla icons) */
.fa, .fas, [class*="fa-"]{
  font-weight: 900 !important;
}

/* Brands */
.fab{
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}