/* =========================================================
   Office-Directory.com — user.css (Homepage rail + readability)
   Target: Office-Hub-like reading comfort (bigger type, wider rail)
   ========================================================= */

/* -----------------------------
   0) TOKENS
------------------------------ */
:root{
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --text: #0f172a;
  --muted: #475569;
  --soft: #64748b;

  --brand: #1d4ed8;
  --brand-2: #0f2a55;

  /* wider rail = less “zoomed out” feeling */
  --rail: 1280px;
  --pad: 28px;

  --radius: 18px;
  --shadow: 0 12px 40px rgba(2,6,23,.08);
}

/* -----------------------------
   1) BASE TYPE (bigger + calmer)
------------------------------ */
html, body{
  font-family: var(--font) !important;
  color: var(--text) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 16.5px; /* key: increases comfort */
}

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

a{ color: var(--brand); text-decoration: none; }
a:hover{ text-decoration: underline; }

strong, b{ font-weight: 600 !important; }

/* Headings: consistent + not “random bold” */
h1,h2,h3,h4,h5,h6{
  font-family: var(--font) !important;
  color: var(--text) !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em;
  line-height: 1.18;
}

/* Hero / section scales */
.home h1, .page-header h1{ font-size: clamp(2.0rem, 3.1vw, 3.0rem) !important; }
.home h2, .page h2{ font-size: clamp(1.45rem, 1.6vw, 2.0rem) !important; }

p{ margin: 0 0 14px; }

/* -----------------------------
   2) LAYOUT RAIL (Homepage)
   Make the whole page feel “filled but restful”
------------------------------ */
body.itemid-101 .container-component{
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* A reliable rail wrapper for all home content */
body.itemid-101 .com-content-article{
  padding: 0 !important;
}

.od-rail{
  width: min(var(--rail), calc(100% - (var(--pad) * 2))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Force YOUR home modules (from your screenshot) onto the same rail */
body.itemid-101 #module-150,
body.itemid-101 #module-148,
body.itemid-101 #module-149,
body.itemid-101 #module-151{
  width: min(var(--rail), calc(100% - (var(--pad) * 2))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Give each module breathing room (reduces “scattered”) */
body.itemid-101 #module-150,
body.itemid-101 #module-148,
body.itemid-101 #module-149,
body.itemid-101 #module-151{
  margin-top: 34px !important;
  margin-bottom: 34px !important;
}

/* -----------------------------
   3) MAIN MENU (stable + readable)
------------------------------ */
.container-header,
.container-headerbar,
.container-header::before{
  background: transparent !important;
  background-image: none !important;
}

/* Ensure title/tagline never becomes white-on-white */
.container-header .site-title,
.container-header .site-title a{
  color: #0b1220 !important;
  font-weight: 700 !important;
}

/* Top menu readable on light backgrounds */
.container-header .navbar{
  --bs-navbar-color: #0b1220 !important;
  --bs-navbar-hover-color: var(--brand) !important;
  --bs-navbar-active-color: #f59e0b !important;
}

.container-header .navbar .nav-link{
  color: var(--bs-navbar-color) !important;
  font-weight: 600 !important;
}

@media (max-width: 991.98px){
  header, .container-header, .navbar{
    background: #fff !important;
  }
  .navbar-collapse{
    background: #fff !important;
    border-top: 1px solid rgba(2,6,23,.08);
  }
}

/* -----------------------------
   4) HERO BANNER (stop it dominating)
------------------------------ */
/* If your hero is a Custom HTML module with image inside */
body.itemid-101 #module-146{
  width: min(var(--rail), calc(100% - (var(--pad) * 2))) !important;
  margin: 14px auto 26px !important;
}

/* Any images inside banner: keep contained + rounded */
body.itemid-101 #module-146 img{
  width: 100% !important;
  height: auto !important;
  border-radius: var(--radius) !important;
  display: block;
}

/* If the hero text is the <h1><span style=...> you pasted, tame it */
body.itemid-101 #module-146 h1{
  margin: 0 !important;
}
body.itemid-101 #module-146 h1 span{
  font-size: clamp(1.4rem, 2.4vw, 2.2rem) !important;
  background: rgba(15,23,42,.55) !important;
  padding: 12px 18px !important;
  border-radius: 14px !important;
}

/* -----------------------------
   5) “Intro / Pitch” block (Module 150)
   Make it look like a proper hero copy section
------------------------------ */
body.itemid-101 #module-150{
  text-align: center;
}
body.itemid-101 #module-150 h1,
body.itemid-101 #module-150 h2{
  margin: 0 0 12px !important;
}
body.itemid-101 #module-150 p{
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* CTA buttons spacing */
body.itemid-101 #module-150 .btn{
  border-radius: 12px !important;
  padding: 10px 16px !important;
  font-weight: 650 !important;
}

/* -----------------------------
   6) Popular locations (Module 148)
   Fix: subtitle drifting left / inconsistent widths
------------------------------ */
body.itemid-101 #module-148{
  text-align: center;
}
body.itemid-101 #module-148 p{
  max-width: 980px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* OSProperty grids often left-align; center the row */
body.itemid-101 #module-148 .row,
body.itemid-101 #module-149 .row{
  justify-content: center !important;
  --bs-gutter-x: 18px;
  --bs-gutter-y: 18px;
}

/* Cards look more comfort */
body.itemid-101 #module-148 .card,
body.itemid-101 #module-149 .card,
body.itemid-101 #module-148 .osp-item,
body.itemid-101 #module-149 .osp-item{
  border-radius: var(--radius) !important;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(2,6,23,.08);
}

/* -----------------------------
   7) Brand statement (Module 151)
------------------------------ */
body.itemid-101 #module-151 .brand-statement{
  background: #fff;
  border: 1px solid rgba(2,6,23,.08);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: var(--shadow);
  text-align: center;
}
body.itemid-101 #module-151 .brand-statement h1{
  font-size: clamp(1.4rem, 1.6vw, 1.9rem) !important;
  margin-bottom: 10px !important;
}
body.itemid-101 #module-151 .brand-statement p{
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* -----------------------------
   8) OS PROPERTY SEARCH (keep your clean UI)
------------------------------ */
.osp-adv-open form{
  background: #fff !important;
  padding: 18px !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 26px rgba(2,6,23,.08) !important;
}

.osp-adv-open input,
.osp-adv-open select{
  background: #fff !important;
  color: var(--text) !important;
  border: 1px solid rgba(2,6,23,.14) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.osp-adv-open input::placeholder{
  color: var(--soft) !important;
  opacity: 1 !important;
}

/* Search button */
.osp-adv-open button,
.osp-adv-open .btn,
.osp-adv-open input[type="submit"]{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  border-radius: 12px !important;
  height: 48px !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

/* City Filters / Hide Filters visible */
.osp-adv-open .more-option,
.osp-adv-open .less-option,
.osp-adv-open #moreoption140,
.osp-adv-open #lessoption140,
.osp-adv-open .more-option span,
.osp-adv-open .less-option span{
  color: #334155 !important;
  opacity: 1 !important;
}

.osp-adv-open .more-option,
.osp-adv-open .less-option{
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid rgba(2,6,23,.14);
  border-radius: 999px;
  background: #f8fafc;
  font-size: 13px;
  font-weight: 700;
}

/* -----------------------------
   9) MOBILE polish
------------------------------ */
@media (max-width: 575.98px){
  html, body{ font-size: 15.8px; }
  body.itemid-101 #module-151 .brand-statement{ padding: 22px 18px; }
}
/* =========================================
   OS Property search — FORCE white card, remove dark/gradient
   Put at VERY BOTTOM of user.css
   ========================================= */

/* 1) Kill any background/gradient on the whole search block + wrappers */
.osp-adv-open,
.osp-adv-open .search-wrapper,
.osp-adv-open .advanced-search,
.osp-adv-open .osp-search,
.osp-adv-open .inner-search,
.osp-adv-open .search-container,
.osp-adv-open fieldset,
.osp-adv-open legend,
.osp-adv-open .card,
.osp-adv-open .card-body,
.osp-adv-open .row,
.osp-adv-open [class*="bg-"]{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* 2) Only the form is the white card */
.osp-adv-open form{
  background: #ffffff !important;
  border: 1px solid rgba(2,6,23,.10) !important;
  border-radius: 18px !important;
  padding: 18px !important;
  box-shadow: 0 14px 44px rgba(2,6,23,.10) !important;
}

/* 3) Make inputs white and readable (avoid inherited dark bg) */
.osp-adv-open input,
.osp-adv-open select{
  background: #fff !important;
  color: #0f172a !important;
  border: 1px solid rgba(2,6,23,.14) !important;
  border-radius: 12px !important;
}

/* 4) If the whole module container is tinted, neutralize it too */
.moduletable.top-a,
.moduletable.top-a > .mod-custom,
.moduletable.top-a > .moduletable{
  background: transparent !important;
}

/* =========================================
   OS Property - Address label visible + reduce blank space
   ========================================= */

/* 1) Force the section title (ADDRESS) visible */
.osp-adv-open .horizontal_section_title,
.osp-adv-open .horizontal_section_title *{
  color: #0f172a !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
}

/* 2) If OSProperty uses legend/title for the row, force visible too */
.osp-adv-open legend,
.osp-adv-open .section-title,
.osp-adv-open .control-label{
  color: #0f172a !important;
  opacity: 1 !important;
}

/* 3) Reduce the “empty gap” above/below the title row */
.osp-adv-open .horizontal_section_title{
  margin: 14px 0 10px !important;
}
.osp-adv-open hr{
  margin: 10px 0 !important;
}

/* =========================================
   GLOBAL 90% RAIL (Cassiopeia / Joomla 6)
   Put at VERY BOTTOM of user.css
   ========================================= */

:root{
  --rail-max: 1480px;
  --rail: min(90vw, var(--rail-max));
  --rail-pad: 32px;
}

/* 1) Undo any previous "100% width" homepage overrides */
.container,
.container-fluid,
.container-component,
.site-grid > .container,
.site-grid > .container-fluid{
  max-width: var(--rail) !important;
  width: var(--rail) !important;
}

/* 2) Keep it centered */
.container,
.container-fluid,
.container-component,
.site-grid > .container,
.site-grid > .container-fluid{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 3) Consistent inner padding */
.container,
.container-fluid,
.container-component{
  padding-left: var(--rail-pad) !important;
  padding-right: var(--rail-pad) !important;
}

/* Mobile: go full width (OfficeHub style) */
@media (max-width: 768px){
  :root{ --rail: 100%; --rail-pad: 16px; }
  .container,
  .container-fluid,
  .container-component{
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =========================================
   HERO BANNER — keep it inside rail
   ========================================= */
body.itemid-101 #module-146,
body.itemid-101 .moduletable#module-146{
  max-width: var(--rail) !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.itemid-101 #module-146 img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 16px !important;
}

/* =========================================
   HEADER FIX: title visible + no overlap on scroll
   (Cassiopeia / Joomla 6)
   Put at VERY BOTTOM of user.css
   ========================================= */

/* 1) Always-visible site title + tagline */
.container-header .site-title,
.container-header .site-title a,
.container-header .site-description,
.container-header .site-description *{
  color: #0f172a !important;       /* deep navy */
  opacity: 1 !important;
  text-shadow: none !important;
}

/* If template uses brand/ tagline classes */
.container-header .navbar-brand,
.container-header .navbar-brand *,
.container-header .brand,
.container-header .brand *{
  color: #0f172a !important;
}

/* 2) Give header a "frosted" background so text never disappears */
.container-header,
.container-headerbar,
header.header{
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid rgba(2,6,23,.08);
}

/* 3) Fix overlap: if header is sticky/fixed, push page content down */
:root{
  --header-safe: 92px; /* adjust if your header is taller */
}

/* Common Cassiopeia wrappers that sit under the header */
.site,
.site-grid,
#site,
#top,
main,
.container-component{
  scroll-margin-top: var(--header-safe);
}

/* Push the first content under the header */
.container-component{
  padding-top: 18px !important;
}

/* If your header is position:fixed or sticky, this prevents cover */
body{
  padding-top: var(--header-safe) !important;
}

/* 4) Navbar link colors on light frosted header */
.container-header .navbar{
  --bs-navbar-color: #0f172a !important;
  --bs-navbar-hover-color: #1d4ed8 !important;
  --bs-navbar-active-color: #f59e0b !important;
}

/* 5) Mobile: keep header solid white (clean) */
@media (max-width: 991.98px){
  :root{ --header-safe: 84px; }

  .container-header,
  .container-headerbar,
  header.header{
    background: #fff !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body{ padding-top: var(--header-safe) !important; }
}

/* =========================================================
   Office-Directory — style Header + Hero System
   ========================================================= */

:root{
  --rail-max: 1480px;
  --rail: min(92vw, var(--rail-max));
  --pad: 32px;

  --ink: #0f172a;
  --muted: #475569;
  --soft: #64748b;
  --line: rgba(2,6,23,.10);

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

  --header-bg: rgba(255,255,255,.92);
  --card-bg: #ffffff;

  --r-lg: 18px;
  --r-md: 14px;

  --shadow: 0 18px 60px rgba(2,6,23,.10);
  --shadow-soft: 0 12px 36px rgba(2,6,23,.08);

  --header-h: 88px;
}

/* ---------------------------
   1) Global rail (site-wide)
   --------------------------- */
.container,
.container-component,
.container-fluid,
.site-grid > .container,
.site-grid > .container-fluid{
  max-width: var(--rail) !important;
  width: var(--rail) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--pad) !important;
  padding-right: var(--pad) !important;
}

/* ---------------------------
   2) Header (always readable)
   --------------------------- */
.container-header,
.container-headerbar,
header.header{
  background: var(--header-bg) !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}

/* Site name + tagline */
.container-header .site-title,
.container-header .site-title a,
.container-header .site-description,
.container-header .site-description *{
  color: var(--ink) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Menu colors */
.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: 520 !important;
}

/* Prevent overlap */
body{ padding-top: var(--header-h) !important; }

/* ---------------------------
   3) Hero banner module card
   Replace #module-146 with your Banner module id if different
   --------------------------- */
#module-146{
  margin: 18px auto 22px !important;
  padding: 0 !important;
}
#module-146 img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow) !important;
}

/* ---------------------------
   4) Homepage sections: clean spacing
   --------------------------- */
body.itemid-101 .moduletable,
body.itemid-101 .mod-custom{
  margin-bottom: 26px !important;
}

/* ---------------------------
   5) Two-column hero content block (custom module)
   --------------------------- */
.od-hero{
  background: transparent;
}
.od-hero__grid{
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 28px;
  align-items: start;
  margin: 6px 0 22px;
}
.od-hero__copy h1{
  color: var(--ink);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: clamp(2.0rem, 3.2vw, 3.0rem) !important;
  margin: 0 0 12px !important;
}
.od-hero__lead{
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.7;
  margin: 0 0 16px;
}
.od-hero__sub{
  color: var(--soft);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 18px;
}
.od-hero__cta{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.od-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 18px;
  border-radius: 12px;
  font-weight: 650;
  text-decoration: none !important;
}
.od-btn--primary{
  background: var(--brand);
  border: 1px solid var(--brand);
  color: #fff !important;
  box-shadow: 0 12px 30px rgba(29,78,216,.20);
}
.od-btn--primary:hover{ filter: brightness(.96); }
.od-btn--ghost{
  background: #fff;
  border: 1px solid rgba(2,6,23,.16);
  color: var(--ink) !important;
}
.od-btn--ghost:hover{ border-color: rgba(29,78,216,.35); }

/* Right side card */
.od-hero__card{
  background: var(--card-bg);
  border: 1px solid rgba(2,6,23,.08);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  padding: 18px;
}
.od-hero__card h3{
  margin: 0 0 10px !important;
  font-size: 1.05rem !important;
  color: var(--ink);
  font-weight: 650 !important;
}
.od-hero__bullets{
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--muted);
}
.od-hero__bullets li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-top: 1px solid rgba(2,6,23,.06);
}
.od-hero__bullets li:first-child{ border-top: 0; }
.od-dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(29,78,216,.25);
  margin-top: 6px;
}

/* ---------------------------
   6) Stats row (custom module)
   --------------------------- */
.od-stats{
  background: #fff;
  border: 1px solid rgba(2,6,23,.08);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  padding: 18px 18px;
}
.od-stats__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.od-stat{
  padding: 14px 14px;
  border-radius: var(--r-md);
  background: rgba(2,6,23,.02);
  text-align: center;
}
.od-stat__num{
  font-size: 1.6rem;
  font-weight: 750;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.od-stat__label{
  font-size: .95rem;
  color: var(--muted);
  margin-top: 4px;
}

/* ---------------------------
   7) How it works (custom module)
   --------------------------- */
.od-how{
  margin-top: 22px;
}
.od-how h2{
  margin: 0 0 12px !important;
  font-weight: 700 !important;
  color: var(--ink);
}
.od-how__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.od-step{
  border: 1px solid rgba(2,6,23,.08);
  border-radius: var(--r-lg);
  padding: 16px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.od-step__kicker{
  font-size: .9rem;
  font-weight: 750;
  color: rgba(29,78,216,.9);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.od-step__title{
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.od-step__text{
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.65;
}

/* ---------------------------
   8) Mobile
   --------------------------- */
@media (max-width: 991.98px){
  :root{ --rail: 100%; --pad: 16px; --header-h: 76px; }

  body{ padding-top: var(--header-h) !important; }

  /* Hero becomes single column */
  .od-hero__grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Stats 2 columns */
  .od-stats__grid{ grid-template-columns: repeat(2, 1fr); }
  .od-how__grid{ grid-template-columns: 1fr; }
}

/* =========================================
   FIX: White gap in header on scroll (Cassiopeia)
   - collapse empty branding wrapper
   - tighten header paddings/heights
   ========================================= */

/* 1) Collapse the whole site-branding block (not only the text) */
.container-header .site-branding,
.container-header .site-title,
.container-header .site-description{
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Some Cassiopeia layouts use different wrappers */
.container-header .headerbar,
.container-header .headerbar-inner,
.container-header .navbar-brand{
  margin: 0 !important;
  padding: 0 !important;
}

/* 2) Tighten header vertical space */
.container-header,
header.header,
.container-headerbar{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Reduce navbar height so no “blank strip” appears */
.container-header .navbar{
  min-height: 64px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* 3) IMPORTANT: remove global body padding-top (it creates visible white band)
   Use padding only on homepage if you still need clearance */
body{ padding-top: 0 !important; }

/* If your header is fixed/sticky and covers the hero, enable this ONE line: */
/* body.itemid-101{ padding-top: 76px !important; } */

/* =========================================================
   Serviced Office Guide (Category Blog) — with LEFT menu
   - Keep overall page stable
   - Constrain ONLY the main content (right column)
   - Works for all languages (no itemid)
   ========================================================= */

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

  --guide-main: 1120px;     /* main content column max width (right side) */
}

/* 1) Keep the page container tidy (not full-bleed), but not too aggressive */
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;
}

/* 2) Constrain MAIN content column so it sits nicely next to left menu */
body.com_content.view-category.layout-blog .com-content-article,
body.com_content.view-category.layout-blog main{
  max-width: none !important;
}

/* Common Joomla 6 layout: right content sits in .com-content-article.
   We cap the blog list + category desc (actual 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;
}

/* Align the readable area to the right side (next to 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;      /* stick to left of main column */
    margin-right: auto !important;  /* keep it from stretching */
  }
}

/* 3) 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;
  }
}
/* =========================================================
   Single Article — Comfortable reading width (all languages)
   Applies to ALL Joomla article views
   ========================================================= */

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

/* Main article body narrower */
body.com_content.view-article .com-content-article {
  max-width: 1100px !important;     /* comfortable text rail */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Typography spacing polish */
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;
}

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

/* MOBILE — full width for readability */
@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;
  }
}

/* =========================================================
   Serviced Office Guide – Layout & Color Upgrade
   Works for:
   - Category Blog page
   - Single Article (Read more)
   - en-GB / zh-CN / zh-TW (language-safe)
   ========================================================= */

/* ---------- Brand color variables (easy future tuning) ---------- */
:root{
  --guide-primary: #1f3a5f;   /* advisory navy */
  --guide-text: #2f3a4a;      /* body text */
  --guide-muted: #6b7280;     /* secondary text */
  --guide-border: #e6e9ee;    /* soft divider */
}

/* =========================================================
   1️⃣ MAIN CONTENT WIDTH (respect left menu)
   ========================================================= */

/* Main content column only (do NOT touch left menu) */
body[class*="serviced-office-guide"] .com-content{
  max-width: 1480px;          /* visual width */
  margin-left: auto;
  margin-right: auto;
}

/* Inner article text – comfortable reading */
body[class*="serviced-office-guide"] .com-content article{
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile safety */
@media (max-width: 992px){
  body[class*="serviced-office-guide"] .com-content,
  body[class*="serviced-office-guide"] .com-content article{
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* =========================================================
   2️⃣ ARTICLE HEADER (prevent “lost page” feeling)
   ========================================================= */

/* Single article title */
.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 main heading */
.com-content-category-blog h1{
  color: var(--guide-primary);
  font-weight: 700;
}

/* =========================================================
   3️⃣ INTRO PARAGRAPH SEPARATOR
   ========================================================= */

.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);
}

/* =========================================================
   4️⃣ BREADCRUMB REFINEMENT
   ========================================================= */

.breadcrumb{
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.breadcrumb a{
  color: var(--guide-primary);
}

/* =========================================================
   5️⃣ CATEGORY BLOG LIST (Read More layout polish)
   ========================================================= */

.com-content-category-blog h2,
.com-content-category-blog h3{
  color: var(--guide-primary);
}

.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;
}

.com-content-category-blog .readmore a:hover{
  background: var(--guide-primary);
  color: #fff;
}

/* =========================================================
   6️⃣ LEFT MENU (subtle, not dominant)
   ========================================================= */

.moduletable ul li a{
  color: var(--guide-primary);
}

.moduletable ul li a:hover{
  text-decoration: underline;
}
/* =========================================================
   Serviced Office Guide – Typography Upgrade
   Visible improvement: font, size, hierarchy
   ========================================================= */

/* ---------- Font stack (CN-safe, professional) ---------- */
body[class*="serviced-office-guide"]{
  --guide-heading-font:
    -apple-system,
    BlinkMacSystemFont,
    "Inter",
    "Segoe UI",
    "PingFang SC",
    "Microsoft YaHei",
    "Noto Sans CJK SC",
    Arial,
    sans-serif;
}

/* ---------- CATEGORY TITLE ---------- */
.com-content-category-blog h1{
  font-family: var(--guide-heading-font);
  font-size: 2.4rem;              /* BIGGER, clear anchor */
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1f3a5f;
  margin-bottom: 1rem;
}

/* ---------- ARTICLE TITLE (single article) ---------- */
.com-content-article .page-header h1{
  font-family: var(--guide-heading-font);
  font-size: 2.6rem;              /* clearly stronger than category */
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #0f2a44;
  margin-bottom: 1.4rem;

  /* visual anchor */
  border-left: 5px solid #1f3a5f;
  padding-left: 16px;
}

/* ---------- SECTION HEADINGS INSIDE ARTICLE ---------- */
.com-content-article h2{
  font-family: var(--guide-heading-font);
  font-size: 1.6rem;
  font-weight: 700;
  color: #1f3a5f;
  margin-top: 2.6rem;
  margin-bottom: 0.8rem;
}

.com-content-article h3{
  font-family: var(--guide-heading-font);
  font-size: 1.25rem;
  font-weight: 600;
  color: #334155;
  margin-top: 2rem;
}

/* ---------- BODY TEXT (readability) ---------- */
.com-content-article p{
  font-size: 1.05rem;
  line-height: 1.75;
  color: #2f3a4a;
}

/* ---------- Intro paragraph emphasis ---------- */
.com-content-article article > p:first-of-type{
  font-size: 1.15rem;
  color: #334155;
}

/* =========================================================
   Serviced Office Guide – Softer Color Palette
   ========================================================= */

/* ---------- CATEGORY TITLE ---------- */
.com-content-category-blog h1{
  color: #2b4a6f;   /* blue-grey, not dark black */
}

/* ---------- ARTICLE TITLE ---------- */
.com-content-article .page-header h1{
  color: #243e5a;   /* softer navy */
  border-left-color: #5b8db8;  /* lighter accent */
}

/* ---------- SECTION HEADINGS ---------- */
.com-content-article h2{
  color: #355f8c;   /* calm advisory blue */
}

.com-content-article h3{
  color: #4b6b8a;   /* muted blue-grey */
}

/* ---------- BODY TEXT ---------- */
.com-content-article p{
  color: #4a5568;   /* slate grey, easy to read */
}

/* ---------- INTRO PARAGRAPH ---------- */
.com-content-article article > p:first-of-type{
  color: #475569;
}

/* ---------- LINKS (Read more, breadcrumbs) ---------- */
.com-content a{
  color: #3b82c4;
}

.com-content a:hover{
  color: #2563a6;
}
/* =========================================================
   GUIDE + ARTICLE HEADER (lighter, not bulky) + Read more CTA
   ========================================================= */

/* --------- 1) CATEGORY BLOG PAGE TITLE (Guide landing) --------- */
body.com_content.view-category.layout-blog .page-header h1,
body.com_content.view-category.layout-blog h1{
  font-size: clamp(1.9rem, 2.6vw, 2.35rem) !important;
  font-weight: 600 !important;              /* lighter than 700/800 */
  letter-spacing: -0.015em !important;
  color: #2b4a6f !important;                /* blue-grey */
  margin: 0 0 14px !important;
}

/* Optional: subtle accent line (thin, not heavy) */
body.com_content.view-category.layout-blog .page-header h1{
  border-left: 3px solid #8ab6d6 !important;
  padding-left: 12px !important;
}

/* --------- 2) SINGLE ARTICLE TITLE (Read more page) --------- */
body.com_content.view-article .page-header h1,
body.com_content.view-article .com-content-article h1{
  font-size: clamp(2.0rem, 3vw, 2.55rem) !important;
  font-weight: 650 !important;              /* reduce “bulky” feel */
  letter-spacing: -0.02em !important;
  color: #2a4766 !important;                /* softer navy (NOT black) */
  line-height: 1.18 !important;
  margin: 10px 0 16px !important;

  /* Replace thick bar with subtle accent */
  border-left: 3px solid #8ab6d6 !important;
  padding-left: 14px !important;
  background: linear-gradient(to right, rgba(138,182,214,0.14), transparent) !important;
  border-radius: 10px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Reduce heavy default heading styles inside articles */
body.com_content.view-article h2{
  font-size: 1.55rem !important;
  font-weight: 600 !important;
  color: #355f8c !important;
  margin-top: 34px !important;
  margin-bottom: 10px !important;
}
body.com_content.view-article h3{
  font-size: 1.18rem !important;
  font-weight: 600 !important;
  color: #4b6b8a !important;
}

/* Body text softer (avoid dull black) */
body.com_content.view-article .com-content-article p{
  color: #4a5568 !important; /* slate */
}

/* --------- 3) READ MORE — make it distinct as a button --------- */
/* (Category blog list page) */
body.com_content.view-category.layout-blog .readmore a,
body.com_content.view-category.layout-blog a.readmore{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(43,74,111,0.20) !important;
  background: rgba(138,182,214,0.16) !important; /* soft blue */
  color: #2b4a6f !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* Hover state */
body.com_content.view-category.layout-blog .readmore a:hover,
body.com_content.view-category.layout-blog a.readmore:hover{
  background: rgba(138,182,214,0.28) !important;
  border-color: rgba(43,74,111,0.35) !important;
  transform: translateY(-1px);
}

/* Add a subtle arrow automatically (no HTML edit) */
body.com_content.view-category.layout-blog .readmore a::after{
  content: "→" !important;
  font-weight: 700 !important;
  opacity: 0.85 !important;
}

/* --------- 4) Breadcrumb spacing (less “lost”) --------- */
body.com_content.view-article nav.breadcrumb,
body.com_content.view-category.layout-blog nav.breadcrumb{
  margin-bottom: 14px !important;
}
body.com_content.view-article nav.breadcrumb a,
body.com_content.view-category.layout-blog nav.breadcrumb a{
  color: #3b82c4 !important;
}

/* ============================
   WHAT WE DO — Landing Page
   Scoped & clean
   ============================ */
/* WHAT WE DO (Homepage) — scoped by Module Class Suffix */
.od-whatwedo-mod .od-whatwedo{
  max-width: 1280px;
  margin: 0 auto;
  padding: 34px 34px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 18px;
}

/* Title = match your "Our role" tone (lighter, not heavy black) */
.od-whatwedo-mod .od-whatwedo__title{
  margin: 0 0 18px;
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #2b4a6f;
}

/* 3-column grid on desktop */
.od-whatwedo-mod .od-whatwedo__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* Cards */
.od-whatwedo-mod .od-whatwedo__card{
  padding: 16px 16px;
  border-radius: 14px;
  background: rgba(2,6,23,.02);
}

/* Heading + text: force consistent font + color */
.od-whatwedo-mod .od-whatwedo h3{
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #000000;
}

.od-whatwedo-mod .od-whatwedo p{
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: #4a5568;
}

/* Mobile -> 1 column */
@media (max-width: 991.98px){
  .od-whatwedo-mod .od-whatwedo{
    padding: 24px 18px;
  }
  .od-whatwedo-mod .od-whatwedo__grid{
    grid-template-columns: 1fr;
  }
}
/* Mobile */
@media (max-width: 768px){
  .od-whatwedo{
    padding: 26px 20px;
  }
}

/* =========================================================
   FIX: Prevent Guide (blog/article) CSS from overriding Homepage
   + Align homepage sections typography & spacing
   Put at VERY BOTTOM of user.css
   ========================================================= */

/* ---------------------------------------------------------
   A) SCOPE GUIDE RULES (only apply on blog/article pages)
   Your previous selectors were too broad (hit homepage too).
--------------------------------------------------------- */

/* 1) Guide title styling — restrict to view-article only */
body.com_content.view-article .com-content-article .page-header h1,
body.com_content.view-article .com-content-article h1{
  font-family: var(--font) !important;
  color: #2a4766 !important;
  font-weight: 650 !important;
}

/* 2) Guide body text — restrict to view-article only */
body.com_content.view-article .com-content-article p{
  color: #4a5568 !important;
  font-size: 1.05rem !important;
  line-height: 1.75 !important;
}

/* 3) Guide links — restrict to com_content pages only */
body.com_content.view-article .com-content a,
body.com_content.view-category.layout-blog .com-content a{
  color: #3b82c4 !important;
}

/* ---------------------------------------------------------
   B) HOMEPAGE TYPOGRAPHY NORMALIZATION
   Align: "Find the right..." / Popular locations / Our role / What we do
--------------------------------------------------------- */

/* Unified vertical spacing for homepage modules */
body.itemid-101 #module-150,
body.itemid-101 #module-148,
body.itemid-101 #module-151,
body.itemid-101 .od-whatwedo,
body.itemid-101 .od-whatwedo-mod{
  margin-top: 34px !important;
  margin-bottom: 34px !important;
}

/* Unified section titles on homepage (lighter, not bulky black) */
body.itemid-101 #module-150 h1,
body.itemid-101 #module-150 h2,
body.itemid-101 #module-148 h2,
body.itemid-101 #module-151 h1,
body.itemid-101 .od-whatwedo__title,
body.itemid-101 .od-whatwedo h1{
  font-family: var(--font) !important;
  color: #2b4a6f !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.18 !important;
}

/* Title scale (consistent) */
body.itemid-101 #module-150 h1{
  font-size: clamp(2.05rem, 3.0vw, 2.85rem) !important; /* Find the right... */
}
body.itemid-101 #module-148 h2,
body.itemid-101 #module-151 h2,
body.itemid-101 .geo-title h1,
body.itemid-101 .brand-statement h1,
body.itemid-101 .od-whatwedo__title,
body.itemid-101 .od-whatwedo h1{
  font-size: clamp(1.55rem, 2.0vw, 1.95rem) !important; /* Popular / Our role / What we do */
}

/* Unified paragraph color + size in these sections */
body.itemid-101 #module-150 p,
body.itemid-101 #module-148 p,
body.itemid-101 #module-151 p,
body.itemid-101 .od-whatwedo p{
  font-family: var(--font) !important;
  color: var(--muted) !important;
  font-size: 1.02rem !important;
  line-height: 1.7 !important;
}

/* ---------------------------------------------------------
   C) WHAT WE DO — ensure 3 columns + match homepage style
   (Works even if you didn't set Module Class Suffix)
--------------------------------------------------------- */

/* If you CAN set Module Class = od-whatwedo-mod, this scopes it nicely.
   But we also support plain .od-whatwedo fallback. */
body.itemid-101 .od-whatwedo,
body.itemid-101 .od-whatwedo-mod .od-whatwedo{
  max-width: min(var(--rail), calc(100% - (var(--pad) * 2))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 34px !important;
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.06) !important;
  border-radius: var(--radius) !important;
}

/* 3-column grid */
body.itemid-101 .od-whatwedo__grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

/* Cards */
body.itemid-101 .od-whatwedo__card{
  background: rgba(2,6,23,.02) !important;
  border-radius: 14px !important;
  padding: 16px !important;
}

/* Inner headings */
body.itemid-101 .od-whatwedo h3{
  font-family: var(--font) !important;
  color: #355f8c !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  margin: 0 0 8px !important;
}

/* Mobile */
@media (max-width: 991.98px){
  body.itemid-101 .od-whatwedo{
    padding: 24px 18px !important;
  }
  body.itemid-101 .od-whatwedo__grid{
    grid-template-columns: 1fr !important;
  }
}
/* ============================
   LANDING — unify typography + spacing
   Keep existing classes (JS/PHP safe)
   Targets:
   .home-hero, .geo-title, .brand-statement, .od-whatwedo
   ============================ */

body.itemid-101{
  --lp-rail: 1280px;
  --lp-pad: 32px;

  --lp-ink: #0f172a;
  --lp-body: #475569;
  --lp-soft: #64748b;

  --lp-title: #2b4a6f;
  --lp-accent: #3b82c4;

  --lp-border: rgba(15,23,42,.08);
  --lp-radius: 18px;
}

/* shared rail + spacing (apply to all 4 sections) */
body.itemid-101 .home-hero,
body.itemid-101 .geo-title,
body.itemid-101 .brand-statement,
body.itemid-101 .od-whatwedo{
  max-width: var(--lp-rail) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--lp-pad) !important;
  padding-right: var(--lp-pad) !important;
}

/* consistent section spacing */
body.itemid-101 .home-hero{ margin-top: 34px !important; margin-bottom: 34px !important; }
body.itemid-101 .geo-title{ margin-top: 34px !important; margin-bottom: 34px !important; text-align: center !important; }
body.itemid-101 .brand-statement{ margin-top: 34px !important; margin-bottom: 34px !important; text-align: center !important; }
body.itemid-101 .od-whatwedo{ margin-top: 34px !important; margin-bottom: 34px !important; }

/* unify headings inside these sections */
body.itemid-101 .home-hero h1,
body.itemid-101 .home-hero h2,
body.itemid-101 .geo-title h2,
body.itemid-101 .brand-statement h2,
body.itemid-101 .od-whatwedo h2{
  color: var(--lp-ink) !important;         /* keep strong headline like hero */
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.18 !important;
}

/* unify paragraph text */
body.itemid-101 .home-hero p,
body.itemid-101 .geo-title p,
body.itemid-101 .brand-statement p,
body.itemid-101 .od-whatwedo p{
  color: var(--lp-body) !important;
  font-size: 1.03rem !important;
  line-height: 1.75 !important;
}

/* unify small subtitles / helper lines */
body.itemid-101 .home-hero small,
body.itemid-101 .geo-title small,
body.itemid-101 .brand-statement small,
body.itemid-101 .od-whatwedo small{
  color: var(--lp-soft) !important;
}

/* unify links */
body.itemid-101 .home-hero a,
body.itemid-101 .geo-title a,
body.itemid-101 .brand-statement a,
body.itemid-101 .od-whatwedo a{
  color: var(--lp-accent) !important;
}

/* mobile */
@media (max-width: 991.98px){
  body.itemid-101{ --lp-pad: 16px; }
  body.itemid-101 .home-hero,
  body.itemid-101 .geo-title,
  body.itemid-101 .brand-statement,
  body.itemid-101 .od-whatwedo{
    margin-top: 26px !important;
    margin-bottom: 26px !important;
  }

  /* =========================================
   LANDING PAGE — SINGLE TYPOGRAPHY SYSTEM
   Applies to ALL landing modules
   en-GB / zh-CN / zh-TW safe
   MUST be at VERY BOTTOM of user.css
   ========================================= */

:root{
  --lp-font:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Inter",
    "Helvetica Neue",
    Arial,
    "PingFang SC",
    "PingFang TC",
    "Microsoft YaHei",
    "Microsoft JhengHei",
    "Noto Sans CJK SC",
    "Noto Sans CJK TC",
    sans-serif;

  --lp-title: #0f172a;
  --lp-lead:  #475569;
  --lp-text:  #4a5568;
}

/* Scope ONLY landing page modules */
.home-hero,
.geo-title,
.brand-statement,
.od-whatwedo,
.home-landing-text{
  font-family: var(--lp-font) !important;
}

/* Main landing titles */
.home-hero h1,
.geo-title h2,
.brand-statement h2,
.od-whatwedo h2{
  color: var(--lp-title) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Lead / subtitle */
.home-hero .lead,
.geo-title p,
.brand-statement .brand-text{
  color: var(--lp-lead) !important;
  font-size: 1.05rem;
  line-height: 1.7;
}

/* Body text */
.home-hero p,
.brand-statement p,
.od-whatwedo p{
  color: var(--lp-text) !important;
  font-size: 1rem;
  line-height: 1.75;
}
  /* =====================================
   Office-Directory Coverage Counter
   ===================================== */

/* HARD TEST: force counter layout */
.od-counter{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 32px !important;
  max-width: 1000px !important;
  margin: 56px auto !important;
  text-align: center !important;
  background: #ffeeee !important; /* test */
  padding: 24px !important;       /* test */
}

.od-count{
  display:block !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  color:#0f172a !important;
}

.od-label{
  display:block !important;
  margin-top: 8px !important;
  font-size: 14.5px !important;
  color:#64748b !important;
}
<style>
  /* Office-Directory Counter (self-contained) */
  .od-counter{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:32px !important;
    max-width:1000px !important;
    margin:56px auto !important;
    text-align:center !important;
    padding:8px !important;
  }
  .od-counter-item{ padding:12px 8px !important; }
  .od-count{
    display:block !important;
    font-size:42px !important;
    font-weight:700 !important;
    color:#0f172a !important;
    line-height:1.1 !important;
  }
  .od-label{
    display:block !important;
    margin-top:10px !important;
    font-size:14.5px !important;
    color:#64748b !important;
    letter-spacing:.01em !important;
  }
  @media (max-width:768px){
    .od-counter{ grid-template-columns:1fr !important; gap:24px !important; }
  }
</style>

/* ===== Section title accent bar ===== */
.od-section-title{
  position: relative;
}

.od-section-title::after{
  content:'';
  display:block;
  width:56px;
  height:4px;
  background:#2F6FED;
  border-radius:99px;
  margin:10px auto 0;
}

//Whatsapp button//
.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 90px;
}