/* Boomax AV Rental — Redesign 44 theme glue (page shell, WordPress specifics). Component and page
   sheets are verbatim from the design package; only WordPress-level rules live here. */
[hidden] { display: none !important; }
#dc-root > .sc-host { position: relative; }
body { margin: 0; }
body.admin-bar .bxh-bar { top: 32px; }
body.admin-bar .bxh-search-slot { top: 32px; }
body.admin-bar #bx-drawer, body.admin-bar .bxh-scrim { top: calc(var(--bm-header-h, 76px) + 32px); }
@media (max-width: 782px) { body.admin-bar .bxh-bar, body.admin-bar .bxh-search-slot { top: 46px; } body.admin-bar #bx-drawer, body.admin-bar .bxh-scrim { top: calc(var(--bm-header-h, 76px) + 46px); } }
.bxh-pop[hidden] { display: none !important; }
.bxr-add.is-added { background: var(--bm-success-soft) !important; color: var(--bm-success) !important; border-color: var(--bm-success) !important; }
.bxr-card:hover { border-color: var(--bm-blue) !important; box-shadow: var(--bm-shadow-low) !important; transform: translateY(-2px) !important; }
.bx-list-item:hover { border-color: var(--bm-blue) !important; box-shadow: var(--bm-shadow-low) !important; }
.bxr-btn--primary:hover { background: var(--bm-blue-hover) !important; }
.bxr-btn--secondary:hover { background: var(--bm-details-hover) !important; }
.bxr-btn--yellow:hover { background: var(--bm-yellow-hover) !important; }
.bxr-btn--outlineLight:hover { background: rgba(255,255,255,0.12) !important; }
.bxr-quote-cta:hover { background: var(--bm-blue-hover) !important; }
.bm-pg-thumb { grid-template-rows: 1fr; grid-template-columns: 1fr; }
.bm-pg-thumb > img { min-width: 0; min-height: 0; }
.bxq-panel.is-open .qx-body { display: flex; flex-direction: column; gap: 16px; }
.bxr-content p { margin: 0 0 1em; }
.bxr-content a { color: var(--bm-blue); }

/* ---- Redesign 44 delta port sheet (search bar, sheet, time picker, policy pages) ---- */

/* =========================================================================
 * Redesign 44 port (2026-09-08) — header catalog search (SiteSearch R4.26–R4.29)
 * ======================================================================= */
.bxs { position: relative; width: 100%; min-width: 0; }
.bxs-field { position: relative; display: flex; align-items: center; }
.bxs-icon { position: absolute; left: 14px; color: var(--bm-muted); pointer-events: none; }
.bxs-input { width: 100%; min-height: 48px; box-sizing: border-box; border-radius: 9999px; border: 1.5px solid var(--bm-border); background: #fff; padding: 0 16px 0 42px; font: var(--bm-body-md); font-family: var(--bm-font-body); color: var(--bm-ink); -webkit-appearance: none; appearance: none; }
.bxs-input::placeholder { color: var(--bm-muted); }
.bxs-input:focus-visible { outline: 3px solid var(--bm-blue); outline-offset: 2px; }
.bxs-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.bxs-list { position: absolute; z-index: 60; top: calc(100% + 6px); right: 0; width: max(100%, min(420px, calc(100vw - 36px))); background: #fff; border: 1px solid var(--bm-border); border-radius: 18px; box-shadow: 0 12px 32px rgba(0,0,71,0.14), 0 2px 6px rgba(0,0,71,0.06); padding: 6px; display: flex; flex-direction: column; gap: 2px; max-height: min(420px, 60vh); overflow-y: auto; box-sizing: border-box; }
.bxs-opt { display: flex; align-items: center; gap: 12px; min-height: 52px; height: 52px; box-sizing: border-box; padding: 6px 10px; border-radius: 12px; text-decoration: none; color: var(--bm-ink); transition: background 160ms; }
.bxs-opt:hover, .bxs-opt[aria-selected="true"] { background: var(--bm-blue-mist, #F1F5FC); text-decoration: none; }
.bxs-opt:focus-visible, .bxs-all:focus-visible { outline: 3px solid var(--bm-blue); outline-offset: -3px; }
.bxs-opt-img { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--bm-border-soft); border-radius: 10px; overflow: hidden; }
.bxs-opt-img img { max-width: 32px; max-height: 32px; width: auto; height: auto; object-fit: contain; }
.bxs-opt-cat { width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: var(--bm-blue-soft); border: 1px solid var(--bm-blue-border); border-radius: 10px; color: var(--bm-blue); }
.bxs-opt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.bxs-opt-name { font: 600 14px/1.3 var(--bm-font-body); color: var(--bm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bxs-opt-meta { font: var(--bm-caption); color: var(--bm-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bxs-none { padding: 14px 12px; font: var(--bm-body-sm); color: var(--bm-body); text-wrap: pretty; }
.bxs-none a { font-weight: 700; color: var(--bm-blue); }
.bxs-all { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 12px; border-top: 1px solid var(--bm-border-soft); margin-top: 4px; text-decoration: none; font: var(--bm-body-sm); font-weight: 700; color: var(--bm-blue); }
.bxs-all:hover, .bxs-all[aria-selected="true"] { background: var(--bm-blue-mist, #F1F5FC); text-decoration: none; }
.bxh-search-btn { width: 44px; height: 44px; place-items: center; background: transparent; border: 1px solid var(--bm-border); border-radius: 12px; cursor: pointer; color: var(--bm-navy); padding: 0; box-sizing: border-box; }
.bxh-search-btn:hover { background: var(--bm-blue-mist, #F1F5FC); }
.bxh-search-btn:focus-visible { outline: 3px solid var(--bm-blue); outline-offset: 2px; }
.bxh-search-sheet { position: fixed; top: var(--bm-header-visible-h, 76px); left: 0; right: 0; z-index: 199; background: rgba(255,255,255,0.98); border-bottom: 1px solid var(--bm-border-soft); padding: 10px clamp(18px,3vw,40px) 14px; box-sizing: border-box; box-shadow: 0 12px 32px rgba(0,0,71,0.10); }
.bxh-search-sheet[hidden] { display: none; }

/* =========================================================================
 * Redesign 44 port — request-quote time picker (R4.25/R4.29): three-column
 * scroll picker (hour · minute · AM/PM), replaces the native time control.
 * ======================================================================= */
.bxq-tp { position: fixed; z-index: 70; box-sizing: border-box; background: #fff; border: 1px solid var(--bm-border); border-radius: 14px; padding: 6px; display: flex; gap: 4px; box-shadow: 0 12px 32px rgba(0,0,71,0.14), 0 2px 6px rgba(0,0,71,0.06); }
.bxq-tp-col { display: flex; flex-direction: column; gap: 2px; height: 308px; overflow-y: auto; scrollbar-width: none; padding: 2px; scroll-snap-type: y proximity; }
.bxq-tp-col::-webkit-scrollbar { display: none; }
.bxq-tp-col > button { scroll-snap-align: start; width: 60px; min-height: 44px; padding: 0; border-radius: 10px; cursor: pointer; border: none; font: var(--bm-body-sm); font-weight: 650; font-variant-numeric: tabular-nums; flex-shrink: 0; background: transparent; color: var(--bm-ink); }
.bxq-tp-col > button[aria-selected="true"] { background: var(--bm-blue); color: #fff; }
.bxq-tp-col > button:hover:not([aria-selected="true"]) { background: var(--bm-blue-mist, #F1F5FC); }
.bxq-tp button:focus-visible { outline: 3px solid var(--bm-blue); outline-offset: 2px; }
form.bxq-formc input[type="time"]::-webkit-calendar-picker-indicator { display: none; }
@media (prefers-reduced-motion: no-preference) { .bxq-tp { animation: bxq-tp-in 160ms cubic-bezier(0.2,0.8,0.2,1); } }
@keyframes bxq-tp-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Policy pages: paragraph + list + note support (WhatsApp compliance pages, R4.29). */
.bx-policy-section p { margin: 0; color: var(--bm-body); }
.bx-policy-section p + ul, .bx-policy-section ul + p { margin-top: 10px; }
.bx-policy-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bx-policy-links a { font-weight: 700; color: var(--bm-blue); }

/* Owner request (2026-09-08): the product-title band heading is one step smaller than the design token on phones. */
@media (max-width: 767px) {
	#bx-main .bm-hero--product-title .bm-hero__title { font: var(--bm-heading-2); letter-spacing: var(--bm-heading-2-ls); }
}
@media (max-width: 479px) {
	#bx-main .bm-hero--product-title .bm-hero__title { font: var(--bm-heading-3); letter-spacing: var(--bm-heading-3-ls); }
}

/* ---- DS runtime component styles (injected at runtime by the design system components; the quote page and
   info pages render QuantityStepper / QuotePreviewRow via JS, so they live here globally) ---- */
.bm-qs{display:inline-flex;align-items:center;width:fit-content;flex:0 0 auto;box-sizing:border-box}
.bm-qs--discs{gap:0}
.bm-qs--segmented{border:1px solid var(--bm-border);border-radius:9999px;background:#fff;overflow:hidden}
.bm-qs--segmented .bm-qs__btn{border-radius:0}
.bm-qs--segmented .bm-qs__btn:hover:not(:disabled){background:var(--bm-surface-blue)}
.bm-qs__btn:focus-visible{outline:2px solid var(--bm-blue);outline-offset:-2px}
button:hover:not(:disabled) .bm-qs-disc{background:var(--bm-blue-soft)}
button:hover:not(:disabled) .bm-qs-disc-rail{background:var(--bm-surface-blue)}
/* QuotePreviewRow: link band + remove control (same states as the rail's .bxq-x). */
.bm-qpr__link{color:inherit;transition:background 180ms cubic-bezier(0.2,0.8,0.2,1)}
.bm-qpr__link:hover{background:var(--bm-surface-blue)}
.bm-qpr__link:focus-visible{outline:3px solid var(--bm-blue);outline-offset:2px}
.bm-qpr__remove{background:transparent;border:none;color:var(--bm-muted);padding:0;margin:0;transition:background 180ms cubic-bezier(0.2,0.8,0.2,1),color 180ms cubic-bezier(0.2,0.8,0.2,1)}
.bm-qpr__remove:hover{background:#FFF1F1;color:#B42318}
.bm-qpr__remove:active{background:#FFE4E4;color:#B42318}
.bm-qpr__remove:focus-visible{background:#FFF1F1;color:#B42318;outline:3px solid var(--bm-blue);outline-offset:-3px}
.bx-product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--bx-grid-min,264px),1fr));gap:22px;align-items:stretch}
.bx-product-list{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.bx-list-item{display:grid;grid-template-columns:minmax(200px,34%) minmax(0,1fr);gap:18px;align-items:start}
@media(max-width:767px){.bx-list-item{grid-template-columns:minmax(0,1fr);gap:14px}}

/* ---- Form field focus state (bxr-field-focus). The design's inputs carry their resting border inline
   (border: 1px solid var(--bm-border); outline: none) and transition border + box-shadow, and the focused
   field reads as a 2px blue border. Inline styles win the cascade, so these use !important. ---- */
#bx-main input:not([type="checkbox"]):not([type="radio"]):not(.bxs-input):not(.bm-qs-input):focus,
#bx-main textarea:focus,
#bx-main select:focus {
  border-color: var(--bm-blue) !important;
  box-shadow: inset 0 0 0 1px var(--bm-blue) !important;
  outline: none !important;
}
#bx-main input[aria-invalid="true"]:focus, #bx-main textarea[aria-invalid="true"]:focus, #bx-main select[aria-invalid="true"]:focus {
  border-color: var(--bm-error) !important;
  box-shadow: inset 0 0 0 1px var(--bm-error) !important;
}


/* BX A11Y 2026-09-09 -------------------------------------------------------------------------
   Skip link: six nav landmarks sit above the content, so a keyboard user had to tab the whole
   header on every page. Visible only when focused.
   Footer links measured 19-23px tall on a phone, under the 24px minimum target size, with
   adjacent links close enough to mis-tap. Padding lifts them over the line without moving the
   visual rhythm noticeably. */
.bx-skip{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--bm-navy,#000047);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;font:var(--bm-body-sm);text-decoration:none}
.bx-skip:focus{left:0}
@media (max-width:767px){
  .bxf-links a,.bxf-legal a,footer .bxf-grid a{display:inline-flex;align-items:center;min-height:26px;padding-block:4px}
  footer nav a{min-height:26px;display:inline-flex;align-items:center;padding-block:3px}
}


/* BX ARTICLE CONTENT 2026-09-09 ---------------------------------------------------------------
   Imported article bodies carry raw <img>, <table> and <iframe> markup with intrinsic widths from
   the old site - an 880px image inside a 768px viewport pushed the whole page sideways. Constrain
   anything that arrives inside post content, and give the long-form copy readable measure. */
.bxr-content img,.bxr-content video,.bxr-content iframe,.bxr-content embed,.bxr-content object{max-width:100%;height:auto;display:block}
.bxr-content figure{margin:22px 0;max-width:100%}
.bxr-content figure img{border-radius:12px}
.bxr-content table{display:block;width:100%;overflow-x:auto;border-collapse:collapse}
.bxr-content pre{overflow-x:auto;max-width:100%}
.bxr-content a{color:var(--bm-blue);overflow-wrap:anywhere}
.bxr-article{max-width:70ch}
.bxr-article h2{font:var(--bm-heading-3);font-family:var(--bm-font-display);color:var(--bm-navy);margin:30px 0 10px;letter-spacing:-0.014em;text-wrap:balance}
.bxr-article h3{font:var(--bm-title-lg);color:var(--bm-navy);margin:24px 0 8px}
.bxr-article p{margin:0 0 15px}
.bxr-article ul,.bxr-article ol{margin:0 0 15px;padding-left:22px}
.bxr-article li{margin-bottom:7px}


/* BX TARGET SIZE PASS 2 2026-09-09 -------------------------------------------------------------
   The first pass only reached the footer grid classes and only below 768px. Measured again with
   the admin bar removed, the remaining links under the 24px minimum were the side-rail nav, the
   breadcrumb trail, the footer legal links and the mobile quote button. Padding, not font size, so
   nothing reflows. */
footer a,
.bm-rail-link,
.bm-rail-cta,
.bxr-item,
.bxr-cta,
.bx-crumb a,
.bm-hero__crumb a{display:inline-flex;align-items:center;min-height:24px;padding-block:2px}
.bxh-mobile-quote,
.bxh-iconbtn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}


/* BX EVENT PAGES 2026-09-09 -------------------------------------------------------------------
   The event pages are assembled from components that already exist in page-services.css - the hero,
   the .chain flow, .spectrum/.spec-card, .aud-row and the closing .bx-cta-close card. Only the note
   card and the row link are new, and both borrow the existing card language rather than inventing
   anything. */
.bx-ev-list{margin-top:22px}
.bx-ev-list .aud-row:first-child{border-top:0}
.bx-ev-list .aud-title a{color:inherit;text-decoration:none}
.bx-ev-list .aud-title a:hover,.bx-ev-list .aud-title a:focus-visible{color:var(--bm-blue)}
.bx-ev-more{display:inline-flex;align-items:center;gap:7px;min-height:26px;margin-top:6px;font:var(--bm-body-sm);font-weight:700;color:var(--bm-blue);text-decoration:none}
.bx-ev-more span{transition:transform var(--bm-duration-fast,.15s) var(--bm-ease,ease)}
.bx-ev-more:hover span,.bx-ev-more:focus-visible span{transform:translateX(3px)}

/* Advice card. Deliberately quieter than a sales box - it is the most useful paragraph on the page. */
.bx-ev-note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;background:var(--bm-blue-mist,#EEF3FF);border:1px solid var(--bm-blue-border,#C9D8FA);border-radius:20px;padding:clamp(20px,3vw,28px)}
.bx-ev-note__mark{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:9999px;background:#fff;color:var(--bm-blue);border:1px solid var(--bm-blue-border,#C9D8FA)}
.bx-ev-note__h{font:var(--bm-title-lg);color:var(--bm-navy);margin:0 0 6px}
.bx-ev-note__p{font:var(--bm-body-md);color:var(--bm-body);margin:0;max-width:66ch;text-wrap:pretty}
@media (max-width:479px){.bx-ev-note{grid-template-columns:1fr;gap:12px}}

/* Event-type row on the services hub. */
/* Four cards, and they must never break to 3 + 1. auto-fit picked the column count from the width
   the grid actually got, and on these pages that width does not track the viewport: the services
   rail is present at some widths and gone at others, so the grid measured 1019px at a 1440 viewport,
   869px at 1280, 997px at 1100 and 927px at 1024 - four columns at some sizes and three, stranding
   Schools on a row of its own, at others. So the count is driven by the container's own width.
   .bx-cta-close on this same page already uses container-type, so this is the house tool.
   The media query is the fallback for a browser without container queries: a 2 x 2 block, which is
   still aligned. Every path here yields 1, 2 or 4 columns - never a row with one card in it. */
.bx-ev-wrap{container-type:inline-size}
.bx-ev-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:20px}
@media (min-width:560px){.bx-ev-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:520px){.bx-ev-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:900px){.bx-ev-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.bx-ev-card{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--bm-border);border-radius:20px;padding:22px;text-decoration:none;transition:border-color var(--bm-duration-fast,.15s) var(--bm-ease,ease),box-shadow var(--bm-duration-fast,.15s) var(--bm-ease,ease),transform var(--bm-duration-fast,.15s) var(--bm-ease,ease)}
.bx-ev-card:hover,.bx-ev-card:focus-visible{border-color:var(--bm-blue);box-shadow:0 8px 24px rgba(0,0,71,.10);transform:translateY(-2px)}
.bx-ev-card b{font:var(--bm-title-md);color:var(--bm-navy)}
.bx-ev-card span{font:var(--bm-body-sm);color:var(--bm-body)}
@media (prefers-reduced-motion:reduce){.bx-ev-card,.bx-ev-more span{transition:none}.bx-ev-card:hover{transform:none}}


/* BX HIDDEN HEADER LINK 2026-09-09 ------------------------------------------------------------
   The header phone link is hidden above 767px with position:absolute plus visibility:hidden, which
   already removes it from the tab order and from the accessibility tree - it is genuinely inert.
   But it still returns a box to layout tooling, which made it look like an 8x16px tap target in an
   audit. display:none removes the box as well, so the intent and the measurement agree. The element
   is absolutely positioned, so taking it out of flow changes nothing visually.
   The html prefix is only there to out-specify the generated page sheet, which loads after this one. */
@media (min-width: 768px) {
  /* !important is required, not lazy: the element carries an inline display:flex from the header
     markup, and an inline style beats any selector without it. */
  html .bxh-bar a[href^="tel:"].bxh-hide-md { display: none !important; }
}


/* BX SECTION BACKGROUNDS 2026-09-09 -------------------------------------------------------------
   page-services.css decorates sections by POSITION - section 2 and section 4 of .shell-main each
   get a large angled colour panel, clipped by the section's own overflow:hidden. That was authored
   for the audio, video and lighting pages, where section 4 is a tall tinted list and the panel
   reads as an intentional field behind it.

   The four event pages have a different section order, so the section-4 panel landed on the short
   white "one thing worth checking first" note - 254px tall, on canvas. A 450px slab of #DCE7F8 on
   white, cut flat along the top and bottom and diagonally down one side, is the cracked-looking
   block in the screenshot. It was never placed there on purpose; it is an accident of counting.

   The band itself is a full-width tint - the same canvas / surface-blue alternation the rest of the
   site uses - with one soft radial glow on top. A full-width colour change cannot look cut off,
   because it has no side edges at all, and the glow fades to zero alpha rather than stopping.
   The fix is to decorate by intent rather than by position: the note section now carries a name,
   opts out of the positional panel, and paints its own field out of radial gradients - which have
   no edge anywhere, so there is nothing that can look cut off at any width. */
html .shell-main > section.bx-ev-band::before{display:none}
html .shell-main > section.bx-ev-band{background:radial-gradient(75% 135% at 92% 0%,var(--bm-hero-surface,#DCE7F8) 0%,rgba(220,231,248,.55) 38%,rgba(220,231,248,0) 72%),var(--bm-surface-blue,#F4F7FF)}
html .shell-main > section.bx-ev-band .bx-ev-note{background:#fff}
html .shell-main > section.bx-ev-band .bx-ev-note__mark{background:var(--bm-blue-mist,#EEF3FF)}

/* The same positional panel also lands on section 4 of the services hub, which is white as well, so
   it ends in a hard horizontal line with white underneath. There the panel does sit behind real
   content - the four numbered steps - so it is worth keeping and only the cut needs to go. Fading
   it out top and bottom keeps the decoration and removes the edge. Audio, video and lighting are
   deliberately untouched: there the panel sits on a tinted section with no visible edge to soften. */
html body.bxr-page-services .shell-main > section:nth-of-type(4)::before{-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 20%,#000 66%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 20%,#000 66%,rgba(0,0,0,0) 100%)}

/* BX CRUMB ON LIGHT 2026-09-10 ------------------------------------------------------------------
   page-blog.css styles the breadcrumb for the blog index, where it sits inside the navy hero:
   #bx-main .bx-crumb a { color: rgba(255,255,255,.68) }. A single article and an archive have no
   hero, so that rule painted white text on a white background and the breadcrumb disappeared
   entirely - the separators were all that showed.

   page-blog.css loads after this file, so source order cannot win: the ID in its selector has to be
   matched and out-weighed on classes and types instead. */
html body.bxr-page-post #bx-main .bx-crumb,
html body.bxr-page-archive #bx-main .bx-crumb,
html body.bxr-page-page #bx-main .bx-crumb{color:var(--bm-muted,#667085)}
html body.bxr-page-post #bx-main .bx-crumb a,
html body.bxr-page-archive #bx-main .bx-crumb a,
html body.bxr-page-page #bx-main .bx-crumb a{color:var(--bm-blue,#0041C4)}
html body.bxr-page-post #bx-main .bx-crumb a:hover,
html body.bxr-page-post #bx-main .bx-crumb a:focus-visible,
html body.bxr-page-archive #bx-main .bx-crumb a:hover,
html body.bxr-page-page #bx-main .bx-crumb a:hover{color:var(--bm-navy,#000047)}
html body.bxr-page-post #bx-main .bx-crumb [aria-current="page"],
html body.bxr-page-archive #bx-main .bx-crumb [aria-current="page"],
html body.bxr-page-page #bx-main .bx-crumb [aria-current="page"]{color:var(--bm-body,#344054)}

/* BX CHAT WIDGET ISOLATION 2026-09-10 ------------------------------------------------------------
   Botpress renders inside a shadow DOM. That blocks our selectors, but it does NOT block inherited
   properties - those cross the boundary freely. Probing the live widget showed exactly nine that
   reach its composer: font-weight, font-style, font-variant, letter-spacing, direction,
   writing-mode, font-stretch, word-break and hyphens.

   All nine currently sit at their defaults, so the widget is fine today. The risk is future: adding
   a letter-spacing or a text-transform to body typography would silently deform the chat composer,
   and because the rule would be invisible to devtools inside the shadow root, the cause would be
   very hard to find. Pin them at the light-DOM host so the widget is insulated from the theme.

   Font family, size and line-height are NOT listed: the widget sets those itself, so they do not
   inherit and must not be forced here. */
.bpChatContainer{font-weight:400;font-style:normal;font-variant:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0;direction:ltr;writing-mode:horizontal-tb;font-stretch:100%;word-break:normal;hyphens:manual}

/* BX ABOVE THE FOLD 2026-09-10 -------------------------------------------------------------------
   page-home.css hides every .bx-reveal with opacity:0 until JavaScript adds .is-in. That is fine for
   sections further down, but the hero is the whole above-the-fold view, and hiding it means the
   first thing a visitor sees depends on a script having run.

   It also matters for measurement: Largest Contentful Paint ignores any element with opacity:0, and
   Lighthouse has been unable to find an LCP element on this page at all. Whether or not that is the
   whole cause, above-the-fold content should never wait for JavaScript to be painted.

   The reveal for everything below the fold is untouched - only the hero opts out, and it ends in
   exactly the same visual state it reached before. */
html .bx-motion .bx-hero-vb.bx-reveal,
html .bx-motion .bx-reveal:first-child{opacity:1;transform:none}