/* =========================================================
   Bulk Buy Hosting — 2026 Visual Refresh (Plan A)
   Forward-compatible design tokens + targeted overrides.
   Everything is built on CSS custom properties so a later
   brand refresh can change a few values here and flow
   sitewide automatically.
   ========================================================= */

@import url('https://fonts.bunny.net/css?family=inter:400,500,600,700,800&display=swap');

:root {
  /* ---- Colour palette (softer, less saturated) ---- */
  --bbh-primary:         #2c4a9b;
  --bbh-primary-hover:   #3d5fb5;
  --bbh-primary-light:   #e8edf7;
  --bbh-primary-dark:    #1f3675;
  --bbh-accent:          #16a34a;
  --bbh-accent-hover:    #15803d;
  --bbh-text:            #1a1f2e;
  --bbh-text-muted:      #5a6275;
  --bbh-text-soft:       #8891a3;
  --bbh-border:          #e4e7ee;
  --bbh-border-strong:   #cdd3de;
  --bbh-bg:              #ffffff;
  --bbh-bg-subtle:       #f7f8fb;
  --bbh-bg-muted:        #eef1f6;
  --bbh-danger:          #dc2626;

  /* ---- Typography ---- */
  --bbh-font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bbh-font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Type scale (major third 1.25) */
  --bbh-text-xs:  0.8rem;
  --bbh-text-sm:  0.9rem;
  --bbh-text-base:1rem;
  --bbh-text-lg:  1.125rem;
  --bbh-text-xl:  1.25rem;
  --bbh-text-2xl: 1.5rem;
  --bbh-text-3xl: 2rem;
  --bbh-text-4xl: 2.75rem;
  --bbh-text-5xl: 3.5rem;

  /* ---- Spacing ---- */
  --bbh-space-1:  0.25rem;
  --bbh-space-2:  0.5rem;
  --bbh-space-3:  0.75rem;
  --bbh-space-4:  1rem;
  --bbh-space-6:  1.5rem;
  --bbh-space-8:  2rem;
  --bbh-space-12: 3rem;
  --bbh-space-16: 4rem;
  --bbh-space-20: 5rem;
  --bbh-space-24: 6rem;

  /* ---- Radius ---- */
  --bbh-radius-sm:  6px;
  --bbh-radius-md:  10px;
  --bbh-radius-lg:  16px;
  --bbh-radius-pill: 999px;

  /* ---- Shadows (layered, soft) ---- */
  --bbh-shadow-xs: 0 1px 2px rgba(26, 31, 46, 0.05);
  --bbh-shadow-sm: 0 2px 4px rgba(26, 31, 46, 0.06), 0 1px 2px rgba(26, 31, 46, 0.04);
  --bbh-shadow-md: 0 4px 12px rgba(26, 31, 46, 0.08), 0 2px 4px rgba(26, 31, 46, 0.04);
  --bbh-shadow-lg: 0 12px 32px rgba(26, 31, 46, 0.10), 0 4px 8px rgba(26, 31, 46, 0.04);

  /* ---- Motion ---- */
  --bbh-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================
   Base
   ========================================================= */

body {
  font-family: var(--bbh-font-sans) !important;
  color: var(--bbh-text) !important;
  line-height: 1.65 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  background: var(--bbh-bg) !important;
  /* overflow-x: clip prevents horizontal scroll WITHOUT establishing a containing block
     for position:fixed descendants, so the mobile nav's left:-100vw slide-in still works. */
  overflow-x: clip !important;
}

/* Reserve space inside .wrapper for the absolutely-positioned header,
   without pushing the header itself down (it stays anchored at top:0 of wrapper). */
.wrapper { padding-top: 80px !important; }

@media (max-width: 767px) {
  .wrapper { padding-top: 64px !important; }
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bbh-font-display) !important;
  color: var(--bbh-text) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

h1 {
  font-size: clamp(2rem, 4vw, var(--bbh-text-5xl)) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
  padding: 0.1em 0 !important;
}

h2 {
  font-size: clamp(1.75rem, 3vw, var(--bbh-text-4xl)) !important;
  letter-spacing: -0.02em !important;
}

h3 { font-size: var(--bbh-text-2xl) !important; }
h4 { font-size: var(--bbh-text-xl) !important; }

p {
  color: var(--bbh-text) !important;
  line-height: 1.7 !important;
}

a {
  color: var(--bbh-primary) !important;
  transition: color 0.15s var(--bbh-ease) !important;
}
a:hover { color: var(--bbh-primary-hover) !important; }

/* =========================================================
   Buttons — modern, softer (replace the pill + uppercase look)
   ========================================================= */

.btn,
a.btn,
.article__entry a.btn,
.box__foot a.btn {
  background-color: var(--bbh-primary) !important;
  border-radius: var(--bbh-radius-md) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: -0.005em !important;
  padding: 0.9rem 1.75rem !important;
  box-shadow: var(--bbh-shadow-sm) !important;
  transition: background-color 0.2s var(--bbh-ease), transform 0.2s var(--bbh-ease), box-shadow 0.2s var(--bbh-ease) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  display: inline-block !important;
  line-height: 1.3 !important;
  border: none !important;
}
.btn:hover,
a.btn:hover,
.article__entry a.btn:hover {
  background-color: var(--bbh-primary-hover) !important;
  box-shadow: var(--bbh-shadow-md) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
.btn > span, a.btn > span { color: #ffffff !important; }

/* =========================================================
   Header
   ========================================================= */

.header {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: saturate(180%) blur(16px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(16px) !important;
  border-bottom: 1px solid var(--bbh-border) !important;
  box-shadow: none !important;
}

.header .shell { min-height: 80px !important; }

.nav > ul > li > a {
  font-weight: 500 !important;
  color: var(--bbh-text) !important;
  font-size: 0.95rem !important;
  transition: color 0.15s var(--bbh-ease) !important;
}
.nav > ul > li > a:hover { color: var(--bbh-primary) !important; }

.sub-menu {
  border: 1px solid var(--bbh-border) !important;
  box-shadow: var(--bbh-shadow-lg) !important;
  border-radius: var(--bbh-radius-md) !important;
  padding: 0.5rem 0 !important;
}
.sub-menu .menu-item a {
  font-weight: 500 !important;
  padding: 0.6rem 1rem !important;
  font-size: 0.9rem !important;
}
.sub-menu li + li { border-top: 1px solid var(--bbh-bg-muted) !important; }

.menu-item-has-children:after { color: var(--bbh-text-muted) !important; }

/* =========================================================
   Sections — better rhythm
   ========================================================= */

section.section {
  padding: var(--bbh-space-20) 0 !important;
}

.section-clients {
  padding: var(--bbh-space-12) 0 !important;
  background: var(--bbh-bg-subtle) !important;
}

.section-clients h4 {
  color: var(--bbh-text-muted) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: var(--bbh-space-6) !important;
}

.section-clients ul {
  gap: 2rem !important;
  justify-content: center !important;
  filter: grayscale(100%) opacity(0.55) !important;
  transition: filter 0.3s var(--bbh-ease) !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  padding: 0 !important;
}
.section-clients ul:hover { filter: grayscale(0%) opacity(1) !important; }

/* =========================================================
   Hero (homepage first section)
   ========================================================= */

.page-template-home section.section:first-of-type {
  padding: var(--bbh-space-24) 0 var(--bbh-space-16) !important;
}

/* Hero-only: constrain/center the headline, tagline price, and lede paragraph */
.page-template-home section.section:first-of-type .section__content h1 {
  font-weight: 800 !important;
  color: var(--bbh-text) !important;
  margin-bottom: var(--bbh-space-4) !important;
}

.page-template-home section.section:first-of-type .section__content h2 {
  color: var(--bbh-primary) !important;
  font-weight: 600 !important;
  font-size: 1.5rem !important;
  margin-top: 0.25rem !important;
  margin-bottom: var(--bbh-space-6) !important;
  letter-spacing: -0.01em !important;
}

.page-template-home section.section:first-of-type .section__content p {
  font-size: 1.1rem !important;
  color: var(--bbh-text-muted) !important;
  max-width: 640px !important;
  line-height: 1.7 !important;
}

/* Long-form content section on the homepage (max-width:none) — give it a centered, readable column */
.page-template-home section.section .section__content[style*="max-width:none"],
.page-template-home section.section .section__content[style*="max-width: none"] {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
}

.page-template-home section.section .section__content[style*="max-width:none"] > h2,
.page-template-home section.section .section__content[style*="max-width: none"] > h2 {
  text-align: center !important;
  margin-bottom: var(--bbh-space-8) !important;
}

.page-template-home section.section .section__content[style*="max-width:none"] > p,
.page-template-home section.section .section__content[style*="max-width: none"] > p,
.page-template-home section.section .section__content[style*="max-width:none"] > ul,
.page-template-home section.section .section__content[style*="max-width: none"] > ul {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================
   Testimonials
   ========================================================= */

.section-testimonials {
  background: var(--bbh-bg-subtle) !important;
  padding: var(--bbh-space-20) 0 !important;
}

.section-testimonials h4 {
  text-align: center !important;
  margin-bottom: var(--bbh-space-12) !important;
  font-weight: 600 !important;
  color: var(--bbh-text-muted) !important;
  font-size: 1.1rem !important;
}

/* Slick slider gutter between carousel cards (padding stays inside the list, no negative margins) */
.slick-list { overflow: hidden !important; }
.slick-slide { padding: 0 12px !important; box-sizing: border-box !important; }
.slider__slide { padding: 0 12px !important; box-sizing: border-box !important; }

.slider__slide-entry {
  background: #ffffff !important;
  border: 1px solid var(--bbh-border) !important;
  border-radius: var(--bbh-radius-lg) !important;
  padding: 2rem !important;
  box-shadow: var(--bbh-shadow-sm) !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  height: 100% !important;
}

.slider__slide-entry blockquote {
  font-size: 1.15rem !important;
  line-height: 1.7 !important;
  color: var(--bbh-text) !important;
  font-weight: 400 !important;
  margin: 0 0 1.5rem 0 !important;
  border: none !important;
  padding: 0 !important;
  font-style: normal !important;
}

.slider__slide-entry blockquote::before {
  content: "\201C" !important;
  color: var(--bbh-primary-light) !important;
  font-size: 3rem !important;
  line-height: 1 !important;
  display: block !important;
  margin-bottom: -1rem !important;
  font-weight: 700 !important;
}

.slider__slide-entry h5 {
  color: var(--bbh-text-muted) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  margin: 0 !important;
}

/* =========================================================
   Pricing cards
   ========================================================= */

.section-pricing {
  background-image: none !important;
  background: linear-gradient(180deg, var(--bbh-bg-subtle) 0%, var(--bbh-bg) 100%) !important;
  padding: var(--bbh-space-16) 0 var(--bbh-space-24) !important;
}

.section-pricing h2 {
  text-align: center !important;
  margin-bottom: var(--bbh-space-4) !important;
  text-transform: none !important;
  color: var(--bbh-text) !important;
  font-weight: 800 !important;
}

.section-pricing .section__content { margin-bottom: var(--bbh-space-8) !important; }

.section-pricing .section__foot p.tax-info {
  color: var(--bbh-text-muted) !important;
  font-size: 0.85rem !important;
  text-align: center !important;
  max-width: 780px !important;
  margin: 0 auto !important;
  line-height: 1.6 !important;
}

.section-pricing h6 {
  text-align: center !important;
  color: var(--bbh-text-muted) !important;
  font-size: 1.15rem !important;
  font-weight: 400 !important;
  margin-bottom: var(--bbh-space-6) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.section-pricing .section__content p {
  text-align: center !important;
  max-width: 780px !important;
  margin: 0 auto 1rem !important;
  font-size: 1rem !important;
  color: var(--bbh-text-muted) !important;
}

.boxes {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 2.5rem !important;
  max-width: 1280px !important;
  margin: var(--bbh-space-8) auto 0 !important;
  padding: 0 1.5rem !important;
  list-style: none !important;
}

.box {
  background: #ffffff !important;
  border: 1px solid var(--bbh-border) !important;
  border-radius: var(--bbh-radius-lg) !important;
  padding: 2rem 1.5rem !important;
  box-shadow: var(--bbh-shadow-sm) !important;
  transition: transform 0.2s var(--bbh-ease), box-shadow 0.2s var(--bbh-ease) !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: center !important;
}
.box:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--bbh-shadow-lg) !important;
  border-color: var(--bbh-primary-light) !important;
}

.box h6 {
  color: var(--bbh-text-muted) !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 1rem !important;
}

.box h2 {
  font-size: 2.75rem !important;
  color: var(--bbh-primary) !important;
  font-weight: 800 !important;
  margin-bottom: 0.25rem !important;
  letter-spacing: -0.03em !important;
}
.box h2 .price { color: var(--bbh-primary) !important; }

.box h5 {
  color: var(--bbh-text-muted) !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  margin-bottom: 1.5rem !important;
}

.box ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1.5rem 0 !important;
  flex: 1 !important;
  text-align: left !important;
}
.box ul li {
  padding: 0.6rem 0 !important;
  border-top: 1px solid var(--bbh-bg-muted) !important;
  border-bottom: none !important;
  font-size: 0.95rem !important;
  color: var(--bbh-text) !important;
  line-height: 1.4 !important;
}
.box ul li:first-child { border-top: none !important; }

.box__foot {
  margin-top: auto !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  border-top: 1px solid var(--bbh-bg-muted) !important;
  padding-top: 1.25rem !important;
}
.box__foot .btn {
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 0.75rem !important;
}
.box__foot p {
  color: var(--bbh-text-muted) !important;
  font-size: 0.85rem !important;
  text-align: center !important;
  margin: 0 !important;
}
.box__foot p .price { color: var(--bbh-text-muted) !important; }

/* =========================================================
   Guides listing — /category/guides/ and single guide posts.
   The 2019 bundle turns .section-blog grey, puts a floating
   "card" shadow under .section__entry via position: relative + top: -75px,
   and forces .article-loop to flex row-reverse. Override all of it.
   ========================================================= */

.archive .section-blog,
.category .section-blog,
.single-post .section-blog,
.single .section-blog {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--bbh-text) !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  padding: 0 0 var(--bbh-space-16) !important;
}

/* Section head (title banner) */
.archive .section-blog .section__head,
.category .section-blog .section__head,
.single-post .section-blog .section__head,
.single .section-blog .section__head {
  background: var(--bbh-bg-subtle) !important;
  border-bottom: 1px solid var(--bbh-border) !important;
  padding: var(--bbh-space-8) 0 var(--bbh-space-6) !important;
  margin-bottom: var(--bbh-space-8) !important;
  text-align: center !important;
}

.archive .section-blog .section__head h2,
.category .section-blog .section__head h2,
.archive .section-blog .section__head .section__title,
.category .section-blog .section__head .section__title {
  color: var(--bbh-text) !important;
  background: transparent !important;
  text-transform: none !important;
  font-weight: 800 !important;
  font-size: clamp(2rem, 4vw, var(--bbh-text-4xl)) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  margin: 0 auto !important;
  max-width: 900px !important;
  padding: 0 1rem !important;
}

.single-post .section-blog .section__head .section__title,
.single .section-blog .section__head .section__title,
.single-post .section-blog .section__head h1,
.single .section-blog .section__head h1 {
  color: var(--bbh-text) !important;
  background: transparent !important;
  text-transform: none !important;
  font-weight: 800 !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  margin: 0 auto !important;
  max-width: 900px !important;
  padding: 0 1rem !important;
}

/* Kill the old negative-top floating "box" */
.archive .section-blog .section__entry,
.category .section-blog .section__entry,
.single-post .section-blog .section__entry,
.single .section-blog .section__entry {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  top: 0 !important;
  position: static !important;
  max-width: 100% !important;
  text-align: left !important;
}

/* section__body shell widths */
.archive .section-blog .section__body,
.category .section-blog .section__body,
.single-post .section-blog .section__body,
.single .section-blog .section__body {
  background: transparent !important;
  color: var(--bbh-text) !important;
  text-align: left !important;
  line-height: 1.7 !important;
  padding: 0 !important;
}
.archive .section-blog .section__body .shell,
.category .section-blog .section__body .shell { max-width: 1200px !important; }
.single-post .section-blog .section__body .shell,
.single .section-blog .section__body .shell { max-width: 1100px !important; }

/* Kill the heavy image shadow from bundle */
.section-blog img { box-shadow: none !important; }

/* ----- Listing page: turn section__entry into a grid ----- */
.archive .section-blog .section__entry,
.category .section-blog .section__entry {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 2rem !important;
}

/* Card override — bundle forces flex row-reverse; force column */
.article-loop {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  background: #ffffff !important;
  border: 1px solid var(--bbh-border) !important;
  border-radius: var(--bbh-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--bbh-shadow-sm) !important;
  transition: transform 0.2s var(--bbh-ease), box-shadow 0.2s var(--bbh-ease), border-color 0.2s var(--bbh-ease) !important;
  margin: 0 !important;
  padding: 0 !important;
  top: 0 !important;
  position: static !important;
}
.article-loop:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--bbh-shadow-lg) !important;
  border-color: var(--bbh-primary-light) !important;
}

.article-loop ~ .article-loop { margin-top: 0 !important; }

.article-loop .article__head {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  position: static !important;
}

.article-loop .article__image {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  padding-top: 56.25% !important;
  overflow: hidden !important;
  background: var(--bbh-bg-subtle) !important;
  opacity: 1 !important;
}
.article-loop .article__image img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform 0.4s var(--bbh-ease) !important;
}
.article-loop:hover .article__image img { transform: scale(1.04) !important; }

.article-loop .article__body {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  flex-grow: 1 !important;
  text-align: left !important;
  background: transparent !important;
  font-size: 1rem !important;
  top: 0 !important;
  position: static !important;
}

.article-loop .article__title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 0.75rem 0 !important;
  text-transform: none !important;
  color: var(--bbh-text) !important;
}
.article-loop .article__title a {
  color: var(--bbh-text) !important;
  text-decoration: none !important;
  transition: color 0.15s var(--bbh-ease) !important;
}
.article-loop .article__title a:hover { color: var(--bbh-primary) !important; }

.article-loop .article__meta { display: none !important; }

.article-loop .article__entry {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 1.25rem 0 !important;
  position: static !important;
  top: 0 !important;
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  color: var(--bbh-text-muted) !important;
  flex: 1 !important;
  max-width: 100% !important;
}
.article-loop .article__entry p {
  margin: 0 !important;
  color: var(--bbh-text-muted) !important;
}

.article-loop .article__more {
  margin: auto 0 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
}
.article-loop .article__more a.btn,
.article-loop .article__more .btn {
  font-size: 0.85rem !important;
  padding: 0.65rem 1.25rem !important;
  width: 100% !important;
  text-align: center !important;
  box-sizing: border-box !important;
  text-transform: none !important;
  margin: 0 !important;
}

.archive .paging,
.category .paging {
  text-align: center !important;
  margin-top: var(--bbh-space-12) !important;
  padding: 0 !important;
  background: transparent !important;
}

/* ----- Individual guide / single post ----- */

.article-post {
  max-width: 100% !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  position: static !important;
  top: 0 !important;
  border-radius: 0 !important;
}

.article-post .article__head {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  margin-bottom: var(--bbh-space-8) !important;
  overflow: visible !important;
  position: static !important;
  text-align: center !important;
}
.article-post .article__image {
  overflow: visible !important;
}
.article-post .article__image img {
  width: 100% !important;
  max-height: 420px !important;
  object-fit: cover !important;
  border-radius: var(--bbh-radius-lg) !important;
  box-shadow: var(--bbh-shadow-sm) !important;
  position: static !important;
}

.article-post .article__body {
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  text-align: left !important;
  color: var(--bbh-text) !important;
  line-height: 1.75 !important;
  position: static !important;
  top: 0 !important;
}

.article-post .article__entry {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  position: static !important;
  top: 0 !important;
  font-size: 1.05rem !important;
  line-height: 1.75 !important;
  color: var(--bbh-text) !important;
  max-width: 100% !important;
}
.article-post .article__entry p { margin-bottom: 1.25rem !important; }
.article-post .article__entry h2 {
  margin-top: var(--bbh-space-8) !important;
  margin-bottom: var(--bbh-space-4) !important;
  color: var(--bbh-text) !important;
  text-transform: none !important;
}
.article-post .article__entry h3 {
  margin-top: var(--bbh-space-6) !important;
  margin-bottom: var(--bbh-space-3) !important;
  color: var(--bbh-text) !important;
  font-size: var(--bbh-text-2xl) !important;
}
.article-post .article__entry a {
  color: var(--bbh-primary) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
}
.article-post .article__meta { display: none !important; }

/* =========================================================
   Article pages (content pages: faq, about, reviews, etc.)
   ========================================================= */

.article__head {
  padding: var(--bbh-space-16) 0 var(--bbh-space-12) !important;
  background: var(--bbh-bg-subtle) !important;
  border-bottom: 1px solid var(--bbh-border) !important;
  overflow: visible !important;
}

.article__head .shell { overflow: visible !important; }

.article__head h1 {
  text-align: center !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

.article-single .article__head h4 {
  text-align: center !important;
  color: var(--bbh-text-muted) !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  margin-top: 1rem !important;
}

.article__body {
  padding: var(--bbh-space-12) 0 var(--bbh-space-20) !important;
}

.article__body .shell {
  max-width: 1100px !important;
  width: 100% !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.article__entry {
  max-width: 900px !important;
  margin: 0 auto !important;
  font-size: 1.05rem !important;
  color: var(--bbh-text) !important;
}

/* Tables fill the article width */
.article__entry .tablepress { width: 100% !important; max-width: 100% !important; }

/* /our-providers/ — widen to let the 3-column logo grid breathe */
.page-id-6269 .article__body .shell { max-width: 1200px !important; }
.page-id-6269 .article__entry { max-width: 1100px !important; }

.article__entry h2 {
  margin-top: var(--bbh-space-12) !important;
  margin-bottom: var(--bbh-space-4) !important;
}
.article__entry h3 {
  margin-top: var(--bbh-space-8) !important;
  margin-bottom: var(--bbh-space-3) !important;
}
.article__entry h4 {
  margin-top: var(--bbh-space-6) !important;
  margin-bottom: var(--bbh-space-2) !important;
}

.article__entry a {
  color: var(--bbh-primary) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
}
.article__entry a:hover {
  color: var(--bbh-primary-hover) !important;
  text-decoration-thickness: 2px !important;
}

.article__entry ul li, .article__entry ol li {
  margin-bottom: 0.5rem !important;
}

.article__entry img {
  box-shadow: none !important;
  border-radius: var(--bbh-radius-md) !important;
}

/* =========================================================
   Table of Contents
   ========================================================= */

#toc_container {
  background: var(--bbh-bg-subtle) !important;
  border: 1px solid var(--bbh-border) !important;
  border-radius: var(--bbh-radius-md) !important;
  padding: 1.25rem 1.5rem !important;
  margin: 0 0 2rem 0 !important;
  box-shadow: none !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

#toc_container .toc_title {
  font-weight: 600 !important;
  color: var(--bbh-text) !important;
  margin-bottom: 0.75rem !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

#toc_container ul {
  list-style: none !important;
  padding-left: 0 !important;
}
#toc_container ul li {
  font-size: 0.92rem !important;
  padding: 0.2rem 0 !important;
}
#toc_container ul li a { color: var(--bbh-primary) !important; }

/* =========================================================
   ✔ / ✘ metric bullets
   ========================================================= */

.building-metrics,
.no-metric {
  position: relative !important;
  padding: 0.5rem 0 0.5rem 2.2rem !important;
  line-height: 1.6 !important;
  text-align: left !important;
  display: block !important;
}

.building-metrics:before,
.no-metric:before {
  position: absolute !important;
  left: 0 !important;
  top: 0.7rem !important;
  width: 1.4rem !important;
  height: 1.4rem !important;
  line-height: 1.4rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  color: #ffffff !important;
}

.building-metrics:before { background-color: var(--bbh-accent) !important; }
.no-metric:before { background-color: var(--bbh-danger) !important; }

/* =========================================================
   Footer
   ========================================================= */

.footer {
  background: var(--bbh-text) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  padding: var(--bbh-space-16) 0 var(--bbh-space-12) !important;
}

.footer .shell {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  min-height: 0 !important;
}

.footer__grid {
  display: grid !important;
  grid-template-columns: 1.75fr 1fr 1fr 1fr !important;
  gap: 3rem !important;
  align-items: start !important;
}

.footer__col .footer__heading {
  color: #ffffff !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin: 0 0 1.25rem 0 !important;
}

.footer__col ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.6rem !important;
}

.footer__col ul li { margin: 0 !important; }
.footer__col ul li a {
  color: rgba(255, 255, 255, 0.68) !important;
  font-size: 0.9rem !important;
  text-decoration: none !important;
  transition: color 0.15s var(--bbh-ease) !important;
}
.footer__col ul li a:hover { color: #ffffff !important; }

.footer__brand-logo {
  display: block !important;
  max-width: 170px !important;
  width: auto !important;
  height: auto !important;
  filter: brightness(0) invert(1) !important;
  opacity: 0.95 !important;
  margin: 0 auto 1.25rem auto !important;
}

.footer__sitearrow-link {
  display: inline-flex !important;
  margin-top: 1rem !important;
  margin-bottom: 0.5rem !important;
}
.footer__sitearrow-logo {
  max-width: 64px !important;
  width: auto !important;
  height: auto !important;
  opacity: 0.55 !important;
  transition: opacity 0.15s var(--bbh-ease) !important;
}
.footer__sitearrow-link:hover .footer__sitearrow-logo { opacity: 0.85 !important; }

.footer__tagline {
  font-size: 0.9rem !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin: 0 0 1rem 0 !important;
  line-height: 1.6 !important;
  max-width: 380px !important;
}

.footer__copyright {
  font-size: 0.8rem !important;
  color: rgba(255, 255, 255, 0.45) !important;
  margin: 0 !important;
}

@media (max-width: 1023px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 2.5rem 2rem !important;
  }
  .footer__brand { grid-column: 1 / -1 !important; }
}

@media (max-width: 560px) {
  .footer__grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

/* =========================================================
   Provider table (our-providers page)
   ========================================================= */

.tablepress {
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0.75rem !important;
  table-layout: fixed !important;
  margin: -0.75rem !important;
}
.tablepress tr { background: transparent !important; }
.tablepress td {
  background: #ffffff !important;
  border: 1px solid var(--bbh-border) !important;
  border-radius: var(--bbh-radius-md) !important;
  padding: 1.25rem 0.75rem !important;
  transition: transform 0.2s var(--bbh-ease), box-shadow 0.2s var(--bbh-ease), border-color 0.2s var(--bbh-ease) !important;
  vertical-align: middle !important;
  width: 33.333% !important;
}
.tablepress td:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--bbh-shadow-md) !important;
  border-color: var(--bbh-primary-light) !important;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 767px) {
  h1 { font-size: 2.25rem !important; }
  h2 { font-size: 1.75rem !important; }
  .btn { padding: 0.85rem 1.5rem !important; font-size: 0.95rem !important; }
  section.section { padding: var(--bbh-space-12) 0 !important; }
  .box { padding: 1.5rem !important; }
  .article__entry { font-size: 1rem !important; }
  .section__content h2 { font-size: 1.25rem !important; }
  .page-template-home section.section:first-of-type {
    padding: var(--bbh-space-16) 0 var(--bbh-space-12) !important;
  }
}

/* (Tablet-range sub-menu override removed — it was stripping the dropdown
   background at 768–1023px, leaving empty-looking items on hover. Mobile
   drawer styles below handle ≤767px separately.) */

/* Mobile slide-in nav — replace the 2019 dark-grey palette with the modern light one */
@media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) {
  .nav {
    background-color: #ffffff !important;
    padding: 4rem 1.25rem 1.25rem !important;
    box-shadow: var(--bbh-shadow-lg) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    width: min(320px, 85vw) !important;
    left: calc(-1 * min(320px, 85vw)) !important;
    height: 100vh !important;
    box-sizing: border-box !important;
  }
  .menu-trigger--active + .nav { left: 0 !important; }
  /* Disable the bundle's inner ul scroll — the outer .nav handles any needed scroll */
  .nav > ul,
  .nav ul.menu,
  .nav #menu-header {
    overflow: visible !important;
    height: auto !important;
  }
  .nav > ul,
  .nav ul.menu,
  .nav #menu-header {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    width: 100% !important;
    height: auto !important;
    align-items: stretch !important;
  }
  .nav > ul > li,
  .nav ul.menu > li,
  .nav #menu-header > li {
    display: block !important;
    border-top: 1px solid var(--bbh-border) !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    flex: none !important;
    width: 100% !important;
    position: static !important;
  }
  .nav > ul > li:first-child,
  .nav ul.menu > li:first-child,
  .nav #menu-header > li:first-child { border-top: none !important; }

  .nav > ul > li > a,
  .nav ul.menu > li > a,
  .nav #menu-header > li > a {
    display: block !important;
    color: #1a1f2e !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 0.9rem 0 !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    text-align: left !important;
    letter-spacing: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .nav > ul > li > a:hover { color: var(--bbh-primary) !important; }

  /* Show sub-menus inline on mobile, stacked under their parent item */
  .nav ul.sub-menu,
  .nav > ul > li > ul,
  .nav > ul > li:hover > ul,
  .nav > ul > li .sub-menu,
  .nav > ul > li ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 0 0.5rem 0.75rem !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    list-style: none !important;
  }
  .nav > ul > li .sub-menu .menu-item,
  .nav > ul > li ul li {
    display: block !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }
  /* Override the bundle's color:#fff !important on sub-menu links */
  .nav > ul > li .sub-menu .menu-item a,
  .nav > ul > li ul li a {
    display: block !important;
    color: var(--bbh-text-muted) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    padding: 0.35rem 0 !important;
    text-transform: none !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
  }
  /* Drop the ▼ chevron since everything is already expanded */
  .menu-item-has-children:after { display: none !important; content: none !important; }

  /* Close-button (X): neutral grey instead of 2019 red */
  .menu-trigger--active span { background-color: var(--bbh-text) !important; }
  .menu-trigger span { background: var(--bbh-text) !important; }
}