/*
Theme Name: Bizstim One
Theme URI: https://www.bizstim.com/
Description: The locked theme for tenant websites on the Bizstim sites network. Looks (classic, bold, soft) are chosen in the Bizstim CRM, never in WordPress.
Version: 0.49.0
Requires at least: 6.6
Requires PHP: 7.4
Author: Bizstim
Text Domain: bizstim-one
*/

/* ==========================================================================
   Fonts: self-hosted variable woff2, latin, sitting in fonts/ beside this file.
   Nothing is fetched from Google or any other third party. One file per family
   covers every weight, so no face is ever synthesised. Licences: fonts/OFL.txt.
   ========================================================================== */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/inter-latin-wght-normal.woff2) format("woff2");
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(fonts/source-sans-3-latin-wght-normal.woff2) format("woff2");
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/outfit-latin-wght-normal.woff2) format("woff2");
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url(fonts/nunito-latin-wght-normal.woff2) format("woff2");
}

/* ==========================================================================
   Looks: every visual decision is a custom property. Defaults = classic.
   ========================================================================== */
body {
  --bz-font-heading: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --bz-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bz-heading-weight: 600;
  --bz-primary: var(--bz-brand, #1f3a5f);
  --bz-primary-text: #ffffff;
  --bz-accent: #b3822d;
  /* focus ring: never the accent. The accent is warm on two of the three looks and a red-ish
     ring on a field reads as "you did something wrong". One blue for every look, contrast-safe
     on white sections and on Bold's dark hero alike. */
  --bz-focus: #3b82f6;
  --bz-bg: #ffffff;
  --bz-surface: #f4f6f9;
  --bz-text: #1c1f26;
  --bz-muted: #5b6472;
  --bz-border: #dde2ea;
  --bz-hero-bg: #dde1e7;
  --bz-hero-bg: color-mix(in srgb, var(--bz-primary) 15%, #ffffff);
  /* the footer darkens the brand colour rather than using it raw: most scheme colours are
     mid-tone and read as a banner at full strength. 62% keeps the hue recognisable. */
  --bz-footer-bg: color-mix(in srgb, var(--bz-primary) 62%, #0b1220);
  --bz-hero-text: #1c1f26;
  --bz-hero-title: clamp(2rem, 4vw, 3rem);
  --bz-title: clamp(1.6rem, 2.6vw, 2.1rem);
  --bz-radius: 4px;
  --bz-button-bg: var(--bz-primary);
  --bz-button-text: var(--bz-primary-text);
  --bz-button-radius: 4px;
  --bz-card-bg: #ffffff;
  --bz-card-border: 1px solid var(--bz-border);
  --bz-card-shadow: none;
  --bz-content: 1100px;
  --bz-gutter: 1.25rem;
  --bz-section-pad: clamp(2.5rem, 6vw, 4.5rem);
}

body.bz-look-bold {
  --bz-font-heading: "Outfit", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --bz-font-body: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --bz-heading-weight: 800;
  --bz-primary: var(--bz-brand, #0f172a);
  --bz-primary-text: #ffffff;
  --bz-accent: #f97316;
  --bz-bg: #ffffff;
  --bz-surface: #f1f5f9;
  --bz-text: #0f172a;
  --bz-muted: #475569;
  --bz-border: #cbd5e1;
  --bz-hero-bg: var(--bz-primary);
  --bz-hero-text: #ffffff;
  --bz-hero-title: clamp(2.5rem, 6vw, 4.25rem);
  --bz-title: clamp(1.9rem, 3.2vw, 2.6rem);
  --bz-radius: 0;
  --bz-button-bg: var(--bz-primary);
  --bz-button-text: #ffffff;
  --bz-button-radius: 0;
  --bz-card-bg: #ffffff;
  --bz-card-border: 2px solid #0f172a;
  --bz-card-shadow: none;
}

body.bz-look-soft {
  --bz-font-heading: "Nunito", "Avenir Next", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --bz-font-body: "Nunito", "Avenir Next", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --bz-heading-weight: 600;
  --bz-primary: var(--bz-brand, #2a9d8f);
  --bz-primary-text: #ffffff;
  --bz-accent: #e76f51;
  --bz-bg: #fbf8f3;
  --bz-surface: #ffffff;
  --bz-text: #2b2d33;
  --bz-muted: #6b6f78;
  --bz-border: #e8e2d8;
  --bz-hero-bg: #dceae4;
  --bz-hero-bg: color-mix(in srgb, var(--bz-primary) 15%, #fbf8f3);
  /* soft has always used its near-black text colour for the footer; keep that */
  --bz-footer-bg: var(--bz-text);
  --bz-hero-text: #1f3d39;
  --bz-hero-title: clamp(2rem, 4.5vw, 3.25rem);
  --bz-title: clamp(1.6rem, 2.6vw, 2.2rem);
  --bz-radius: 18px;
  --bz-button-bg: var(--bz-primary);
  --bz-button-text: #ffffff;
  --bz-button-radius: 999px;
  --bz-card-bg: #ffffff;
  --bz-card-border: 1px solid transparent;
  --bz-card-shadow: 0 6px 24px rgba(43, 45, 51, 0.08);
}

/* ==========================================================================
   Base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bz-bg);
  color: var(--bz-text);
  font-family: var(--bz-font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--bz-primary);
}

h1,
h2,
h3,
h4 {
  font-family: var(--bz-font-heading);
  font-weight: var(--bz-heading-weight);
  line-height: 1.2;
  margin: 0 0 0.75rem;
  color: inherit;
}

.bz-inner {
  max-width: var(--bz-content);
  margin: 0 auto;
  padding: 0 var(--bz-gutter);
}

.bz-button {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  background: var(--bz-button-bg);
  color: var(--bz-button-text);
  border: 0;
  border-radius: var(--bz-button-radius);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.bz-button:hover,
.bz-button:focus-visible {
  filter: brightness(1.08);
  text-decoration: none;
}

.bz-button:focus-visible,
.bz-nav-link:focus-visible,
.bz-inquiry-form :focus-visible,
.bz-login-form :focus-visible {
  outline: 3px solid var(--bz-focus);
  outline-offset: 2px;
}

/* ==========================================================================
   Header + navigation (bz/site-header)
   ========================================================================== */
.bz-header {
  background: var(--bz-bg);
  border-bottom: 1px solid var(--bz-border);
}

.bz-header .bz-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

/* the phone + e-mail strip above the bar (the branded pages print the same one) */
.bz-header-contact {
  background: var(--bz-surface);
  border-bottom: 1px solid var(--bz-border);
  color: var(--bz-text);
}

.bz-header-contact .bz-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0 1.5rem;
  padding-top: 0;
  padding-bottom: 0;
}

.bz-header-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.25rem;
  font-size: 0.9rem;
  color: var(--bz-muted);
  text-decoration: none;
}

.bz-header-contact a:hover {
  color: var(--bz-primary);
}

.bz-header-contact .bz-contact-icon {
  width: 1em;
  height: 1em;
}

@media (max-width: 575.98px) {
  .bz-header-contact .bz-inner {
    justify-content: center;
    gap: 0 1.25rem;
  }

  .bz-header-contact a {
    min-height: 44px;
  }
}

.bz-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--bz-text);
}

/* tall logos are capped by height, long banners by width; the ratio is kept, so the menu never drops below */
.bz-logo {
  max-height: 56px;
  max-width: min(320px, 55vw);
  width: auto;
  height: auto;
}

.bz-brand-name {
  font-family: var(--bz-font-heading);
  font-weight: var(--bz-heading-weight);
  font-size: 1.35rem;
}

.bz-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}

.bz-nav-link {
  padding: 0.45rem 0.8rem;
  border-radius: var(--bz-radius);
  color: var(--bz-text);
  text-decoration: none;
  font-weight: 600;
}

.bz-nav-link:hover {
  background: var(--bz-surface);
}

/* "page" on the post list, "true" on a page inside the blog (a post, a category, a tag, a search) */
.bz-nav-link[aria-current="page"],
.bz-nav-link[aria-current="true"] {
  color: var(--bz-primary);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.45em;
}

body.bz-look-bold .bz-header {
  background: var(--bz-primary);
  color: var(--bz-primary-text);
  border-bottom: 0;
}

body.bz-look-bold .bz-brand,
body.bz-look-bold .bz-nav-link {
  color: var(--bz-primary-text);
}

body.bz-look-bold .bz-nav-link:hover {
  background: rgba(255, 255, 255, 0.12);
}

body.bz-look-bold .bz-nav-link[aria-current="page"],
body.bz-look-bold .bz-nav-link[aria-current="true"] {
  color: var(--bz-primary-text);
}

/* --------------------------------------------------------------------------
   Mobile menu. Phone first: the links live in a collapsed panel behind the
   bars icon, and the 800px block below puts them back in the bar. The panel
   animates on grid-template-rows 0fr -> 1fr, which slides to the panel's own
   height; a max-height would need a guessed number and land with a jerk.
   A checkbox drives it, so the theme still ships no JavaScript of its own.
   -------------------------------------------------------------------------- */
.bz-nav-check {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.bz-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--bz-radius);
  color: inherit;
  cursor: pointer;
}

.bz-nav-toggle:hover {
  background: var(--bz-surface);
}

body.bz-look-bold .bz-nav-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* the checkbox is what takes focus, so the ring has to be drawn on its label */
.bz-nav-check:focus-visible + .bz-nav-toggle {
  outline: 3px solid var(--bz-focus);
  outline-offset: 2px;
}

/* three bars: the span is the middle one, its pseudo-elements the outer two */
.bz-nav-bars {
  position: relative;
  display: block;
  transition: background-color 0.2s ease;
}

.bz-nav-bars::before,
.bz-nav-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.bz-nav-bars::before {
  top: -7px;
}

.bz-nav-bars::after {
  top: 7px;
}

.bz-nav-bars,
.bz-nav-bars::before,
.bz-nav-bars::after {
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s ease, background-color 0.2s ease;
}

/* open: the middle bar fades out and the outer two meet in the centre as an X */
.bz-nav-check:checked + .bz-nav-toggle .bz-nav-bars {
  background: transparent;
}

.bz-nav-check:checked + .bz-nav-toggle .bz-nav-bars::before {
  transform: translateY(7px) rotate(45deg);
}

.bz-nav-check:checked + .bz-nav-toggle .bz-nav-bars::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* full-width row of its own under the logo, so the bar itself never grows */
.bz-nav-wrap {
  flex-basis: 100%;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;
}

.bz-nav-check:checked ~ .bz-nav-wrap {
  grid-template-rows: 1fr;
}

/* min-height:0 lets the grid child shrink past its content; overflow hides it while closed.
   nowrap is load-bearing: .bz-nav inherits flex-wrap:wrap from the bar, and a *column* flex box
   that is allowed to wrap answers zero available height by spilling each link into a new column,
   so the links flick across the top of the header on every open and close. No bottom padding
   either, or the closed panel keeps that padding as a visible sliver; .bz-inner already pads. */
.bz-nav-wrap > .bz-nav {
  min-height: 0;
  overflow: hidden;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
}

.bz-nav-wrap .bz-nav-link {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.bz-nav-check:checked ~ .bz-nav-wrap .bz-nav-link {
  opacity: 1;
  transform: none;
}

/* the links arrive one after another rather than as a block */
.bz-nav-check:checked ~ .bz-nav-wrap .bz-nav-link:nth-child(1) { transition-delay: 0.08s; }
.bz-nav-check:checked ~ .bz-nav-wrap .bz-nav-link:nth-child(2) { transition-delay: 0.12s; }
.bz-nav-check:checked ~ .bz-nav-wrap .bz-nav-link:nth-child(3) { transition-delay: 0.16s; }
.bz-nav-check:checked ~ .bz-nav-wrap .bz-nav-link:nth-child(4) { transition-delay: 0.20s; }
.bz-nav-check:checked ~ .bz-nav-wrap .bz-nav-link:nth-child(5) { transition-delay: 0.24s; }
.bz-nav-check:checked ~ .bz-nav-wrap .bz-nav-link:nth-child(6) { transition-delay: 0.28s; }

/* from 800px the toggle is gone and the panel is an ordinary open row of links again */
@media (min-width: 800px) {
  .bz-nav-toggle {
    display: none;
  }

  .bz-nav-wrap {
    flex-basis: auto;
    grid-template-rows: 1fr;
    transition: none;
  }

  .bz-nav-wrap > .bz-nav {
    overflow: visible;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .bz-nav-wrap .bz-nav-link {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
}

/* with the blog's link in the menu (its name can run to 30 characters) the row of links no longer
   fits beside a wide logo under 1100px and would drop under it: the phone panel stays until then.
   A menu with no blog link keeps the 800px switch above. */
@media (min-width: 800px) and (max-width: 1099.98px) {
  :has(> .bz-nav-wrap .bz-nav-blog) > .bz-nav-toggle {
    display: inline-flex;
  }

  .bz-nav-wrap:has(.bz-nav-blog) {
    flex-basis: 100%;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.32s ease;
  }

  .bz-nav-check:checked ~ .bz-nav-wrap:has(.bz-nav-blog) {
    grid-template-rows: 1fr;
  }

  .bz-nav-wrap:has(.bz-nav-blog) > .bz-nav {
    overflow: hidden;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .bz-nav-wrap:has(.bz-nav-blog) .bz-nav-link {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  .bz-nav-check:checked ~ .bz-nav-wrap:has(.bz-nav-blog) .bz-nav-link {
    opacity: 1;
    transform: none;
  }

  .bz-nav-check:checked ~ .bz-nav-wrap:has(.bz-nav-blog) .bz-nav-link:nth-child(1) { transition-delay: 0.08s; }
  .bz-nav-check:checked ~ .bz-nav-wrap:has(.bz-nav-blog) .bz-nav-link:nth-child(2) { transition-delay: 0.12s; }
  .bz-nav-check:checked ~ .bz-nav-wrap:has(.bz-nav-blog) .bz-nav-link:nth-child(3) { transition-delay: 0.16s; }
  .bz-nav-check:checked ~ .bz-nav-wrap:has(.bz-nav-blog) .bz-nav-link:nth-child(4) { transition-delay: 0.20s; }
  .bz-nav-check:checked ~ .bz-nav-wrap:has(.bz-nav-blog) .bz-nav-link:nth-child(5) { transition-delay: 0.24s; }
  .bz-nav-check:checked ~ .bz-nav-wrap:has(.bz-nav-blog) .bz-nav-link:nth-child(6) { transition-delay: 0.28s; }
}

@media (prefers-reduced-motion: reduce) {
  .bz-nav-wrap,
  .bz-nav-wrap .bz-nav-link,
  .bz-nav-wrap:has(.bz-nav-blog),
  .bz-nav-wrap:has(.bz-nav-blog) .bz-nav-link,
  .bz-nav-bars,
  .bz-nav-bars::before,
  .bz-nav-bars::after {
    transition: none;
  }
}

/* the bold hero band is the brand colour, so its button inverts to keep its shape */
body.bz-look-bold .bz-hero .bz-button {
  background: var(--bz-primary-text);
  color: var(--bz-primary);
}

/* ==========================================================================
   Page shell
   ========================================================================== */
.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.bz-main {
  flex: 1 0 auto;
  min-height: 50vh;
}

/* the page title is its own band in the banner tint (the full brand colour on bold), never loose white space */
.bz-page-title {
  padding: calc(var(--bz-section-pad) * 0.6) max(var(--bz-gutter), calc((100% - var(--bz-content)) / 2 + var(--bz-gutter)));
  background: var(--bz-hero-bg);
  color: var(--bz-hero-text);
}

.bz-page-title h1 {
  font-size: var(--bz-hero-title);
  margin: 0;
}

/* Home without a banner: the company name is the page's h1, in the same band */
.bz-home-title {
  padding-top: calc(var(--bz-section-pad) * 0.6);
  padding-bottom: calc(var(--bz-section-pad) * 0.6);
}

.bz-404,
.bz-posts,
.bz-post {
  padding: var(--bz-section-pad) max(var(--bz-gutter), calc((100% - var(--bz-content)) / 2 + var(--bz-gutter)));
}

/* ==========================================================================
   Sections (every bz/* block renders <section class="bz-section bz-{key}">)
   ========================================================================== */
.bz-section {
  padding: var(--bz-section-pad) max(var(--bz-gutter), calc((100% - var(--bz-content)) / 2 + var(--bz-gutter)));
}

.wp-block-post-content > .bz-section:nth-of-type(even) {
  background: var(--bz-surface);
}

/* The background colour a tenant picked for one widget on the CRM board (extra.bg). Auto is the rule
   above and carries no class at all. These sit directly after it and repeat its .wp-block-post-content
   > .bz-section prefix on purpose: at 0-3-0 they tie with it, and the later rule wins. A bare
   .bz-bg-plain would be 0-1-0 and lose on every even section. */
.wp-block-post-content > .bz-section.bz-bg-plain {
  background: var(--bz-bg);
}

.wp-block-post-content > .bz-section.bz-bg-shaded {
  background: var(--bz-surface);
}

/* the brand steps wash the tenant's colour into the page colour, the same mechanism the banner tint and
   the notice boxes use; the flat line first is what a browser without color-mix keeps */
.wp-block-post-content > .bz-section.bz-bg-b08 {
  background: var(--bz-surface);
  background: color-mix(in srgb, var(--bz-primary) 8%, var(--bz-bg));
}

.wp-block-post-content > .bz-section.bz-bg-b15 {
  background: var(--bz-surface);
  background: color-mix(in srgb, var(--bz-primary) 15%, var(--bz-bg));
}

.wp-block-post-content > .bz-section.bz-bg-b25 {
  background: var(--bz-surface);
  background: color-mix(in srgb, var(--bz-primary) 25%, var(--bz-bg));
}

/* Brand solid is the full colour with light words, so everything the section paints for itself has to
   follow it the way the banner already does: the body colour, plain links, and the button inverted. */
.wp-block-post-content > .bz-section.bz-bg-solid {
  background: var(--bz-primary);
  color: var(--bz-primary-text);
}

.bz-bg-solid .bz-title,
.bz-bg-solid .bz-body {
  color: inherit;
}

.bz-bg-solid a:not(.bz-button) {
  color: inherit;
  text-decoration: underline;
}

.bz-bg-solid .bz-button {
  background: var(--bz-primary-text);
  color: var(--bz-primary);
}

/* Readability floor: a card keeps its own pale background inside a solid section, so its words have to
   stay dark or they are white on white. Every element that paints --bz-card-bg is here; the popup card
   and the form fields already set their own colour, and a solid notice box paints its own pair. */
.bz-bg-solid .bz-notice-box:not(.bz-notice-bold),
.bz-bg-solid .bz-benefit,
.bz-bg-solid .bz-promo-plain,
.bz-bg-solid .bz-number,
.bz-bg-solid .bz-team-card,
.bz-bg-solid .bz-services-list,
.bz-bg-solid .bz-package,
.bz-bg-solid .bz-service-card,
.bz-bg-solid .bz-testimonial,
.bz-bg-solid .bz-location,
.bz-bg-solid .bz-hours-table,
.bz-bg-solid .bz-faq-item,
.bz-bg-solid .bz-form-note,
.bz-bg-solid .bz-login-form,
.bz-bg-solid .bz-inquiry-form {
  color: var(--bz-text);
}

/* and a button inside one of those cards keeps its ordinary look: inverted it would paint the card's own
   colour on the card. Only three cards hold one (the call-to-action card, the login card and the
   contact form). */
.bz-bg-solid .bz-promo-plain .bz-button,
.bz-bg-solid .bz-login-form .bz-button,
.bz-bg-solid .bz-inquiry-form .bz-button {
  background: var(--bz-button-bg);
  color: var(--bz-button-text);
}

/* Two neighbouring sections in the same colour read as one band, so their spaces added up and the gap
   between them doubled (144px measured on a Contact page: a shaded notice over a shaded form). Where
   the colour does not change, the upper section gives up its bottom space and the lower one takes one
   full section space on top, even a compact one, so the gap is the same as at any colour edge. Two
   Autos alternate and never match; an Auto (no bz-bg- class) only matches the pick that paints its
   colour: odd = the page colour = Plain, even = Shaded. The banner paints its own band and never
   matches. An image on the bottom edge (bz-edge) keeps both spaces so the next section does not touch
   it. Browsers without :has() keep the old spacing. */
@supports selector(:has(+ *)) {
  .wp-block-post-content > .bz-section:not(.bz-edge):is(
    .bz-bg-plain:has(+ .bz-bg-plain),
    .bz-bg-shaded:has(+ .bz-bg-shaded),
    .bz-bg-b08:has(+ .bz-bg-b08),
    .bz-bg-b15:has(+ .bz-bg-b15),
    .bz-bg-b25:has(+ .bz-bg-b25),
    .bz-bg-solid:has(+ .bz-bg-solid),
    .bz-bg-plain:has(+ .bz-section:nth-of-type(odd):not(.bz-hero):not([class*="bz-bg-"])),
    .bz-section:nth-of-type(odd):not(.bz-hero):not([class*="bz-bg-"]):has(+ .bz-bg-plain),
    .bz-bg-shaded:has(+ .bz-section:nth-of-type(even):not(.bz-hero):not([class*="bz-bg-"])),
    .bz-section:nth-of-type(even):not(.bz-hero):not([class*="bz-bg-"]):has(+ .bz-bg-shaded)
  ) {
    padding-bottom: 0;
  }

  .wp-block-post-content > :is(
    .bz-bg-plain:not(.bz-edge) + .bz-bg-plain,
    .bz-bg-shaded:not(.bz-edge) + .bz-bg-shaded,
    .bz-bg-b08:not(.bz-edge) + .bz-bg-b08,
    .bz-bg-b15:not(.bz-edge) + .bz-bg-b15,
    .bz-bg-b25:not(.bz-edge) + .bz-bg-b25,
    .bz-bg-solid:not(.bz-edge) + .bz-bg-solid,
    .bz-bg-plain:not(.bz-edge) + .bz-section:nth-of-type(odd):not(.bz-hero):not([class*="bz-bg-"]),
    .bz-section:nth-of-type(odd):not(.bz-hero):not(.bz-edge):not([class*="bz-bg-"]) + .bz-bg-plain,
    .bz-bg-shaded:not(.bz-edge) + .bz-section:nth-of-type(even):not(.bz-hero):not([class*="bz-bg-"]),
    .bz-section:nth-of-type(even):not(.bz-hero):not(.bz-edge):not([class*="bz-bg-"]) + .bz-bg-shaded
  ) {
    padding-top: var(--bz-section-pad);
  }
}

.bz-title {
  font-size: var(--bz-title);
}

.bz-body {
  color: var(--bz-text);
}

.bz-body p:last-child {
  margin-bottom: 0;
}

.bz-image {
  margin: 1.5rem 0 0;
}

.bz-image img {
  display: block;
  width: 100%;
  border-radius: var(--bz-radius);
  object-fit: cover;
}

.bz-cta {
  margin: 1.5rem 0 0;
}

/* legal pages: reading width */
.bz-privacy .bz-body,
.bz-terms .bz-body {
  max-width: 76ch;
}

/* --- hero -------------------------------------------------------------- */
.bz-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  background: var(--bz-hero-bg) !important;
  color: var(--bz-hero-text);
}

.bz-hero .bz-title {
  font-size: var(--bz-hero-title);
  letter-spacing: -0.01em;
}

.bz-hero .bz-body {
  font-size: 1.15rem;
  color: inherit;
}

.bz-hero .bz-image {
  margin: 0;
}

.bz-hero a:not(.bz-button) {
  color: inherit;
}

@media (min-width: 800px) {
  .bz-hero:has(.bz-image) {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

/* banner layouts: image left, image behind the words, words only (image right is the default above) */
.bz-hero-text {
  min-width: 0;
}

.bz-hero.bz-layout-image-left .bz-image {
  order: -1;
}

@media (min-width: 800px) {
  .bz-hero.bz-layout-image-left:has(.bz-image) {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

.bz-hero.bz-layout-image-behind {
  position: relative;
  background-image: var(--bz-hero-image) !important;
  background-size: cover;
  background-position: center;
  color: #ffffff;
}

.bz-hero.bz-layout-image-behind::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.55);
}

.bz-hero.bz-layout-image-behind .bz-hero-text {
  position: relative;
  max-width: 68ch;
}

.bz-hero.bz-layout-image-behind .bz-body {
  color: inherit;
}

/* --- about (the image beside the words) -------------------------------- */
.bz-about {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

.bz-about-text {
  min-width: 0;
}

.bz-about .bz-image {
  margin: 0;
}

.bz-about.bz-layout-image-left .bz-image {
  order: -1;
}

@media (min-width: 800px) {
  .bz-about:has(.bz-image) {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .bz-about.bz-layout-image-left:has(.bz-image) {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

/* --- notice ------------------------------------------------------------
   The box is .bz-notice-box; .bz-notice is the section wrapper and keeps the
   standard section padding, so the notice sits at page width like every other
   band. Two emphases keyed on one colour: light (a 10% wash, a 35% hairline and
   the coloured edge) and bold (the whole box in the colour). The wash is what
   gives the light box its shape wherever it lands: a plain card background is
   the same white as an odd band on Classic, and Soft's card border token is
   transparent, so neither reads on its own. Bold's Important background is
   darkened off the accent because white on the raw accent is too pale to read
   (#f97316 on Bold). Browsers without color-mix fall back to the card look. */
.bz-notice-box {
  --bz-notice-colour: var(--bz-primary);
  --bz-notice-bold-bg: var(--bz-primary);
  --bz-notice-bold-text: var(--bz-primary-text);
  padding: 1.25rem 1.5rem;
  background: var(--bz-card-bg);
  background: color-mix(in srgb, var(--bz-notice-colour) 10%, var(--bz-bg));
  border: 1px solid var(--bz-border);
  border: 1px solid color-mix(in srgb, var(--bz-notice-colour) 35%, var(--bz-bg));
  border-left: 5px solid var(--bz-notice-colour);
  border-radius: var(--bz-radius);
  box-shadow: var(--bz-card-shadow);
}

.bz-notice-warning {
  --bz-notice-colour: var(--bz-accent);
  --bz-notice-bold-bg: #8a5d10;
  --bz-notice-bold-bg: color-mix(in srgb, var(--bz-accent) 78%, #000);
  --bz-notice-bold-text: #ffffff;
}

.bz-notice-danger {
  --bz-notice-colour: #c62828;
  --bz-notice-bold-bg: #c62828;
  --bz-notice-bold-text: #ffffff;
}

.bz-notice-success {
  --bz-notice-colour: #2f855a;
  --bz-notice-bold-bg: #2f855a;
  --bz-notice-bold-text: #ffffff;
}

.bz-notice-bold {
  background: var(--bz-notice-bold-bg);
  border-color: var(--bz-notice-bold-bg);
  color: var(--bz-notice-bold-text);
}

.bz-notice-bold .bz-title,
.bz-notice-bold .bz-body {
  color: inherit;
}

.bz-notice-bold a {
  color: inherit;
  text-decoration: underline;
}

.bz-notice-box .bz-title {
  font-size: 1.2rem;
}

/* the box owns its padding, so the first line must not add the browser's own paragraph margin on top
   (1em of a 17px body): without this a box with no heading sits 17px low against its own bottom edge. */
.bz-notice-box .bz-body > :first-child {
  margin-top: 0;
}

/* --- custom section layouts ------------------------------------------- */
.bz-custom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

.bz-custom-words {
  min-width: 0;
}

.bz-custom .bz-image {
  margin: 0;
}

.bz-custom-image-left .bz-image,
.bz-custom-image-above .bz-image {
  order: -1;
}

.bz-custom-image-above,
.bz-custom-image-only {
  align-items: start;
}

@media (min-width: 800px) {
  .bz-custom-image-right:has(.bz-image) {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .bz-custom-image-left:has(.bz-image) {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

.bz-body ul,
.bz-body ol {
  padding-left: 1.4rem;
}

/* --- benefits ---------------------------------------------------------- */
.bz-benefit-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
}

.bz-benefit {
  background: var(--bz-card-bg);
  border: var(--bz-card-border);
  border-radius: var(--bz-radius);
  box-shadow: var(--bz-card-shadow);
  padding: 1.5rem;
}

.bz-benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  border-radius: 50%;
  color: var(--bz-primary);
  background: color-mix(in srgb, var(--bz-primary) 12%, var(--bz-card-bg));
}

.bz-benefit-icon svg {
  width: 24px;
  height: 24px;
}

.bz-benefit-heading {
  font-size: 1.15rem;
  margin-bottom: 0.35rem;
}

.bz-benefit-text {
  margin: 0;
  font-size: 0.95rem;
}

/* --- call to action ---------------------------------------------------- */
.bz-promo {
  padding-top: calc(var(--bz-section-pad) * 0.5);
  padding-bottom: calc(var(--bz-section-pad) * 0.5);
}

.bz-promo-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  padding: 2rem 2.25rem;
  border-radius: var(--bz-radius);
}

.bz-promo-words {
  flex: 1 1 320px;
  min-width: 0;
}

.bz-promo-words .bz-title {
  font-size: 1.5rem;
  margin-bottom: 0.35rem;
}

.bz-promo-words .bz-body {
  color: inherit;
}

.bz-promo-box .bz-cta {
  margin: 0;
  flex: 0 0 auto;
}

.bz-promo-plain {
  background: var(--bz-card-bg);
  border: var(--bz-card-border);
  box-shadow: var(--bz-card-shadow);
}

.bz-promo-border {
  border: 2px solid var(--bz-primary);
}

.bz-promo-brand {
  background: var(--bz-primary);
  color: var(--bz-primary-text);
}

.bz-promo-brand .bz-button {
  background: var(--bz-primary-text);
  color: var(--bz-primary);
}

/* --- how it works (numbered steps) ------------------------------------- */
.bz-step-list {
  list-style: none;
  counter-reset: bz-step;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

.bz-step {
  counter-increment: bz-step;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.bz-step::before {
  content: counter(bz-step);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bz-primary);
  color: var(--bz-primary-text);
  font-family: var(--bz-font-heading);
  font-weight: 700;
  font-size: 1.2rem;
}

.bz-step-words {
  min-width: 0;
}

.bz-step-heading {
  font-size: 1.15rem;
  margin-bottom: 0.35rem;
}

.bz-step-text {
  margin: 0;
  font-size: 0.95rem;
}

/* --- by the numbers ---------------------------------------------------- */
.bz-number-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  text-align: center;
}

.bz-number {
  padding: 1.25rem 1rem;
  background: var(--bz-card-bg);
  border: var(--bz-card-border);
  border-radius: var(--bz-radius);
  box-shadow: var(--bz-card-shadow);
}

.bz-number-value {
  display: block;
  font-family: var(--bz-font-heading);
  font-weight: var(--bz-heading-weight);
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.1;
  color: var(--bz-primary);
}

.bz-number-label {
  display: block;
  margin-top: 0.35rem;
  color: var(--bz-muted);
  font-size: 0.95rem;
}

/* --- video ------------------------------------------------------------- */
.bz-video-frame {
  margin-top: 1.5rem;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--bz-radius);
  overflow: hidden;
}

.bz-video-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- team -------------------------------------------------------------- */
.bz-team-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.5rem;
}

.bz-team-card {
  background: var(--bz-card-bg);
  border: var(--bz-card-border);
  border-radius: var(--bz-radius);
  box-shadow: var(--bz-card-shadow);
  padding: 1.5rem;
  text-align: center;
}

.bz-team-photo {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1rem;
  display: block;
}

.bz-team-avatar {
  background: var(--bz-surface);
  color: var(--bz-border);
  overflow: hidden;
}

.bz-team-avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}

.bz-team-name {
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
}

.bz-team-position {
  color: var(--bz-muted);
  margin: 0 0 0.75rem;
  font-weight: 600;
}

.bz-team-excerpt {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
}

.bz-team-skills {
  margin: 0;
  font-size: 0.875rem;
  color: var(--bz-muted);
}

.bz-team-more {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
}

.bz-team-links {
  margin: 0.25rem 0 0;
}

.bz-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--bz-primary);
  background: var(--bz-surface);
}

.bz-linkedin:hover,
.bz-linkedin:focus-visible {
  color: var(--bz-primary-text);
  background: var(--bz-primary);
}

.bz-linkedin svg {
  width: 18px;
  height: 18px;
}

/* the popup repeats the card with the whole bio */
.bz-team-card-full {
  border: 0;
  box-shadow: none;
  padding: 0;
  text-align: center;
}

.bz-dialog-bio {
  text-align: left;
  font-size: 1rem;
}

.bz-dialog-bio p:last-child {
  margin-bottom: 0;
}

/* --- show more (no script: the hidden checkbox is the state) ------------ */
/* hidden the way .bz-nav-check is. It prints right before the button: a click on the label focuses it,
   and the browser scrolls to whatever takes focus, so anywhere else makes the page jump. */
.bz-more-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* a browser without :has() drops these rules whole: everyone shows and the button never appears */
.bz-section:has(> .bz-more-toggle:not(:checked)) .bz-team-extra,
.bz-section:has(> .bz-more-toggle:not(:checked)) .bz-testimonial-extra {
  display: none;
}

.bz-more-wrap {
  display: none;
  margin: 1.75rem 0 0;
  text-align: center;
}

.bz-section:has(> .bz-more-toggle) .bz-more-wrap {
  display: block;
}

.bz-more-label {
  display: inline-block;
  padding: 0.7rem 1.6rem;
  border: 1px solid var(--bz-primary);
  border-radius: var(--bz-button-radius);
  color: var(--bz-primary);
  font-weight: 600;
  cursor: pointer;
}

.bz-more-label:hover {
  background: var(--bz-primary);
  color: var(--bz-primary-text);
}

/* the checkbox is what takes focus, so the ring has to be drawn on its label */
.bz-more-toggle:focus-visible + .bz-more-wrap .bz-more-label {
  outline: 3px solid var(--bz-focus);
  outline-offset: 2px;
}

.bz-more-toggle:checked + .bz-more-wrap .bz-more-a,
.bz-more-toggle:not(:checked) + .bz-more-wrap .bz-more-b {
  display: none;
}

/* a widget the tenant painted Brand solid: the outline button has to invert */
.bz-bg-solid .bz-more-label {
  border-color: currentColor;
  color: inherit;
}

.bz-bg-solid .bz-more-label:hover {
  background: var(--bz-primary-text);
  color: var(--bz-primary);
}

/* --- services ---------------------------------------------------------- */
.bz-services-group {
  font-size: 1.25rem;
  margin: 2rem 0 0.75rem;
}

/* every other widget's list brings its own 2rem top margin; these two did not, so an intro
   paragraph sat flush on the cards. A group subheading prints its own gap, so it needs none. */
.bz-body + .bz-service-cards,
.bz-body + .bz-services-list {
  margin-top: 2rem;
}

.bz-services-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--bz-card-bg);
  border: var(--bz-card-border);
  border-radius: var(--bz-radius);
  box-shadow: var(--bz-card-shadow);
}

.bz-service {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 0.9rem 1.25rem;
  border-top: 1px solid var(--bz-border);
}

.bz-service:first-child {
  border-top: 0;
}

.bz-service-price {
  font-weight: 600;
  white-space: nowrap;
}

/* service groups as package cards: the price falls as the quantity rises */
.bz-packages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

.bz-package {
  background: var(--bz-card-bg);
  border: var(--bz-card-border);
  border-radius: var(--bz-radius);
  box-shadow: var(--bz-card-shadow);
  padding: 1.25rem 1.5rem;
}

.bz-package-name {
  font-size: 1.15rem;
  margin: 0 0 0.75rem;
}

.bz-package-rungs {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* wraps as a unit, the way .bz-service does: at the widths where a package track sits at
   its 260px minimum the price drops to its own line instead of breaking "60 hours" in two */
.bz-package-rung {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.15rem 1rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--bz-border);
}

.bz-package-rung:first-child {
  border-top: 0;
}

.bz-package-qty {
  white-space: nowrap;
}

.bz-package-price {
  font-weight: 600;
  white-space: nowrap;
}

.bz-package-rung:last-child .bz-package-price {
  color: var(--bz-primary);
  font-weight: 800;
}

/* services as cards (extra.layout = cards): one shell for services, packages and memberships, the name in the
   header and the cost in the body. Built only from the card tokens, so bold and soft need nothing of their own.
   260px is the package minimum above; content stops at 1100px and 4 x 260 + 3 gaps = 1112, so a row never
   holds more than three. */
.bz-service-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

.bz-service-card {
  display: flex;
  flex-direction: column;
  background: var(--bz-card-bg);
  border: var(--bz-card-border);
  border-radius: var(--bz-radius);
  box-shadow: var(--bz-card-shadow);
  overflow: hidden;
}

/* the flat line first is what a browser without color-mix keeps */
.bz-service-card-head {
  padding: 0.85rem 1.25rem;
  background: var(--bz-surface);
  background: color-mix(in srgb, var(--bz-primary) 8%, var(--bz-card-bg));
  border-bottom: 1px solid var(--bz-border);
}

.bz-service-card-name {
  margin: 0;
  font-size: 1.05rem;
}

.bz-service-card-body {
  flex: 1;
  padding: 1.1rem 1.25rem 1.25rem;
}

.bz-service-card-price {
  display: block;
  color: var(--bz-primary);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.bz-service-card-unit {
  display: block;
  margin-top: 0.2rem;
  color: var(--bz-muted);
  font-size: 0.9rem;
}

/* a package card holds the same ladder the list layout prints */
.bz-service-card-body .bz-package-rungs {
  font-variant-numeric: tabular-nums;
}

.bz-service-card-body .bz-package-rung:first-child {
  padding-top: 0;
}

/* --- testimonials ------------------------------------------------------ */
.bz-testimonials-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.bz-testimonial {
  margin: 0;
  padding: 1.5rem 1.5rem 1.5rem 2rem;
  background: var(--bz-card-bg);
  border: var(--bz-card-border);
  border-left: 5px solid var(--bz-accent);
  border-radius: var(--bz-radius);
  box-shadow: var(--bz-card-shadow);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bz-testimonial blockquote {
  margin: 0;
  flex: 1 1 auto;
}

.bz-testimonial p {
  margin: 0;
  font-style: italic;
}

.bz-testimonial-who {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bz-testimonial-name {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.bz-testimonial cite {
  font-style: normal;
  font-weight: 600;
}

.bz-testimonial-role {
  font-size: 0.875rem;
  color: var(--bz-muted);
}

/* initials avatar: one of eight colours, fixed by the name */
.bz-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.bz-avatar-0 { background: #e57373; }
.bz-avatar-1 { background: #f06292; }
.bz-avatar-2 { background: #ba68c8; }
.bz-avatar-3 { background: #64b5f6; }
.bz-avatar-4 { background: #4db6ac; }
.bz-avatar-5 { background: #81c784; }
.bz-avatar-6 { background: #ffb74d; }
.bz-avatar-7 { background: #a1887f; }

/* "… more" and other link-shaped buttons */
.bz-link-button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-style: normal;
  font-weight: 600;
  color: var(--bz-primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* popup card (native dialog) */
.bz-dialog {
  width: min(640px, calc(100vw - 2rem));
  max-height: min(80vh, 900px);
  padding: 0;
  border: 0;
  border-radius: var(--bz-radius);
  background: var(--bz-card-bg);
  color: var(--bz-text);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.bz-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.bz-dialog-inner {
  position: relative;
  padding: 2rem;
  max-height: min(80vh, 900px);
  overflow: auto;
}

.bz-dialog-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--bz-muted);
  cursor: pointer;
}

.bz-dialog-quote {
  margin: 0 0 1rem;
  font-style: italic;
}

.bz-dialog-quote p:last-child {
  margin-bottom: 0;
}

/* --- locations --------------------------------------------------------- */
.bz-locations-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

.bz-location {
  background: var(--bz-card-bg);
  border: var(--bz-card-border);
  border-radius: var(--bz-radius);
  box-shadow: var(--bz-card-shadow);
  padding: 1.5rem;
}

.bz-location-name {
  font-size: 1.2rem;
}

.bz-address {
  font-style: normal;
  margin: 0 0 0.5rem;
}

.bz-phone,
.bz-email {
  margin: 0 0 0.25rem;
}

/* the linked phone number and e-mail address (contact details, footer) carry their icon and drop the
   browser's underline; the Locations cards print these as plain text and are untouched */
.bz-phone a,
.bz-email a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
}

.bz-phone a:hover,
.bz-phone a:focus-visible,
.bz-email a:hover,
.bz-email a:focus-visible {
  text-decoration: underline;
}

.bz-contact-icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

/* --- hours ------------------------------------------------------------- */
.bz-hours-table {
  border-collapse: collapse;
  width: 100%;
  max-width: 520px;
  margin-top: 1.5rem;
  background: var(--bz-card-bg);
  border: var(--bz-card-border);
  border-radius: var(--bz-radius);
  box-shadow: var(--bz-card-shadow);
  overflow: hidden;
}

.bz-hours-table th,
.bz-hours-table td {
  padding: 0.7rem 1rem;
  text-align: left;
  border-top: 1px solid var(--bz-border);
}

.bz-hours-table tr:first-child th,
.bz-hours-table tr:first-child td {
  border-top: 0;
}

.bz-hours-table th {
  font-weight: 600;
  width: 45%;
}

/* --- faq --------------------------------------------------------------- */
.bz-faq-list {
  margin-top: 1.5rem;
  max-width: 76ch;
}

.bz-faq-item {
  background: var(--bz-card-bg);
  border: var(--bz-card-border);
  border-radius: var(--bz-radius);
  box-shadow: var(--bz-card-shadow);
  padding: 0 1.25rem;
  margin-bottom: 0.75rem;
}

.bz-faq-item summary {
  padding: 1rem 0;
  font-weight: 600;
  cursor: pointer;
}

.bz-faq-item[open] summary {
  border-bottom: 1px solid var(--bz-border);
}

.bz-faq-item p {
  margin: 1rem 0;
}

/* --- contact details + inquiry form ------------------------------------ */
/* the company details are a compact block of facts, not a full section */
.bz-contact-details {
  padding-top: calc(var(--bz-section-pad) * 0.5);
  padding-bottom: calc(var(--bz-section-pad) * 0.5);
}

.bz-contact-details .bz-title,
.bz-details-hours .bz-title {
  font-size: 1.35rem;
  margin-bottom: 0.5rem;
}

.bz-details-hours .bz-hours-table {
  max-width: 420px;
  font-size: 0.95rem;
}

.bz-details-hours .bz-hours-table th,
.bz-details-hours .bz-hours-table td {
  padding: 0.4rem 0.9rem;
}

/* hours placed on the Contact page sit beside the company details */
.bz-details-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

.bz-details-hours .bz-hours-table {
  margin-top: 0;
}

@media (min-width: 800px) {
  .bz-details-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.bz-form-note {
  max-width: 68ch;
  padding: 0.9rem 1.25rem;
  border-radius: var(--bz-radius);
  border-left: 5px solid var(--bz-primary);
  background: var(--bz-card-bg);
  box-shadow: var(--bz-card-shadow);
}

.bz-form-error {
  border-left-color: #c53030;
}

.bz-form-success {
  border-left-color: #2f855a;
}

/* The form sizes its own columns: two only where a field can still hold a typical e-mail address
   (about 300px at this font), one everywhere else. A viewport media query cannot do this — beside
   the map or the image the form column caps at 534px however wide the window gets. The min() guard
   keeps the track from overflowing a container narrower than the floor. The form is a card like the
   login form and the map beside it; the 640px reading cap is for the fields, so the card's own padding
   is added on top of it and a form alone still gets its two columns. */
.bz-inquiry-form {
  margin-top: 1.5rem;
  max-width: calc(640px + 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1rem;
  padding: 2rem;
  background: var(--bz-card-bg);
  border: var(--bz-card-border);
  border-radius: var(--bz-radius);
  box-shadow: var(--bz-card-shadow);
}

.bz-field {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.bz-field label {
  font-weight: 600;
  font-size: 0.95rem;
}

.bz-field input,
.bz-field select,
.bz-field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font: inherit;
  color: var(--bz-text);
  background: var(--bz-card-bg);
  border: 1px solid var(--bz-border);
  border-radius: var(--bz-radius);
}

.bz-field textarea {
  resize: vertical;
  min-height: 8rem;
}

/* the account's custom questions: choice groups are plain labels, always full width */
.bz-choices {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.bz-choices legend {
  padding: 0;
  margin-bottom: 0.35rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.bz-choices label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: normal;
}

.bz-choices input {
  width: auto;
  margin: 0;
}

.bz-actions {
  margin: 0;
}

/* full-width rows; a no-op while the grid is a single column */
.bz-inquiry-form .bz-field-wide,
.bz-inquiry-form fieldset.bz-field,
.bz-inquiry-form .bz-actions {
  grid-column: 1 / -1;
}

/* a label that wraps to two lines must not push its own input below the one beside it */
.bz-inquiry-form .bz-field > input,
.bz-inquiry-form .bz-field > select {
  margin-top: auto;
}

/* contact layouts: the form beside the map or the image, or full width with the map underneath */
.bz-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
  margin-top: 1.5rem;
}

.bz-contact-grid .bz-inquiry-form {
  margin-top: 0;
  max-width: none;
}

/* "Form full width" means the form spans the section, not the 640px reading cap */
.bz-layout-form-wide .bz-inquiry-form {
  max-width: none;
}

.bz-contact-side .bz-image {
  margin: 0;
}

@media (min-width: 800px) {
  .bz-contact-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* image on the bottom edge (bz-edge: banner / about / custom beside or alone, contact form + image).
   The section drops its bottom space and the image sits on the edge with square bottom corners;
   the words (or the form) keep that space themselves. Phones stack the image under the words, so
   "image left" moves below too and the words need no extra space. Kept after every layout rule
   so the equal-specificity order overrides win. */
.bz-section.bz-edge {
  padding-bottom: 0;
}

.bz-section.bz-edge .bz-image,
.bz-section.bz-edge .bz-contact-side {
  align-self: end;
}

.bz-section.bz-edge .bz-image img {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.bz-section.bz-edge .bz-image {
  order: 0;
}

@media (min-width: 800px) {
  .bz-section.bz-edge .bz-hero-text,
  .bz-section.bz-edge .bz-about-text,
  .bz-section.bz-edge .bz-custom-words,
  .bz-section.bz-edge .bz-contact-main {
    padding-bottom: var(--bz-section-pad);
  }

  .bz-section.bz-edge.bz-layout-image-left .bz-image {
    order: -1;
  }
}

.bz-map {
  background: var(--bz-surface);
  border: var(--bz-card-border);
  border-radius: var(--bz-radius);
  box-shadow: var(--bz-card-shadow);
  overflow: hidden;
}

.bz-map iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
}

.bz-contact-below {
  margin-top: 2rem;
}

.bz-contact-below .bz-map iframe {
  height: 320px;
}

/* --- portal login (the real login form) -------------------------------- */
.bz-portal-login {
  text-align: center;
}

.bz-portal-login .bz-body {
  margin: 0 auto;
}

/* the tenant's own wording, placed by the login row's layout. Above and below keep the centred column
   the page has always had; left and right split into two columns from 800px and read left-aligned, the
   same breakpoint the contact details use for their Hours column. */
.bz-login-words .bz-body,
.bz-login-words .bz-notice-box {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
  text-align: left; /* the column stays centred on the page; the lines inside it read left (paragraphs, lists) */
}

/* 20px clear above and below the wording itself, box or bare text, in every layout. flow-root stops
   those margins collapsing out through the wrapper and being swallowed by the form's own 1.5rem
   (words above) or the wrapper's 2rem (words below); a grid item never collapses, hence side by side. */
.bz-login-words {
  display: flow-root;
}

.bz-login-words .bz-notice-box,
.bz-login-words > .bz-body {
  margin-top: 20px;
  margin-bottom: 20px;
}

.bz-layout-words-below .bz-login-words {
  margin-top: 2rem;
}

.bz-login-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
  text-align: left;
}

.bz-login-grid .bz-login-form {
  margin-top: 0;
}

@media (min-width: 800px) {
  .bz-login-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.bz-login-form {
  margin: 1.5rem auto 0;
  max-width: 420px;
  padding: 2rem;
  text-align: left;
  background: var(--bz-card-bg);
  border: var(--bz-card-border);
  border-radius: var(--bz-radius);
  box-shadow: var(--bz-card-shadow);
  display: grid;
  gap: 1rem;
  /* the recovery panes (?rc=) reuse this card, and each is its own page load. Hold the card at the
     login pane's own height so the shorter panes cannot shrink it and jerk the page; a taller pane
     still grows past it. align-content is required with it: the card is a grid, so without this the
     spare height is handed to the rows and the fields drift apart instead of the space sitting at
     the bottom. Measured 2026-09-16: login 356 at both 1280 and 400 wide. */
  min-height: 356px;
  align-content: start;
}

.bz-login-form .bz-actions .bz-button {
  width: 100%;
}

.bz-password {
  position: relative;
  display: block;
}

.bz-password input {
  padding-right: 3rem;
}

/* the eye sits inside the field: hold to show the password, release to hide it (same as the branded login page) */
.bz-password-toggle {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  padding: 0.35rem;
  border: 0;
  background: none;
  color: var(--bz-muted);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.bz-password-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
  pointer-events: none; /* the icon swaps under the pointer; a mouseleave from the vanished icon must not read as letting go */
}

.bz-password-toggle .bz-eye-off,
.bz-password-toggle.is-showing .bz-eye {
  display: none;
}

.bz-password-toggle.is-showing .bz-eye-off {
  display: block;
}

.bz-login-help {
  margin: 0;
  text-align: center;
  font-size: 0.95rem;
}

.bz-login-help a {
  text-decoration: none;
}

.bz-login-help a:hover,
.bz-login-help a:focus-visible {
  text-decoration: underline;
}

.bz-login-form .bz-form-note {
  margin: 0;
}

/* credential recovery panes (?rc=) share the login card */
.bz-recovery-title {
  margin: 0;
  font-size: 1.25rem;
}

.bz-recovery-form .bz-body {
  margin: 0;
  text-align: left;
}

.bz-recovery-choice {
  margin: 0;
  display: grid;
  gap: 0.75rem;
}

.bz-recovery-choice .bz-button {
  width: 100%;
  text-align: center;
}

.bz-username-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.bz-username-list li {
  padding: 0.6rem 0.9rem;
  font-weight: 600;
  background: var(--bz-surface);
  border: 1px solid var(--bz-border);
  border-radius: var(--bz-radius);
}

/* ==========================================================================
   Footer (bz/site-footer)
   ========================================================================== */
.bz-footer {
  margin-top: 0;
  background: var(--bz-footer-bg);
  color: var(--bz-primary-text);
}

.bz-footer a {
  color: inherit;
}

.bz-footer .bz-footer-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 3rem;
  padding-top: 2.5rem;
  padding-bottom: 2rem;
}

@media (min-width: 800px) {
  .bz-footer .bz-footer-columns {
    grid-template-columns: 1.4fr 1fr 1.2fr;
  }
}

.bz-footer-brand strong {
  font-family: var(--bz-font-heading);
  font-size: 1.2rem;
}

.bz-footer-brand p {
  margin: 0.25rem 0 0;
}

.bz-footer-tagline {
  opacity: 0.85;
}

.bz-footer-heading {
  font-family: var(--bz-font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  margin: 0 0 0.6rem;
}

.bz-footer-follow .bz-footer-heading + * {
  margin-bottom: 1.25rem;
}

.bz-footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bz-footer-nav li {
  margin: 0 0 0.4rem;
}

.bz-footer-nav a {
  text-decoration: none;
}

.bz-footer-nav a:hover {
  text-decoration: underline;
}

.bz-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.bz-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}

.bz-social-link:hover {
  background: rgba(255, 255, 255, 0.24);
}

.bz-social-link svg {
  width: 18px;
  height: 18px;
}

.bz-footer-reviews {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bz-review-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  font-size: 0.85rem;
  text-decoration: none;
}

.bz-review-link:hover {
  background: rgba(255, 255, 255, 0.12);
}

.bz-review-link svg {
  width: 14px;
  height: 14px;
}

.bz-footer .bz-footer-bottom {
  padding-top: 1rem;
  padding-bottom: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.8rem;
  opacity: 0.6;
}

.bz-footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
}

.bz-footer-legal-links a + a {
  margin-left: 1rem;
}

/* ==========================================================================
   Blog templates (v2 switches the blog on; the templates ship now)
   ========================================================================== */
.bz-posts .wp-block-post-title {
  font-size: 1.6rem;
}

.bz-posts .wp-block-post-date {
  color: var(--bz-muted);
  font-size: 0.9rem;
}

.bz-post .wp-block-post-title {
  font-size: var(--bz-hero-title);
}

/* ==========================================================================
   Blog post body: the blocks the CRM's post editor makes, drawn by
   Bizstim_Post_Render. The tenant picks the blocks and their order, never the
   styling. Taken from the approved mockup (blog-mock.css, "the block array").
   ========================================================================== */
.bz-blog-body {
  font-size: 1.0625rem;
}

.bz-blog-body > * {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

/* clear: a heading squeezed into the gap beside a floated image reads as a
   mistake. A float ends at the next heading, which is where a reader expects
   a new part of the article to start. */
.bz-blog-body h2 {
  clear: both;
  font-size: 1.6rem;
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
}

.bz-blog-body h3 {
  clear: both;
  font-size: 1.2rem;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

/* whatever follows the post must never ride up beside a float the last block left open */
.bz-blog-body::after {
  content: "";
  display: block;
  clear: both;
}

.bz-blog-body ul,
.bz-blog-body ol {
  padding-left: 1.4rem;
}

.bz-blog-body li {
  margin-bottom: 0.35rem;
}

/* the text block keeps a comfortable measure even in a wide post column */
.bz-blog-text {
  max-width: 68ch;
}

.bz-blog-text > :last-child {
  margin-bottom: 0;
}

.bz-blog-figure {
  margin: 2rem 0;
}

.bz-blog-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--bz-radius);
}

.bz-blog-caption {
  margin: 0.6rem 0 0;
  color: var(--bz-muted);
  font-size: 0.875rem;
}

.bz-blog-figure-inset {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.bz-blog-figure-float {
  float: left;
  width: min(45%, 320px);
  margin: 0.4rem 1.75rem 1rem 0;
}

/* the text keeps its 68ch measure (.bz-blog-text) in a wider post column, so a
   picture floated right lines up with the text's right edge, not the column's,
   and the text wraps beside it as it does beside a left float */
.bz-blog-figure-float-right {
  float: right;
  width: min(45%, 320px);
  margin: 0.4rem max(0px, calc(100% - 68ch)) 1rem 1.75rem;
}

@media (max-width: 640px) {
  .bz-blog-figure-float,
  .bz-blog-figure-float-right {
    float: none;
    width: auto;
    margin: 2rem 0;
  }
}

.bz-blog-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 2rem 0;
  clear: both;
}

.bz-blog-pair .bz-blog-figure {
  margin: 0;
}

@media (min-width: 560px) {
  .bz-blog-pair {
    grid-template-columns: repeat(2, 1fr);
  }

  .bz-blog-pair-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bz-blog-quote {
  margin: 2.25rem 0;
  padding: 0 0 0 1.5rem;
  border-left: 5px solid var(--bz-accent);
}

.bz-blog-quote p {
  margin: 0;
  font-family: var(--bz-font-heading);
  font-size: 1.4rem;
  line-height: 1.35;
  font-weight: var(--bz-heading-weight);
}

.bz-blog-quote cite {
  display: block;
  margin-top: 0.75rem;
  color: var(--bz-muted);
  font-family: var(--bz-font-body);
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 600;
}

.bz-blog-body .bz-notice-box {
  margin: 2rem 0;
  clear: both;
}

.bz-blog-cta {
  margin: 2.25rem 0;
  padding: 1.75rem;
  background: var(--bz-surface);
  background: color-mix(in srgb, var(--bz-primary) 8%, var(--bz-bg));
  border-radius: var(--bz-radius);
  text-align: center;
  clear: both;
}

.bz-blog-divider {
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid var(--bz-border);
  clear: both;
}

.bz-blog-divider-small {
  margin: 1.5rem 0;
}

.bz-blog-divider-large {
  margin: 4rem 0;
}

.bz-blog-embed {
  margin: 2rem 0;
  clear: both;
}

/* the Video widget's frame carries its own top gap and a 960px cap; inside a post the block sets both */
.bz-blog-embed .bz-video-frame {
  margin-top: 0;
  max-width: none;
}

.bz-blog-faq {
  margin: 2rem 0;
  clear: both;
}

.bz-blog-faq .bz-faq-item {
  max-width: none;
}

/* ==========================================================================
   Blog pages: the post page around its body, the post list, archives, search.
   Drawn by Bizstim_Post_Page. Taken from the approved mockups (blog-mock.css).
   A page with no sidebar carries bz-blog-side-none: the post column is 760px
   and the list shows three cards in a row. The sidebar's own rules close the file.
   ========================================================================== */
.bz-blog-layout {
  padding: var(--bz-section-pad) max(var(--bz-gutter), calc((100% - var(--bz-content)) / 2 + var(--bz-gutter)));
}

.bz-blog-main {
  min-width: 0;
}

body.bz-blog-side-none .bz-blog-post {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.bz-blog-post-title {
  font-size: var(--bz-hero-title);
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.bz-blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin: 0 0 1.5rem;
  color: var(--bz-muted);
  font-size: 0.9rem;
}

.bz-blog-chip {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  background: var(--bz-surface);
  background: color-mix(in srgb, var(--bz-primary) 12%, var(--bz-bg));
  border: 1px solid transparent;
  border-color: color-mix(in srgb, var(--bz-primary) 28%, var(--bz-bg));
  border-radius: 999px;
  color: var(--bz-primary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}

a.bz-blog-chip:hover {
  background: color-mix(in srgb, var(--bz-primary) 22%, var(--bz-bg));
}

.bz-blog-chip-plain {
  background: var(--bz-surface);
  border-color: var(--bz-border);
  color: var(--bz-muted);
  font-weight: 600;
}

.bz-blog-chip[aria-current="true"] {
  background: var(--bz-primary);
  border-color: var(--bz-primary);
  color: var(--bz-primary-text);
}

.bz-blog-featured {
  margin: 0 0 2rem;
}

.bz-blog-featured img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--bz-radius);
}

/* the regions under the body must never ride up beside a float the last block left open */
.bz-blog-tail {
  clear: both;
}

.bz-blog-tail > * {
  margin-top: 2.5rem;
}

.bz-blog-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.bz-blog-tags-label {
  margin-right: 0.35rem;
  color: var(--bz-muted);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bz-blog-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding: 1rem 0;
  border-top: 1px solid var(--bz-border);
  border-bottom: 1px solid var(--bz-border);
  font-size: 0.9rem;
}

.bz-blog-share-label {
  color: var(--bz-muted);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.bz-blog-postnav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .bz-blog-postnav {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* the empty half that keeps "Next" on its side takes no room where the two stack */
@media (max-width: 639.98px) {
  .bz-blog-postnav-none {
    display: none;
  }
}

.bz-blog-postnav a {
  display: block;
  padding: 1rem 1.25rem;
  background: var(--bz-card-bg);
  border: var(--bz-card-border);
  border-radius: var(--bz-radius);
  box-shadow: var(--bz-card-shadow);
  text-decoration: none;
  color: var(--bz-text);
}

.bz-blog-postnav a:hover {
  border-color: var(--bz-primary);
}

.bz-blog-postnav-dir {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--bz-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bz-blog-postnav-title {
  font-family: var(--bz-font-heading);
  font-weight: var(--bz-heading-weight);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.bz-blog-postnav-next {
  text-align: right;
}

.bz-blog-author {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  padding: 1.5rem;
  background: var(--bz-card-bg);
  border: var(--bz-card-border);
  border-radius: var(--bz-radius);
  box-shadow: var(--bz-card-shadow);
}

.bz-blog-author-photo,
.bz-blog-author-initials {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
}

.bz-blog-author-photo {
  object-fit: cover;
}

.bz-blog-author-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bz-surface);
  background: color-mix(in srgb, var(--bz-primary) 14%, var(--bz-bg));
  color: var(--bz-primary);
  font-family: var(--bz-font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.bz-blog-author-words {
  min-width: 0;
}

.bz-blog-author-label {
  margin: 0 0 0.15rem;
  color: var(--bz-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bz-blog-author-name {
  margin: 0;
  font-size: 1.1rem;
  overflow-wrap: anywhere;
}

/* an author box with words (the approved mockup's bio): the picture and the words line up at the top, and
   when the card is narrower than picture + gap + 260px (a phone) the words drop under the picture */
.bz-blog-author-has-bio {
  flex-wrap: wrap;
  align-items: flex-start;
}

.bz-blog-author-has-bio .bz-blog-author-words {
  flex: 1 1 260px;
}

.bz-blog-author-bio {
  margin-top: 0.6rem;
  font-size: 0.95rem;
}

.bz-blog-author-bio p,
.bz-blog-author-bio ul,
.bz-blog-author-bio ol {
  margin: 0 0 0.75rem;
  overflow-wrap: anywhere;
}

.bz-blog-author-bio ul,
.bz-blog-author-bio ol {
  padding-left: 1.4rem;
}

.bz-blog-author-bio > :last-child {
  margin-bottom: 0;
}

.bz-blog-section-title {
  font-size: 1.35rem;
  margin: 0 0 1.25rem;
}

/* Post cards: the list pages and the related posts */
.bz-blog-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 560px) {
  .bz-blog-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  body.bz-blog-side-none .bz-blog-cards,
  .bz-blog-cards-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bz-blog-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bz-card-bg);
  border: var(--bz-card-border);
  border-radius: var(--bz-radius);
  box-shadow: var(--bz-card-shadow);
  overflow: hidden;
}

.bz-blog-card-media {
  display: block;
  text-decoration: none;
}

.bz-blog-card-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.bz-blog-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem 1.25rem 1.25rem;
}

.bz-blog-card-body .bz-blog-chip {
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bz-blog-card-title {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.bz-blog-card-title a {
  text-decoration: none;
  color: var(--bz-text);
}

.bz-blog-card-title a:hover {
  color: var(--bz-primary);
}

.bz-blog-card-meta {
  margin: 0;
  color: var(--bz-muted);
  font-size: 0.85rem;
}

.bz-blog-card-excerpt {
  margin: 0;
  font-size: 0.95rem;
  flex: 1 1 auto;
}

.bz-blog-card-more {
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.bz-blog-card-more:hover {
  text-decoration: underline;
}

/* a card with no featured picture simply starts at its words, no empty box */
.bz-blog-card-nomedia .bz-blog-card-body {
  padding-top: 1.25rem;
}

/* The row on top of a list: category chips that scroll sideways, and the search box */
.bz-blog-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 1rem max(var(--bz-gutter), calc((100% - var(--bz-content)) / 2 + var(--bz-gutter)));
  border-bottom: 1px solid var(--bz-border);
  background: var(--bz-bg);
}

.bz-blog-filter-chips {
  display: flex;
  flex: 1 1 260px;
  min-width: 0;
  gap: 0.45rem;
  overflow-x: auto;
  padding-bottom: 0.2rem;
  scrollbar-width: thin;
}

.bz-blog-filter-chips .bz-blog-chip {
  flex: 0 0 auto;
}

.bz-blog-search {
  display: flex;
  flex: 0 1 260px;
  gap: 0.4rem;
  margin: 0;
}

/* once the search box has dropped under the chips it fills the row, no gap beside it */
@media (max-width: 575.98px) {
  .bz-blog-search {
    flex-basis: 100%;
  }
}

.bz-blog-search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.45rem 0.7rem;
  background: var(--bz-bg);
  color: var(--bz-text);
  border: 1px solid var(--bz-border);
  border-radius: var(--bz-radius);
  font: inherit;
  font-size: 0.9rem;
}

.bz-blog-search input:focus-visible {
  outline: 3px solid var(--bz-focus);
  outline-offset: 1px;
}

.bz-blog-search button {
  padding: 0.45rem 0.9rem;
  background: var(--bz-button-bg);
  color: var(--bz-button-text);
  border: 0;
  border-radius: var(--bz-button-radius);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.bz-blog-empty {
  margin: 0;
  color: var(--bz-muted);
}

.bz-blog-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin-top: 2.5rem;
}

.bz-blog-pager a,
.bz-blog-pager span {
  min-width: 40px;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--bz-border);
  border-radius: var(--bz-radius);
  text-align: center;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bz-text);
}

.bz-blog-pager a:hover {
  border-color: var(--bz-primary);
  color: var(--bz-primary);
}

.bz-blog-pager [aria-current="page"] {
  background: var(--bz-primary);
  border-color: var(--bz-primary);
  color: var(--bz-primary-text);
}

/* a phone has no room for the two words beside the numbers: an arrow stands in, and a screen reader
   still reads the word. The boxes tighten so the longest pager (nine of them) stays on one row. */
@media (max-width: 575.98px) {
  .bz-blog-pager {
    gap: 0.25rem;
  }

  .bz-blog-pager a,
  .bz-blog-pager span {
    min-width: 32px;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }

  .bz-blog-pager .prev,
  .bz-blog-pager .next {
    font-size: 0;
  }

  .bz-blog-pager .prev::before,
  .bz-blog-pager .next::before {
    font-size: 0.9rem;
    content: "\2190";
    content: "\2190" / "";
  }

  .bz-blog-pager .next::before {
    content: "\2192";
    content: "\2192" / "";
  }
}

/* ==========================================================================
   Blog sidebar: the 9/3 grid and the widgets. Drawn by Bizstim_Sidebar.
   In the page the sidebar always comes after the post. "Left" is a swap that
   only exists from 992px up, and under 992px the sidebar does not show at all:
   a phone reader gets the post, then the footer.
   ========================================================================== */
.bz-blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

.bz-blog-side {
  min-width: 0;
  margin-block-start: 0;
}

@media (min-width: 992px) {
  body.bz-blog-side-right .bz-blog-layout,
  body.bz-blog-side-left .bz-blog-layout {
    gap: 3rem;
  }

  body.bz-blog-side-right .bz-blog-layout {
    grid-template-columns: minmax(0, 9fr) minmax(0, 3fr);
  }

  /* order alone is not enough: it moves the boxes between the tracks but the tracks keep their
     sizes, so the narrow track has to come first as well */
  body.bz-blog-side-left .bz-blog-layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  }

  body.bz-blog-side-left .bz-blog-main {
    order: 2;
  }

  body.bz-blog-side-left .bz-blog-side {
    order: 1;
  }
}

@media (max-width: 991.98px) {
  .bz-blog-side {
    display: none;
  }
}

.bz-blog-widget {
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  background: var(--bz-card-bg);
  border: var(--bz-card-border);
  border-radius: var(--bz-radius);
  box-shadow: var(--bz-card-shadow);
}

.bz-blog-widget:last-child {
  margin-bottom: 0;
}

.bz-blog-widget-title {
  margin: 0 0 0.9rem;
  font-size: 0.82rem;
  font-family: var(--bz-font-body);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bz-muted);
}

.bz-blog-widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bz-blog-termlist li {
  border-bottom: 1px solid var(--bz-border);
}

.bz-blog-termlist li:last-child {
  border-bottom: 0;
}

.bz-blog-termlist a {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  text-decoration: none;
  color: var(--bz-text);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.bz-blog-termlist a:hover {
  color: var(--bz-primary);
}

.bz-blog-count {
  color: var(--bz-muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* Popular / Recent: radio buttons hold the tab, so there is no script */
.bz-blog-tabs-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.bz-blog-tabs-labels {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.9rem;
}

.bz-blog-tabs-labels label {
  flex: 1 1 auto;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--bz-border);
  border-radius: var(--bz-radius);
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bz-muted);
  cursor: pointer;
}

#bz-blog-tab-pop:checked ~ .bz-blog-tabs-labels label[for="bz-blog-tab-pop"],
#bz-blog-tab-rec:checked ~ .bz-blog-tabs-labels label[for="bz-blog-tab-rec"] {
  background: var(--bz-primary);
  border-color: var(--bz-primary);
  color: var(--bz-primary-text);
}

#bz-blog-tab-pop:focus-visible ~ .bz-blog-tabs-labels label[for="bz-blog-tab-pop"],
#bz-blog-tab-rec:focus-visible ~ .bz-blog-tabs-labels label[for="bz-blog-tab-rec"] {
  outline: 3px solid var(--bz-focus);
  outline-offset: 2px;
}

.bz-blog-tabs-panel {
  display: none;
}

#bz-blog-tab-pop:checked ~ .bz-blog-tabs-panels .bz-blog-tabs-pop,
#bz-blog-tab-rec:checked ~ .bz-blog-tabs-panels .bz-blog-tabs-rec {
  display: block;
}

.bz-blog-minilist li {
  display: flex;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--bz-border);
}

.bz-blog-minilist li:first-child {
  padding-top: 0;
}

.bz-blog-minilist li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.bz-blog-minilist li > div:last-child {
  min-width: 0;
}

.bz-blog-minithumb {
  flex: 0 0 56px;
  width: 56px;
}

.bz-blog-minithumb img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--bz-radius);
}

.bz-blog-minilist a {
  display: block;
  text-decoration: none;
  color: var(--bz-text);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.bz-blog-minilist a:hover {
  color: var(--bz-primary);
}

.bz-blog-minidate {
  display: block;
  margin-top: 0.2rem;
  color: var(--bz-muted);
  font-size: 0.8rem;
  font-weight: 400;
}

.bz-blog-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.bz-blog-cloud a {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--bz-border);
  border-radius: 999px;
  text-decoration: none;
  color: var(--bz-muted);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.bz-blog-cloud a:hover {
  border-color: var(--bz-primary);
  color: var(--bz-primary);
}

.bz-blog-cloud-1 { font-size: 0.75rem; }
.bz-blog-cloud-2 { font-size: 0.85rem; }
.bz-blog-cloud-3 { font-size: 0.95rem; font-weight: 600; }
.bz-blog-cloud-4 { font-size: 1.05rem; font-weight: 700; }

/* The About box: the tenant lines it up left, centred (the automatic choice) or right; the
   heading, the picture, the words and the link all follow */
.bz-blog-about {
  text-align: center;
}

.bz-blog-about-left {
  text-align: left;
}

.bz-blog-about-right {
  text-align: right;
}

.bz-blog-about-logo,
.bz-blog-about-picture {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  margin: 0 auto 0.85rem;
}

.bz-blog-about-logo {
  max-height: 80px;
}

/* the tenant's own picture: at most the box's width, never cropped or enlarged; a tall one
   stops at 360px */
.bz-blog-about-picture {
  max-height: 360px;
  border-radius: var(--bz-radius);
}

.bz-blog-about-left .bz-blog-about-logo,
.bz-blog-about-left .bz-blog-about-picture {
  margin-left: 0;
}

.bz-blog-about-right .bz-blog-about-logo,
.bz-blog-about-right .bz-blog-about-picture {
  margin-right: 0;
}

.bz-blog-about p,
.bz-blog-about ul,
.bz-blog-about ol {
  margin: 0 0 0.75rem;
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

/* the words' own lists: .bz-blog-widget ul takes the bullets away for the widgets' link lists */
.bz-blog-about ul,
.bz-blog-about ol {
  padding-left: 1.25rem;
}

.bz-blog-about ul {
  list-style: disc;
}

.bz-blog-about ol {
  list-style: decimal;
}

/* centred or right, the bullets and numbers travel with their words */
.bz-blog-about-center ul,
.bz-blog-about-center ol,
.bz-blog-about-right ul,
.bz-blog-about-right ol {
  padding-left: 0;
  list-style-position: inside;
}

.bz-blog-about > :last-child {
  margin-bottom: 0;
}

/* The home page's "Latest posts" section: a title, three of the blog's own cards, one button */
.bz-latest .bz-blog-cards {
  margin-top: 1.5rem;
}

.bz-blog-latest-foot {
  margin: 2rem 0 0;
  text-align: center;
}

/* the same readability floor every other card has inside a brand solid section: the card keeps its
   pale background, so its words stay dark and its links lose the underline the section gives plain links */
.bz-bg-solid .bz-blog-card {
  color: var(--bz-text);
}

.bz-bg-solid .bz-blog-card a:not(.bz-button) {
  text-decoration: none;
}