/* ============================================================
   LBG — NAVIGATION + HERO + TYPE SYSTEM
   Loaded last via functions.php, so it overrides style.css.

   Heroes:
     Homepage      dark, wireframe artwork
     Interior      light, quiet
     Case studies  light, metric strip
   ============================================================ */


/* ------------------------------------------------------------
   1. NAVIGATION
   Dark bar on the homepage only. Light everywhere else, since
   the rest of the site now has light heroes.
   ------------------------------------------------------------ */

header#masthead {
  height: auto;
  min-height: 78px;
  padding-top: 14px !important;
  padding-bottom: 10px;
  border-bottom: 0;
  transition: background-color .25s ease, box-shadow .25s ease;
}

/* Homepage: transparent over the dark hero */
.page-template-homepage header#masthead {
  background-color: transparent !important;
  background-image: linear-gradient(
    to bottom,
    rgba(11, 15, 20, 0.55) 0%,
    rgba(11, 15, 20, 0.28) 55%,
    rgba(11, 15, 20, 0) 100%
  );
}

/* Everywhere else: solid dark bar, since heroes are light */
body:not(.page-template-homepage) header#masthead {
  position: relative;
  background-color: #0B0F14 !important;
  background-image: none;
}

body.nav-scrolled header#masthead {
  position: fixed;
  background-color: rgba(11, 15, 20, 0.97) !important;
  background-image: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
  min-height: 66px;
  padding-top: 10px !important;
}

.navbar-brand img {
  width: 158px;
  margin-right: 48px;
  margin-top: 2px;
}

#main-nav li {
  padding-left: 26px;
}

#masthead .navbar-nav > li a {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em;
  opacity: 0.88;
  transition: opacity .15s ease;
}
#masthead .navbar-nav > li a:hover { opacity: 1; }

#masthead .navbar-nav > li.current-menu-item > a,
#masthead .navbar-nav > li.current-menu-parent > a,
#masthead .navbar-nav > li.current-page-ancestor > a {
  opacity: 1;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.55);
}

#masthead .navbar-nav > li.nav-cta { padding-left: 30px; }
#masthead .navbar-nav > li.nav-cta > a {
  border: 1px solid rgba(255, 255, 255, 0.45);
  padding: 9px 18px !important;
  opacity: 1;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
#masthead .navbar-nav > li.nav-cta > a:hover {
  background-color: #fff;
  color: #0B0F14 !important;
  border-color: #fff;
}

.navbar-nav .dropdown-menu {
  margin-top: 12px;
  border: 1px solid rgba(11, 15, 20, 0.12);
  box-shadow: 0 6px 24px rgba(11, 15, 20, 0.14);
  padding: 6px 0;
}
.dropdown-menu li { border-bottom: 0; }
.dropdown-menu li a { padding: 9px 18px !important; font-size: 13.5px !important; }
.dropdown-menu li a:hover { background-color: #F4F6F8; }


/* ------------------------------------------------------------
   2. HOMEPAGE HERO — stays dark
   ------------------------------------------------------------ */

.page-template-homepage .jumbotron {
  background-color: #0B0F14 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 560' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3Cpattern id='d' width='30' height='30' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='1.5' cy='1.5' r='1.5' fill='%23fff' opacity='.06'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='1200' height='560' fill='url(%23d)'/%3E%3Cg transform='translate(208 84) scale(.8)'%3E%3Cg stroke='%23fff' fill='none' stroke-width='1' opacity='.22'%3E%3Crect x='700' y='96' width='450' height='368' rx='8'/%3E%3Cline x1='700' y1='140' x2='1150' y2='140'/%3E%3Cline x1='836' y1='140' x2='836' y2='464'/%3E%3Crect x='860' y='166' width='266' height='84' rx='5'/%3E%3Crect x='860' y='272' width='124' height='70' rx='5'/%3E%3Crect x='1002' y='272' width='124' height='70' rx='5'/%3E%3Crect x='860' y='364' width='266' height='72' rx='5'/%3E%3C/g%3E%3Cg stroke='%23fff' stroke-width='5' stroke-linecap='round' opacity='.12'%3E%3Cline x1='724' y1='174' x2='812' y2='174'/%3E%3Cline x1='724' y1='198' x2='790' y2='198'/%3E%3Cline x1='724' y1='222' x2='812' y2='222'/%3E%3Cline x1='724' y1='246' x2='776' y2='246'/%3E%3Cline x1='724' y1='270' x2='800' y2='270'/%3E%3C/g%3E%3Cg fill='%23fff' opacity='.14'%3E%3Ccircle cx='722' cy='118' r='5'/%3E%3Ccircle cx='742' cy='118' r='5'/%3E%3Ccircle cx='762' cy='118' r='5'/%3E%3C/g%3E%3Crect x='860' y='166' width='266' height='84' rx='5' fill='none' stroke='%231F5FA8' stroke-width='1.5' opacity='.8'/%3E%3Ccircle cx='1126' cy='166' r='5' fill='%231F5FA8'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-position: center right !important;
  background-size: cover !important;
  background-repeat: no-repeat;
  padding: 190px 0 96px;
  min-height: 560px;
  color: #fff;
  border-radius: 0 !important;
}
.page-template-homepage .jumbotron h1 { color: #fff; margin-top: 0; max-width: 580px; }
.page-template-homepage .jumbotron h3 { max-width: 540px; }
.page-template-homepage .jumbotron h3 { color: rgba(255,255,255,.72); }
.page-template-homepage .hero-stats {
  margin-top: 54px;
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 30px;
}
.page-template-homepage .stat-number { color: #fff; }
.page-template-homepage .stat-label { color: rgba(255,255,255,.58); }


/* ------------------------------------------------------------
   3. CASE STUDY HERO — light, with metric strip
   ------------------------------------------------------------ */

.page-template-lbgmedia-portfolio-rubato .internal.jumbotron.main,
.page-template-lbgmedia-portfolio-ck .internal.jumbotron.main,
.page-template-lbgmedia-portfolio-hrblock .internal.jumbotron.main,
.page-template-lbgmedia-safetynet .internal.jumbotron.main,
.page-template-lbgmedia-portfolio-lifetagger .internal.jumbotron.main,
.page-template-lbgmedia-portfolio-diversity-scores .internal.jumbotron.main,
.page-template-lbgmedia-portfolio-optum .internal.jumbotron.main,
.page-template-lbgmedia-portfolio-hintgo .internal.jumbotron.main,
.page-template-lbgmedia-portfolio-sugar .internal.jumbotron.main {
  background: #F5F7F9 !important;
  background-image: none !important;
  border-bottom: 1px solid #E5E9ED;
  color: #0B0F14;
  height: auto !important;
  min-height: 0 !important;
  padding: 64px 0 52px;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}

/* Client logo: dark on white, no inversion */
.workLogo {
  margin-top: 0;
  margin-bottom: 22px;
  max-height: 52px;
  width: auto;
  filter: none;
  opacity: 1;
}

/* Hero headline. Templates output this as h1 now. */
.internal.jumbotron.main h1 {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 40px !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: #0B0F14 !important;
  margin: 0 0 18px;
  max-width: 820px;
}

/* Hero supporting line */
.internal.jumbotron.main h3 {
  font-size: 17.5px !important;
  font-weight: 400 !important;
  line-height: 1.6;
  color: #5A6672 !important;
  max-width: 620px;
  margin: 0;
}

/* Role line */
.internal.jumbotron.main p,
.portfolioRole {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1F5FA8;
  margin: 0 0 14px;
}
.portfolioRole { color: #5A6672; }


/* ------------------------------------------------------------
   4. INTERIOR HEROES — light
   ------------------------------------------------------------ */

.page-template-lbgmedia-services .internal.jumbotron.main,
.page-template-lbgmedia-who-we-are .internal.jumbotron.main,
.page-template-our-approach .internal.jumbotron.main,
.page-template-lbgmedia-contact .internal.jumbotron.main,
.page-template-lbgmedia-portfolio .internal.jumbotron.main,
.page-template-lbgmedia-consulting .internal.jumbotron.main,
.page-template-lbgmedia-services-product-management .internal.jumbotron.main,
.page-template-lbgmedia-services-product-software-development .internal.jumbotron.main,
.page-template-lbgmedia-services-ui-ux .internal.jumbotron.main,
.page-template-lbgmedia-how-to-move-product .internal.jumbotron.main,
.page-template-lbgmedia-innovation-samples .internal.jumbotron.main,
.page-template-lbgmedia-innovation-v2 .internal.jumbotron.main,
.page-template-lbgmedia-blog .internal.jumbotron.main,
.single-post .internal.jumbotron {
  background: #F5F7F9 !important;
  background-image: none !important;
  border-bottom: 1px solid #E5E9ED;
  color: #0B0F14;
  height: auto !important;
  min-height: 0 !important;
  padding: 64px 0 56px;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}

.internal.jumbotron.main h2 {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 38px !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: #0B0F14 !important;
  margin: 0 0 16px !important;
  max-width: 820px;
}


/* ------------------------------------------------------------
   5. TYPE HIERARCHY — the real fix
   Body copy currently sits in h3 tags and section labels in h4,
   so labels render smaller than the text they introduce.
   These rules restore a correct scale without touching markup.
   ------------------------------------------------------------ */

/* Section headings inside case study feature blocks */
#lbg_featured .feature h2 {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 27px !important;
  font-weight: 700 !important;
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: #0B0F14;
  margin: 0 0 12px !important;
}

/* Body copy inside feature blocks */
#lbg_featured .feature h3 {
  font-size: 16.5px !important;
  font-weight: 400 !important;
  line-height: 1.68 !important;
  color: #363D44;
  margin: 0;
  max-width: 560px;
}

/* Eyebrow labels: Highlighted Initiatives, Where It Went, What We Learned */
#lbg_expertise h4,
#lbg_outcome h4,
#lbg_learned h4,
#lbg_proof h4 {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #1F5FA8;
  margin: 0 0 14px !important;
}

/* Body under those eyebrows */
#lbg_outcome h3,
#lbg_learned h3,
#lbg_proof h3 {
  font-size: 16.5px !important;
  font-weight: 400 !important;
  line-height: 1.68 !important;
  color: #363D44;
  max-width: 720px;
  margin: 0 auto;
}
#lbg_learned h3 { margin: 0; }
#lbg_proof h3 { margin: 0; font-size: 19px !important; font-weight: 500 !important; color: #0B0F14 !important; }

/* Outcome tiles: one grouped block, not three competing headlines */
#lbg_outcome { padding: 56px 0 64px; }
.lbg_outcome_tiles {
  margin-top: 30px;
  border: 1px solid #E5E9ED;
  border-radius: 8px;
  overflow: hidden;
}
.lbg_outcome_tiles > [class*="col-"] { padding: 0; }
.lbg_outcome_tile {
  padding: 24px 22px;
  border-top: 0;
  border-right: 1px solid #E5E9ED;
  height: 100%;
}
.lbg_outcome_tiles > [class*="col-"]:last-child .lbg_outcome_tile { border-right: 0; }
.lbg_outcome_tile h2 {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 21px !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: #0B0F14;
  margin: 0 0 6px !important;
  text-transform: none;
}
.lbg_outcome_tile p {
  font-size: 14px !important;
  line-height: 1.55;
  color: #5A6672;
  margin: 0;
}

/* What We Learned reads as reflection, not another section */
#lbg_learned { padding: 48px 0 60px; }
#lbg_learned .row > [class*="col-"] {
  background: #F5F7F9;
  border-radius: 8px;
  padding: 28px 30px;
}

/* Highlighted Initiatives */
#lbg_expertise { padding: 52px 0 56px; }
#lbg_expertise ul { padding-left: 0; list-style: none; margin: 0; }
#lbg_expertise li {
  font-size: 15px !important;
  line-height: 1.6;
  height: auto !important;
  padding: 8px 0;
  margin-right: 0 !important;
  color: #363D44;
}
#lbg_expertise li strong { font-family: "Manrope", "Inter", sans-serif; font-weight: 700; color: #0B0F14; }

/* Closing CTA */
#lbg_closing_cta { padding: 72px 0 84px; text-align: center; }
#lbg_closing_cta h2 {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
#lbg_closing_cta h3 {
  font-size: 17.5px !important;
  font-weight: 400 !important;
  line-height: 1.6;
  color: #5A6672;
  max-width: 540px;
  margin: 0 auto;
}


/* ------------------------------------------------------------
   6. EXPERTISE SECTION — fixes the 95px item height bug
   ------------------------------------------------------------ */

#expertise { margin-top: 72px; margin-bottom: 84px; }

#expertise h2 {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}
#expertise h3 {
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: #5A6672;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 580px;
}

#expertise .full_services { margin: 46px 1% 0 7%; }

#expertise h5 {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: #1F5FA8;
  line-height: 1.4 !important;
  margin: 0 0 16px !important;
  padding-bottom: 12px;
  border-bottom: 1px solid #E5E9ED;
}

#expertise ul { list-style: none; padding-left: 0; margin: 0; }

/* The fix: was height:95px and font-size:12px !important */
#expertise li {
  height: auto !important;
  font-size: 15.5px !important;
  line-height: 1.5 !important;
  padding: 9px 0;
  margin-right: 8% !important;
  color: #363D44;
  border-bottom: 1px solid #F0F2F4;
}
#expertise li:last-child { border-bottom: 0; }


/* ------------------------------------------------------------
   7. RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 991px) {
  header#masthead,
  .page-template-homepage header#masthead {
    background-color: rgba(11, 15, 20, 0.97) !important;
    background-image: none;
    position: relative;
  }
  .navbar-brand img { width: 132px; margin-right: 0; }
  #main-nav li { padding-left: 0; text-align: left; }
  #masthead .navbar-nav > li.nav-cta > a { display: inline-block; margin: 10px 0 4px; }
  .page-template-homepage .jumbotron {
    padding: 72px 0 56px;
    min-height: 0;
    background-position: 82% center !important;
  }
  .page-template-homepage .hero-stats { margin-top: 36px; padding-top: 22px; }
}

@media (max-width: 767px) {
  .internal.jumbotron.main { padding: 44px 0 40px !important; }
  .internal.jumbotron.main h1 { font-size: 28px !important; }
  .internal.jumbotron.main h2 { font-size: 27px !important; }
  .internal.jumbotron.main h3 { font-size: 16px !important; padding-right: 0; }
  .workLogo { max-height: 40px; }
  .jumbotron h1 { font-size: 30px !important; line-height: 1.16 !important; margin-top: 0 !important; }
  #lbg_featured .feature h2 { font-size: 23px !important; }
  .lbg_outcome_tile { border-right: 0; border-bottom: 1px solid #E5E9ED; }
  .lbg_outcome_tiles > [class*="col-"]:last-child .lbg_outcome_tile { border-bottom: 0; }
  #lbg_learned .row > [class*="col-"] { padding: 22px 20px; }
  #expertise .full_services { margin: 32px 20px 0; }
  #lbg_closing_cta { padding: 52px 0 60px; }
  #lbg_closing_cta h2 { font-size: 24px !important; }
}

@media (prefers-reduced-motion: reduce) {
  header#masthead { transition: none; }
}

/* Hero role line above the headline */
.internal.jumbotron.main p.heroRole {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1F5FA8;
  margin: 0 0 14px !important;
}

/* Hero supporting line under the headline */
.internal.jumbotron.main h3.heroLede {
  font-size: 17.5px !important;
  font-weight: 400 !important;
  line-height: 1.6;
  color: #5A6672 !important;
  max-width: 620px;
  margin: 0 !important;
}

/* ------------------------------------------------------------
   HERO REFINEMENTS
   Fixes the dead space, the boxed logo, and the app store row.
   ------------------------------------------------------------ */

/* style.css line 1079 sets .internal.jumbotron { min-height: 450px }.
   With the content vertically centred that produced a large empty
   band above the logo. Content height now drives the hero. */
.internal.jumbotron,
.internal.jumbotron.main {
  min-height: 0 !important;
  display: block !important;
  align-items: initial !important;
  padding: 56px 0 44px !important;
}

/* Client logos ship as PNGs with a white plate behind them, which
   showed as a box against the off-white hero. multiply drops the
   white and leaves the mark. */
.workLogo {
  mix-blend-mode: multiply;
  max-height: 46px !important;
  height: auto !important;
  width: auto;
  margin: 0 0 20px !important;
  display: block;
}

/* Per-page logo sizes from style.css, rescaled to one consistent
   optical height. */
.page-template-lbgmedia-portfolio-diversity-scores img.workLogo,
.page-template-lbgmedia-safetynet img.workLogo,
.page-template-lbgmedia-portfolio-rubato img.workLogo {
  height: auto !important;
  max-height: 46px !important;
  margin: 0 0 20px !important;
}

/* Role line: keep it on one line where it fits, and stop it
   running the full column width. */
.internal.jumbotron.main p.heroRole,
.internal.jumbotron.main p {
  max-width: 620px;
  line-height: 1.5;
}

/* App store badges: smaller, aligned, with room above. */
.downloadLocations {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 26px;
  padding-left: 0 !important;
}
.downloadLocations .appleStore,
.downloadLocations .googlePlayStore {
  display: inline-block;
}
.download_icon {
  width: 140px !important;
  height: auto !important;
  margin: 0 !important;
  mix-blend-mode: multiply;
}

@media (max-width: 767px) {
  .internal.jumbotron,
  .internal.jumbotron.main {
    padding: 40px 0 34px !important;
  }
  .workLogo { max-height: 36px !important; }
  .download_icon { width: 118px !important; }
  .downloadLocations { flex-wrap: wrap; gap: 8px; }
}

/* ============================================================
   UI ENHANCEMENTS
   White nav on internal pages, gap removed, accent buttons,
   logo and headshot sizing.
   ============================================================ */

/* ---- 1. White nav on every page except the homepage ---- */

body:not(.page-template-homepage) header#masthead {
  position: relative;
  background-color: #fff !important;
  background-image: none !important;
  border-bottom: 1px solid #E5E9ED;
  min-height: 72px;
  padding-top: 12px !important;
  padding-bottom: 8px;
}

body:not(.page-template-homepage) #masthead .navbar-nav > li a {
  color: rgba(11, 15, 20, 0.74) !important;
  opacity: 1;
}
body:not(.page-template-homepage) #masthead .navbar-nav > li a:hover {
  color: #0B0F14 !important;
}
body:not(.page-template-homepage) #masthead .navbar-nav > li.current-menu-item > a,
body:not(.page-template-homepage) #masthead .navbar-nav > li.current-menu-parent > a,
body:not(.page-template-homepage) #masthead .navbar-nav > li.current-page-ancestor > a {
  color: #0B0F14 !important;
  box-shadow: inset 0 -2px 0 #0B0F14;
}

/* Scrolled state on internal pages stays light */
body:not(.page-template-homepage).nav-scrolled header#masthead {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 1px 0 rgba(11, 15, 20, 0.08);
  border-bottom: 0;
}

/* ---- 2. Remove the white gap under the nav ----
   #content.site-content inherits padding-top from the parent
   theme. The child theme only zeroed padding-bottom. */
body:not(.page-template-homepage) #content.site-content {
  padding-top: 0 !important;
}
#content.site-content {
  padding-bottom: 0;
}

/* ---- 3. Buttons: accent blue ---- */

.btn-primary,
.btn.btn-primary,
a.btn-primary {
  background-color: #1F5FA8 !important;
  border: 1px solid #1F5FA8 !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 13px 26px;
  letter-spacing: 0;
  transition: background-color .18s ease, border-color .18s ease;
}
.btn-primary:hover,
.btn.btn-primary:hover,
a.btn-primary:hover {
  background-color: #174B85 !important;
  border-color: #174B85 !important;
  color: #fff !important;
}

.btn-secondary,
.btn.btn-secondary,
a.btn-secondary {
  background-color: transparent !important;
  border: 1px solid rgba(11, 15, 20, 0.28) !important;
  color: #0B0F14 !important;
  border-radius: 6px !important;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 13px 26px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-secondary:hover,
.btn.btn-secondary:hover,
a.btn-secondary:hover {
  background-color: #0B0F14 !important;
  border-color: #0B0F14 !important;
  color: #fff !important;
}

/* Nav CTA keeps the accent fill */
#masthead .navbar-nav > li.nav-cta > a {
  background-color: #1F5FA8 !important;
  border: 1px solid #1F5FA8 !important;
  color: #fff !important;
  border-radius: 6px;
  padding: 9px 18px !important;
  font-weight: 700 !important;
}
#masthead .navbar-nav > li.nav-cta > a:hover {
  background-color: #174B85 !important;
  border-color: #174B85 !important;
  color: #fff !important;
}

/* ---- 4. Client logo sizing ----
   max-height alone cannot constrain a wide logo. These marks are
   wide and short, so they hit the column width before reaching
   the height cap. max-width is what actually fixes it. */
.workLogo,
img.workLogo,
.page-template-lbgmedia-portfolio-diversity-scores img.workLogo,
.page-template-lbgmedia-safetynet img.workLogo,
.page-template-lbgmedia-portfolio-rubato img.workLogo,
.page-template-lbgmedia-portfolio-ck img.workLogo,
.page-template-lbgmedia-portfolio-hrblock img.workLogo {
  max-height: 40px !important;
  max-width: 180px !important;
  height: auto !important;
  width: auto !important;
  object-fit: contain;
  margin: 0 0 18px !important;
  display: block;
  mix-blend-mode: multiply;
}

/* ---- 5. Founder photo ---- */
#lbg_buyin2 img[src*="brittany-glover"] {
  max-width: 230px !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 6px;
  display: block;
}
#lbg_buyin2 .col-lg-5 {
  flex: 0 0 270px;
  max-width: 270px;
}
#lbg_buyin2 .col-lg-7 {
  flex: 1;
  max-width: none;
}
#lbg_buyin2 {
  padding: 64px 0 72px;
}
#lbg_buyin2 h2 {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.018em;
  margin: 0 0 14px !important;
}
#lbg_buyin2 p {
  font-size: 15.5px !important;
  line-height: 1.65;
  color: #363D44;
  max-width: 580px;
}

/* ---- 6. Tighten the expertise section ---- */
#expertise .full_services {
  margin-top: 28px !important;
}
#expertise h3 {
  margin-bottom: 0 !important;
}

@media (max-width: 991px) {
  body:not(.page-template-homepage) header#masthead {
    background-color: #fff !important;
  }
  #lbg_buyin2 .col-lg-5,
  #lbg_buyin2 .col-lg-7 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  #lbg_buyin2 img[src*="brittany-glover"] {
    max-width: 190px !important;
    margin-bottom: 24px;
  }
}

@media (max-width: 767px) {
  .workLogo,
  img.workLogo {
    max-height: 32px !important;
    max-width: 150px !important;
  }
  .btn-primary, .btn-secondary {
    font-size: 14px;
    padding: 12px 22px;
  }
  #lbg_buyin2 { padding: 44px 0 50px; }
}

/* ============================================================
   NAVIGATION REFINEMENTS
   The CTA is styled by its href as well as its class, so it
   renders as a button even if the nav-cta class did not save.
   ============================================================ */

/* Catch the CTA three ways: the class, the contact URL, and the
   last item in the menu. */
#masthead .navbar-nav > li.nav-cta > a,
#masthead .navbar-nav > li > a[href*="contact-us"],
#masthead .navbar-nav > li:last-child > a[href*="contact"] {
  background-color: #1F5FA8 !important;
  border: 1px solid #1F5FA8 !important;
  color: #fff !important;
  border-radius: 6px;
  padding: 9px 18px !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  white-space: nowrap;
  line-height: 1.3;
  box-shadow: none !important;
}
#masthead .navbar-nav > li.nav-cta > a:hover,
#masthead .navbar-nav > li > a[href*="contact-us"]:hover,
#masthead .navbar-nav > li:last-child > a[href*="contact"]:hover {
  background-color: #174B85 !important;
  border-color: #174B85 !important;
  color: #fff !important;
}

/* The CTA never gets the current-page underline */
#masthead .navbar-nav > li.nav-cta.current-menu-item > a,
#masthead .navbar-nav > li.current-menu-item > a[href*="contact-us"] {
  box-shadow: none !important;
}

/* Five items plus a button needs tighter spacing than four did */
#main-nav li {
  padding-left: 20px;
}
#masthead .navbar-nav > li > a {
  white-space: nowrap;
}

/* Give the CTA breathing room from the links before it */
#masthead .navbar-nav > li.nav-cta,
#masthead .navbar-nav > li:last-child {
  padding-left: 26px;
}

/* Dropdown carets sit tight against the label */
#masthead .navbar-nav > li.dropdown > a:after {
  margin-left: 6px;
  opacity: .6;
}

/* Logo: cap it so it cannot crowd the links */
.navbar-brand img {
  width: auto !important;
  max-width: 150px;
  max-height: 34px;
  margin-right: 34px;
}

/* Narrower desktops: shrink before anything wraps */
@media (min-width: 992px) and (max-width: 1199px) {
  #main-nav li { padding-left: 14px; }
  #masthead .navbar-nav > li a { font-size: 13px !important; }
  #masthead .navbar-nav > li.nav-cta > a,
  #masthead .navbar-nav > li > a[href*="contact-us"] {
    padding: 8px 14px !important;
    font-size: 12.5px !important;
  }
  .navbar-brand img { max-width: 128px; margin-right: 20px; }
}

/* Mobile: the CTA becomes a full-width button in the drawer */
@media (max-width: 991px) {
  #masthead .navbar-nav > li.nav-cta > a,
  #masthead .navbar-nav > li > a[href*="contact-us"] {
    display: inline-block;
    margin: 12px 0 6px;
    padding: 11px 20px !important;
  }
  #masthead .navbar-nav > li.nav-cta,
  #masthead .navbar-nav > li:last-child {
    padding-left: 0;
  }
}

/* Footer menu, so it stops contradicting the main nav */
#colophon .menu li,
.site-footer .menu li {
  display: inline-block;
}
#colophon .menu li a,
.site-footer .menu li a {
  font-size: 13px;
  color: #5A6672;
}

/* Footer logo: stop it rendering at full width */
#footer-widget img {
  max-width: 140px;
  height: auto;
}

/* ============================================================
   ADMIN BAR + NAV WRAP
   ============================================================ */

/* WordPress adds a 32px admin bar when logged in. The masthead
   sits underneath it and the two collide. Only visible to you,
   but it makes the nav impossible to judge while editing. */
body.admin-bar header#masthead {
  margin-top: 32px;
}
body.admin-bar.nav-scrolled header#masthead {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar header#masthead { margin-top: 46px; }
  body.admin-bar.nav-scrolled header#masthead { top: 46px; }
}

/* Stop any nav item wrapping to a second line */
#masthead .navbar-nav > li,
#masthead .navbar-nav > li > a {
  white-space: nowrap !important;
}
#masthead .navbar-nav {
  flex-wrap: nowrap;
  align-items: center;
}

/* Dropdown panels: tighter rows, they are currently very tall */
.navbar-nav .dropdown-menu {
  min-width: 210px;
  padding: 5px 0 !important;
  margin-top: 8px;
  border-radius: 6px;
}
.navbar-nav .dropdown-menu li a,
.dropdown-item {
  padding: 8px 18px !important;
  font-size: 13.5px !important;
  line-height: 1.4 !important;
  border-bottom: 0 !important;
}
.navbar-nav .dropdown-menu li a:hover,
.dropdown-item:hover {
  background-color: #F4F6F8 !important;
  color: #0B0F14 !important;
}

/* ============================================================
   DROPDOWNS, FOOTER, BLOG
   ============================================================ */

/* ---- Dropdown panels ----
   style.css sets a hard 1px #2b2b2b border and adds 10px padding
   to each li on top of the link padding, which is what makes the
   rows so tall and the panel look like a 2010 select box. */
.navbar-nav .dropdown-menu,
.navbar-expand-lg .navbar-nav .dropdown-menu {
  border: 1px solid rgba(11, 15, 20, 0.10) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 28px rgba(11, 15, 20, 0.12);
  padding: 6px !important;
  margin-top: 10px !important;
  min-width: 220px;
  background: #fff;
}

.dropdown-menu.show li,
.navbar-nav .dropdown-menu li {
  width: auto !important;
  padding: 0 !important;
  border-bottom: 0 !important;
  text-align: left !important;
}

.navbar-nav .dropdown-menu li a,
.dropdown-menu.show li a,
.dropdown-item {
  padding: 9px 14px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  border-radius: 5px;
  color: rgba(11, 15, 20, 0.78) !important;
  font-weight: 600 !important;
  display: block;
  transition: background-color .14s ease, color .14s ease;
}
.navbar-nav .dropdown-menu li a:hover,
.dropdown-menu.show li a:hover,
.dropdown-item:hover {
  background-color: #F4F6F8 !important;
  color: #0B0F14 !important;
}

/* Current page inside a dropdown */
.navbar-nav .dropdown-menu li.current-menu-item a {
  background-color: #F4F6F8 !important;
  color: #0B0F14 !important;
}


/* ---- Footer ----
   Currently the logo and the four links stack in a tall black
   column with a lot of empty space to the right. */
div#footer-widget {
  padding-top: 44px !important;
  padding-bottom: 36px !important;
}

#footer-widget > .container { display: block; width: 100%; }
#footer-widget > .container > .row { align-items: center; }
#footer-widget .col-lg-3, #footer-widget .col-md-3 { flex: 0 0 200px; max-width: 200px; }
#footer-widget .col-lg-9, #footer-widget .col-md-9 { flex: 1; max-width: none; }

#footer-widget img {
  max-width: 132px;
  height: auto;
  margin: 0;
}

#footer-widget .menu-footer-container,
#footer-widget .menu-main-container {
  padding-left: 0 !important;
  line-height: 1.4 !important;
}

#footer-widget ul,
#footer-widget ul.flex-column,
#footer-widget ul.nav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 28px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
#footer-widget .widget { margin: 0; }
#footer-widget .widget img,
#footer-widget img {
  width: 132px !important;
  max-width: 132px;
  height: auto;
  display: block;
}

#footer-widget li {
  margin: 0 !important;
  float: none !important;
  display: inline-block !important;
  width: auto !important;
}

#footer-widget .nav-link,
#footer-widget li a {
  padding: 0 !important;
  float: none !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-weight: 600 !important;
}
#footer-widget li a:hover {
  color: #fff !important;
}

#footer-widget .textwidget.custom-html-widget {
  padding-right: 0;
  font-size: 13px;
}


/* ---- Blog index ----
   The hero holds only a button, with no headline above it, so the
   button floats in an empty band. */
.page-template-lbgmedia-blog .internal.jumbotron.main,
.page-template-lbgmedia-blog .jumbotron {
  background: #F5F7F9 !important;
  background-image: none !important;
  border-bottom: 1px solid #E5E9ED;
  border-top: 0;
  padding: 56px 0 48px !important;
  min-height: 0 !important;
  height: auto !important;
  text-align: left;
}

/* Until the hero has a headline, keep the button left-aligned with
   the content rather than floating in the middle of the band. */
.page-template-lbgmedia-blog .jumbotron .btn,
.page-template-lbgmedia-blog .internal.jumbotron .btn {
  margin-top: 0;
}

/* Post list: give each entry room and a clear hit area */
.page-template-lbgmedia-blog .wp-block-latest-posts__list li,
.page-template-lbgmedia-blog .wp-block-latest-posts.wp-block-latest-posts__list li {
  padding: 22px 0 !important;
  border-bottom: 1px solid #E5E9ED;
  font-size: 16px !important;
  line-height: 1.5;
}
.page-template-lbgmedia-blog .wp-block-latest-posts__list li:last-child {
  border-bottom: 0;
}
.page-template-lbgmedia-blog .wp-block-latest-posts__list li a {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.35;
  color: #0B0F14 !important;
  letter-spacing: -0.012em;
  transition: color .15s ease;
}
.page-template-lbgmedia-blog .wp-block-latest-posts__list li a:hover {
  color: #1F5FA8 !important;
}

@media (max-width: 767px) {
  #footer-widget .container {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }
  #footer-widget ul { gap: 18px; }
  .page-template-lbgmedia-blog .wp-block-latest-posts__list li a {
    font-size: 17px !important;
  }
}

/* ============================================================
   SERVICES PAGE — hardcoded sections
   The template no longer uses #lbg_expertise or #lbg_lens here;
   content lives in the template and these styles carry it.
   ============================================================ */

.lbg_eyebrow {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #1F5FA8;
  margin: 0 0 12px !important;
}

#lbg_practices,
#lbg_rightfor,
#lbg_notright {
  padding: 64px 0 56px;
  margin-top: 0;
  margin-bottom: 0;
}

#lbg_practices h2,
#lbg_rightfor h2,
#lbg_notright h2 {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  line-height: 1.22;
  color: #0B0F14;
  margin: 0 0 14px !important;
}

#lbg_practices > .row:first-child h3,
#lbg_rightfor > .row:first-child h3 {
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #5A6672;
  margin: 0;
}

/* ---- Three practice columns ---- */

.lbg_practice_grid {
  margin-top: 46px;
}

.lbg_practice {
  padding-right: 26px;
  height: 100%;
}

.lbg_practice_num {
  display: block;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #1F5FA8;
  margin-bottom: 10px;
}

.lbg_practice_title {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.014em;
  line-height: 1.25 !important;
  color: #0B0F14;
  margin: 0 0 6px !important;
}

.lbg_practice_blurb {
  font-size: 14.5px !important;
  line-height: 1.55;
  color: #5A6672;
  margin: 0 0 18px !important;
  padding-bottom: 16px;
  border-bottom: 2px solid #0B0F14;
}

ul.lbg_practice_list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 20px;
}

ul.lbg_practice_list li {
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  padding: 8px 0;
  color: #363D44;
  border-bottom: 1px solid #F0F2F4;
}
ul.lbg_practice_list li:last-child { border-bottom: 0; }

a.lbg_practice_link {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #1F5FA8 !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(31, 95, 168, 0.35);
  padding-bottom: 2px;
  transition: border-color .15s ease, color .15s ease;
}
a.lbg_practice_link:after { content: " \2192"; }
a.lbg_practice_link:hover {
  color: #0B0F14 !important;
  border-bottom-color: #0B0F14;
}

/* ---- Who we are right for ---- */

.lbg_fit_grid { margin-top: 30px; }

ul.lbg_fit_list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
ul.lbg_fit_list li {
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  color: #363D44;
  padding: 14px 0 14px 26px;
  position: relative;
  border-bottom: 1px solid #F0F2F4;
}
ul.lbg_fit_list li:last-child { border-bottom: 0; }
ul.lbg_fit_list li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 25px;
  width: 12px;
  height: 1px;
  background: #1F5FA8;
}

/* ---- Not the right fit ---- */

#lbg_notright {
  background: #F5F7F9;
  padding: 56px 0 60px;
}
#lbg_notright > .container { }
#lbg_notright p,
#lbg_notright .col-lg-8 > div {
  font-size: 16px !important;
  line-height: 1.7;
  color: #363D44;
  max-width: 740px;
}
#lbg_notright ul {
  padding-left: 20px;
  max-width: 740px;
}
#lbg_notright li {
  margin-bottom: 10px;
  line-height: 1.6;
}

@media (max-width: 991px) {
  .lbg_practice { padding-right: 14px; }
}

@media (max-width: 767px) {
  #lbg_practices,
  #lbg_rightfor,
  #lbg_notright {
    padding: 44px 0 40px;
  }
  #lbg_practices h2,
  #lbg_rightfor h2,
  #lbg_notright h2 {
    font-size: 23px !important;
  }
  .lbg_practice_grid { margin-top: 30px; }
  .lbg_practice {
    padding-right: 0;
    padding-bottom: 34px;
    margin-bottom: 10px;
  }
  .lbg_fit_grid { margin-top: 20px; }
}

/* ============================================================
   SERVICE SUB-PAGES
   Capability lists, section rhythm, and the cross-practice cards.
   ============================================================ */

#lbg_lens,
#lbg_caps,
#lbg_nextpractice {
  padding: 60px 0 52px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#lbg_lens h2,
#lbg_caps h2,
#lbg_nextpractice h2 {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  line-height: 1.22;
  color: #0B0F14;
  margin: 0 0 16px !important;
  text-transform: none;
}

/* Body copy inside the intro block */
.lbg_lens_body p,
.lbg_lens_body {
  font-size: 16.5px !important;
  line-height: 1.7 !important;
  color: #363D44;
  max-width: 720px;
}
.lbg_lens_body p { margin-bottom: 16px; }
.lbg_lens_body p:last-child { margin-bottom: 0; }

/* ---- Capability lists ----
   style.css gives these 100px bottom margin and a generic border.
   This matches them to the practice lists on the Services index. */
#lbg_caps { background: #F5F7F9; }
.lbg_cap_grid { margin-top: 30px; }

.lbg_cap_col ul,
.lbg_cap_col ul.capabilities {
  list-style: none;
  padding-left: 0;
  margin: 0 !important;
}
.lbg_cap_col li {
  font-size: 15.5px !important;
  line-height: 1.5 !important;
  padding: 11px 0 !important;
  margin: 0 !important;
  color: #363D44;
  border-bottom: 1px solid #E5E9ED !important;
}
.lbg_cap_col li:last-child { border-bottom: 0 !important; }
.lbg_cap_col p {
  font-size: 16px !important;
  line-height: 1.7;
  color: #363D44;
}

/* Proof section on sub-pages */
#lbg_proof { padding: 56px 0 52px; }

/* ---- Cross-practice cards ---- */
.lbg_next_grid { margin-top: 26px; }

a.lbg_next_card {
  display: block;
  border: 1px solid #E5E9ED;
  border-radius: 8px;
  padding: 24px 26px;
  text-decoration: none;
  height: 100%;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
a.lbg_next_card:hover {
  border-color: #1F5FA8;
  background-color: #F8FAFC;
  transform: translateY(-2px);
  text-decoration: none;
}
.lbg_next_title {
  display: block;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: #0B0F14;
  margin-bottom: 6px;
}
.lbg_next_title:after {
  content: " \2192";
  color: #1F5FA8;
}
.lbg_next_blurb {
  display: block;
  font-size: 14.5px;
  line-height: 1.55;
  color: #5A6672;
  font-weight: 400;
}

/* Hero eyebrow on sub-pages reuses heroRole but is not uppercase
   blue caps at the same scale as a case study role line. */
.page-template-lbgmedia-services-product-management .heroRole,
.page-template-lbgmedia-services-ui-ux .heroRole,
.page-template-lbgmedia-services-product-software-development .heroRole {
  font-size: 11px;
  letter-spacing: 0.13em;
}

@media (max-width: 767px) {
  #lbg_lens,
  #lbg_caps,
  #lbg_nextpractice {
    padding: 42px 0 38px;
  }
  #lbg_lens h2,
  #lbg_caps h2,
  #lbg_nextpractice h2 {
    font-size: 23px !important;
  }
  #lbg_proof { padding: 40px 0 38px; }
  a.lbg_next_card { margin-bottom: 14px; }
  .lbg_cap_col { margin-bottom: 4px; }
}

/* ============================================================
   OCTOBER 12 — CONTACT, WORKSHOPS, BLOG, HOMEPAGE STAGES
   ============================================================ */

/* ---- Defensive: headings on these pages were rendering white
   on the off-white background and sliding under the fixed nav.
   Force dark text on every content section outside the hero,
   and give the first section room so nothing tucks under the
   nav on scroll. ---- */
.page-template-lbgmedia-contact #content h1,
.page-template-lbgmedia-contact #content h2,
.page-template-lbgmedia-contact #content h3,
.page-template-lbgmedia-contact #content h4,
.page-template-lbgmedia-consulting #content h1,
.page-template-lbgmedia-consulting #content h2,
.page-template-lbgmedia-consulting #content h3,
.page-template-lbgmedia-consulting #content h4,
.single-post #content h1,
.single-post #content h2,
.single-post #content h3,
.single-post #content h4 {
  color: #0B0F14 !important;
}
.page-template-lbgmedia-contact .lbg_eyebrow,
.page-template-lbgmedia-consulting .lbg_eyebrow,
.single-post .lbg_eyebrow,
.page-template-lbgmedia-contact #lbg_proof h4,
.page-template-lbgmedia-consulting #lbg_proof h4 {
  color: #1F5FA8 !important;
}

/* Retire the old contact and workshop blocks entirely */
#colours, .whiteBox,
.page-template-lbgmedia-consulting #primary.content-area { display: none !important; }


/* Retire the old photo background behind the founder / buy-in band */
#lbg_buyin2 { background-image: none !important; border-top: 0; }


/* ============================================================
   SHARED SECTION HEADER — used by every new section below
   ============================================================ */
#lbg_stages > .container > .row:first-child h2,
#lbg_formats > .container > .row:first-child h2,
#lbg_fit > .row:first-child h2 {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  line-height: 1.22;
  margin: 0 0 14px !important;
  max-width: 720px;
}
#lbg_stages > .container > .row:first-child h3,
#lbg_formats > .container > .row:first-child h3 {
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #5A6672 !important;
  margin: 0;
  max-width: 640px;
}
#lbg_notright p {
  font-size: 16.5px !important;
  line-height: 1.7;
  color: #363D44;
  max-width: 680px;
}


/* ============================================================
   HOMEPAGE — stage cards replace the three phone images
   ============================================================ */
#lbg_stages { padding: 72px 0 64px; }
.lbg_stage_grid { margin-top: 40px; }

a.lbg_stage {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px 26px 24px;
  border: 1px solid #E5E9ED;
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  color: #0B0F14;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
a.lbg_stage:hover {
  border-color: #1F5FA8;
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(11, 15, 20, 0.08);
  text-decoration: none;
  color: #0B0F14;
}
.lbg_stage_label {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #1F5FA8;
  margin-bottom: 18px;
}
.lbg_stage_metric {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: #0B0F14;
  margin-bottom: 6px;
}
.lbg_stage_metric_sub {
  font-size: 13.5px;
  line-height: 1.45;
  color: #5A6672;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #EEF1F4;
}
.lbg_stage_body {
  font-size: 15px;
  line-height: 1.62;
  color: #363D44;
  flex: 1;
}
.lbg_stage_proof {
  margin-top: 20px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #1F5FA8;
}
.lbg_stage_proof:after { content: "  \2192"; }


/* ============================================================
   CONTACT — engagement shapes as plain text
   ============================================================ */
#lbg_shapes { padding: 64px 0 56px; }
#lbg_shapes > .row:first-child h2 {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  line-height: 1.22;
  margin: 0 0 8px !important;
  max-width: 720px;
}
.lbg_shape_list { margin-top: 26px; max-width: 720px; }
.lbg_shape {
  padding: 24px 0;
  border-bottom: 1px solid #E5E9ED;
}
.lbg_shape:first-child { border-top: 1px solid #E5E9ED; }
.lbg_shape_head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.lbg_shape_head h3 {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: -0.012em;
  line-height: 1.3 !important;
  color: #0B0F14 !important;
  margin: 0 !important;
}
.lbg_shape_price {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #1F5FA8;
  white-space: nowrap;
}
.lbg_shape p {
  font-size: 15.5px !important;
  line-height: 1.65 !important;
  color: #363D44;
  margin: 0;
}
.lbg_shape_discount {
  margin: 26px 0 0 !important;
  padding: 14px 18px;
  background: #F5F7F9;
  border-left: 3px solid #1F5FA8;
  border-radius: 0 6px 6px 0;
  font-size: 15px !important;
  font-weight: 600;
  color: #0B0F14;
  max-width: 720px;
}
.lbg_shape_note {
  margin: 20px 0 0 !important;
  font-size: 14.5px !important;
  line-height: 1.6;
  color: #5A6672;
  max-width: 680px;
}

/* ============================================================
   WORKSHOPS — formats replace the #colours band
   ============================================================ */
#lbg_formats { padding: 56px 0 60px; background: #F5F7F9; }
.lbg_format_grid { margin-top: 36px; }

.lbg_format {
  height: 100%;
  background: #fff;
  border: 1px solid #E5E9ED;
  border-radius: 10px;
  padding: 26px 24px 24px;
}
.lbg_format_num {
  display: block;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #1F5FA8;
  margin-bottom: 10px;
}
.lbg_format_title {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: -0.014em;
  line-height: 1.25 !important;
  color: #0B0F14 !important;
  margin: 0 0 4px !important;
}
.lbg_format_meta {
  font-size: 12.5px !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #5A6672;
  margin: 0 0 14px !important;
  padding-bottom: 14px;
  border-bottom: 1px solid #EEF1F4;
}
.lbg_format_desc {
  font-size: 14.5px !important;
  line-height: 1.6;
  color: #363D44;
  margin: 0 !important;
}
.lbg_format_note {
  margin-top: 28px;
  font-size: 14.5px !important;
  color: #5A6672;
  max-width: 640px;
}
.lbg_format_note a { color: #1F5FA8; font-weight: 600; }

/* "How to know if we are right for you" columns */
#lbg_fit { padding: 60px 0 52px; }
.lbg_fit_col ul { list-style: none; padding: 0; margin: 0; }
.lbg_fit_col li,
.lbg_fit_col p {
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  color: #363D44;
  padding: 11px 0 11px 22px;
  position: relative;
  border-bottom: 1px solid #F0F2F4;
  margin: 0;
}
.lbg_fit_col li:last-child { border-bottom: 0; }
.lbg_fit_col li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 21px;
  width: 10px;
  height: 1px;
  background: #1F5FA8;
}


/* ============================================================
   BLOG POST — clean hero, readable body
   ============================================================ */
.single-post .internal.jumbotron.main.lbg_post_hero {
  background: #F5F7F9 !important;
  color: #0B0F14 !important;
  margin: 0 !important;
  padding: 56px 0 44px !important;
  border-bottom: 1px solid #E5E9ED;
}
.single-post .lbg_post_hero h1 {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 40px !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: #0B0F14 !important;
  margin: 0 0 16px;
  max-width: 820px;
}
.single-post .internal.jumbotron.main p.lbg_post_meta {
  font-family: "Inter", sans-serif;
  font-size: 13.5px !important;
  color: #5A6672 !important;
  margin: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 500 !important;
  max-width: none;
}

#lbg_post { padding: 56px 0 40px; }
.lbg_post_body { padding-right: 24px; }
.lbg_post_body p,
.lbg_post_body li {
  font-size: 17.5px !important;
  line-height: 1.75 !important;
  color: #222A33;
  max-width: 720px;
}
.lbg_post_body p { margin-bottom: 22px; }
.lbg_post_body h2,
.lbg_post_body h3 {
  font-family: "Manrope", "Inter", sans-serif;
  font-weight: 700 !important;
  color: #0B0F14 !important;
  letter-spacing: -0.015em;
  max-width: 720px;
  margin: 40px 0 12px !important;
}
.lbg_post_body h2 { font-size: 26px !important; }
.lbg_post_body h3 { font-size: 21px !important; }
.lbg_post_body em { color: #5A6672; }
.lbg_post_body blockquote {
  border-left: 3px solid #1F5FA8;
  padding: 4px 0 4px 22px;
  margin: 30px 0;
  color: #363D44;
  font-style: normal;
}

/* Previous / next */
.lbg_post_nav { margin-top: 40px; }
.lbg_post_nav .post-navigation .nav-links {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.lbg_post_nav .nav-previous,
.lbg_post_nav .nav-next {
  float: none !important;
  width: auto !important;
  flex: 0 0 48%;
  max-width: 48%;
}
.lbg_post_nav .nav-previous a,
.lbg_post_nav .nav-next a {
  display: block;
  max-width: 100%;
  border: 1px solid #E5E9ED;
  border-radius: 8px;
  padding: 14px 18px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #0B0F14;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.lbg_post_nav .nav-previous a:hover,
.lbg_post_nav .nav-next a:hover { border-color: #1F5FA8; background: #F8FAFC; }
.lbg_post_nav .nav-next { text-align: right; }

/* Hide the "Posted in Uncategorized" footer until categories are set */
.single-post .entry-footer, .single-post .cat-links { display: none; }


/* ============================================================
   RESPONSIVE for everything above
   ============================================================ */
@media (max-width: 991px) {
  a.lbg_stage, .lbg_format { margin-bottom: 16px; height: auto; }
}
@media (max-width: 767px) {
  #lbg_stages, #lbg_shapes, #lbg_formats, #lbg_fit { padding: 44px 0 40px; }
  #lbg_stages > .container > .row:first-child h2,
  #lbg_shapes > .row:first-child h2,
  #lbg_formats > .container > .row:first-child h2,
  #lbg_notright h2 { font-size: 23px !important; }
  .lbg_stage_metric { font-size: 29px; }
  .single-post .lbg_post_hero h1 { font-size: 28px !important; }
  .lbg_post_body p, .lbg_post_body li { font-size: 16.5px !important; }
  .lbg_post_nav .nav-previous a, .lbg_post_nav .nav-next a { max-width: 100%; }
}

/* ---- Hero stats: tight row instead of three full-width columns ---- */
.page-template-homepage .hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0 32px;
  margin-left: 0;
  margin-right: 0;
  width: fit-content;
  max-width: 100%;
}
.page-template-homepage .hero-stats .stat {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding: 0;
}
.page-template-homepage .hero-stats .stat + .stat {
  padding-left: 32px;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}
@media (max-width: 767px) {
  .page-template-homepage .hero-stats { gap: 18px 32px; }
  .page-template-homepage .hero-stats .stat + .stat { padding-left: 32px; }
}

/* ============================================================
   ABOUT — bio leads, testimonial as a pull quote
   ============================================================ */
#lbg_bio { padding: 64px 0 56px; }
#lbg_bio > .row:first-child h2 {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  line-height: 1.22;
  margin: 0 0 6px !important;
}
.lbg_bio_row { margin-top: 30px; align-items: flex-start; }
#lbg_bio img.founderPhoto {
  width: 100% !important;
  max-width: 230px;
  height: auto;
  border-radius: 6px;
  display: block;
}
.lbg_bio_text p {
  font-size: 16.5px !important;
  line-height: 1.7 !important;
  color: #363D44;
  margin: 0 0 18px;
  max-width: 680px;
}
.lbg_bio_text p:last-child { margin-bottom: 0; }

#lbg_quote { background: #F5F7F9; padding: 56px 0; }
blockquote.lbg_pullquote {
  margin: 0;
  padding: 0 0 0 26px;
  border-left: 3px solid #1F5FA8;
}
blockquote.lbg_pullquote p {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 22px !important;
  font-weight: 600;
  line-height: 1.45 !important;
  letter-spacing: -0.012em;
  color: #0B0F14;
  margin: 0 0 14px;
  max-width: 760px;
}
blockquote.lbg_pullquote cite {
  display: block;
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  color: #5A6672;
}

/* Retire the old quote and specialize section styles */
#lbg_quote h5, section#lbg_specialize { display: none !important; }

@media (max-width: 767px) {
  #lbg_bio { padding: 44px 0 40px; }
  #lbg_bio > .row:first-child h2 { font-size: 23px !important; }
  #lbg_bio img.founderPhoto { max-width: 180px; margin-bottom: 22px; }
  #lbg_quote { padding: 40px 0; }
  blockquote.lbg_pullquote p { font-size: 19px !important; }
}


/* ============================================================
   13 OCT — HOMEPAGE REFRESH (A2 + B2, no icons) and
   SERVICES "Ways to work together" band (option C)
   Loaded last; overrides earlier homepage rules.
   ============================================================ */

/* hero pill above the headline */
.page-template-homepage .lbg_hero_pill {
  display: inline-block;
  margin: 0 0 20px;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  font: 600 12px/1.4 "Inter", sans-serif;
  color: rgba(255,255,255,.9);
}

/* B2: logos in one line directly under the hero */
#lbg_logostrip {
  background: #fff;
  border-bottom: 1px solid #E5E9ED;
  padding: 30px 0;
}
#lbg_logostrip .container { display: flex; align-items: center; gap: 40px; }
.lbg_logostrip_label { font: 400 13px "Inter", sans-serif; color: #5A6672; white-space: nowrap; }
.lbg_logostrip_names {
  display: flex; justify-content: space-between; flex: 1;
  list-style: none; margin: 0; padding: 0;
}
.lbg_logostrip_names li {
  font: 800 14px "Manrope", "Inter", sans-serif;
  letter-spacing: .05em; text-transform: uppercase; color: #8A95A1;
}

/* A2: What we do, statement on top, open row of practices */
#lbg_whatwedo { background: #fff; padding: 96px 0; }
#lbg_whatwedo .lbg_wwd_top { max-width: 720px; margin-bottom: 64px; }
#lbg_whatwedo h2 {
  font: 800 28px/1.2 "Manrope", "Inter", sans-serif !important;
  letter-spacing: -.022em; color: #0B0F14 !important; margin: 0 0 12px;
}
#lbg_whatwedo .lbg_lede { font-size: 16.5px; line-height: 1.65; color: #5A6672; margin: 0 0 28px; }
#lbg_whatwedo .lbg_wwd_cols > div:before {
  content: ""; display: block; width: 28px; height: 2px; background: #1F5FA8; margin-bottom: 22px;
}
#lbg_whatwedo .lbg_wwd_cols h3 {
  font: 700 18px "Manrope", "Inter", sans-serif !important; color: #0B0F14 !important; margin: 0 0 10px;
}
#lbg_whatwedo .lbg_wwd_cols p { font-size: 15px; line-height: 1.7; color: #5A6672; margin: 0; padding-right: 24px; }

/* Proof cards on the tint band */
.page-template-homepage #lbg_stages { background: #F5F7F9; padding: 88px 0; }
.page-template-homepage a.lbg_stage { border-top: 3px solid #1F5FA8; border-radius: 12px; }
.page-template-homepage .lbg_stage_body { font-weight: 400 !important; font-size: 14.5px; }
.page-template-homepage .lbg_stage_metric { font-size: 32px; }
.lbg_stage_tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.lbg_stage_tags span {
  font: 600 11.5px "Inter", sans-serif; color: #2C4A6E;
  background: #EAF1F9; border-radius: 999px; padding: 4px 10px;
}
.page-template-homepage .lbg_stage_proof { margin-top: 16px; }
.page-template-homepage .lbg_stage_proof:after { content: ""; }

/* Expertise as three cards, no icons, no check marks */
#lbg_expertise_cards { background: #fff; padding: 88px 0; }
#lbg_expertise_cards h2 {
  font: 800 28px/1.2 "Manrope", "Inter", sans-serif !important;
  letter-spacing: -.022em; color: #0B0F14 !important; margin: 0 0 30px; max-width: 640px;
}
.lbg_exp_card { height: 100%; background: #fff; border: 1px solid #E5E9ED; border-radius: 12px; overflow: hidden; }
.lbg_exp_card h5 {
  margin: 0; padding: 22px 24px 18px; border-bottom: 1px solid #E5E9ED;
  font: 700 12px "Manrope", "Inter", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #0B0F14;
}
.lbg_exp_list ul { list-style: none; margin: 0; padding: 8px 24px 18px; }
.lbg_exp_list li {
  font-size: 14.5px; line-height: 1.5; color: #363D44;
  padding: 10px 0; border-top: 1px solid #EEF1F4; height: auto;
}
.lbg_exp_list li:first-child { border-top: 0; }
.lbg_exp_more { text-align: center; margin: 32px 0 0; }

/* Founder on the tint band */
#lbg_founder { background: #F5F7F9; padding: 88px 0; }
#lbg_founder .lbg_founder_frame { position: relative; display: inline-block; margin: 0 16px 16px 0; }
#lbg_founder .lbg_founder_frame:before {
  content: ""; position: absolute; left: 16px; top: 16px; right: -16px; bottom: -16px;
  border: 1.5px solid #1F5FA8; border-radius: 10px; z-index: 0;
}
#lbg_founder .lbg_founder_photo { position: relative; z-index: 1; width: 240px; max-width: 100%; height: auto; border-radius: 10px; display: block; }
#lbg_founder h2 {
  font: 800 28px/1.2 "Manrope", "Inter", sans-serif !important; color: #0B0F14 !important; margin: 0 0 12px;
}
#lbg_founder p { font-size: 16px; line-height: 1.7; color: #363D44; max-width: 580px; }
.lbg_creds { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 22px; padding: 0; }
.lbg_creds li {
  font: 600 12px/1.4 "Inter", sans-serif !important; color: #363D44;
  background: #fff; border: 1px solid #E5E9ED; border-radius: 6px; padding: 6px 10px;
}

/* Closing call to action: dark panel */
#lbg_cta_panel { background: #fff; padding: 72px 0 88px; }
.lbg_cta_inner {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center;
  background: #0B0F14; color: #fff; border-radius: 14px; padding: 48px 52px;
}
.lbg_cta_inner h2 {
  font: 800 28px "Manrope", "Inter", sans-serif !important; letter-spacing: -.022em;
  color: #fff !important; margin: 0 0 10px;
}
.lbg_cta_inner p { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.72); margin: 0 0 22px; }
.lbg_cta_promises { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.18); }
.lbg_cta_promises li {
  padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.18);
  font: 600 15px "Inter", sans-serif; color: #fff;
}
.lbg_cta_promises li span { display: block; font: 400 13px "Inter", sans-serif; color: rgba(255,255,255,.6); margin-top: 3px; }

/* Services: Ways to work together, option C */
#lbg_ways { background: #EAF1F9; padding: 96px 0; }
#lbg_ways h2 {
  font: 800 30px/1.2 "Manrope", "Inter", sans-serif !important; letter-spacing: -.022em;
  color: #0B0F14 !important; margin: 0 0 12px; max-width: 640px;
}
.lbg_ways_lede { font-size: 16.5px; line-height: 1.65; color: #5A6672; margin: 0 0 44px; max-width: 600px; }
.lbg_way {
  height: 100%; background: #fff; border: 1px solid #D5E2F1; border-radius: 12px; padding: 30px 28px;
}
.lbg_way h3 { font: 700 19px "Manrope", "Inter", sans-serif !important; color: #0B0F14 !important; margin: 0 0 6px; }
.lbg_way_price { display: block; font: 800 26px "Manrope", "Inter", sans-serif; letter-spacing: -.02em; color: #0B0F14; margin-bottom: 14px; }
.lbg_way p { font-size: 15px; line-height: 1.65; color: #5A6672; margin: 0; }
.lbg_way_tag {
  display: inline-block; margin-bottom: 16px; padding: 4px 9px; border-radius: 999px;
  font: 700 11px "Manrope", "Inter", sans-serif; letter-spacing: .1em; text-transform: uppercase;
  background: #fff; color: #1F5FA8;
}
.lbg_way:not(.lbg_way_featured) h3 { margin-top: 37px; }
.lbg_way_featured { background: #1F5FA8; border-color: #1F5FA8; }
.lbg_way_featured h3, .lbg_way_featured .lbg_way_price { color: #fff !important; }
.lbg_way_featured p { color: rgba(255,255,255,.85); }
.lbg_ways_disc { margin: 40px 0 26px; font: 600 15px "Inter", sans-serif; color: #174B85; }

/* mobile */
@media (max-width: 991px) {
  #lbg_logostrip .container { flex-direction: column; align-items: flex-start; gap: 14px; }
  .lbg_logostrip_names { flex-wrap: wrap; gap: 12px 24px; justify-content: flex-start; }
  #lbg_whatwedo, .page-template-homepage #lbg_stages, #lbg_expertise_cards, #lbg_founder, #lbg_ways { padding: 56px 0; }
  #lbg_whatwedo .lbg_wwd_top { margin-bottom: 36px; }
  #lbg_whatwedo .lbg_wwd_cols > div { margin-bottom: 30px; }
  .lbg_exp_card, .lbg_way { margin-bottom: 16px; height: auto; }
  .lbg_way:not(.lbg_way_featured) h3 { margin-top: 0; }
  #lbg_founder .lbg_founder_photo { margin-bottom: 28px; }
  .lbg_cta_inner { grid-template-columns: 1fr; padding: 34px 26px; gap: 28px; }
}

/* 14 OCT: service sub-pages, capabilities tint runs full width.
   The section is a .container, so the grey stopped at the content edge
   and the text sat flush against it. Extend the grey to the page edges
   while the text keeps the container width. */
#lbg_caps {
  background: #F5F7F9;
  box-shadow: 0 0 0 100vmax #F5F7F9;
  clip-path: inset(0 -100vmax);
}

/* 14 OCT: hero subheadline on Contact and Workshops matches the other
   internal pages (slate, not near-black). The defensive dark-heading
   rule for those templates was also catching the hero h3. */
.page-template-lbgmedia-contact .internal.jumbotron.main h3,
.page-template-lbgmedia-consulting .internal.jumbotron.main h3 {
  color: #5A6672 !important;
}

/* 15 OCT: Insights (blog) page. Hero text is now in the template.
   The page's own title repeats under the hero, so hide it, and set the
   post links as a clean list. */
#lbg_blog_list { padding-top: 64px !important; padding-bottom: 64px !important; margin-top: 0 !important; }
#lbg_blog_list #primary { margin-top: 0 !important; padding: 0 15px !important; }
#lbg_blog_list #main { margin-top: 0 !important; padding-top: 0 !important; }
#lbg_blog_list .entry-header,
#lbg_blog_list .entry-title { display: none; }
#lbg_blog_list .entry-content a {
  display: block;
  padding: 18px 0;
  border-bottom: 1px solid #E5E9ED;
  font: 700 19px/1.4 "Manrope", "Inter", sans-serif;
  color: #0B0F14;
  text-decoration: none;
}
#lbg_blog_list .entry-content a:hover { color: #1F5FA8; }
#lbg_blog_list .entry-content a:after { content: "  \2192"; color: #1F5FA8; }
#lbg_blog_list .entry-content p { margin: 0; }
#lbg_blog_list .entry-content br { display: none; }
#lbg_logostrip.lbg_logostrip_bottom { border-top: 1px solid #E5E9ED; }