.elementor-kit-8{--e-global-color-primary:#215974;--e-global-color-secondary:#0F2530;--e-global-color-text:#6B7883;--e-global-color-accent:#2FC4D6;--e-global-color-bdblhov:#163B4F;--e-global-color-bdpanel:#14313D;--e-global-color-bdfoot:#0A1A22;--e-global-color-bdbrdrk:#24485A;--e-global-color-bdbrdsf:#1E3D4B;--e-global-color-bdbrdft:#1C3440;--e-global-color-bdsteel:#6994A8;--e-global-color-bdslate:#72798B;--e-global-color-bdgreyw:#5C6A74;--e-global-color-bdmuted:#8B959E;--e-global-color-bdlodk:#DFE0E5;--e-global-color-bdlodks:#B9C7CF;--e-global-color-bdmondk:#9FB6C2;--e-global-color-bdmonds:#7F96A3;--e-global-color-bdmonft:#8FA3AF;--e-global-color-bdlinkd:#CFE0E8;--e-global-color-bdwhite:#FFFFFF;--e-global-color-bdtint:#F4F7F9;--e-global-color-bdinput:#FBFBFC;--e-global-color-bdhair:#E6E9EC;--e-global-color-bdnavnk:#2B3A42;--e-global-color-bddash:#B9C1C9;--e-global-typography-primary-font-family:"Archivo";--e-global-typography-primary-font-size:48px;--e-global-typography-primary-font-weight:600;--e-global-typography-primary-line-height:1.04em;--e-global-typography-primary-letter-spacing:-0.025em;--e-global-typography-secondary-font-family:"Archivo";--e-global-typography-secondary-font-size:40px;--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-line-height:1.1em;--e-global-typography-secondary-letter-spacing:-0.02em;--e-global-typography-text-font-family:"IBM Plex Sans";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.62em;--e-global-typography-accent-font-family:"IBM Plex Mono";--e-global-typography-accent-font-size:11.5px;--e-global-typography-accent-font-weight:400;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-line-height:1.6em;--e-global-typography-accent-letter-spacing:0.14em;--e-global-typography-bdh3-font-family:"Archivo";--e-global-typography-bdh3-font-size:34px;--e-global-typography-bdh3-font-weight:600;--e-global-typography-bdh3-line-height:1.12em;--e-global-typography-bdh3-letter-spacing:-0.02em;--e-global-typography-bdh3ct-font-family:"Archivo";--e-global-typography-bdh3ct-font-size:36px;--e-global-typography-bdh3ct-font-weight:600;--e-global-typography-bdh3ct-line-height:1.12em;--e-global-typography-bdh3ct-letter-spacing:-0.02em;--e-global-typography-bdcard-font-family:"Archivo";--e-global-typography-bdcard-font-size:21px;--e-global-typography-bdcard-font-weight:600;--e-global-typography-bdcard-line-height:1.2em;--e-global-typography-bdtile-font-family:"Archivo";--e-global-typography-bdtile-font-size:19px;--e-global-typography-bdtile-font-weight:600;--e-global-typography-bdtile-line-height:1.25em;--e-global-typography-bdpill-font-family:"Archivo";--e-global-typography-bdpill-font-size:18px;--e-global-typography-bdpill-font-weight:600;--e-global-typography-bdpill-line-height:1.3em;--e-global-typography-bdlead-font-family:"IBM Plex Sans";--e-global-typography-bdlead-font-size:19px;--e-global-typography-bdlead-font-weight:300;--e-global-typography-bdlead-line-height:1.62em;--e-global-typography-bdbodylg-font-family:"IBM Plex Sans";--e-global-typography-bdbodylg-font-size:17px;--e-global-typography-bdbodylg-font-weight:300;--e-global-typography-bdbodylg-line-height:1.68em;--e-global-typography-bdbodymd-font-family:"IBM Plex Sans";--e-global-typography-bdbodymd-font-size:16.5px;--e-global-typography-bdbodymd-font-weight:300;--e-global-typography-bdbodymd-line-height:1.66em;--e-global-typography-bdbodysm-font-family:"IBM Plex Sans";--e-global-typography-bdbodysm-font-size:14.5px;--e-global-typography-bdbodysm-font-weight:400;--e-global-typography-bdbodysm-line-height:1.6em;--e-global-typography-bdbodyxs-font-family:"IBM Plex Sans";--e-global-typography-bdbodyxs-font-size:13.5px;--e-global-typography-bdbodyxs-font-weight:400;--e-global-typography-bdbodyxs-line-height:1.5em;--e-global-typography-bdbtn-font-family:"IBM Plex Sans";--e-global-typography-bdbtn-font-size:15px;--e-global-typography-bdbtn-font-weight:600;--e-global-typography-bdbtn-line-height:1.4em;--e-global-typography-bdnav-font-family:"IBM Plex Sans";--e-global-typography-bdnav-font-size:14.5px;--e-global-typography-bdnav-font-weight:500;--e-global-typography-bdnav-line-height:1.4em;--e-global-typography-bdmonoc-font-family:"IBM Plex Mono";--e-global-typography-bdmonoc-font-size:11px;--e-global-typography-bdmonoc-font-weight:400;--e-global-typography-bdmonoc-text-transform:uppercase;--e-global-typography-bdmonoc-line-height:1.6em;--e-global-typography-bdmonoc-letter-spacing:0.14em;--e-global-typography-bdmonos-font-family:"IBM Plex Mono";--e-global-typography-bdmonos-font-size:12px;--e-global-typography-bdmonos-font-weight:400;--e-global-typography-bdmonos-text-transform:uppercase;--e-global-typography-bdmonos-line-height:1.6em;--e-global-typography-bdmonos-letter-spacing:0.16em;--e-global-typography-bdsmall-font-family:"IBM Plex Sans";--e-global-typography-bdsmall-font-size:13px;--e-global-typography-bdsmall-font-weight:400;--e-global-typography-bdsmall-line-height:1.5em;color:#6B7883;font-family:"IBM Plex Sans", Sans-serif;font-size:16px;font-weight:400;line-height:1.62em;}.elementor-kit-8 button,.elementor-kit-8 input[type="button"],.elementor-kit-8 input[type="submit"],.elementor-kit-8 .elementor-button{background-color:#215974;font-family:"IBM Plex Sans", Sans-serif;font-size:15px;font-weight:600;color:#FFFFFF;border-radius:8px 8px 8px 8px;padding:16px 30px 16px 30px;}.elementor-kit-8 button:hover,.elementor-kit-8 button:focus,.elementor-kit-8 input[type="button"]:hover,.elementor-kit-8 input[type="button"]:focus,.elementor-kit-8 input[type="submit"]:hover,.elementor-kit-8 input[type="submit"]:focus,.elementor-kit-8 .elementor-button:hover,.elementor-kit-8 .elementor-button:focus{background-color:#163B4F;color:#FFFFFF;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-kit-8 a{color:#215974;text-decoration:none;}.elementor-kit-8 a:hover{color:#163B4F;}.elementor-kit-8 h1{color:#0F2530;font-family:"Archivo", Sans-serif;font-size:62px;font-weight:600;line-height:1.04em;letter-spacing:-0.025em;}.elementor-kit-8 h2{color:#0F2530;font-family:"Archivo", Sans-serif;font-size:40px;font-weight:600;line-height:1.1em;letter-spacing:-0.02em;}.elementor-kit-8 h3{color:#0F2530;font-family:"Archivo", Sans-serif;font-size:34px;font-weight:600;line-height:1.12em;}.elementor-kit-8 h4{color:#0F2530;font-family:"Archivo", Sans-serif;font-size:21px;font-weight:600;line-height:1.2em;}.elementor-kit-8 h5{color:#0F2530;font-family:"Archivo", Sans-serif;font-size:19px;font-weight:600;}.elementor-kit-8 h6{color:#0F2530;font-family:"Archivo", Sans-serif;font-size:18px;font-weight:600;}.elementor-kit-8 img{border-radius:0px 0px 0px 0px;}.elementor-kit-8 input:not([type="button"]):not([type="submit"]),.elementor-kit-8 textarea,.elementor-kit-8 .elementor-field-textual{font-family:"IBM Plex Sans", Sans-serif;font-size:15px;color:#0F2530;background-color:#FBFBFC;border-radius:8px 8px 8px 8px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1240px;}.e-con{--container-max-width:1240px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-8{--e-global-typography-primary-font-size:38px;--e-global-typography-secondary-font-size:32px;--e-global-typography-bdh3-font-size:28px;--e-global-typography-bdh3ct-font-size:30px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-8{--e-global-typography-primary-font-size:30px;--e-global-typography-secondary-font-size:27px;--e-global-typography-bdh3-font-size:24px;--e-global-typography-bdh3ct-font-size:26px;--e-global-typography-bdlead-font-size:17px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================================================================
BioDecon — design details Elementor's controls can't express directly.
Everything here reads the --e-global-* variables that Elementor's
Global Colors and Global Fonts produce, so changing a global in
Site Settings still drives these rules.
========================================================================= */
/* ---------- Header ------------------------------------------------------ */
.bd-header { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.elementor-widget-image.bd-logo img,
.elementor-widget-image.bd-logo a img[src$=".svg"] { height: 40px; width: auto; max-width: none; }
/* The logo is the wordmark alone since 2026-09-29: the client dropped the tagline
site-wide and asked for the logo to fill the space it left. 40px desktop and
tablet, 36px on phones - up from a 32px wordmark inside the old 44px lockup. */
@media (max-width: 767px) {
.elementor-widget-image.bd-logo img,
.elementor-widget-image.bd-logo a img[src$=".svg"] { height: 36px; }
}
/* Footer logo. The image box stretched to its column - WordPress writes the SVG's
762px width attribute, capped only by max-width: 100% - and the SVG sat centred
inside it: 40px in from the text below on desktop, ~240px at 1024. Sizing the
box to the logo lines it up with that text and the header logo (client,
2026-09-29). */
.elementor-location-footer .bd-footer-logo img { width: auto; max-width: 100%; }
/* Underlined text link */
.bd-textlink .elementor-heading-title {
display: inline-block; padding-bottom: 4px;
border-bottom: 2px solid var(--e-global-color-bdlodk);
transition: border-color .2s ease;
}
.bd-textlink:hover .elementor-heading-title { border-bottom-color: currentColor; }
/* ---------- Hero -------------------------------------------------------- */
.bd-hero-copy { max-width: 720px; margin-left: auto; width: 100%; }
.bd-hero-lead { max-width: 560px; }
.bd-hero-stage {
position: relative;
background: radial-gradient(120% 90% at 62% 42%, #22546B 0%, #14384A 46%, #0F2530 100%);
}
/* Scrim — keeps the H1 legible where the two cells meet. */
.bd-hero-stage::before {
content: ""; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(90deg, rgba(15,37,48,.92) 0%, rgba(15,37,48,0) 38%);
}
/* Light pool behind the product. */
.bd-hero-stage::after {
content: ""; position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%);
width: 96%; padding-bottom: 96%; border-radius: 999px; z-index: 1;
background: radial-gradient(circle, rgba(47,196,214,.22) 0%, rgba(47,196,214,0) 65%);
}
.bd-hero-product { position: relative; z-index: 2; margin-right: -2%; }
.bd-hero-product img {
max-height: 660px; width: auto; max-width: 86%; display: block;
filter: drop-shadow(0 40px 60px rgba(0,0,0,.45));
}
/* Caption is measured from the same edge as the product, so they cannot collide. */
.bd-hero-caption-wrap { position: absolute; left: 34px; bottom: 30px; z-index: 3; }
.bd-hero-caption {
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 11px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.6;
color: var(--e-global-color-bdmondk);
}
.bd-hero-caption span { color: #6D8896; }
/* ---------- Hero slides ------------------------------------------------- */
/* Rendered by [bd_hero_slides] from the `hero_slide` post type (Sept 2026 —
the client asked for the hero image to rotate). Sizes and positions repeat
the .bd-hero-product / .bd-hero-caption-wrap rules above, which stay because
the concept reference page (63) still uses them.
The widget is forced back to position: static so each caption and the pause
button measure from .bd-hero-stage, exactly as the old caption widget did.
Opacity goes on the image and caption, never the figure: a translucent
figure becomes its own stacking layer and would drop the product beneath the
scrim and light pool for the length of every fade. */
.bd-hero-slides-wrap.elementor-widget { position: static; margin-right: -2%; }
.bd-hero-slides { display: grid; }
/* Centred inline-block, as Elementor's Image widget laid out the old shot —
the widget shrinks to the 660px max-height and the 86% image sits mid-way. */
.bd-hero-slide { grid-area: 1 / 1; align-self: end; margin: 0; text-align: center; }
.bd-hero-slides .bd-hero-slide-img {
position: relative; z-index: 2;
max-height: 660px; width: auto; max-width: 86%; height: auto;
display: inline-block; vertical-align: middle;
filter: drop-shadow(0 40px 60px rgba(0,0,0,.45));
}
.bd-hero-slide .bd-hero-caption { position: absolute; left: 34px; bottom: 30px; z-index: 3; text-align: left; }
/* Crossfade. The incoming shot also settles up into place; the outgoing one
only fades, and drops back to its start position once it is invisible, so
the two never visibly slide past each other.
--bd-fade is set on .bd-hero-slides from Hero slides → Settings; the settle
runs a third longer than the fade so it is still easing as the fade lands. */
.bd-hero-slides.is-rotating .bd-hero-slide-img,
.bd-hero-slides.is-rotating .bd-hero-caption {
opacity: 0; visibility: hidden;
transition: opacity var(--bd-fade, 1.2s) ease, transform 0s linear var(--bd-fade, 1.2s), visibility 0s linear var(--bd-fade, 1.2s);
}
.bd-hero-slides.is-rotating .bd-hero-slide-img { transform: translateY(14px) scale(.985); }
.bd-hero-slides.is-rotating .is-active .bd-hero-slide-img,
.bd-hero-slides.is-rotating .is-active .bd-hero-caption {
opacity: 1; visibility: visible; transform: none;
transition: opacity var(--bd-fade, 1.2s) ease, transform calc(var(--bd-fade, 1.2s) * 1.35) cubic-bezier(.2,.7,.2,1), visibility 0s;
}
/* Pause — WCAG 2.2.2 requires a way to stop anything that moves on its own for
more than five seconds.
Top-right, not beside the caption: on desktop the industry-tile card is
pulled up over the bottom of the stage, and a button down there sits under
it where nobody can see or click it.
Two classes on purpose: the kit's global button style
(.elementor-kit-8 button, and its :focus variant) otherwise wins and turns
this into a full-size solid primary button, including after a mouse click. */
.bd-hero-slides .bd-hero-slides-pause,
.bd-hero-slides .bd-hero-slides-pause:focus {
position: absolute; right: 28px; top: 28px; z-index: 3;
box-sizing: border-box; width: 34px; height: 34px; padding: 0; border-radius: 999px;
display: flex; align-items: center; justify-content: center;
background: rgba(15,37,48,.35); color: #9FB6C2;
border: 1px solid rgba(159,182,194,.35); cursor: pointer; line-height: 1;
transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.bd-hero-slides .bd-hero-slides-pause[hidden] { display: none; }
.bd-hero-slides .bd-hero-slides-pause:hover,
.bd-hero-slides .bd-hero-slides-pause:focus-visible { color: #FFFFFF; border-color: rgba(255,255,255,.7); background: rgba(15,37,48,.6); }
.bd-hero-slides .bd-hero-slides-pause:focus-visible { outline: 2px solid var(--e-global-color-primary); outline-offset: 3px; }
/* Icon swap. Each state rule carries the root class so it outranks the plain
svg rule — a generic `.pause svg { display: block }` beat a single-class
hide and showed both icons at once. */
.bd-hero-slides-pause svg { fill: currentColor; }
.bd-hero-slides .bd-hero-slides-icon-pause { display: block; }
.bd-hero-slides .bd-hero-slides-icon-play { display: none; }
.bd-hero-slides.is-paused .bd-hero-slides-icon-pause { display: none; }
.bd-hero-slides.is-paused .bd-hero-slides-icon-play { display: block; }
@media (max-width: 1024px) {
.bd-hero-slides .bd-hero-slide-img { max-height: 420px; }
}
@media (max-width: 767px) {
.bd-hero-slide .bd-hero-caption { left: 20px; bottom: 18px; }
.bd-hero-slides .bd-hero-slides-pause { right: 16px; top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.bd-hero-slides.is-rotating .bd-hero-slide-img,
.bd-hero-slides.is-rotating .bd-hero-caption { transition: none; transform: none; }
}
/* ---------- Industry tiles --------------------------------------------- */
/* Industry tiles — rendered by [bd_industry_tiles] from the `industry` post
type, so the client can add one in the admin (Aug 2026 feedback).
The old build was four fixed 25% containers divided by border-right, with a
:last-child rule killing the final divider. That only works for exactly one
row. This is a wrapping grid whose dividers are drawn by the 1px gap showing
the hairline underneath, so any number of tiles lays out correctly and no
tile is ever left with a stray edge.
Fixed at 4 across (2026-09-22): eight tiles make two full rows. The
old auto-fit grid put six on the first row and two on the second. A count
that is not a multiple of 4 leaves empty cells showing the hairline grey. */
.bd-tiles {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1px; background: var(--e-global-color-bdhair);
}
.bd-tile {
display: flex; flex-direction: column; gap: 6px;
padding: 30px 28px; background: var(--e-global-color-bdwhite);
text-decoration: none; transition: background-color .2s ease;
}
.bd-tile:hover { background-color: var(--e-global-color-bdtint); }
.bd-tile-title {
font-family: var(--e-global-typography-bdtile-font-family), sans-serif;
font-weight: 600; font-size: 19px; line-height: 1.25;
color: var(--e-global-color-secondary);
}
.bd-tile-body {
font-family: var(--e-global-typography-bdbodyxs-font-family), sans-serif;
font-weight: 400; font-size: 13.5px; line-height: 1.5;
color: var(--e-global-color-text);
}
a.bd-tile:hover .bd-tile-title { color: var(--e-global-color-primary); }
@media (max-width: 1024px) {
.bd-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
.bd-tiles { grid-template-columns: 1fr; }
}
/* ---------- Homepage product tiles ------------------------------------- */
/* Rendered by [bd_product_tiles] from the `home_product_tile` post type
(Sept 2026: the client swapped the homepage's folder tabs for tiles; the
Products page keeps its tabs). White tiles on the dark band, photo and name.
Photos sit whole inside a square frame (object-fit: contain) because the
product shots come in every shape, from 840x622 to 641x1000, and a crop
would cut products in half. multiply blending melts any not-quite-white edge
a JPG carries into the tile, so no pale box ever shows around a product. */
.bd-ptiles {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
}
.bd-ptile {
display: flex; flex-direction: column; gap: 18px;
padding: 22px 22px 24px; border-radius: 16px;
background: var(--e-global-color-bdwhite); text-decoration: none;
transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
}
.bd-ptile-media {
position: relative; display: block; aspect-ratio: 1 / 1;
border-radius: 10px; overflow: hidden;
}
.bd-ptile-media:empty { background: var(--e-global-color-bdtint); }
/* Two classes to beat Elementor's `.elementor img { height: auto; max-width: 100% }`. */
.bd-ptiles .bd-ptile-img {
position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
object-fit: contain; mix-blend-mode: multiply;
transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.bd-ptiles .bd-ptile-name {
font-family: var(--e-global-typography-bdtile-font-family), sans-serif;
font-weight: 600; font-size: 19px; line-height: 1.25;
color: var(--e-global-color-secondary);
transition: color .2s ease;
}
/* The short sentence under the name (tile_subtitle; client, 2026-09-29). */
.bd-ptiles .bd-ptile-text { display: flex; flex-direction: column; gap: 6px; }
.bd-ptiles .bd-ptile-sub { font-size: 14.5px; line-height: 1.45; font-weight: 400; color: var(--e-global-color-text); }
/* Short model codes (PD-F, MD-Hi) are wrapped by the shortcode so they never
break after the hyphen on a narrow tile. */
.bd-ptiles .bd-ptile-name .bd-nowrap { white-space: nowrap; }
.bd-ptiles a.bd-ptile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.bd-ptiles a.bd-ptile:hover .bd-ptile-img { transform: scale(1.04); }
.bd-ptiles a.bd-ptile:hover .bd-ptile-name { color: var(--e-global-color-primary); }
.bd-ptiles a.bd-ptile:focus-visible { outline: 2px solid var(--e-global-color-accent); outline-offset: 4px; }
/* "View all products": the route into the tabs that the homepage no longer has.
Same underline treatment as .bd-textlink; two classes to beat the kit's `a`. */
.bd-ptiles-more { margin: 44px 0 0; }
.bd-ptiles-more .bd-ptiles-all {
display: inline-block; padding-bottom: 4px;
font-family: var(--e-global-typography-bdbtn-font-family), sans-serif;
font-weight: 600; font-size: 15px; line-height: 1.4;
color: var(--e-global-color-bdlinkd); text-decoration: none;
border-bottom: 2px solid var(--e-global-color-bdlodk);
transition: border-color .2s ease;
}
.bd-ptiles-more .bd-ptiles-all:hover { color: var(--e-global-color-bdlinkd); border-bottom-color: currentColor; }
.bd-ptiles-more .bd-ptiles-all:focus-visible { outline: 2px solid var(--e-global-color-accent); outline-offset: 4px; }
/* The "View all products" card at the end of the grid. It began (2026-09-22) as
a filler for the empty cells after the last tile, when nine tiles left one
alone on a third row. Since 2026-09-29 it always shows: the client kept it
when their list went to eight tiles, which fill their rows. It spans the cells
left after the last tile (--bd-cta-span4 at four columns, --bd-cta-span2 at
two), or a whole row when none are left (.is-band). The plain link below the
grid now renders only when there are no tiles at all. The title is sized in
cqi so the same card reads at four cells or at one. */
.bd-ptiles .bd-ptile-cta {
display: flex; flex-direction: column; justify-content: flex-end; gap: 14px;
container-type: inline-size;
padding: 24px 22px; border-radius: 16px;
border: 1px solid var(--e-global-color-bdbrdrk); background: var(--e-global-color-bdpanel);
text-decoration: none; transition: border-color .2s ease;
}
.bd-ptiles .bd-ptile-cta-kicker {
display: flex; align-items: center; gap: 14px;
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
color: var(--e-global-color-bdmondk);
}
.bd-ptiles .bd-ptile-cta-kicker span { width: 32px; height: 2px; background: var(--e-global-color-accent); display: block; flex: none; }
.bd-ptiles .bd-ptile-cta-title {
max-width: 18ch; text-wrap: balance;
font-family: var(--e-global-typography-secondary-font-family), sans-serif;
font-weight: 600; font-size: clamp(17px, 7cqi, 34px); line-height: 1.12; letter-spacing: -.02em;
color: var(--e-global-color-bdwhite);
}
.bd-ptiles .bd-ptile-cta-link {
align-self: flex-start; margin-top: 6px; padding-bottom: 4px;
font-family: var(--e-global-typography-bdbtn-font-family), sans-serif;
font-weight: 600; font-size: 15px; line-height: 1.4;
color: var(--e-global-color-bdlinkd);
border-bottom: 2px solid var(--e-global-color-bdlodk);
transition: border-color .2s ease;
}
.bd-ptiles .bd-ptile-cta:hover { border-color: var(--e-global-color-bdsteel); }
.bd-ptiles .bd-ptile-cta:hover .bd-ptile-cta-link { border-bottom-color: currentColor; }
.bd-ptiles .bd-ptile-cta:focus-visible { outline: 2px solid var(--e-global-color-accent); outline-offset: 4px; }
@container (max-width: 300px) {
.bd-ptiles .bd-ptile-cta-kicker { display: none; }
}
.bd-ptiles .bd-ptile-cta { grid-column: span var(--bd-cta-span4, 1); }
.bd-ptiles .bd-ptile-cta-copy { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 901px) {
.bd-ptiles .bd-ptile-cta.is-wide { padding: 40px 44px; }
/* A row of its own reads as a band: copy left, link right. */
.bd-ptiles .bd-ptile-cta.is-band {
flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
column-gap: 40px; padding: 36px 44px;
}
.bd-ptiles .bd-ptile-cta.is-band .bd-ptile-cta-title { max-width: none; }
.bd-ptiles .bd-ptile-cta.is-band .bd-ptile-cta-link { align-self: flex-end; margin: 0 0 6px; }
}
@media (max-width: 900px) {
.bd-ptiles .bd-ptile-cta { grid-column: span var(--bd-cta-span2, 1); }
}
@media (max-width: 767px) {
.bd-ptiles .bd-ptile-cta { padding: 14px 12px 16px; gap: 10px; border-radius: 12px; }
.bd-ptiles .bd-ptile-cta-copy { gap: 10px; }
.bd-ptiles .bd-ptile-cta-link { font-size: 14px; }
}
@media (max-width: 900px) {
.bd-ptiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 767px) {
.bd-ptiles { gap: 12px; }
.bd-ptile { padding: 12px 12px 16px; gap: 12px; border-radius: 12px; }
.bd-ptiles .bd-ptile-name { font-size: 15px; }
.bd-ptiles .bd-ptile-text { gap: 4px; }
.bd-ptiles .bd-ptile-sub { font-size: 13px; line-height: 1.4; }
.bd-ptiles-more { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
.bd-ptile, .bd-ptiles .bd-ptile-img { transition: none; }
.bd-ptiles a.bd-ptile:hover, .bd-ptiles a.bd-ptile:hover .bd-ptile-img { transform: none; }
}
/* ---------- Partner strip ---------------------------------------------- */
/* Heights are set per logo to match cap-height optically — do not normalise.
Term IDs: 2 Bioquell · 3 Nanosonics · 4 PBSC · 5 Ecolab · 6 Medigenic · 7 Pharmagraph */
/* Brand term ids after the 2026-08-14 brand->range restructure:
14 Ecolab, 3 Nanosonics, 4 PBSC, 6 Medigenic, 7 Pharmagraph. */
/* ---------- About ------------------------------------------------------- */
.bd-about-photo img {
width: 100%; height: 268px; object-fit: cover; object-position: 50% 35%;
border-radius: 12px; display: block;
}
/* ---------- Products: tabs + panels ------------------------------------ */
/* JetEngine sizes grid items with `flex: 0 0 calc(100%/var(--columns))` and
gutters the wrapper with negative margins — both need unwinding here. */
.bd-tabs .jet-listing-grid__items,
.bd-panels .jet-listing-grid__items { margin: 0 !important; width: 100% !important; }
/* 6px gaps and 18px side padding (2026-09-22, were 10px and 22px) put all eight supplier tabs on one
row from ~1265px wide: 1168px of tabs against a 1240px content width. Keep .bd-rangetabs in step. */
.bd-tabs .jet-listing-grid__items { display: flex !important; flex-wrap: wrap; gap: 6px; }
.bd-tabs .jet-listing-grid__items > .jet-listing-grid__item {
flex: 0 0 auto !important; width: auto !important; max-width: none !important;
padding: 0 !important; margin: 0 !important;
}
/* The tab box sizes to its label; the grid item then sizes to the box. */
.bd-tabs .bd-tab { width: max-content !important; }
/* Elementor sizes widgets inside a container with --container-widget-width:100%,
which is circular when the container itself is sizing to max-content — so the
tab label is given an explicit intrinsic width. */
.bd-tab-label { white-space: nowrap; width: max-content !important; }
.bd-tab-label .jet-listing-dynamic-field,
.bd-tab-label .jet-listing-dynamic-field__inline-wrap,
.bd-tab-label .jet-listing-dynamic-field__content { max-width: none; width: max-content; }
.bd-panels .jet-listing-grid__items > .jet-listing-grid__item {
flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important;
padding: 0 !important; margin: 0 !important;
}
.bd-tab {
padding: 13px 18px; cursor: pointer;
border: 1px solid var(--e-global-color-bdbrdsf); border-bottom: 0;
border-radius: 8px 8px 0 0; background: transparent;
transition: background-color .2s ease, border-color .2s ease;
}
.bd-tab-label {
font-family: var(--e-global-typography-bdnav-font-family), sans-serif;
font-size: 14px; font-weight: 600; white-space: nowrap;
color: var(--e-global-color-bdmondk);
}
.bd-tabs .jet-listing-grid__item.is-active .bd-tab {
background: var(--e-global-color-bdpanel); border-color: var(--e-global-color-bdbrdrk);
}
.bd-tabs .jet-listing-grid__item.is-active .bd-tab-label { color: #FFFFFF; }
/* Products page (Sept 2026): the band behind the tabs is white at the client's request, but the
tabs keep their look. Inactive tabs are transparent and only read as navy because the section
was navy, so here they are given that navy explicitly. Scoped by the section's
bd-products-light class: the range pages' tab strip shares .bd-tab and must not change. */
.bd-products-light .bd-tab { background: var(--e-global-color-secondary); }
.bd-panels .jet-listing-grid__item { display: none; }
.bd-panels .jet-listing-grid__item.is-active { display: block; }
.bd-panel {
background: var(--e-global-color-bdpanel);
border: 1px solid var(--e-global-color-bdbrdrk);
border-radius: 0 14px 14px 14px;
overflow: hidden;
}
.bd-panel-eyebrow {
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
color: var(--e-global-color-accent);
}
.elementor-kit-8 .bd-panel-heading h3,
.bd-panel-heading .jet-listing-dynamic-field__content,
.bd-panel-heading {
font-family: var(--e-global-typography-bdh3-font-family), sans-serif;
font-size: var(--e-global-typography-bdh3-font-size);
font-weight: 600; line-height: 1.12; letter-spacing: -.02em;
color: #FFFFFF; margin: 0;
}
.bd-panel-blurb {
font-family: var(--e-global-typography-bdbodymd-font-family), sans-serif;
font-size: 16.5px; line-height: 1.66; font-weight: 300;
color: var(--e-global-color-bdlodks); max-width: 480px; margin: 0;
}
.bd-panel-bullets .jet-listing-dynamic-repeater__items {
display: grid !important; gap: 12px; margin: 0; padding: 0; list-style: none;
}
.bd-panel-bullets .jet-listing-dynamic-repeater__item {
display: flex; gap: 12px; align-items: flex-start; list-style: none;
color: var(--e-global-color-bdlodk); font-size: 15px; line-height: 1.5;
}
.bd-panel-bullets .jet-listing-dynamic-repeater__item::before {
content: ""; flex: 0 0 6px; width: 6px; height: 6px; margin-top: 7px;
background: var(--e-global-color-bdsteel);
}
/* JetEngine's dynamic-field widgets shrink-wrap and centre inside the copy
column; stretch them so the column reads as one left-aligned block. */
.bd-panel-left { align-items: stretch !important; }
.bd-panel-left > .elementor-widget { width: 100%; }
/* JetEngine's dynamic-field and repeater wrappers centre their contents by
default; the panel copy column is left-aligned. */
.bd-panel-left, .bd-panel-left .elementor-widget { text-align: left; }
.bd-panel-left .jet-listing-dynamic-field,
.bd-panel-left .jet-listing-dynamic-field__inline-wrap,
.bd-panel-left .jet-listing-dynamic-field__content { justify-content: flex-start !important; text-align: left !important; }
.bd-panel-bullets .jet-listing-dynamic-repeater__items {
padding: 0 !important; margin: 0 !important; justify-items: start !important;
}
.bd-panel-bullets .jet-listing-dynamic-repeater__item { margin: 0 !important; padding: 0 !important; }
.bd-panel-left .elementor-widget-button { align-self: flex-start; }
.bd-panel-left .elementor-button-wrapper { text-align: left !important; }
.bd-product-stage { position: relative; }
/* Product shots are cut-outs on white; multiply seats them on the stage. */
.bd-product-shot img {
max-height: 380px; max-width: 100%; width: auto;
object-fit: contain; mix-blend-mode: multiply; display: block;
}
/* The caption is pinned 24px up, inside 40px of padding, so wherever the stage is
no taller than its photo the photo's bottom edge ran through the caption: every
range page at 1024px and below - the "images overlap the text" on phones (client,
2026-09-29) - and Nanosonics on desktop too. The stage keeps a band under the
photo for it; see the rule below. */
.bd-product-caption {
position: absolute; left: 28px; bottom: 24px;
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
color: var(--e-global-color-text);
}
.bd-photo-pending {
display: inline-block; padding: 10px 18px; border-radius: 999px;
background: var(--e-global-color-bdtint);
border: 1px dashed var(--e-global-color-bddash);
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 12px; color: var(--e-global-color-text);
}
.bd-product-stage:has(.bd-product-caption) { padding-bottom: 72px !important; }
/* Hide the placeholder pill once a range has real photography. */
.bd-product-stage:has(.bd-product-shot img) .bd-photo-pending-wrap { display: none; }
/* ---------- Services ---------------------------------------------------- */
.bd-service { transition: background-color .2s ease; }
.bd-service:hover { background-color: var(--e-global-color-bdtint); }
.bd-service-body { flex: 1; }
.bd-service-cta { margin-top: auto; }
/* ---------- Case studies ------------------------------------------------ */
.bd-case { transition: border-color .2s ease; }
.bd-case:hover { border-color: var(--e-global-color-bdsteel) !important; }
.bd-case-image img { width: 100%; height: 220px; object-fit: cover; display: block; background: var(--e-global-color-bdlodk); }
.bd-case-1 .bd-case-image img { object-position: 50% 30%; }
.bd-case-2 .bd-case-image img { object-position: 50% 40%; }
.bd-case-3 .bd-case-image img { object-position: 50% 55%; }
.bd-accreditations { display: flex; flex-wrap: wrap; gap: 12px; }
.bd-accreditation {
display: inline-block; padding: 12px 20px; border-radius: 8px;
background: #FFFFFF; border: 1px dashed var(--e-global-color-bddash);
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: var(--e-global-color-text);
}
/* ---------- Contact ----------------------------------------------------- */
/* Elementor's form grid uses negative wrapper margins + column padding;
don't replace that with `gap`, or two 50% columns overflow and wrap. */
.bd-form .elementor-form-fields-wrapper { margin-left: -7px; margin-right: -7px; }
.bd-form .elementor-field-group { padding-left: 7px; padding-right: 7px; margin-bottom: 14px; }
.bd-form .elementor-field-group.elementor-field-type-submit { margin-bottom: 0; }
.elementor-kit-8 .bd-form .elementor-field-textual {
background: var(--e-global-color-bdinput);
border: 1px solid var(--e-global-color-bdlodk);
border-radius: 8px; padding: 15px 16px; font-size: 15px;
}
.elementor-kit-8 .bd-form .elementor-field-textual:focus { outline: none; border-color: var(--e-global-color-primary); box-shadow: none; }
.bd-form ::placeholder { color: #9AA3AD; }
.bd-form-note { font-size: 13px; color: var(--e-global-color-bdmuted); margin-top: -6px; }
.bd-form-note a { color: var(--e-global-color-primary); }
/* Both offices are always visible, side by side in a band under the form card.
Stacking them inside the card left ~750px of dead space beside the form and
made the section 1276px tall. */
.bd-office-address { max-width: 320px; }
.bd-office .elementor-widget-google_maps iframe { border-radius: 12px; }
/* Once they stack (tablet down) the pair needs a divider again. */
@media (max-width: 1024px) {
.bd-office + .bd-office { border-top: 1px solid var(--e-global-color-bdbrdsf); padding-top: 44px !important; }
}
.bd-map {
height: 150px; border-radius: 12px; margin-top: 26px;
display: flex; align-items: center; justify-content: center;
background: repeating-linear-gradient(45deg, #14313D 0 12px, #1B4254 12px 24px);
}
.bd-map span {
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
color: var(--e-global-color-bdmondk);
background: var(--e-global-color-secondary); padding: 6px 14px; border-radius: 999px;
}
/* ---------- Help widget ------------------------------------------------- */
/* The widget is position:fixed, so its mount point must not occupy layout. */
.bd-help-mount { position: absolute; width: 0; height: 0; padding: 0 !important; margin: 0 !important; }
.bd-help { position: fixed; right: 28px; bottom: 28px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.elementor-kit-8 .bd-help-btn, .bd-help .bd-help-btn {
height: 60px; padding: 0 24px; border: 0; border-radius: 999px; cursor: pointer;
background: var(--e-global-color-primary); color: #FFFFFF;
font-family: var(--e-global-typography-bdbtn-font-family), sans-serif;
font-size: 15px; font-weight: 600;
display: inline-flex; align-items: center; gap: 10px;
box-shadow: 0 16px 36px rgba(15,37,48,.3);
transition: background-color .2s ease;
}
.elementor-kit-8 .bd-help-btn:hover, .bd-help .bd-help-btn:hover { background: var(--e-global-color-bdblhov); }
.bd-help-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--e-global-color-accent); }
.bd-help-panel {
width: 336px; max-width: calc(100vw - 40px); background: #FFFFFF;
border: 1px solid var(--e-global-color-bdlodk); border-radius: 16px; overflow: hidden;
box-shadow: 0 26px 60px rgba(15,37,48,.24);
}
.bd-help-head { background: var(--e-global-color-secondary); padding: 22px 24px; }
.bd-help-title { font-family: var(--e-global-typography-bdpill-font-family), sans-serif; font-size: 18px; font-weight: 600; color: #FFFFFF; }
.bd-help-sub { font-size: 13.5px; color: var(--e-global-color-bdmondk); margin-top: 4px; }
.bd-help-row {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 18px 24px; border-bottom: 1px solid #EEF0F2; text-decoration: none;
transition: background-color .2s ease;
}
.bd-help-row:last-child { border-bottom: 0; }
.bd-help-row:hover { background: var(--e-global-color-bdtint); }
.bd-help-row-title { display: block; font-size: 14.5px; font-weight: 600; color: var(--e-global-color-secondary); }
.bd-help-row-sub { display: block; font-size: 13px; color: var(--e-global-color-bdmuted); margin-top: 2px; }
.bd-help-arrow { font-family: var(--e-global-typography-accent-font-family), monospace; color: var(--e-global-color-bdsteel); }
/* ---------- Footer ------------------------------------------------------ */
.bd-copyright { font-size: 13px; color: #6D7F8A; }
.bd-footer-top > .e-con-inner > .e-con, .bd-footer-top > .e-con { align-self: flex-start; }
/* ---------- Scroll reveal ---------------------------------------------- */
.bd-reveal { opacity: 0; transform: translateY(22px); }
.bd-reveal.is-visible {
opacity: 1; transform: none;
transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce) {
.bd-reveal { opacity: 1; transform: none; }
.bd-reveal.is-visible { transition: none; }
}
/* ---------- Scrolling ---------------------------------------------------
Every in-page jump on the site clears the 124px sticky head. The shortcode
pages set their own larger value where a sub-nav pins below it. */
html { scroll-behavior: smooth; }
#top, #about, #products, #services, #partners, #contact { scroll-margin-top: 150px; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* ---------- Back to top -------------------------------------------------
Bottom-LEFT on purpose: the "How can we help?" bubble is fixed bottom-right
at z-index 60 and the two must never overlap. */
.bd-totop {
position: fixed; left: 28px; bottom: 28px; z-index: 55;
width: 48px; height: 48px; border-radius: 999px;
display: flex; align-items: center; justify-content: center;
background: var(--e-global-color-secondary); color: #FFFFFF;
text-decoration: none; font-size: 18px; line-height: 1;
box-shadow: 0 12px 28px rgba(15,37,48,.28);
opacity: 0; visibility: hidden; transform: translateY(8px);
transition: opacity .2s ease, transform .2s ease, visibility .2s ease, background-color .2s ease;
}
.bd-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.bd-totop:hover { background: var(--e-global-color-primary); color: #FFFFFF; }
/* ---------- Responsive -------------------------------------------------- */
@media (max-width: 1024px) {
.bd-hero-row { flex-wrap: wrap !important; }
.bd-hero-left { flex-basis: 100% !important; }
.bd-hero-stage { flex-basis: 100% !important; border-radius: 0 !important; min-height: 420px; }
.bd-hero-copy { max-width: none; }
.bd-hero-product img { max-height: 420px; }
.bd-panel, .bd-footer-top { flex-wrap: wrap !important; }
.bd-panel-left, .bd-product-stage { flex-basis: 100% !important; }
.bd-product-stage { border-left: 0 !important; border-top: 1px solid var(--e-global-color-bdbrdrk) !important; }
.bd-utility-bar { justify-content: center; }
}
@media (max-width: 767px) {
.bd-hero-caption-wrap { left: 20px; bottom: 18px; }
.bd-help { right: 16px; bottom: 16px; }
.elementor-kit-8 .bd-help-btn, .bd-help .bd-help-btn { height: 52px; padding: 0 18px; font-size: 14px; }
.bd-tabs .jet-listing-grid__items { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
.bd-case-image img { height: 180px; }
.bd-map { height: 120px; }
.bd-totop { left: 16px; bottom: 16px; width: 42px; height: 42px; }
}
/* === BD PRODUCT SINGLE === */
/* =========================================================================
Product single (.bd-pdp) — rendered by [bd_product_body].
Colours and type come from the kit globals; nothing hardcoded that the
kit already defines.
========================================================================= */
.bd-pdp { --pdp-shell: 1240px; }
.bd-pdp .bd-pdp-shell { max-width: var(--pdp-shell); margin: 0 auto; padding: 0 40px; }
/* Anchors must clear the 124px sticky header. */
.bd-pdp [id] { scroll-margin-top: 150px; }
/* ---------- Hero -------------------------------------------------------- */
.bd-pdp .bd-pdp-hero { background: var(--e-global-color-secondary); }
.bd-pdp .bd-pdp-crumbs-wrap { max-width: var(--pdp-shell); margin: 0 auto; padding: 22px 40px 0; }
.bd-pdp .bd-pdp-crumbs {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
}
.bd-pdp .bd-pdp-crumbs a { color: var(--e-global-color-bdmonds); }
.bd-pdp .bd-pdp-crumbs a:hover { color: #FFFFFF; }
.bd-pdp .bd-pdp-crumbs span { color: #40606F; }
.bd-pdp .bd-pdp-crumbs em { color: var(--e-global-color-bdlodk); font-style: normal; }
.bd-pdp .bd-pdp-hero-grid { display: grid; grid-template-columns: 1.04fr .96fr; align-items: stretch; min-height: 470px; }
.bd-pdp .bd-pdp-hero-copy {
padding: 46px 56px 62px 40px; max-width: 720px; margin-left: auto; width: 100%;
display: flex; flex-direction: column; justify-content: center;
}
.bd-pdp .bd-pdp-brand { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.bd-pdp .bd-pdp-brand img { height: 30px; width: auto; display: block; }
/* Knocking a logo to white only works on SVG. Raster logos ship with a white
background, so inverting them produces a solid block — give those a chip. */
.bd-pdp .bd-pdp-brand img[src$=".svg"] { filter: brightness(0) invert(1); opacity: .9; }
.bd-pdp .bd-pdp-brand img:not([src$=".svg"]) {
background: #FFFFFF; padding: 5px 10px; border-radius: 4px;
height: auto; max-height: 34px; max-width: 150px; object-fit: contain;
}
.bd-pdp .bd-pdp-rule { width: 1px; height: 24px; background: var(--e-global-color-bdbrdrk); display: block; }
.bd-pdp .bd-pdp-eyebrow {
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
color: var(--e-global-color-bdmondk);
}
.bd-pdp .bd-pdp-flag {
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
color: var(--e-global-color-secondary); background: var(--e-global-color-accent);
border-radius: 4px; padding: 5px 10px;
}
.bd-pdp .bd-pdp-title {
font-family: var(--e-global-typography-primary-font-family), sans-serif;
font-weight: 600; font-size: 54px; line-height: 1.05; letter-spacing: -.025em;
color: #FFFFFF; margin: 0 0 14px; text-wrap: balance;
}
.bd-pdp .bd-pdp-model {
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
color: #6D8896; margin-bottom: 24px;
}
.bd-pdp .bd-pdp-standfirst {
font-size: 18px; line-height: 1.64; font-weight: 300; margin: 0 0 34px;
color: var(--e-global-color-bdlodks); max-width: 560px; text-wrap: pretty;
}
.bd-pdp .bd-pdp-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bd-pdp .bd-pdp-btn {
padding: 17px 30px; border-radius: 8px; font-size: 15px;
font-family: var(--e-global-typography-bdbtn-font-family), sans-serif;
display: inline-flex; align-items: center; gap: 10px; transition: background-color .2s, border-color .2s;
}
.bd-pdp .bd-pdp-btn-solid { background: #FFFFFF; color: var(--e-global-color-secondary); font-weight: 600; }
.bd-pdp .bd-pdp-btn-solid:hover { background: var(--e-global-color-bdlodk); color: var(--e-global-color-secondary); }
.bd-pdp .bd-pdp-btn-ghost { border: 1px solid #3C5A68; color: #FFFFFF; font-weight: 500; }
.bd-pdp .bd-pdp-btn-ghost:hover { border-color: #FFFFFF; color: #FFFFFF; }
.bd-pdp .bd-pdp-btn-blue { background: var(--e-global-color-primary); color: #FFFFFF; font-weight: 600; padding: 13px 22px; font-size: 14px; }
.bd-pdp .bd-pdp-btn-blue:hover { background: var(--e-global-color-bdblhov); color: #FFFFFF; }
.bd-pdp .bd-pdp-glyph { font-family: var(--e-global-typography-accent-font-family), monospace; font-size: 13px; color: var(--e-global-color-bdmondk); }
.bd-pdp .bd-pdp-hero-stage {
position: relative; background: #FFFFFF; display: flex; align-items: center; justify-content: center;
padding: 56px 48px 66px; border-radius: 18px 0 0 0; overflow: hidden; min-height: 400px;
}
.bd-pdp .bd-pdp-shot { max-width: 100%; max-height: 380px; width: auto; height: auto; object-fit: contain; display: block; mix-blend-mode: multiply; }
.bd-pdp .bd-pdp-noimage {
width: 100%; min-height: 288px; border: 1px dashed var(--e-global-color-bddash); border-radius: 12px;
background: var(--e-global-color-bdtint); display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 14px; padding: 30px; text-align: center;
}
.bd-pdp .bd-pdp-noimage img { height: 26px; width: auto; opacity: .42; filter: grayscale(1); }
.bd-pdp .bd-pdp-noimage span {
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
color: var(--e-global-color-text); line-height: 1.7;
}
.bd-pdp .bd-pdp-noimage em { color: var(--e-global-color-bdmuted); font-style: normal; }
/* ---------- Jump bar ----------------------------------------------------
Desktop uses the sticky left rail instead — two stacked sticky bars under a
124px header eats too much of a laptop screen. */
.bd-pdp .bd-pdp-jump { display: none; }
/* ---------- Layout ------------------------------------------------------ */
.bd-pdp .bd-pdp-main { padding: 84px 0 0; }
.bd-pdp .bd-pdp-split { display: grid; grid-template-columns: 240px 1fr; gap: 72px; align-items: start; }
.bd-pdp .bd-pdp-split-2 { display: grid; grid-template-columns: .82fr 1.18fr; gap: 72px; align-items: start; }
.bd-pdp .bd-pdp-rail { position: sticky; top: 150px; }
.bd-pdp .bd-pdp-rail-title {
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: var(--e-global-color-bdmuted); padding-bottom: 14px;
border-bottom: 1px solid var(--e-global-color-bdhair); margin-bottom: 16px;
}
.bd-pdp .bd-pdp-rail-links { display: grid; gap: 11px; }
.bd-pdp .bd-pdp-rail-links a { font-size: 14px; color: var(--e-global-color-bdgreyw); line-height: 1.4; }
.bd-pdp .bd-pdp-rail-links a:hover { color: var(--e-global-color-primary); }
.bd-pdp .bd-pdp-rail-doc { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--e-global-color-bdhair); }
.bd-pdp .bd-pdp-rail-doc .bd-pdp-rail-title { border: 0; padding: 0; margin-bottom: 12px; }
.bd-pdp .bd-pdp-rail-doc a { font-size: 14px; font-weight: 600; color: var(--e-global-color-primary); line-height: 1.45; display: block; }
.bd-pdp .bd-pdp-rail-top {
display: inline-block; margin-top: 22px; font-size: 13px; font-weight: 600;
color: var(--e-global-color-bdslate);
}
.bd-pdp .bd-pdp-rail-top:hover { color: var(--e-global-color-primary); }
/* ---------- Shared section furniture ------------------------------------ */
.bd-pdp .bd-pdp-kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.bd-pdp .bd-pdp-kicker span { width: 32px; height: 2px; background: var(--e-global-color-accent); display: block; flex: none; }
.bd-pdp .bd-pdp-kicker {
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
color: var(--e-global-color-bdslate);
}
.bd-pdp .bd-pdp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 38px; }
.bd-pdp .bd-pdp-head h2, .bd-pdp .bd-pdp-h2 {
font-family: var(--e-global-typography-primary-font-family), sans-serif;
font-weight: 600; font-size: 34px; line-height: 1.12; letter-spacing: -.02em;
color: var(--e-global-color-secondary); margin: 0;
}
.bd-pdp .bd-pdp-h2 { margin: 0 0 40px; max-width: 720px; }
.bd-pdp .bd-pdp-count {
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--e-global-color-bdmuted);
}
.bd-pdp .bd-pdp-band { padding: 84px 0 0; }
.bd-pdp .bd-pdp-band > .bd-pdp-shell { padding-top: 76px; border-top: 1px solid var(--e-global-color-bdhair); }
.bd-pdp .bd-pdp-band-tint { padding-bottom: 96px; }
/* ---------- Prose ------------------------------------------------------- */
.bd-pdp .bd-pdp-prose { max-width: 720px; }
.bd-pdp .bd-pdp-prose p { font-size: 17px; line-height: 1.72; color: var(--e-global-color-bdgreyw); font-weight: 300; margin: 0 0 22px; text-wrap: pretty; }
.bd-pdp .bd-pdp-prose p:last-child { margin-bottom: 0; }
.bd-pdp .bd-pdp-prose ul { margin: 0 0 22px; padding-left: 20px; color: var(--e-global-color-bdgreyw); }
.bd-pdp .bd-pdp-callout {
display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 30px;
padding: 26px 28px; background: var(--e-global-color-bdtint);
border: 1px solid var(--e-global-color-bdhair); border-radius: 12px; max-width: 720px;
}
.bd-pdp .bd-pdp-callout > div { flex: 1; min-width: 240px; }
.bd-pdp .bd-pdp-callout strong {
display: block; font-family: var(--e-global-typography-primary-font-family), sans-serif;
font-weight: 600; font-size: 17px; color: var(--e-global-color-secondary); margin-bottom: 6px;
}
.bd-pdp .bd-pdp-callout span { font-size: 14.5px; line-height: 1.6; color: var(--e-global-color-text); }
.bd-pdp .bd-pdp-subhead { font-size: 15px; font-weight: 600; color: var(--e-global-color-secondary); margin-bottom: 14px; }
.bd-pdp .bd-pdp-idealfor { margin-top: 34px; max-width: 720px; }
.bd-pdp .bd-pdp-idealfor ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; }
.bd-pdp .bd-pdp-idealfor li { position: relative; padding-left: 18px; font-size: 15.5px; color: var(--e-global-color-bdgreyw); }
.bd-pdp .bd-pdp-idealfor li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--e-global-color-bdsteel); }
.bd-pdp .bd-pdp-video { margin-top: 34px; max-width: 720px; border-radius: 12px; overflow: hidden; }
.bd-pdp .bd-pdp-video iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; border: 0; }
/* ---------- Hairline grids ---------------------------------------------- */
.bd-pdp .bd-pdp-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1px; background: var(--e-global-color-bdhair);
border: 1px solid var(--e-global-color-bdhair); border-radius: 12px; overflow: hidden;
}
.bd-pdp .bd-pdp-grid-2 { grid-template-columns: 1fr 1fr; }
.bd-pdp .bd-pdp-cell { background: #FFFFFF; padding: 34px 30px; display: flex; flex-direction: column; gap: 10px; min-height: 200px; }
.bd-pdp .bd-pdp-cell-title { font-family: var(--e-global-typography-primary-font-family), sans-serif; font-weight: 600; font-size: 19px; line-height: 1.22; color: var(--e-global-color-secondary); }
.bd-pdp .bd-pdp-cell-desc { font-size: 14.5px; line-height: 1.62; color: var(--e-global-color-text); }
/* ---------- Cards ------------------------------------------------------- */
.bd-pdp .bd-pdp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.bd-pdp .bd-pdp-card { border: 1px solid var(--e-global-color-bdhair); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.bd-pdp .bd-pdp-card-media {
height: 200px; background: var(--e-global-color-bdtint);
border-bottom: 1px solid var(--e-global-color-bdhair);
display: flex; align-items: center; justify-content: center; padding: 26px;
}
.bd-pdp .bd-pdp-card-media img { max-width: 100%; max-height: 148px; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.bd-pdp .bd-pdp-card-body { padding: 28px 30px 32px; }
.bd-pdp .bd-pdp-card-title { font-family: var(--e-global-typography-primary-font-family), sans-serif; font-weight: 600; font-size: 20px; line-height: 1.22; color: var(--e-global-color-secondary); margin-bottom: 12px; }
.bd-pdp .bd-pdp-card-body p { font-size: 15px; line-height: 1.68; color: var(--e-global-color-text); font-weight: 300; margin: 0; }
.bd-pdp .bd-pdp-slot {
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
color: var(--e-global-color-text); background: #FFFFFF;
border: 1px dashed var(--e-global-color-bddash); border-radius: 999px; padding: 9px 16px; text-align: center;
}
.bd-pdp .bd-pdp-panel { background: var(--e-global-color-bdtint); border: 1px solid var(--e-global-color-bdhair); border-radius: 12px; padding: 44px 46px; max-width: none; }
/* ---------- Gallery ----------------------------------------------------- */
.bd-pdp .bd-pdp-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.bd-pdp .bd-pdp-shotcard { margin: 0; border: 1px solid var(--e-global-color-bdhair); border-radius: 12px; overflow: hidden; background: var(--e-global-color-bdtint); }
.bd-pdp .bd-pdp-shotcard > div { height: 220px; display: flex; align-items: center; justify-content: center; padding: 24px; }
.bd-pdp .bd-pdp-shotcard img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.bd-pdp .bd-pdp-shotcard figcaption {
padding: 14px 18px 18px; background: #FFFFFF; border-top: 1px solid var(--e-global-color-bdhair);
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--e-global-color-bdmuted);
}
/* ---------- Related ----------------------------------------------------- */
.bd-pdp .bd-pdp-band-tint { background: var(--e-global-color-bdtint); }
.bd-pdp .bd-pdp-band-tint > .bd-pdp-shell { border-top: 0; padding-top: 0; }
.bd-pdp .bd-pdp-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.bd-pdp .bd-pdp-rel { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--e-global-color-bdhair); border-radius: 12px; overflow: hidden; transition: border-color .2s; }
.bd-pdp .bd-pdp-rel:hover { border-color: var(--e-global-color-bdsteel); }
.bd-pdp .bd-pdp-rel-media {
height: 190px; background: var(--e-global-color-bdtint);
border-bottom: 1px solid var(--e-global-color-bdhair);
display: flex; align-items: center; justify-content: center; padding: 24px;
}
.bd-pdp .bd-pdp-rel-media img { max-width: 100%; max-height: 142px; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.bd-pdp .bd-pdp-rel-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.bd-pdp .bd-pdp-rel-title { font-family: var(--e-global-typography-primary-font-family), sans-serif; font-weight: 600; font-size: 18px; line-height: 1.22; color: var(--e-global-color-secondary); margin-bottom: 8px; }
.bd-pdp .bd-pdp-rel-body p { font-size: 14px; line-height: 1.58; color: var(--e-global-color-text); flex: 1; margin: 0 0 16px; }
.bd-pdp .bd-pdp-rel-cta { font-size: 13.5px; font-weight: 600; color: var(--e-global-color-primary); }
/* ---------- Responsive -------------------------------------------------- */
@media (max-width: 1024px) {
.bd-pdp .bd-pdp-hero-grid { grid-template-columns: 1fr; }
.bd-pdp .bd-pdp-hero-copy { padding: 40px 32px 48px; max-width: none; margin: 0; }
.bd-pdp .bd-pdp-hero-stage { border-radius: 0; min-height: 320px; padding: 40px 32px 48px; }
.bd-pdp .bd-pdp-title { font-size: 40px; }
.bd-pdp .bd-pdp-split, .bd-pdp .bd-pdp-split-2 { grid-template-columns: 1fr; gap: 40px; }
.bd-pdp .bd-pdp-rail { display: none; }
/* The rail is gone, so the jump bar takes over — one sticky strip only. */
.bd-pdp .bd-pdp-jump {
display: block; position: sticky; top: 124px; z-index: 30;
background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
border-bottom: 1px solid var(--e-global-color-bdhair);
}
.bd-pdp .bd-pdp-jump-inner {
max-width: var(--pdp-shell); margin: 0 auto; padding: 0 32px; height: 56px;
display: flex; align-items: center; gap: 24px; overflow-x: auto; white-space: nowrap;
}
.bd-pdp .bd-pdp-jump-inner a { font-size: 14px; font-weight: 500; color: var(--e-global-color-bdgreyw); flex: none; }
.bd-pdp [id] { scroll-margin-top: 190px; }
.bd-pdp .bd-pdp-shell { padding: 0 32px; }
.bd-pdp .bd-pdp-cards, .bd-pdp .bd-pdp-grid-2 { grid-template-columns: 1fr; }
.bd-pdp .bd-pdp-panel { padding: 32px 30px; }
}
@media (max-width: 767px) {
.bd-pdp .bd-pdp-shell, .bd-pdp .bd-pdp-crumbs-wrap { padding-left: 20px; padding-right: 20px; }
.bd-pdp .bd-pdp-hero-copy, .bd-pdp .bd-pdp-hero-stage { padding-left: 20px; padding-right: 20px; }
.bd-pdp .bd-pdp-title { font-size: 33px; }
.bd-pdp .bd-pdp-standfirst { font-size: 16.5px; }
.bd-pdp .bd-pdp-main, .bd-pdp .bd-pdp-band { padding-top: 56px; }
.bd-pdp .bd-pdp-band > .bd-pdp-shell { padding-top: 48px; }
.bd-pdp .bd-pdp-idealfor ul { grid-template-columns: 1fr; }
.bd-pdp .bd-pdp-cta { flex-direction: column; align-items: stretch; }
.bd-pdp .bd-pdp-btn { justify-content: center; }
}
/* ---------- Variants ----------------------------------------------------
A range sold in several formats. Listed as rows rather than cards so a long
set (Klercide runs to seven) stays scannable. */
.bd-pdp .bd-pdp-variants { border: 1px solid var(--e-global-color-bdhair); border-radius: 12px; overflow: hidden; }
.bd-pdp .bd-pdp-variant {
display: flex; align-items: flex-start; gap: 22px; padding: 24px 28px;
background: #FFFFFF; border-bottom: 1px solid var(--e-global-color-bdhair);
}
.bd-pdp .bd-pdp-variant:last-child { border-bottom: 0; }
.bd-pdp .bd-pdp-variant:nth-child(even) { background: var(--e-global-color-bdtint); }
.bd-pdp .bd-pdp-variant-main { flex: 1; }
.bd-pdp .bd-pdp-variant-title {
font-family: var(--e-global-typography-primary-font-family), sans-serif;
font-weight: 600; font-size: 17px; line-height: 1.3;
color: var(--e-global-color-secondary); margin-bottom: 6px;
}
.bd-pdp .bd-pdp-variant-main p { font-size: 14.5px; line-height: 1.62; color: var(--e-global-color-text); margin: 0; }
.bd-pdp .bd-pdp-variant-code {
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
color: var(--e-global-color-bdmuted); flex: none; padding-top: 4px;
}
@media (max-width: 767px) {
.bd-pdp .bd-pdp-variant { flex-wrap: wrap; gap: 10px 16px; padding: 20px; }
.bd-pdp .bd-pdp-variant-main { flex-basis: 100%; }
}
/* === BD RANGE ARCHIVE === */
/* =========================================================================
Manufacturer range archive (.bd-range) — rendered by [bd_range_body].
Range switching reuses the .bd-tab folder tabs; see build-conventions.md.
========================================================================= */
/* 1320 = the Products page's 1240px content + this shell's 40px side padding, which sits inside
max-width. Matched in Sept 2026 so "View the range" lands with the tabs and panel in exactly
the same place (client request). */
.bd-range { --pdp-shell: 1320px; }
.bd-range .bd-range-shell { max-width: var(--pdp-shell); margin: 0 auto; padding: 0 40px; }
.bd-range [id] { scroll-margin-top: 150px; }
/* ---------- Hero -------------------------------------------------------- */
/* White since Sept 2026, so "View the range" lands on the same look as the Products page
(client request). The crumb colours below are the light-ground set. */
.bd-range .bd-range-hero { background: var(--e-global-color-bdwhite); padding-top: 22px; }
.bd-range .bd-pdp-crumbs {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
}
.bd-range .bd-pdp-crumbs a { color: var(--e-global-color-bdslate); }
.bd-range .bd-pdp-crumbs a:hover { color: var(--e-global-color-primary); }
.bd-range .bd-pdp-crumbs span { color: var(--e-global-color-bddash); }
.bd-range .bd-pdp-crumbs em { color: var(--e-global-color-secondary); font-style: normal; }
.bd-range .bd-range-hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; align-items: stretch; min-height: 400px; }
.bd-range .bd-range-hero-copy {
padding: 44px 56px 48px 40px; max-width: 720px; margin-left: auto; width: 100%;
display: flex; flex-direction: column; justify-content: center;
}
.bd-range .bd-pdp-brand { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.bd-range .bd-pdp-brand img { height: 32px; width: auto; display: block; }
.bd-range .bd-pdp-brand img[src$=".svg"] { filter: brightness(0) invert(1); opacity: .9; }
.bd-range .bd-pdp-brand img:not([src$=".svg"]) {
background: #FFFFFF; padding: 5px 10px; border-radius: 4px;
height: auto; max-height: 36px; max-width: 160px; object-fit: contain;
}
.bd-range .bd-pdp-rule { width: 1px; height: 24px; background: var(--e-global-color-bdbrdrk); display: block; }
.bd-range .bd-pdp-eyebrow {
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
color: var(--e-global-color-bdmondk);
}
.bd-range .bd-range-title {
font-family: var(--e-global-typography-primary-font-family), sans-serif;
font-weight: 600; font-size: 50px; line-height: 1.06; letter-spacing: -.025em;
color: #FFFFFF; margin: 0 0 20px; text-wrap: balance;
}
.bd-range .bd-range-blurb {
font-size: 17.5px; line-height: 1.66; font-weight: 300; margin: 0 0 24px;
color: var(--e-global-color-bdlodks); max-width: 580px; text-wrap: pretty;
}
.bd-range .bd-range-points { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 9px; max-width: 560px; }
.bd-range .bd-range-points li {
position: relative; padding-left: 18px; font-size: 15px;
color: var(--e-global-color-bdmondk); line-height: 1.55;
}
.bd-range .bd-range-points li::before {
content: ""; position: absolute; left: 0; top: .62em;
width: 6px; height: 6px; background: var(--e-global-color-accent);
}
/* Buttons: the .bd-pdp-btn rules are scoped to the product single, so the
archive needs its own declaration of the same furniture. */
.bd-range .bd-pdp-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bd-range .bd-pdp-btn {
padding: 16px 28px; border-radius: 8px; font-size: 15px; text-decoration: none;
font-family: var(--e-global-typography-bdbtn-font-family), sans-serif;
display: inline-flex; align-items: center; gap: 10px;
transition: background-color .2s ease, border-color .2s ease;
}
.bd-range .bd-pdp-btn-solid { background: #FFFFFF; color: var(--e-global-color-secondary); font-weight: 600; }
.bd-range .bd-pdp-btn-solid:hover { background: var(--e-global-color-bdlodk); color: var(--e-global-color-secondary); }
.bd-range .bd-pdp-btn-ghost { border: 1px solid #3C5A68; color: #FFFFFF; font-weight: 500; }
.bd-range .bd-pdp-btn-ghost:hover { border-color: #FFFFFF; color: #FFFFFF; }
/* Product shots are cut-outs on a white background, so the stage is white and
the image is multiplied onto it — the same treatment as the product single
hero. A dark stage would show the shot's white box as a rectangle. */
.bd-range .bd-range-stage {
position: relative; display: flex; align-items: center; justify-content: center;
padding: 48px 44px 56px; min-height: 340px; overflow: hidden;
background: #FFFFFF; border-radius: 18px 0 0 0;
}
.bd-range .bd-range-stage img {
position: relative; z-index: 2; max-height: 300px; max-width: 82%; width: auto;
object-fit: contain; display: block; mix-blend-mode: multiply;
}
.bd-range .bd-range-cap {
position: absolute; z-index: 3; left: 34px; bottom: 22px;
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
color: var(--e-global-color-bdmuted);
}
/* ---------- Folder tabs -------------------------------------------------
Same look as the Products page tabs (Sept 2026, client request): navy tabs on
white, the active tab Panel Dark with a white label, opening into the same
supplier panel as the Products page, rendered directly underneath by [bd_range_body]
(listing 61). .bd-tab is
transparent by default, so the inactive navy is set explicitly here. */
.bd-range .bd-rangetabs { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 30px; }
.bd-range .bd-rangetabs .bd-tab { display: block; text-decoration: none; background: var(--e-global-color-secondary); }
.bd-range .bd-rangetabs .bd-tab:hover .bd-tab-label { color: var(--e-global-color-bdlodk); }
.bd-range .bd-rangetabs .bd-tab.is-active { background: var(--e-global-color-bdpanel); border-color: var(--e-global-color-bdbrdrk); }
.bd-range .bd-rangetabs .bd-tab.is-active .bd-tab-label { color: #FFFFFF; }
/* The panel's button scrolls down to this page's products rather than linking to the page itself. */
.bd-range .bd-panel-cta .jet-listing-dynamic-link__link.bd-panel-cta-down::after { content: "↓"; }
/* ---------- Product grid ------------------------------------------------- */
.bd-range .bd-range-list { background: #FFFFFF; padding: 76px 0 96px; }
.bd-range .bd-pdp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 40px; }
.bd-range .bd-pdp-head h2 {
font-family: var(--e-global-typography-primary-font-family), sans-serif;
font-weight: 600; font-size: 38px; line-height: 1.1; letter-spacing: -.02em;
color: var(--e-global-color-secondary); margin: 0;
}
.bd-range .bd-pdp-kicker {
display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
color: var(--e-global-color-bdslate);
}
.bd-range .bd-pdp-kicker span { width: 32px; height: 2px; background: var(--e-global-color-accent); display: block; flex: none; }
.bd-range .bd-range-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.bd-range .bd-range-card {
display: flex; flex-direction: column; background: #FFFFFF;
border: 1px solid var(--e-global-color-bdhair); border-radius: 12px;
overflow: hidden; transition: border-color .2s ease;
}
.bd-range .bd-range-card:hover { border-color: var(--e-global-color-bdsteel); }
.bd-range .bd-range-card-media {
position: relative; height: 260px; background: var(--e-global-color-bdtint);
border-bottom: 1px solid var(--e-global-color-bdhair);
display: flex; align-items: center; justify-content: center; padding: 42px 30px 26px;
}
/* The model code sits 18px from the top; a wide photo at the old 200px cap reached
up under it (PBSC AR-Dp, Pharmagraph enVigil; client, 2026-09-29). The photo band
now starts at 42px: 260 - 42 - 26 = 192px for the photo. */
.bd-range .bd-range-card-media img { max-width: 100%; max-height: 192px; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.bd-range .bd-range-tag {
position: absolute; left: 20px; top: 18px;
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
color: var(--e-global-color-bdmuted);
}
.bd-range .bd-pdp-slot {
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
color: var(--e-global-color-text); background: #FFFFFF;
border: 1px dashed var(--e-global-color-bddash); border-radius: 999px; padding: 9px 16px;
}
.bd-range .bd-range-card-body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.bd-range .bd-range-card-title {
font-family: var(--e-global-typography-primary-font-family), sans-serif;
font-weight: 600; font-size: 22px; line-height: 1.2;
color: var(--e-global-color-secondary); margin-bottom: 10px;
}
.bd-range .bd-range-card-body p { font-size: 14.5px; line-height: 1.6; color: var(--e-global-color-text); flex: 1; margin: 0 0 20px; }
.bd-range .bd-range-specs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.bd-range .bd-range-specs span {
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
color: var(--e-global-color-primary); background: #EEF4F7;
border-radius: 4px; padding: 6px 10px;
}
.bd-range .bd-pdp-rel-cta { font-size: 14px; font-weight: 600; color: var(--e-global-color-primary); }
.bd-range .bd-range-empty { font-size: 16px; color: var(--e-global-color-text); }
/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 1024px) {
.bd-range .bd-range-hero-grid { grid-template-columns: 1fr; }
.bd-range .bd-range-hero-copy { padding: 36px 32px 40px; max-width: none; margin: 0; }
.bd-range .bd-range-stage { border-radius: 0; min-height: 260px; padding-bottom: 40px; }
.bd-range .bd-range-title { font-size: 38px; }
.bd-range .bd-range-shell { padding: 0 32px; }
.bd-range .bd-rangetabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
.bd-range .bd-rangetabs .bd-tab { flex: none; }
}
@media (max-width: 767px) {
.bd-range .bd-range-shell { padding: 0 20px; }
.bd-range .bd-range-hero-copy, .bd-range .bd-range-stage { padding-left: 20px; padding-right: 20px; }
.bd-range .bd-range-title { font-size: 31px; }
.bd-range .bd-range-list { padding: 48px 0 64px; }
.bd-range .bd-pdp-cta { flex-direction: column; align-items: stretch; }
.bd-range .bd-pdp-btn { justify-content: center; }
}
/* A brand with no panel image gets no empty stage; the copy runs full width. */
.bd-range .bd-range-hero-grid.is-copyonly { grid-template-columns: 1fr; }
.bd-range .bd-range-hero-grid.is-copyonly .bd-range-hero-copy { max-width: 880px; margin-left: 0; padding-right: 40px; }
/* === BD PRODUCTS INDEX === */
/* =========================================================================
Products brand index (.bd-products) — rendered by [bd_products_body].
Card matrices use 1px grid dividers rather than gaps: a bordered, clipped
12px wrapper on --e-global-color-bdhair with white cells sitting on it.
========================================================================= */
.bd-products { --prod-shell: 1240px; background: #FFFFFF; }
.bd-products .bd-products-shell { max-width: var(--prod-shell); margin: 0 auto; padding: 0 40px; }
/* The sticky head (utility bar 40px + nav 84px) and the sub-nav below it
total 186px, so anchors clear both. See build-conventions.md rule 3. */
.bd-products [id] { scroll-margin-top: 190px; }
/* ---------- Shared furniture -------------------------------------------- */
.bd-products .bd-products-eyebrow {
display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
color: var(--e-global-color-bdslate);
}
.bd-products .bd-products-eyebrow.is-dark { color: var(--e-global-color-bdmondk); }
.bd-products .bd-products-eyebrow span { width: 32px; height: 2px; background: var(--e-global-color-accent); display: block; flex: none; }
.bd-products .bd-products-h2 {
font-family: var(--e-global-typography-primary-font-family), sans-serif;
font-weight: 600; font-size: 34px; line-height: 1.12; letter-spacing: -.02em;
color: var(--e-global-color-secondary); margin: 0;
}
.bd-products .bd-products-h2.is-large { font-size: 38px; line-height: 1.1; }
.bd-products .bd-products-h2.is-dark { color: #FFFFFF; font-size: 36px; margin-bottom: 14px; }
.bd-products .bd-products-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 40px; }
.bd-products .bd-products-head > div { max-width: 620px; }
.bd-products .bd-products-note { font-size: 15.5px; line-height: 1.62; color: var(--e-global-color-text); font-weight: 300; max-width: 360px; margin: 0; }
.bd-products .bd-products-body { font-size: 16px; line-height: 1.66; color: var(--e-global-color-bdgreyw); font-weight: 300; margin: 0 0 26px; }
.bd-products .bd-products-textlink {
display: inline-block; font-size: 15px; font-weight: 600;
color: var(--e-global-color-primary); text-decoration: none;
border-bottom: 2px solid var(--e-global-color-bdlodk); padding-bottom: 4px;
transition: border-color .2s ease;
}
.bd-products .bd-products-textlink:hover { border-bottom-color: var(--e-global-color-primary); }
.bd-products .bd-pdp-slot {
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
color: var(--e-global-color-text); background: #FFFFFF;
border: 1px dashed var(--e-global-color-bddash); border-radius: 8px; padding: 12px 20px;
}
/* ---------- Hero -------------------------------------------------------- */
.bd-products .bd-products-hero { background: var(--e-global-color-secondary); padding: 22px 0 78px; }
.bd-products .bd-pdp-crumbs {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
}
.bd-products .bd-pdp-crumbs a { color: var(--e-global-color-bdmonds); text-decoration: none; }
.bd-products .bd-pdp-crumbs a:hover { color: #FFFFFF; }
.bd-products .bd-pdp-crumbs span { color: #40606F; }
.bd-products .bd-pdp-crumbs em { color: var(--e-global-color-bdlodk); font-style: normal; }
.bd-products .bd-products-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 72px; align-items: end; padding-top: 48px; }
.bd-products .bd-products-title {
font-family: var(--e-global-typography-primary-font-family), sans-serif;
font-weight: 600; font-size: 54px; line-height: 1.05; letter-spacing: -.025em;
color: #FFFFFF; margin: 0 0 22px; text-wrap: balance;
}
.bd-products .bd-products-lead {
font-size: 18px; line-height: 1.64; font-weight: 300; margin: 0;
color: var(--e-global-color-bdlodks); max-width: 600px; text-wrap: pretty;
}
.bd-products .bd-products-lead.is-tight { font-size: 16.5px; max-width: 520px; }
.bd-products .bd-products-stats {
display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
background: var(--e-global-color-bdbrdrk); border: 1px solid var(--e-global-color-bdbrdrk);
border-radius: 12px; overflow: hidden;
}
.bd-products .bd-products-stat { background: var(--e-global-color-bdpanel); padding: 26px 24px; }
.bd-products .bd-products-stat-value {
font-family: var(--e-global-typography-primary-font-family), sans-serif;
font-weight: 600; font-size: 30px; line-height: 1; color: #FFFFFF; margin-bottom: 8px;
}
.bd-products .bd-products-stat-label {
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
color: var(--e-global-color-bdmondk); line-height: 1.5;
}
/* ---------- Sub-nav -----------------------------------------------------
Sits directly under the 124px sticky head, so it pins at 124 not 84. */
.bd-products .bd-products-subnav {
position: sticky; top: 124px; z-index: 30;
background: rgba(255,255,255,.96);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--e-global-color-bdhair);
}
.bd-products .bd-products-subnav-row { display: flex; align-items: center; justify-content: space-between; gap: 32px; height: 62px; }
.bd-products .bd-products-jump {
display: flex; align-items: center; gap: 22px; font-size: 14px; font-weight: 500;
overflow-x: auto; white-space: nowrap; scrollbar-width: none;
}
.bd-products .bd-products-jump::-webkit-scrollbar { display: none; }
.bd-products .bd-products-jump-label {
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: var(--e-global-color-bdmuted); flex: none;
}
.bd-products .bd-products-jump a { color: var(--e-global-color-bdgreyw); text-decoration: none; padding: 4px 0; transition: color .2s ease; }
.bd-products .bd-products-jump a:hover { color: var(--e-global-color-secondary); }
.bd-products .bd-products-btn {
background: var(--e-global-color-primary); color: #FFFFFF; text-decoration: none;
padding: 10px 18px; border-radius: 8px; font-size: 13.5px; font-weight: 600;
white-space: nowrap; flex: none; transition: background-color .2s ease;
}
.bd-products .bd-products-btn:hover { background: var(--e-global-color-bdblhov); color: #FFFFFF; }
/* ---------- Section rhythm ----------------------------------------------
The divider lives inside the shell so it stops at 1240px rather than
running the full width of the viewport. */
.bd-products .bd-products-band { padding: 84px 0 0; }
.bd-products .bd-products-band.is-last { padding-bottom: 96px; }
.bd-products .bd-products-rule { padding-top: 76px; border-top: 1px solid var(--e-global-color-bdhair); }
.bd-products .bd-products-split { display: grid; grid-template-columns: .85fr 1.15fr; gap: 72px; align-items: start; }
/* ---------- Brand cards -------------------------------------------------- */
.bd-products .bd-products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; }
.bd-products .bd-products-card {
display: flex; flex-direction: column; background: #FFFFFF; text-decoration: none;
border: 1px solid var(--e-global-color-bdhair); border-radius: 12px;
overflow: hidden; transition: border-color .2s ease;
}
.bd-products .bd-products-card:hover { border-color: var(--e-global-color-bdsteel); }
.bd-products .bd-products-card-logo {
position: relative; height: 132px; background: var(--e-global-color-bdtint);
border-bottom: 1px solid var(--e-global-color-bdhair);
display: flex; align-items: center; justify-content: center; padding: 30px 34px;
}
/* Several brand logos are rasters with a baked white box; multiply drops it
onto the tint. object-fit keeps the SVGs from stretching. */
.bd-products .bd-products-card-logo img {
max-height: 52px; max-width: 74%; width: auto; height: auto;
object-fit: contain; display: block; mix-blend-mode: multiply;
}
.bd-products .bd-products-card-origin {
position: absolute; right: 18px; top: 16px;
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
color: var(--e-global-color-bdmuted);
}
.bd-products .bd-products-card-body { padding: 28px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.bd-products .bd-products-card-name {
font-family: var(--e-global-typography-primary-font-family), sans-serif;
font-weight: 600; font-size: 23px; line-height: 1.18;
color: var(--e-global-color-secondary); margin-bottom: 6px;
}
.bd-products .bd-products-card-discipline {
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
color: var(--e-global-color-bdsteel); margin-bottom: 14px;
}
.bd-products .bd-products-card-body p { font-size: 14.5px; line-height: 1.62; color: var(--e-global-color-text); flex: 1; margin: 0 0 20px; }
.bd-products .bd-products-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.bd-products .bd-products-chips span {
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
color: var(--e-global-color-primary); background: #EEF4F7;
border-radius: 4px; padding: 6px 10px;
}
.bd-products .bd-products-card-foot {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
margin-top: auto; padding-top: 18px; border-top: 1px solid #EEF0F2;
}
.bd-products .bd-products-card-cta { font-size: 14px; font-weight: 600; color: var(--e-global-color-primary); }
.bd-products .bd-products-card-count {
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
color: var(--e-global-color-bdmuted); flex: none;
}
/* ---------- Divider matrices --------------------------------------------- */
.bd-products .bd-products-matrix {
display: grid; gap: 1px;
background: var(--e-global-color-bdhair); border: 1px solid var(--e-global-color-bdhair);
border-radius: 12px; overflow: hidden;
}
.bd-products .bd-products-matrix.is-four { grid-template-columns: repeat(4, 1fr); }
.bd-products .bd-products-matrix.is-two { grid-template-columns: 1fr 1fr; }
.bd-products .bd-products-cell {
background: #FFFFFF; padding: 34px 28px 30px; text-decoration: none;
display: flex; flex-direction: column; gap: 11px; min-height: 250px;
transition: background-color .2s ease;
}
.bd-products .bd-products-cell:not(.is-static):hover { background: var(--e-global-color-bdtint); }
.bd-products .bd-products-cell.is-static { padding: 32px 28px; min-height: 0; gap: 8px; }
.bd-products .bd-products-cell-title {
font-family: var(--e-global-typography-primary-font-family), sans-serif;
font-weight: 600; font-size: 19px; line-height: 1.2; color: var(--e-global-color-secondary);
}
.bd-products .bd-products-cell-title.is-small { font-size: 18px; line-height: 1.22; }
.bd-products .bd-products-cell p { font-size: 14.5px; line-height: 1.6; color: var(--e-global-color-text); flex: 1; margin: 0; }
.bd-products .bd-products-cell-cta { font-size: 13.5px; font-weight: 600; color: var(--e-global-color-primary); }
/* ---------- Accreditations ----------------------------------------------- */
.bd-products .bd-products-accred { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding-top: 40px; border-top: 1px solid var(--e-global-color-bdhair); }
.bd-products .bd-products-accred-label {
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: var(--e-global-color-bdslate);
}
.bd-products .bd-products-accred-marks { display: flex; gap: 14px; flex-wrap: wrap; }
/* ---------- Enquire ------------------------------------------------------ */
.bd-products .bd-products-enquire { background: var(--e-global-color-secondary); padding: 84px 0; }
.bd-products .bd-products-enquire-grid { display: grid; grid-template-columns: 1fr .85fr; gap: 72px; align-items: center; }
.bd-products .bd-products-actions { display: grid; gap: 12px; }
.bd-products .bd-products-action {
border: 1px solid #3C5A68; color: #FFFFFF; text-decoration: none;
padding: 18px 28px; border-radius: 8px; font-weight: 500; font-size: 15px;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
transition: border-color .2s ease, background-color .2s ease;
}
.bd-products .bd-products-action:hover { border-color: #FFFFFF; color: #FFFFFF; }
.bd-products .bd-products-action.is-solid { background: #FFFFFF; border-color: #FFFFFF; color: var(--e-global-color-secondary); font-weight: 600; }
.bd-products .bd-products-action.is-solid:hover { background: var(--e-global-color-bdlodk); border-color: var(--e-global-color-bdlodk); color: var(--e-global-color-secondary); }
.bd-products .bd-products-action-arrow { font-family: var(--e-global-typography-accent-font-family), monospace; }
/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 1024px) {
.bd-products .bd-products-shell { padding: 0 32px; }
.bd-products .bd-products-hero-grid,
.bd-products .bd-products-split,
.bd-products .bd-products-enquire-grid { grid-template-columns: 1fr; gap: 40px; }
.bd-products .bd-products-title { font-size: 40px; }
.bd-products .bd-products-matrix.is-four { grid-template-columns: 1fr 1fr; }
.bd-products .bd-products-cell { min-height: 0; }
.bd-products .bd-products-band { padding-top: 64px; }
.bd-products .bd-products-rule { padding-top: 56px; }
}
@media (max-width: 767px) {
.bd-products .bd-products-shell { padding: 0 20px; }
.bd-products [id] { scroll-margin-top: 170px; }
.bd-products .bd-products-hero { padding-bottom: 52px; }
.bd-products .bd-products-title { font-size: 32px; }
.bd-products .bd-products-lead { font-size: 16.5px; }
.bd-products .bd-products-h2,
.bd-products .bd-products-h2.is-large,
.bd-products .bd-products-h2.is-dark { font-size: 27px; }
.bd-products .bd-products-stats,
.bd-products .bd-products-matrix.is-four,
.bd-products .bd-products-matrix.is-two { grid-template-columns: 1fr; }
.bd-products .bd-products-subnav-row { height: auto; padding: 12px 0; flex-wrap: wrap; gap: 12px; }
.bd-products .bd-products-band.is-last { padding-bottom: 64px; }
.bd-products .bd-products-enquire { padding: 64px 0; }
.bd-products .bd-products-accred { gap: 18px; }
}
/* === END BD PRODUCTS INDEX === */
/* === BD PANEL CTA === */
/* The homepage panel's call to action. It is a JetEngine dynamic link rather
than an Elementor button because the target is the current term's archive,
which a button's static link control cannot express. */
.bd-panel-cta .jet-listing-dynamic-link__link {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 26px; border-radius: 8px; text-decoration: none;
background: var(--e-global-color-bdwhite);
color: var(--e-global-color-secondary);
font-family: var(--e-global-typography-bdbtn-font-family), sans-serif;
font-size: var(--e-global-typography-bdbtn-font-size, 15px);
font-weight: var(--e-global-typography-bdbtn-font-weight, 600);
transition: background-color .2s ease;
}
.bd-panel-cta .jet-listing-dynamic-link__link:hover {
background: var(--e-global-color-bdlodk);
color: var(--e-global-color-secondary);
}
/* Two things this rule has to work around:
- the arrow is a literal character, not a "2192" escape, because post meta
is unslashed on save and the backslash would not survive;
- JetEngine gives the label `order: 2` so an icon can sit either side of it,
which puts an unordered ::after in front of the text. */
.bd-panel-cta .jet-listing-dynamic-link__link::after {
content: "→"; order: 3;
font-family: var(--e-global-typography-accent-font-family), monospace;
}
/* === END BD PANEL CTA === */
/* === BD RANGE DETAIL === */
/* =========================================================================
Product blurbs on a range archive (.bd-range-detail) — rendered by
[bd_range_body]. Clicking a card in the grid above scrolls to one of these
instead of leaving the page (client feedback, Aug 2026); since Sept 2026 the
blurb's button leads to the Contact form rather than the product page.
========================================================================= */
.bd-range .bd-range-detail { background: #FFFFFF; padding: 20px 0 96px; }
.bd-range .bd-range-blurb-item {
display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start;
padding: 56px 0; border-top: 1px solid var(--e-global-color-bdhair);
}
.bd-range .bd-range-blurb-item:first-child { border-top: 0; }
.bd-range .bd-range-blurb-media {
background: var(--e-global-color-bdtint); border-radius: 14px; overflow: hidden;
display: flex; align-items: center; justify-content: center;
min-height: 260px; padding: 26px;
}
.bd-range .bd-range-blurb-media img { width: 100%; height: auto; object-fit: contain; max-height: 320px; }
/* Extra photos from the product's Image gallery stack under the lead image (Sept 2026: the Qube and
trophon blurbs carry a second photo). A lone image keeps the row layout above. */
.bd-range .bd-range-blurb-media.has-gallery { flex-direction: column; gap: 26px; }
.bd-range .bd-range-blurb-copy h3 {
font-family: var(--e-global-typography-primary-font-family), sans-serif;
font-weight: 600; font-size: 30px; line-height: 1.14; letter-spacing: -.02em;
color: var(--e-global-color-secondary); margin: 0 0 16px;
}
/* The kicker is styled dark-on-dark for the hero, so it is restated here. */
.bd-range .bd-range-blurb-copy .bd-pdp-kicker { color: var(--e-global-color-bdslate); margin-bottom: 16px; }
.bd-range .bd-range-blurb-lead {
font-size: 17px; line-height: 1.6; font-weight: 400;
color: var(--e-global-color-secondary); margin: 0 0 16px; text-wrap: pretty;
}
.bd-range .bd-range-blurb-copy p {
font-size: 15.5px; line-height: 1.68; font-weight: 300;
color: var(--e-global-color-text); margin: 0 0 20px; max-width: 62ch;
}
/* A product can show its short description as a sub-heading ("Show the short
description as a sub-heading", snippet 10) - trophon3's tagline, client
2026-09-29. Four classes, because the rule above outranks .bd-range-blurb-lead:
every ordinary lead renders as body copy, not at the 17px ink it declares. */
.bd-range .bd-range-blurb-copy p.bd-range-blurb-lead.is-subheading {
font-family: var(--e-global-typography-primary-font-family), sans-serif;
font-size: 21px; line-height: 1.35; font-weight: 500; letter-spacing: -.01em;
color: var(--e-global-color-secondary); max-width: 36ch; margin: -2px 0 22px; text-wrap: balance;
}
@media (max-width: 767px) {
.bd-range .bd-range-blurb-copy p.bd-range-blurb-lead.is-subheading { font-size: 18px; }
}
.bd-range .bd-range-blurb-feats,
.bd-range .bd-range-blurb-copy ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 9px; }
.bd-range .bd-range-blurb-feats li,
.bd-range .bd-range-blurb-copy ul li {
position: relative; padding-left: 22px;
font-size: 15px; line-height: 1.55; color: var(--e-global-color-bdgreyw); font-weight: 300;
}
.bd-range .bd-range-blurb-feats li::before,
.bd-range .bd-range-blurb-copy ul li::before {
content: ""; position: absolute; left: 0; top: 9px;
width: 8px; height: 2px; background: var(--e-global-color-accent);
}
/* A range with no tile grid (hide_tiles on the term): the 96px that separates a
grid from the blurbs below becomes a 156px hole when there is no grid. */
.bd-range.bd-range-notiles .bd-range-list { padding-bottom: 0; }
.bd-range.bd-range-notiles .bd-pdp-head { margin-bottom: 0; }
.bd-range .bd-range-blurb-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* The .bd-pdp-btn rules above are built for the dark hero — white fill on
navy. These blurbs sit on white, so the pair is inverted here. */
.bd-range .bd-range-detail .bd-pdp-btn-solid { background: var(--e-global-color-primary); color: #FFFFFF; }
.bd-range .bd-range-detail .bd-pdp-btn-solid:hover { background: var(--e-global-color-bdblhov); color: #FFFFFF; }
.bd-range .bd-range-detail .bd-pdp-btn-ghost { border-color: var(--e-global-color-bdhair); color: var(--e-global-color-primary); }
.bd-range .bd-range-detail .bd-pdp-btn-ghost:hover { border-color: var(--e-global-color-primary); color: var(--e-global-color-primary); }
.bd-range .bd-range-blurb-back {
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
color: var(--e-global-color-bdmuted); text-decoration: none; margin-left: auto;
}
.bd-range .bd-range-blurb-back:hover { color: var(--e-global-color-primary); }
/* Alternate sides down the page (client request, Sept 2026): every second blurb puts its image on the
right. The columns mirror too (1.2fr .8fr), so the image keeps its width rather than just swapping
places. Desktop only: at 1024px and below the blurb is one column and the image stays on top.
Visual order only; the markup still reads image, then copy. Counts every blurb on the page, so it
runs straight on across sub-ranges. */
@media (min-width: 1025px) {
.bd-range .bd-range-blurb-item:nth-child(even) { grid-template-columns: 1.2fr .8fr; }
.bd-range .bd-range-blurb-item:nth-child(even) .bd-range-blurb-media { grid-column: 2; grid-row: 1; }
.bd-range .bd-range-blurb-item:nth-child(even) .bd-range-blurb-copy { grid-column: 1; grid-row: 1; }
}
/* ---------- Enquire ------------------------------------------------------
#enquire was linked from the hero and the empty-range notice but never
existed on this template until Aug 2026. */
.bd-range .bd-range-enquire { background: var(--e-global-color-secondary); padding: 84px 0; }
.bd-range .bd-range-enquire-grid { display: grid; grid-template-columns: 1fr .85fr; gap: 72px; align-items: center; }
.bd-range .bd-range-enquire h2 {
font-family: var(--e-global-typography-primary-font-family), sans-serif;
font-weight: 600; font-size: 36px; line-height: 1.12; letter-spacing: -.02em;
color: #FFFFFF; margin: 0 0 14px;
}
.bd-range .bd-range-enquire p {
font-size: 16.5px; line-height: 1.64; font-weight: 300;
color: var(--e-global-color-bdlodks); margin: 0; max-width: 520px;
}
.bd-range .bd-range-enquire .bd-pdp-eyebrow { display: block; margin-bottom: 18px; }
.bd-range .bd-range-enquire-actions { display: grid; gap: 12px; }
.bd-range .bd-range-enquire-actions .bd-pdp-btn { justify-content: center; }
@media (max-width: 1024px) {
.bd-range .bd-range-blurb-item { grid-template-columns: 1fr; gap: 32px; }
.bd-range .bd-range-enquire-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 767px) {
.bd-range .bd-range-detail { padding-bottom: 64px; }
.bd-range .bd-range-blurb-item { padding: 40px 0; }
.bd-range .bd-range-blurb-copy h3 { font-size: 25px; }
.bd-range .bd-range-blurb-back { margin-left: 0; }
.bd-range .bd-range-enquire { padding: 64px 0; }
.bd-range .bd-range-enquire h2 { font-size: 28px; }
}
/* === END BD RANGE DETAIL === */
/* === BD SERVICES === */
/* =========================================================================
Services page (.bd-svc) — rendered by [bd_services_body]. One page for all
services: the tiles are the navigation and scroll to a detail block below,
the same mechanism the range pages use for products.
The tiles carry brand blue at the client's request ("the same as the 'how
can we help?' bubble"), so numerals, headings, body and CTA are all
recoloured for contrast on dark.
========================================================================= */
.bd-svc { --svc-shell: 1240px; background: #FFFFFF; }
.bd-svc .bd-svc-shell { max-width: var(--svc-shell); margin: 0 auto; padding: 0 40px; }
/* Sticky head (124px) + this page's sub-nav (62px). See build-conventions rule 3. */
.bd-svc [id] { scroll-margin-top: 190px; }
/* ---------- Shared furniture -------------------------------------------- */
.bd-svc .bd-svc-eyebrow {
display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
color: var(--e-global-color-bdslate);
}
.bd-svc .bd-svc-eyebrow.is-dark { color: var(--e-global-color-bdmondk); }
.bd-svc .bd-svc-eyebrow span { width: 32px; height: 2px; background: var(--e-global-color-accent); display: block; flex: none; }
.bd-svc .bd-svc-h2 {
font-family: var(--e-global-typography-primary-font-family), sans-serif;
font-weight: 600; font-size: 38px; line-height: 1.1; letter-spacing: -.02em;
color: var(--e-global-color-secondary); margin: 0;
}
.bd-svc .bd-svc-h2.is-dark { color: #FFFFFF; font-size: 36px; margin-bottom: 14px; }
.bd-svc .bd-svc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 40px; }
.bd-svc .bd-svc-head > div { max-width: 620px; }
.bd-svc .bd-svc-note { font-size: 15.5px; line-height: 1.62; color: var(--e-global-color-text); font-weight: 300; max-width: 360px; margin: 0; }
/* ---------- Hero -------------------------------------------------------- */
.bd-svc .bd-svc-hero { background: var(--e-global-color-secondary); padding: 22px 0 78px; }
.bd-svc .bd-pdp-crumbs {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
}
.bd-svc .bd-pdp-crumbs a { color: var(--e-global-color-bdmonds); text-decoration: none; }
.bd-svc .bd-pdp-crumbs a:hover { color: #FFFFFF; }
.bd-svc .bd-pdp-crumbs span { color: #40606F; }
.bd-svc .bd-pdp-crumbs em { color: var(--e-global-color-bdlodk); font-style: normal; }
.bd-svc .bd-svc-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 72px; align-items: end; padding-top: 48px; }
.bd-svc .bd-svc-title {
font-family: var(--e-global-typography-primary-font-family), sans-serif;
font-weight: 600; font-size: 54px; line-height: 1.05; letter-spacing: -.025em;
color: #FFFFFF; margin: 0 0 22px; text-wrap: balance;
}
.bd-svc .bd-svc-lead {
font-size: 18px; line-height: 1.64; font-weight: 300; margin: 0;
color: var(--e-global-color-bdlodks); max-width: 600px; text-wrap: pretty;
}
.bd-svc .bd-svc-lead.is-tight { font-size: 16.5px; max-width: 520px; }
.bd-svc .bd-svc-stats {
display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
background: var(--e-global-color-bdbrdrk); border: 1px solid var(--e-global-color-bdbrdrk);
border-radius: 12px; overflow: hidden;
}
.bd-svc .bd-svc-stat { background: var(--e-global-color-bdpanel); padding: 26px 24px; }
.bd-svc .bd-svc-stat-value {
font-family: var(--e-global-typography-primary-font-family), sans-serif;
font-weight: 600; font-size: 30px; line-height: 1; color: #FFFFFF; margin-bottom: 8px;
}
.bd-svc .bd-svc-stat-label {
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
color: var(--e-global-color-bdmondk); line-height: 1.5;
}
/* ---------- Sub-nav ----------------------------------------------------- */
.bd-svc .bd-svc-subnav {
position: sticky; top: 124px; z-index: 30;
background: rgba(255,255,255,.96);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--e-global-color-bdhair);
}
.bd-svc .bd-svc-subnav-row { display: flex; align-items: center; justify-content: space-between; gap: 32px; height: 62px; }
.bd-svc .bd-svc-jump {
display: flex; align-items: center; gap: 22px; font-size: 14px; font-weight: 500;
overflow-x: auto; white-space: nowrap; scrollbar-width: none;
}
.bd-svc .bd-svc-jump::-webkit-scrollbar { display: none; }
.bd-svc .bd-svc-jump-label {
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: var(--e-global-color-bdmuted); flex: none;
}
.bd-svc .bd-svc-jump a { color: var(--e-global-color-bdgreyw); text-decoration: none; padding: 4px 0; transition: color .2s ease; }
.bd-svc .bd-svc-jump a:hover { color: var(--e-global-color-secondary); }
.bd-svc .bd-svc-btn {
background: var(--e-global-color-primary); color: #FFFFFF; text-decoration: none;
padding: 10px 18px; border-radius: 8px; font-size: 13.5px; font-weight: 600;
white-space: nowrap; flex: none; transition: background-color .2s ease;
}
.bd-svc .bd-svc-btn:hover { background: var(--e-global-color-bdblhov); color: #FFFFFF; }
/* ---------- Tiles ------------------------------------------------------- */
.bd-svc .bd-svc-band { padding: 84px 0 0; }
/* 260px keeps four across in the 1160px shell (4x260 + 3x20 = 1100); a fifth
service would need 1380px and so wraps rather than squeezing. */
.bd-svc .bd-svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.bd-svc .bd-svc-tile {
display: flex; flex-direction: column; text-decoration: none;
background: var(--e-global-color-primary); border-radius: 14px;
padding: 32px 30px 30px; min-height: 260px;
transition: background-color .2s ease, transform .2s ease;
}
.bd-svc .bd-svc-tile:hover { background: var(--e-global-color-bdblhov); transform: translateY(-3px); }
.bd-svc .bd-svc-tile-title {
font-family: var(--e-global-typography-bdtile-font-family), sans-serif;
font-weight: 600; font-size: 20px; line-height: 1.24; letter-spacing: -.01em;
color: #FFFFFF; margin-bottom: 12px;
}
.bd-svc .bd-svc-tile-body {
font-size: 14.5px; line-height: 1.6; font-weight: 300;
color: var(--e-global-color-bdlodks); flex: 1; margin-bottom: 22px;
}
.bd-svc .bd-svc-tile-cta { font-size: 14px; font-weight: 600; color: #FFFFFF; }
.bd-svc .bd-svc-tile-cta span { color: var(--e-global-color-accent); }
/* ---------- Detail blocks ----------------------------------------------- */
.bd-svc .bd-svc-detail { padding: 20px 0 96px; }
.bd-svc .bd-svc-item {
display: grid; grid-template-columns: 1fr; gap: 0; align-items: start;
padding: 60px 0; border-top: 1px solid var(--e-global-color-bdhair);
}
/* A service with an image (client images, Sept 2026) lays out like a range blurb: same columns,
same tinted frame, alternating sides down the page. Without one it stays copy-only. */
.bd-svc .bd-svc-item.has-media { grid-template-columns: .8fr 1.2fr; gap: 56px; }
.bd-svc .bd-svc-item-media {
background: var(--e-global-color-bdtint); border-radius: 14px; overflow: hidden;
display: flex; align-items: center; justify-content: center;
min-height: 260px; padding: 26px;
}
.bd-svc .bd-svc-item-media img { width: 100%; height: auto; object-fit: contain; max-height: 320px; }
@media (min-width: 1025px) {
.bd-svc .bd-svc-item.has-media:nth-child(even) { grid-template-columns: 1.2fr .8fr; }
.bd-svc .bd-svc-item.has-media:nth-child(even) .bd-svc-item-media { grid-column: 2; grid-row: 1; }
.bd-svc .bd-svc-item.has-media:nth-child(even) .bd-svc-item-copy { grid-column: 1; grid-row: 1; }
}
.bd-svc .bd-svc-item-copy h3 {
font-family: var(--e-global-typography-primary-font-family), sans-serif;
font-weight: 600; font-size: 32px; line-height: 1.12; letter-spacing: -.02em;
color: var(--e-global-color-secondary); margin: 0 0 16px;
}
.bd-svc .bd-svc-item-lead {
font-size: 17.5px; line-height: 1.58; font-weight: 400;
color: var(--e-global-color-secondary); margin: 0 0 18px; max-width: 60ch; text-wrap: pretty;
}
.bd-svc .bd-svc-item-copy p {
font-size: 15.5px; line-height: 1.68; font-weight: 300;
color: var(--e-global-color-text); margin: 0 0 26px; max-width: 62ch;
}
.bd-svc .bd-svc-item-points-label {
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: var(--e-global-color-bdmuted); margin-bottom: 14px;
}
.bd-svc .bd-svc-item-points,
.bd-svc .bd-svc-item-copy ul { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 10px; max-width: 60ch; }
.bd-svc .bd-svc-item-points li,
.bd-svc .bd-svc-item-copy ul li {
position: relative; padding-left: 22px;
font-size: 15px; line-height: 1.56; color: var(--e-global-color-bdgreyw); font-weight: 300;
}
.bd-svc .bd-svc-item-points li::before,
.bd-svc .bd-svc-item-copy ul li::before {
content: ""; position: absolute; left: 0; top: 9px;
width: 8px; height: 2px; background: var(--e-global-color-accent);
}
.bd-svc .bd-svc-item-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bd-svc .bd-pdp-btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 15px 26px; border-radius: 8px; text-decoration: none;
font-size: 15px; transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.bd-svc .bd-pdp-btn-solid { background: var(--e-global-color-primary); color: #FFFFFF; font-weight: 600; }
.bd-svc .bd-pdp-btn-solid:hover { background: var(--e-global-color-bdblhov); color: #FFFFFF; }
.bd-svc .bd-svc-item-back {
font-family: var(--e-global-typography-accent-font-family), monospace;
font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
color: var(--e-global-color-bdmuted); text-decoration: none;
}
.bd-svc .bd-svc-item-back:hover { color: var(--e-global-color-primary); }
/* ---------- Enquire ----------------------------------------------------- */
.bd-svc .bd-svc-enquire { background: var(--e-global-color-secondary); padding: 84px 0; }
.bd-svc .bd-svc-enquire-grid { display: grid; grid-template-columns: 1fr .85fr; gap: 72px; align-items: center; }
.bd-svc .bd-svc-actions { display: grid; gap: 12px; }
.bd-svc .bd-svc-action {
border: 1px solid #3C5A68; color: #FFFFFF; text-decoration: none;
padding: 18px 28px; border-radius: 8px; font-weight: 500; font-size: 15px;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
transition: border-color .2s ease, background-color .2s ease;
}
.bd-svc .bd-svc-action:hover { border-color: #FFFFFF; color: #FFFFFF; }
.bd-svc .bd-svc-action.is-solid { background: #FFFFFF; border-color: #FFFFFF; color: var(--e-global-color-secondary); font-weight: 600; }
.bd-svc .bd-svc-action.is-solid:hover { background: var(--e-global-color-bdlodk); border-color: var(--e-global-color-bdlodk); color: var(--e-global-color-secondary); }
.bd-svc .bd-svc-action-arrow { font-family: var(--e-global-typography-accent-font-family), monospace; }
@media (max-width: 1024px) {
.bd-svc .bd-svc-shell { padding: 0 24px; }
.bd-svc .bd-svc-hero-grid { grid-template-columns: 1fr; gap: 44px; }
.bd-svc .bd-svc-title { font-size: 42px; }
.bd-svc .bd-svc-item { grid-template-columns: 1fr; gap: 18px; }
.bd-svc .bd-svc-item.has-media { grid-template-columns: 1fr; gap: 32px; }
.bd-svc .bd-svc-enquire-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 767px) {
.bd-svc .bd-svc-shell { padding: 0 20px; }
.bd-svc .bd-svc-hero { padding-bottom: 56px; }
.bd-svc .bd-svc-title { font-size: 33px; }
.bd-svc .bd-svc-stats { grid-template-columns: 1fr; }
.bd-svc .bd-svc-band { padding-top: 56px; }
.bd-svc .bd-svc-h2 { font-size: 28px; }
.bd-svc .bd-svc-detail { padding-bottom: 64px; }
.bd-svc .bd-svc-item { padding: 40px 0; }
.bd-svc .bd-svc-item-copy h3 { font-size: 25px; }
.bd-svc .bd-svc-enquire { padding: 64px 0; }
.bd-svc .bd-svc-h2.is-dark { font-size: 27px; }
}
/* === END BD SERVICES === */
/* Sub-range section heading inside a supplier scroll (Sept 2026 restructure). */
.bd-range .bd-range-group {
font-family: var(--e-global-typography-primary-font-family), sans-serif;
font-weight: 600; font-size: 17px; line-height: 1.3; letter-spacing: .01em;
color: var(--e-global-color-secondary);
margin: 46px 0 18px; padding-bottom: 12px;
border-bottom: 1px solid var(--e-global-color-bdhair);
}
.bd-range .bd-range-group:first-of-type { margin-top: 10px; }
/* ---------- Authorised distributor band --------------------------------- */
/* The logos are a JetEngine listing that has to lay out as one centred row.
display:contents must be applied down the WHOLE wrapper chain (widget ->
.jet-listing-grid -> .jet-listing-grid__items); doing it on one level only
leaves the items stacking inside the grid. Raster logos also ignore a bare
`height` here (the two SVGs obey it), so height is forced and width released.
Heights stay per-brand - the handoff is explicit that partner logos must NOT
be normalised to a single height. `multiply` drops the white plates that the
Ecolab and PBSC bitmaps carry, against the light band. */
#partners .elementor-widget-heading { width: 100% !important; }
#partners .elementor-widget-heading .elementor-heading-title { text-align: center !important; }
.bd-partner-row { width: 100% !important; --width: 100%; --justify-content: center; --align-items: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center !important; gap: 28px 40px; }
/* A range with no logo (Ecolab - Isolator) still rendered an empty item, which took a gap of its own.
Dropping it, and the gap 46px -> 40px, keeps all seven logos on one row at desktop (Sept 2026, when
Dos&Donts joined). A logo added to that range later shows up without a CSS change. */
.bd-partner-grid .jet-listing-grid__item:not(:has(img)) { display: none !important; }
.bd-partner-grid,
.bd-partner-grid .jet-listing-grid,
.bd-partner-grid .jet-listing-grid__items { display: contents !important; }
.bd-partner-grid .jet-listing-grid__item { flex: 0 0 auto !important; width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
.bd-partner-grid .jet-listing-grid__item img { width: auto !important; max-width: 100% !important; mix-blend-mode: multiply; }
.bd-partner-grid [data-post-id="14"] img { height: 40px !important; }
.bd-partner-grid [data-post-id="5"] img { height: 30px !important; }
.bd-partner-grid [data-post-id="3"] img { height: 38px !important; }
.bd-partner-grid [data-post-id="4"] img { height: 36px !important; }
.bd-partner-grid [data-post-id="6"] img { height: 19px !important; }
.bd-partner-grid [data-post-id="7"] img { height: 17px !important; }
.bd-partner-grid [data-post-id="24"] img { height: 22px !important; }
@media (max-width: 767px) {
/* Explicit heights, NOT height:auto — bioquell-logo.svg carries only a
viewBox with no width/height attributes, so it has no intrinsic size and
`height:auto` collapses it to 0x0 (it vanished from the band entirely).
Every other logo has real attributes and is unaffected. */
.bd-partner-row { gap: 18px 26px; }
.bd-partner-grid .jet-listing-grid__item img { width: auto !important; max-width: 100% !important; }
.bd-partner-grid [data-post-id="14"] img { height: 30px !important; }
.bd-partner-grid [data-post-id="5"] img { height: 23px !important; }
.bd-partner-grid [data-post-id="3"] img { height: 28px !important; }
.bd-partner-grid [data-post-id="4"] img { height: 27px !important; }
.bd-partner-grid [data-post-id="6"] img { height: 15px !important; }
.bd-partner-grid [data-post-id="7"] img { height: 13px !important; }
.bd-partner-grid [data-post-id="24"] img { height: 17px !important; }
}
/* ---------- Nav underline ----------------------------------------------- */
/* Elementor hard-codes the pointer underline to #3f444b in
widget-nav-menu.min.css, which loads AFTER the kit, and it only emits the
per-widget colour rules when `pointer` is set through the editor. Overridden
here with one extra class of specificity rather than !important.
White on hover, aqua on the current page so the rule matches the word. */
.bd-nav .e--pointer-underline .elementor-item:after,
.bd-nav .e--pointer-underline .elementor-item:before {
background-color: var(--e-global-color-bdwhite);
}
.bd-nav .e--pointer-underline .elementor-item.elementor-item-active:after,
.bd-nav .e--pointer-underline .elementor-item.elementor-item-active:before,
.bd-nav .e--pointer-underline .elementor-item.highlighted:after,
.bd-nav .e--pointer-underline .elementor-item.highlighted:before {
background-color: var(--e-global-color-accent);
}
/* ---------- Utility bar: email + LinkedIn ------------------------------- */
/* Icons are CSS masks rather than ![]()
, so they inherit the link colour and
change with it on hover. A hairline pipe separates the two. */
.bd-util-right { display: flex; align-items: center; }
.bd-util-email .elementor-heading-title a,
.bd-util-linkedin .elementor-heading-title a { display: inline-flex; align-items: center; gap: 7px; }
.bd-util-email .elementor-heading-title a::before,
.bd-util-linkedin .elementor-heading-title a::before {
content: ""; width: 13px; height: 13px; flex: 0 0 auto;
background-color: currentColor;
-webkit-mask: var(--bd-icon) no-repeat center / contain;
mask: var(--bd-icon) no-repeat center / contain;
}
.bd-util-email .elementor-heading-title a::before { --bd-icon: url("data:image/svg+xml,"); }
.bd-util-linkedin .elementor-heading-title a::before { --bd-icon: url("data:image/svg+xml,"); }
.bd-util-linkedin { position: relative; padding-left: 18px; margin-left: 18px; }
.bd-util-linkedin::before {
content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 1px; height: 13px; background: currentColor; opacity: .38;
}
/* ---------- Header row -------------------------------------------------- */
/* The nav is right-aligned by space-between now that the empty third
container is gone. Without it the logo widget stretched to fill the gap
(964px) and centred its image, so it is pinned to its own width here.
The header shell is matched to the utility bar's 1240px so the logo lines
up under the phone numbers and the nav under the LinkedIn link. */
.bd-header > .e-con-inner { max-width: 1240px; }
.bd-header > .e-con-inner > .bd-logo { flex: 0 0 auto !important; width: auto !important; max-width: none !important; }
/* hello-elementor sets a{text-decoration:underline}; the shrink-wrapped logo
anchor was drawing a rule under the wordmark. */
.bd-logo a { display: inline-flex; }
/* A 2px #DFE0E5 bottom border was computing onto the logo widget — a leftover
from the white-header design, invisible then, a white rule on blue now. No
rule producing it exists in the kit, theme or Elementor stylesheets (checked),
so it is cleared defensively rather than by editing its source. */
.bd-header .bd-logo,
.bd-header .bd-logo a,
.bd-header .bd-logo img { border: 0 !important; box-shadow: none !important; text-decoration: none !important; }
/* ---------- Header: tablet and mobile ----------------------------------- */
/* Sept 2026, client request. Wherever the menu collapses to the hamburger (1024px and below) the
header is one row: logo left, white hamburger right. The utility bar (phones, email, LinkedIn) is
hidden there by its container's Responsive settings in the header template; the "How can we
help?" bubble and the Contact page still carry both phone numbers. The row is 76px on tablet and
68px on phones (container min-height), and everything pinned under the header uses those heights. */
@media (max-width: 1024px) {
/* The menu widget is a column flex box, so the hamburger is centred on the main axis to sit level
with the logo. The widget is pulled 8px right so the icon itself, not its tap area, meets the
gutter; the header template's own CSS sets the toggle's margin, so it is not set there. The
widget is static so the dropdown below measures from the header row rather than the widget. */
.bd-header .bd-nav {
align-self: stretch; display: flex; flex-direction: column; justify-content: center;
margin-right: -8px; position: static;
}
.bd-nav .elementor-menu-toggle {
padding: 8px; border-radius: 8px;
color: #FFFFFF; background-color: transparent; --nav-menu-icon-size: 26px;
}
.bd-nav .elementor-menu-toggle svg { fill: currentColor; }
.bd-nav .elementor-menu-toggle:hover,
.bd-nav .elementor-menu-toggle:focus { color: #FFFFFF; background-color: rgba(255,255,255,.1); }
.bd-nav .elementor-menu-toggle:focus-visible { outline: 2px solid var(--e-global-color-accent); outline-offset: 2px; }
/* Full width, opening over the page from the header's bottom edge. Positioned here rather than with
the widget's Full Width setting, whose script wrote inline offsets measured from the narrow widget. */
.bd-header .bd-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container {
position: absolute; top: 100%; left: 0; right: 0; width: auto; margin-top: 0; z-index: 9997;
background-color: var(--e-global-color-secondary);
border-top: 1px solid var(--e-global-color-bdbrdrk);
box-shadow: 0 24px 40px rgba(15,37,48,.35);
}
.bd-nav .elementor-nav-menu--dropdown li:not(:last-child) { border-bottom: 1px solid var(--e-global-color-bdbrdsf); }
.bd-nav .elementor-nav-menu--dropdown a,
.bd-nav .elementor-nav-menu--dropdown a:focus {
padding: 17px 40px; justify-content: flex-start;
color: var(--e-global-color-bdlodk); background-color: transparent;
}
/* Six classes: the header template's CSS sets menu type on every .elementor-item with five
(.elementor-58 .elementor-element.elementor-element-28d4340 .elementor-nav-menu .elementor-item)
and loads after the kit, so five would tie and lose. */
.bd-sticky-head .bd-header .bd-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-item { font-size: 16px; font-weight: 500; line-height: 1.3; }
.bd-nav .elementor-nav-menu--dropdown a:hover,
.bd-nav .elementor-nav-menu--dropdown a.highlighted { color: #FFFFFF; background-color: var(--e-global-color-bdpanel); }
.bd-nav .elementor-nav-menu--dropdown a.elementor-item-active { color: var(--e-global-color-accent); background-color: transparent; }
.bd-pdp .bd-pdp-jump, .bd-svc .bd-svc-subnav, .bd-products .bd-products-subnav { top: 76px; }
}
@media (max-width: 767px) {
.bd-nav .elementor-nav-menu--dropdown a,
.bd-nav .elementor-nav-menu--dropdown a:focus { padding-left: 20px; padding-right: 20px; }
.bd-pdp .bd-pdp-jump, .bd-svc .bd-svc-subnav, .bd-products .bd-products-subnav { top: 68px; }
}/* End custom CSS */