/*
 Theme Name:   BDD
 Theme URI:    https://bowmandesign.com/
 Description:  BDD framework child theme for Bricks — carries the custom CSS/JS layer the builder can't express: lightbox cursors, the u-anim utility system, focus-ring conventions, and vendor fixes. Folder stays bricks-child; Template line must remain "bricks".
 Author:       Bowman Design Direction
 Author URI:   https://bowmandesign.com/
 Template:     bricks
 Version:      1.2
 Text Domain:  bricks
*/

/* === vimeo wrapper === */
.bdd-video-constrained {
  overflow: hidden;
}

.bdd-video-constrained iframe {
  transform: scaleX(1.004);
  transform-origin: center;
}

/* === BDD Interactive Cursor === */
/* Make the interaction affordance explicit instead of relying on browser defaults.
   Component-specific cursors below (lightbox zoom, gallery zoom, drag states) retain
   priority because this zero-specificity baseline is intentionally easy to override. */
:where(
  a[href],
  button:not(:disabled),
  [role="button"]:not([aria-disabled="true"]),
  summary,
  label[for],
  input[type="button"]:not(:disabled),
  input[type="submit"]:not(:disabled),
  input[type="reset"]:not(:disabled)
) {
  cursor: pointer;
}
/* === End BDD Interactive Cursor === */

/* === BDD Lightbox Cursor === */
/* Custom magnifier cursors for lightbox-linked images and inside the PhotoSwipe lightbox.
   Bricks core / PhotoSwipe use the browser's built-in zoom-in / zoom-out bitmaps (read as bare +/-).
   .pswp selectors carry a doubled .pswp__img to outrank PhotoSwipe's late-loaded CSS without !important.
   Rule order mirrors photoswipe.min.css: zoom-in, grab, then zoom-out LAST (wins in no-mouse-drag zoomed state). */
:root {
  --bdd-cursor-zoom-in: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='13' cy='13' r='11' fill='rgba(0,0,0,0.25)' stroke='white' stroke-width='3'/%3E%3Cline x1='20.8' y1='20.8' x2='28.5' y2='28.5' stroke='white' stroke-width='3' stroke-linecap='round'/%3E%3Crect x='7.875' y='11.625' width='10.25' height='2.75' rx='0.8' fill='white'/%3E%3Crect x='11.625' y='7.875' width='2.75' height='10.25' rx='0.8' fill='white'/%3E%3Cline x1='20.8' y1='20.8' x2='28.5' y2='28.5' stroke='%231d1d1f' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='13' cy='13' r='11' fill='none' stroke='%231d1d1f' stroke-width='1.5'/%3E%3Crect x='8.5' y='12.25' width='9' height='1.5' rx='0.4' fill='%231d1d1f'/%3E%3Crect x='12.25' y='8.5' width='1.5' height='9' rx='0.4' fill='%231d1d1f'/%3E%3C/svg%3E") 13 13, zoom-in;
  --bdd-cursor-zoom-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='13' cy='13' r='11' fill='rgba(0,0,0,0.25)' stroke='white' stroke-width='3'/%3E%3Cline x1='20.8' y1='20.8' x2='28.5' y2='28.5' stroke='white' stroke-width='3' stroke-linecap='round'/%3E%3Crect x='7.875' y='11.625' width='10.25' height='2.75' rx='0.8' fill='white'/%3E%3Cline x1='20.8' y1='20.8' x2='28.5' y2='28.5' stroke='%231d1d1f' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='13' cy='13' r='11' fill='none' stroke='%231d1d1f' stroke-width='1.5'/%3E%3Crect x='8.5' y='12.25' width='9' height='1.5' rx='0.4' fill='%231d1d1f'/%3E%3C/svg%3E") 13 13, zoom-out;
}
/* a[data-pswp-clone-of]: the BDD Splide Clone Lightbox Fix strips bricks-lightbox/data-pswp-id
   from clone-slide anchors at runtime; clones stay clickable so they keep the magnifier too.
   Buttons that open lightboxes (.brxe-button / btn-- classes) keep the pointer: a magnifier on
   a button reads as "zoom this button", not "opens a gallery". */
.bricks-lightbox a:not(.brxe-button):not([class*="btn--"]),
a.bricks-lightbox:not(.brxe-button):not([class*="btn--"]),
a[data-pswp-clone-of] {
  cursor: var(--bdd-cursor-zoom-in);
}
/* PhotoSwipe zoomable: magnifier with plus */
.pswp.brx.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img.pswp__img {
  cursor: var(--bdd-cursor-zoom-in);
}
/* PhotoSwipe zoomed-in with mouse drag: keep pan affordance */
.pswp.brx.pswp--click-to-zoom.pswp--zoomed-in .pswp__img.pswp__img {
  cursor: grab;
}
.pswp.brx.pswp--click-to-zoom.pswp--zoomed-in .pswp__img.pswp__img:active {
  cursor: grabbing;
}
/* PhotoSwipe base + zoom-out states: magnifier with minus */
.pswp.brx .pswp__img.pswp__img,
.pswp.brx.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img.pswp__img,
.pswp.brx.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img.pswp__img:active {
  cursor: var(--bdd-cursor-zoom-out);
}
/* === End BDD Lightbox Cursor === */

/* === BDD Global Styles === */
/* Migrated verbatim from Bricks > Settings > Custom code (2026-07-08) so framework CSS travels
   with the project instead of living in the site database. */
.bdd-grid-gallery,
.bdd-grid-gallery a,
a:has(.bdd-grid-gallery),
.bdd-grid-gallery [data-pswp-src] {
  cursor: var(--bdd-cursor-zoom-in) !important;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Inline Venn hotspots paint focus on their transparent SVG hit rectangles.
   Suppress that paint for pointer focus while preserving :focus-visible below. */
#bdd-venn-links a:focus:not(:focus-visible) rect {
  fill: none;
  stroke: none;
}

/* Focus rings use ACSS's dedicated focus tokens (tunable in the ACSS dashboard),
   NOT --btn-border-size — border width and focus-ring width are separate concerns.
   The offset lifts the ring off the element so it never stacks on a border. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

/* Grid Card Links */
/* Card and mega-menu CTAs keep their authored color; hover moves only the arrow. */
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
}

.card-link svg {
  --bdd-card-arrow-hover-shift: 0px;

  display: block;
  flex: 0 0 auto;
  transform: translateX(calc(var(--bdd-card-arrow-line-shift, 0px) + var(--bdd-card-arrow-hover-shift)));
  transition: transform var(--transition-duration) var(--transition-timing);
  /* Required: pre-promote the SVG layer so its raster never lifts mid-flight. */
  will-change: transform;
}

.card-link:hover svg,
.card-link:focus-visible svg {
  --bdd-card-arrow-hover-shift: .25em;
}

.card-link:focus-visible {
  outline: var(--focus-width, 2px) solid var(--focus-color, currentColor);
  outline-offset: var(--focus-offset, 0.25rem);
}

/* Kill the pink outline on ProTabs panels */
.x-tabs_panel:focus,
.x-tabs_panel:focus-visible,
.x-tabs_panel--current:focus,
.x-tabs_panel--current:focus-visible,
.x-tabs_panel[role="region"]:focus,
.x-tabs_panel[role="region"]:focus-visible,
.x-tabs_panel[tabindex="-1"]:focus,
.x-tabs_panel[tabindex="-1"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Optional: also neutralize any focus on gallery wrappers inside */
.brxe-image-gallery:focus,
.brxe-image-gallery:focus-visible,
.brxe-image-gallery .bricks-layout-wrapper:focus,
.brxe-image-gallery .bricks-layout-wrapper:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.pswp__button {
  position: relative;
  width: 56px !important;
  height: 56px !important;
}

.pswp__button svg,
.pswp__button::after {
  display: none !important;
  content: none !important;
}

.pswp__button::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 32px;
  height: 32px;
  background-color: var(--white);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.pswp__button--close::before {
  -webkit-mask-image: url("assets/xmark-thin-full-acss.svg");
  mask-image: url("assets/xmark-thin-full-acss.svg");
}

.pswp__button--arrow--prev::before,
.pswp__button--arrow--next::before {
  -webkit-mask-image: url("assets/arrow-right-thin-full-acss.svg");
  mask-image: url("assets/arrow-right-thin-full-acss.svg");
}

.pswp__button--arrow--prev::before {
  transform: scaleX(-1);
}

/* bdd-tab-gallery-fix block removed 2026-07-16 — the mobile 2-col / 3:2 gallery layout it
   forced is now expressed natively via each gallery's Bricks settings (responsive columns
   + imageRatio:mobile_landscape). Migrated: SonoTone, Mystic Fitness; other case studies
   had already dropped the class. Global class zbgsve deleted the same day. */

.full-bleed-image,
.full-bleed-image *,
.full-bleed-image img,
.full-bleed-image picture,
.full-bleed-image figure,
.full-bleed-image a {
  border-radius: 0 !important;
}
/* Bricks image gallery masonry vertical gap fix Isotope respects horizontal gutter but not vertical spacing consistently. */
.brxe-image-gallery.bricks-layout-wrapper.isotope .bricks-layout-item {
  margin-bottom: 30px;
}

/* === BDD Animation Utility System === */
/* Containment fix (2026-05-22) -- prevents horizontal u-anim translates (fade-left/right and -big variants) from extending document scroll width on mobile.
   `clip` (vs hidden) does NOT create a scroll container, so position:sticky still works. */
html, body { overflow-x: clip; }

:root {
  --u-anim-delay-1: 100ms;
  --u-anim-delay-2: 200ms;
  --u-anim-delay-3: 800ms;
  --u-anim-duration: 1000ms;
  --u-anim-delay: var(--u-anim-delay-1);
  --u-anim-ease: cubic-bezier(0.4, 0, 0.2, 1);
}
.u-anim-stagger  { --u-anim-delay-1: 100ms; --u-anim-delay-2: 200ms; --u-anim-delay-3: 300ms; }
.u-anim-spacious { --u-anim-delay-1: 200ms; --u-anim-delay-2: 400ms; --u-anim-delay-3: 600ms; }
.u-anim-dramatic { --u-anim-delay-1: 800ms; --u-anim-delay-2: 1200ms; --u-anim-delay-3: 1600ms; }
.u-anim-delay-0 { --u-anim-delay: 0ms; }
.u-anim-delay-1 { --u-anim-delay: var(--u-anim-delay-1); }
.u-anim-delay-2 { --u-anim-delay: var(--u-anim-delay-2); }
.u-anim-delay-3 { --u-anim-delay: var(--u-anim-delay-3); }
.u-anim-duration-snappy    { --u-anim-duration: 600ms; }
.u-anim-duration-polished  { --u-anim-duration: 800ms; }
.u-anim-duration-cinematic { --u-anim-duration: 1000ms; }
.u-anim-duration-dramatic  { --u-anim-duration: 1400ms; }
.u-anim-ease-in     { --u-anim-ease: cubic-bezier(0.4, 0, 1, 1); }
.u-anim-ease-out    { --u-anim-ease: cubic-bezier(0, 0, 0.2, 1); }
.u-anim-ease-in-out { --u-anim-ease: cubic-bezier(0.4, 0, 0.2, 1); }
/* Hidden states — ONLY apply when html.u-anim-ready (front-end JS sets this; builder does not) */
html.u-anim-ready .u-anim-fade-in,
html.u-anim-ready .u-anim-fade-up,
html.u-anim-ready .u-anim-fade-down,
html.u-anim-ready .u-anim-fade-left,
html.u-anim-ready .u-anim-fade-right,
html.u-anim-ready .u-anim-zoom-in,
html.u-anim-ready .u-anim-fade-up-big,
html.u-anim-ready .u-anim-fade-down-big,
html.u-anim-ready .u-anim-fade-left-big,
html.u-anim-ready .u-anim-fade-right-big {
  opacity: 0;
  backface-visibility: hidden;
}
/* Standard initial transforms — 100% of element (proportional) */
/* Big initial transforms — fixed 2000px (off-screen reveals) */
/* Entrance animations triggered by .is-visible — reference animate.css keyframes */
.is-visible.u-anim-fade-in    { animation: fadeIn       var(--u-anim-duration) var(--u-anim-ease) var(--u-anim-delay) both; }
.is-visible.u-anim-fade-up    { animation: fadeInUp     var(--u-anim-duration) var(--u-anim-ease) var(--u-anim-delay) both; }
.is-visible.u-anim-fade-down  { animation: fadeInDown   var(--u-anim-duration) var(--u-anim-ease) var(--u-anim-delay) both; }
.is-visible.u-anim-fade-left  { animation: fadeInLeft   var(--u-anim-duration) var(--u-anim-ease) var(--u-anim-delay) both; }
.is-visible.u-anim-fade-right { animation: fadeInRight  var(--u-anim-duration) var(--u-anim-ease) var(--u-anim-delay) both; }
.is-visible.u-anim-zoom-in    { animation: zoomIn       var(--u-anim-duration) var(--u-anim-ease) var(--u-anim-delay) both; }
.is-visible.u-anim-fade-up-big    { animation: fadeInUpBig    var(--u-anim-duration) var(--u-anim-ease) var(--u-anim-delay) both; }
.is-visible.u-anim-fade-down-big  { animation: fadeInDownBig  var(--u-anim-duration) var(--u-anim-ease) var(--u-anim-delay) both; }
.is-visible.u-anim-fade-left-big  { animation: fadeInLeftBig  var(--u-anim-duration) var(--u-anim-ease) var(--u-anim-delay) both; }
.is-visible.u-anim-fade-right-big { animation: fadeInRightBig var(--u-anim-duration) var(--u-anim-ease) var(--u-anim-delay) both; }
/* Exit animations triggered by .is-leaving */
.is-leaving.u-anim-fade-out       { animation: fadeOut       var(--u-anim-duration) var(--u-anim-ease) var(--u-anim-delay) both; }
.is-leaving.u-anim-fade-out-up    { animation: fadeOutUp     var(--u-anim-duration) var(--u-anim-ease) var(--u-anim-delay) both; }
.is-leaving.u-anim-fade-out-down  { animation: fadeOutDown   var(--u-anim-duration) var(--u-anim-ease) var(--u-anim-delay) both; }
.is-leaving.u-anim-fade-out-left  { animation: fadeOutLeft   var(--u-anim-duration) var(--u-anim-ease) var(--u-anim-delay) both; }
.is-leaving.u-anim-fade-out-right { animation: fadeOutRight  var(--u-anim-duration) var(--u-anim-ease) var(--u-anim-delay) both; }
.is-leaving.u-anim-zoom-out       { animation: zoomOut       var(--u-anim-duration) var(--u-anim-ease) var(--u-anim-delay) both; }
/* Keyframes — inlined verbatim from animate.css source (animate-css/animate.css) */
@keyframes fadeIn        { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut       { from { opacity: 1; } to { opacity: 0; } }
@keyframes fadeInUp      { from { opacity: 0; transform: translate3d(0, 100%, 0); }    to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes fadeInDown    { from { opacity: 0; transform: translate3d(0, -100%, 0); }   to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes fadeInLeft    { from { opacity: 0; transform: translate3d(-100%, 0, 0); }   to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes fadeInRight   { from { opacity: 0; transform: translate3d(100%, 0, 0); }    to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes fadeOutUp     { from { opacity: 1; } to { opacity: 0; transform: translate3d(0, -100%, 0); } }
@keyframes fadeOutDown   { from { opacity: 1; } to { opacity: 0; transform: translate3d(0, 100%, 0); } }
@keyframes fadeOutLeft   { from { opacity: 1; } to { opacity: 0; transform: translate3d(-100%, 0, 0); } }
@keyframes fadeOutRight  { from { opacity: 1; } to { opacity: 0; transform: translate3d(100%, 0, 0); } }
@keyframes fadeInUpBig    { from { opacity: 0; transform: translate3d(0, 2000px, 0); }   to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes fadeInDownBig  { from { opacity: 0; transform: translate3d(0, -2000px, 0); }  to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes fadeInLeftBig  { from { opacity: 0; transform: translate3d(-2000px, 0, 0); }  to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes fadeInRightBig { from { opacity: 0; transform: translate3d(2000px, 0, 0); }   to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes zoomIn  { from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } to { opacity: 1; transform: scale3d(1, 1, 1); } }
@keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } }
/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  html.u-anim-ready .u-anim-fade-in, html.u-anim-ready .u-anim-fade-up, html.u-anim-ready .u-anim-fade-down,
  html.u-anim-ready .u-anim-fade-left, html.u-anim-ready .u-anim-fade-right, html.u-anim-ready .u-anim-zoom-in,
  html.u-anim-ready .u-anim-fade-up-big, html.u-anim-ready .u-anim-fade-down-big,
  html.u-anim-ready .u-anim-fade-left-big, html.u-anim-ready .u-anim-fade-right-big {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}
/* === End BDD Animation Utility System === */

/* === BDD Archive Filter + Load More Hover States === */
/* Hover COLORS + the View More transition live in Bricks (Archives template: hover tabs
   on the bdd-portfolio-21__filter class buttonTypography/buttonActiveTypography controls,
   element-level _typography:hover/_border:hover/_cssTransition on the View More button).
   Only what the Bricks UI cannot express lives here:
   - cursor: pointer — no cursor control in Bricks; filter options are labels wrapping
     hidden radios and the View More is a <span> interaction trigger, so neither gets a
     pointer natively
   - transition on the filter buttons — the class-level _cssTransition control lands on
     the root <ul>, not the inner .bricks-button
   - focus-ring overrides below — :focus-within / :has() aren't reachable in the builder */
.brxe-filter-radio[data-mode="button"] label {
  cursor: pointer;
}

.bdd-portfolio-21__filter.brxe-filter-radio[data-mode="button"] .bricks-button {
  transition: color var(--transition-duration) var(--transition-timing);
}

/* ALL Bricks button elements get a pointer — Bricks renders link-less buttons as
   <span>/<button> with no pointer cursor, regardless of their btn--* style class. */
.brxe-button {
  cursor: pointer;
}

/* Bricks paints its own blue focus ring (#3b82f6) on button-mode filter options via
   label:focus-within, so it shows on plain mouse clicks and slips past the global
   :focus:not(:focus-visible) reset above (label + hidden radio, not a/button/[tabindex]).
   Kill the mouse-click ring; keyboard focus gets the brand ring per the global
   :focus-visible convention. The leading `ul` outranks Bricks' 0,4,1 selector; the
   :has() variant outranks the kill rule when the radio is keyboard-focused. */
ul.brxe-filter-radio[data-mode="button"] label:focus-within .bricks-button {
  outline: none;
}

ul.brxe-filter-radio[data-mode="button"] label:has(input[type="radio"]:focus-visible) .bricks-button {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}
/* === End BDD Archive Filter + Load More Hover States === */
/* === End BDD Global Styles === */

/* === BDD Scheme Surface Contract ===
   Scheme roots own semantic roles that Brixie patterns can inherit without
   knowing the active hue. Masking fills use --bdd-scheme-surface, structural
   borders/connector lines use --bdd-scheme-rule, and counters or other small
   non-heading marks use --bdd-scheme-ink. Component adapters remain explicit:
   not every fill or border inside a section is a mask or structural rule. */
:where(.color-scheme--dark) {
  --bdd-scheme-surface: var(--neutral);
  --bdd-scheme-rule: var(--white-trans-20);
  --bdd-scheme-ink: var(--white);
  --bdd-scheme-link: var(--bdd-link-dark, var(--white));
  --bdd-scheme-link-hover: var(--bdd-link-dark-hover, var(--white-trans-80));
}
[class*="bdd-scheme--dark-"] {
  --bdd-scheme-surface: var(--neutral);
  --bdd-scheme-rule: var(--white-trans-20);
  --bdd-scheme-ink: var(--white);
}
[class*="bdd-scheme--charcoal-"] {
  --bdd-scheme-surface: var(--base);
  --bdd-scheme-rule: var(--white-trans-20);
  --bdd-scheme-ink: var(--white);
}
[class*="bdd-scheme--wash-"] {
  --bdd-scheme-rule: var(--black-trans-10);
  --bdd-scheme-ink: var(--neutral-ultra-dark);
}
.bdd-scheme--wash-magenta { --bdd-scheme-surface: var(--primary-ultra-light); }
.bdd-scheme--wash-blue { --bdd-scheme-surface: var(--accent-ultra-light); }
.bdd-scheme--wash-orange { --bdd-scheme-surface: var(--tertiary-ultra-light); }
.bdd-scheme--wash-yellow { --bdd-scheme-surface: var(--secondary-ultra-light); }
.bdd-scheme--ground-magenta {
  --bdd-scheme-surface: var(--primary);
  --bdd-scheme-rule: var(--primary-semi-light);
  --bdd-scheme-ink: var(--white);
}
.bdd-scheme--ground-blue {
  --bdd-scheme-surface: var(--accent);
  --bdd-scheme-rule: var(--accent-semi-light);
  --bdd-scheme-ink: var(--white);
}
.bdd-scheme--ground-orange {
  --bdd-scheme-surface: var(--tertiary);
  --bdd-scheme-rule: var(--tertiary-semi-light);
  --bdd-scheme-ink: var(--white);
}
.bdd-scheme--ground-yellow {
  --bdd-scheme-surface: var(--secondary);
  --bdd-scheme-rule: var(--secondary-semi-light);
  --bdd-scheme-ink: var(--neutral-ultra-dark);
}
:is(.bdd-scheme--light-neutral, .bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) {
  --bdd-scheme-surface: var(--white);
  --bdd-scheme-rule: var(--black-trans-10);
  --bdd-scheme-ink: var(--neutral-ultra-dark);
}

/* Scheme-aware editorial links and archive-style card buttons share these
   roles. The component never chooses a hue; its section does. Unschemed white
   sections continue to inherit their solid dark heading ink. */
.bdd-scheme--ground-magenta,
.bdd-scheme--ground-blue,
.bdd-scheme--ground-orange {
  --bdd-scheme-link: var(--white);
  --bdd-scheme-link-hover: var(--white-trans-80);
}
.bdd-scheme--ground-yellow {
  --bdd-scheme-link: var(--neutral-ultra-dark);
  --bdd-scheme-link-hover: var(--neutral-ultra-dark-trans-80);
}
.bdd-scheme--wash-magenta { --bdd-scheme-link: var(--primary-semi-dark); --bdd-scheme-link-hover: var(--primary-hover); }
.bdd-scheme--wash-blue { --bdd-scheme-link: var(--accent); --bdd-scheme-link-hover: var(--accent-hover); }
.bdd-scheme--wash-orange { --bdd-scheme-link: var(--tertiary-semi-dark); --bdd-scheme-link-hover: var(--tertiary-hover); }
.bdd-scheme--wash-yellow { --bdd-scheme-link: var(--neutral-ultra-dark); --bdd-scheme-link-hover: var(--neutral-ultra-dark-trans-80); }
.bdd-scheme--dark-yellow { --bdd-scheme-link: var(--secondary); --bdd-scheme-link-hover: var(--secondary-hover); }
.bdd-scheme--dark-magenta { --bdd-scheme-link: var(--primary-semi-light); --bdd-scheme-link-hover: var(--primary-light); }
.bdd-scheme--dark-blue { --bdd-scheme-link: var(--accent-semi-light); --bdd-scheme-link-hover: var(--accent-light); }
.bdd-scheme--dark-orange { --bdd-scheme-link: var(--tertiary); --bdd-scheme-link-hover: var(--tertiary-light); }
.bdd-scheme--charcoal-yellow { --bdd-scheme-link: var(--secondary-ultra-light); --bdd-scheme-link-hover: var(--secondary); }
.bdd-scheme--charcoal-blue { --bdd-scheme-link: var(--accent-light); --bdd-scheme-link-hover: var(--accent); }
.bdd-scheme--charcoal-magenta { --bdd-scheme-link: var(--primary-light); --bdd-scheme-link-hover: var(--primary); }
.bdd-scheme--charcoal-orange { --bdd-scheme-link: var(--tertiary-semi-light); --bdd-scheme-link-hover: var(--tertiary); }
.bdd-scheme--dark-neutral { --bdd-scheme-link: var(--bdd-link-dark); --bdd-scheme-link-hover: var(--bdd-link-dark-hover); }
.bdd-scheme--light-neutral { --bdd-scheme-link: var(--bdd-link); --bdd-scheme-link-hover: var(--bdd-link-hover); }

/* Hue-light grounds: white surface and neutral copy, with the page-family hue
   reserved for both CTA roles. Existing light-neutral remains neutral. */
.bdd-scheme--light-magenta { --bdd-scheme-hue: var(--primary); --bdd-scheme-hue-hover: var(--primary-hover); --bdd-scheme-link: var(--primary-semi-dark); --bdd-scheme-cta-ink: var(--primary); }
.bdd-scheme--light-blue { --bdd-scheme-hue: var(--accent); --bdd-scheme-hue-hover: var(--accent-hover); --bdd-scheme-link: var(--accent); --bdd-scheme-cta-ink: var(--accent); }
.bdd-scheme--light-orange { --bdd-scheme-hue: var(--tertiary); --bdd-scheme-hue-hover: var(--tertiary-hover); --bdd-scheme-link: var(--tertiary-semi-dark); --bdd-scheme-cta-ink: var(--tertiary); }
.bdd-scheme--light-yellow { --bdd-scheme-hue: var(--secondary); --bdd-scheme-hue-hover: var(--secondary-hover); --bdd-scheme-link: var(--secondary-dark); --bdd-scheme-cta-ink: var(--neutral-ultra-dark); }
:is(.bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow):is(.bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) :is(h1,h2,h3,h4,h5,h6,.brxe-heading,[class*="__tagline"],[class*="eyebrow"],[class*="__description"]){color:var(--neutral-ultra-dark);}
:is(.bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow):is(.bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) .brxe-button:is(.btn--primary,.btn--neutral):not(.btn--outline):not(.btn--clear){background-color:var(--bdd-scheme-hue);border-color:var(--bdd-scheme-hue);color:var(--white);}
:is(.bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow):is(.bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) .brxe-button:is(.btn--primary,.btn--neutral):not(.btn--outline):not(.btn--clear):hover{background-color:var(--bdd-scheme-hue-hover);border-color:var(--bdd-scheme-hue-hover);color:var(--white);}
.bdd-scheme--light-yellow .brxe-button:is(.btn--primary,.btn--neutral):not(.btn--outline):not(.btn--clear), .bdd-scheme--light-yellow .brxe-button:is(.btn--primary,.btn--neutral):not(.btn--outline):not(.btn--clear):hover{color:var(--neutral-ultra-dark);}
:is(.bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow):is(.bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) .brxe-button.btn--outline{background-color:transparent;border:1px solid var(--bdd-scheme-hue);color:var(--bdd-scheme-cta-ink);}
:is(.bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow):is(.bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) .brxe-button.btn--outline:hover{background-color:transparent;border-color:var(--bdd-scheme-hue);color:var(--bdd-scheme-cta-ink);opacity:.85;}
:is(.bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow):is(.bdd-scheme--light-magenta, .bdd-scheme--light-blue, .bdd-scheme--light-orange, .bdd-scheme--light-yellow) a:not(.brxe-button){color:var(--bdd-scheme-link);}

/* Existing Bricks global classes still contain Brixie's original literal
   light/dark values. These higher-specificity adapters make current instances
   consume the semantic contract without editing page trees or the WP class
   registry. The corpus source uses these variables directly for new inserts. */
.bdd-feature-80.bdd-feature-80:is(.color-scheme--dark, [class*="bdd-scheme--"])
  .bdd-feature-80__list {
  background-color: var(--bdd-scheme-rule, var(--black-trans-10));
}
.bdd-feature-80.bdd-feature-80:is(.color-scheme--dark, [class*="bdd-scheme--"])
  .card-bdd-feature-80 {
  background-color: var(--bdd-scheme-surface, var(--white));
}
.bdd-process-21.bdd-process-21:is(.color-scheme--dark, [class*="bdd-scheme--"]) {
  --line-color: var(--bdd-scheme-rule, var(--neutral));
}
.bdd-process-21.bdd-process-21:is(.color-scheme--dark, [class*="bdd-scheme--"])
  :is(.card-bdd-process-21, .bdd-process-21__step) {
  background-color: var(--bdd-scheme-surface, var(--white));
  border-color: var(--bdd-scheme-rule, var(--neutral));
}
.bdd-process-21.bdd-process-21:is(.color-scheme--dark, [class*="bdd-scheme--"])
  .bdd-process-21__step::after {
  color: var(--bdd-scheme-ink, currentColor);
}
/* Feature 61 scheme adapter — the scheme lives on its dedicated background
   element, preserving the Brixie tree while the component derives its surface,
   card rules, buttons, hover, and contrast from that one explicit choice. */
.bdd-feature-61:has(> .bdd-feature-61__bg:is(
  .bdd-scheme--ground-magenta, .bdd-scheme--dark-magenta,
  .bdd-scheme--charcoal-magenta, .bdd-scheme--wash-magenta
)) {
  --bdd-feature-61-hue: var(--primary);
  --bdd-feature-61-hue-hover: var(--primary-hover);
  --bdd-feature-61-hue-ink: var(--white);
}
.bdd-feature-61:has(> .bdd-feature-61__bg:is(
  .bdd-scheme--ground-blue, .bdd-scheme--dark-blue,
  .bdd-scheme--charcoal-blue, .bdd-scheme--wash-blue
)) {
  --bdd-feature-61-hue: var(--accent);
  --bdd-feature-61-hue-hover: var(--accent-hover);
  --bdd-feature-61-hue-ink: var(--white);
}
.bdd-feature-61:has(> .bdd-feature-61__bg:is(
  .bdd-scheme--ground-orange, .bdd-scheme--dark-orange,
  .bdd-scheme--charcoal-orange, .bdd-scheme--wash-orange
)) {
  --bdd-feature-61-hue: var(--tertiary);
  --bdd-feature-61-hue-hover: var(--tertiary-hover);
  --bdd-feature-61-hue-ink: var(--white);
}
.bdd-feature-61:has(> .bdd-feature-61__bg:is(
  .bdd-scheme--ground-yellow, .bdd-scheme--dark-yellow,
  .bdd-scheme--charcoal-yellow, .bdd-scheme--wash-yellow
)) {
  --bdd-feature-61-hue: var(--secondary);
  --bdd-feature-61-hue-hover: var(--secondary-hover);
  --bdd-feature-61-hue-ink: var(--neutral-ultra-dark);
}
.bdd-feature-61.bdd-feature-61 > .bdd-feature-61__bg[class*="bdd-scheme--"] {
  background-color: var(--bdd-scheme-surface, var(--neutral));
}
.bdd-feature-61.bdd-feature-61 .card-bdd-feature-61.card-bdd-feature-61 {
  border-color: var(--bdd-feature-61-hue, var(--bdd-scheme-rule, var(--neutral)));
}
.bdd-feature-61.bdd-feature-61
  .card-bdd-feature-61__btn.card-bdd-feature-61__btn {
  background-color: var(--bdd-feature-61-hue, var(--primary));
  border-color: var(--bdd-feature-61-hue, var(--primary));
  color: var(--bdd-feature-61-hue-ink, var(--white));
}
.bdd-feature-61.bdd-feature-61
  .card-bdd-feature-61__btn.card-bdd-feature-61__btn:hover {
  background-color: var(--bdd-feature-61-hue-hover, var(--primary-hover));
  border-color: var(--bdd-feature-61-hue-hover, var(--primary-hover));
  color: var(--bdd-feature-61-hue-ink, var(--white));
}

/* Homepage Four Questions: four columns only when the authored paragraphs and
   single-line CTA labels have usable measure. Bricks' stock tablet breakpoint
   lands too late for this four-card instance. */
@media (max-width: 1399px) {
  body.home .bdd-feature-61__grid {
    grid-template-columns: var(--grid-2) !important;
  }
}
@media (max-width: 600px) {
  body.home .bdd-feature-61__grid {
    grid-template-columns: var(--grid-1) !important;
  }
  body.home .bdd-feature-61 > .bdd-feature-61__bg {
    height: 84% !important;
  }
}
@media (max-width: 460px) {
  body.home .bdd-feature-61 > .bdd-feature-61__bg {
    height: 86% !important;
  }
}

/* === BDD Scheme-Aware Buttons === */
/* BDD's color-scheme--* classes are site-local Bricks global classes (dark bg + inherited light text).
   Text inherits into children automatically; buttons do NOT - they read ACSS --btn-* custom props.
   These rules restate the neutral button for dark schemes using ACSS's own btn--neutral-light recipe,
   so btn--neutral stays the single corpus default and presentation adapts per context (Principle 8:
   identity on the class, presentation from context). Scoped to the dark schemes only; color-scheme--white
   keeps standard neutral. 2026-08-24: the bdd-scheme--* system's dark grounds (dark-*, charcoal-*,
   ground-*) joined the context list - those sections carry bdd-scheme classes ALONE (no color-scheme--dark),
   so the flip never fired there and filled neutral primaries rendered dark-on-dark. Wash-* and
   light-neutral grounds are deliberately excluded: standard dark-fill neutral is correct on light. Known limitation: a light card nested inside a dark-scheme section inherits
   the flip - handle those per-instance. Scope: ONLY the default .btn--neutral flips; every explicitly
   chosen variant (btn--primary, btn--neutral-dark, btn--neutral-light, ...) is a deliberate decision
   and passes through unchanged (emphasis budget: the default adapts, choices persist). */
:is(.color-scheme--dark, .color-scheme--semidark, .color-scheme--ultra-dark, [class*="bdd-scheme--dark-"], [class*="bdd-scheme--charcoal-"], [class*="bdd-scheme--ground-"]) .btn--neutral:not(.btn--outline):not(.btn--clear) {
  --btn-background: var(--neutral-ultra-light);
  --btn-background-hover: var(--neutral-light);
  --btn-text-color: var(--neutral);
  --btn-text-color-hover: var(--neutral-ultra-dark);
  --btn-border-color: var(--neutral-ultra-light);
  --btn-border-color-hover: var(--neutral-light);
  --focus-color: var(--neutral-light);
}
:is(.color-scheme--dark, .color-scheme--semidark, .color-scheme--ultra-dark, [class*="bdd-scheme--dark-"], [class*="bdd-scheme--charcoal-"], [class*="bdd-scheme--ground-"]) .btn--neutral.btn--outline {
  --btn-background: transparent;
  --btn-background-hover: var(--neutral-ultra-light);
  --btn-text-color: var(--neutral-ultra-light);
  --btn-text-color-hover: var(--neutral);
  --btn-border-color: var(--neutral-ultra-light);
  --btn-border-color-hover: var(--neutral-ultra-light);
}
:is(.color-scheme--dark, .color-scheme--semidark, .color-scheme--ultra-dark, [class*="bdd-scheme--dark-"], [class*="bdd-scheme--charcoal-"], [class*="bdd-scheme--ground-"]) .btn--neutral.btn--clear {
  --btn-background: transparent;
  --btn-background-hover: transparent;
  --btn-text-color: var(--text-light);
  --btn-text-color-hover: var(--white);
}
/* Brixie CTA compatibility for the bdd-scheme--* system (2026-08-24).
   The scheme registry's authored filled treatment targets btn--primary, while
   canonical bdd-cta-10 carries a filled btn--neutral. These aliases give that
   legacy filled-neutral the SAME approved recipe. Outlines already match through
   each scheme's existing .btn--outline rule. Source: bdd-schemes-v2.css. */
.bdd-scheme--ground-magenta.bdd-scheme--ground-magenta .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear){background-color:var(--white);border-color:var(--white);color:var(--primary);}
.bdd-scheme--ground-magenta.bdd-scheme--ground-magenta .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear):hover{background-color:var(--primary-ultra-light);border-color:var(--primary-ultra-light);color:var(--primary);}
.bdd-scheme--ground-blue.bdd-scheme--ground-blue .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear){background-color:var(--white);border-color:var(--white);color:var(--accent);}
.bdd-scheme--ground-blue.bdd-scheme--ground-blue .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear):hover{background-color:var(--accent-ultra-light);border-color:var(--accent-ultra-light);color:var(--accent);}
.bdd-scheme--ground-orange.bdd-scheme--ground-orange .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear){background-color:var(--white);border-color:var(--white);color:var(--tertiary);}
.bdd-scheme--ground-orange.bdd-scheme--ground-orange .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear):hover{background-color:var(--tertiary-ultra-light);border-color:var(--tertiary-ultra-light);color:var(--tertiary);}
.bdd-scheme--ground-yellow.bdd-scheme--ground-yellow .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear){background-color:var(--neutral);border-color:var(--neutral);color:var(--white);}
.bdd-scheme--ground-yellow.bdd-scheme--ground-yellow .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear):hover{background-color:var(--black);border-color:var(--black);color:var(--white);}
.bdd-scheme--wash-magenta.bdd-scheme--wash-magenta .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear){background-color:var(--primary);border-color:var(--primary);color:var(--white);}
.bdd-scheme--wash-magenta.bdd-scheme--wash-magenta .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear):hover{background-color:var(--primary-hover);border-color:var(--primary-hover);color:var(--white);}
.bdd-scheme--wash-blue.bdd-scheme--wash-blue .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear){background-color:var(--accent);border-color:var(--accent);color:var(--white);}
.bdd-scheme--wash-blue.bdd-scheme--wash-blue .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear):hover{background-color:var(--accent-hover);border-color:var(--accent-hover);color:var(--white);}
.bdd-scheme--wash-orange.bdd-scheme--wash-orange .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear){background-color:var(--tertiary);border-color:var(--tertiary);color:var(--white);}
.bdd-scheme--wash-orange.bdd-scheme--wash-orange .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear):hover{background-color:var(--tertiary-hover);border-color:var(--tertiary-hover);color:var(--white);}
.bdd-scheme--dark-yellow.bdd-scheme--dark-yellow .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear){background-color:var(--secondary);border-color:var(--secondary);color:var(--neutral-ultra-dark);}
.bdd-scheme--dark-yellow.bdd-scheme--dark-yellow .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear):hover{background-color:var(--secondary-hover);border-color:var(--secondary-hover);color:var(--neutral-ultra-dark);}
.bdd-scheme--dark-magenta.bdd-scheme--dark-magenta .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear){background-color:var(--primary-hover);border-color:var(--primary-hover);color:var(--white);}
.bdd-scheme--dark-magenta.bdd-scheme--dark-magenta .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear):hover{background-color:var(--primary);border-color:var(--primary);color:var(--white);}
.bdd-scheme--dark-blue.bdd-scheme--dark-blue .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear){background-color:var(--accent);border-color:var(--accent);color:var(--white);}
.bdd-scheme--dark-blue.bdd-scheme--dark-blue .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear):hover{background-color:var(--accent-hover);border-color:var(--accent-hover);color:var(--white);}
.bdd-scheme--dark-orange.bdd-scheme--dark-orange .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear){background-color:var(--tertiary);border-color:var(--tertiary);color:var(--white);}
.bdd-scheme--dark-orange.bdd-scheme--dark-orange .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear):hover{background-color:var(--tertiary-hover);border-color:var(--tertiary-hover);color:var(--white);}
.bdd-scheme--charcoal-yellow.bdd-scheme--charcoal-yellow .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear){background-color:var(--secondary-ultra-light);border-color:var(--secondary-ultra-light);color:var(--neutral-ultra-dark);}
.bdd-scheme--charcoal-yellow.bdd-scheme--charcoal-yellow .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear):hover{background-color:var(--secondary);border-color:var(--secondary);color:var(--neutral-ultra-dark);}
.bdd-scheme--charcoal-blue.bdd-scheme--charcoal-blue .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear){background-color:var(--accent-light);border-color:var(--accent-light);color:var(--neutral-ultra-dark);}
.bdd-scheme--charcoal-blue.bdd-scheme--charcoal-blue .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear):hover{background-color:var(--accent);border-color:var(--accent);color:var(--white);}
.bdd-scheme--charcoal-magenta.bdd-scheme--charcoal-magenta .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear){background-color:var(--primary-light);border-color:var(--primary-light);color:var(--neutral-ultra-dark);}
.bdd-scheme--charcoal-magenta.bdd-scheme--charcoal-magenta .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear):hover{background-color:var(--primary);border-color:var(--primary);color:var(--white);}
.bdd-scheme--charcoal-orange.bdd-scheme--charcoal-orange .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear){background-color:var(--tertiary-light);border-color:var(--tertiary-light);color:var(--neutral-ultra-dark);}
.bdd-scheme--charcoal-orange.bdd-scheme--charcoal-orange .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear):hover{background-color:var(--tertiary);border-color:var(--tertiary);color:var(--white);}
.bdd-scheme--wash-yellow.bdd-scheme--wash-yellow .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear){background-color:var(--neutral);border-color:var(--neutral);color:var(--white);}
.bdd-scheme--wash-yellow.bdd-scheme--wash-yellow .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear):hover{background-color:var(--black);border-color:var(--black);color:var(--white);}
.bdd-scheme--dark-neutral.bdd-scheme--dark-neutral .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear){background-color:var(--white);border-color:var(--white);color:var(--neutral-ultra-dark);}
.bdd-scheme--dark-neutral.bdd-scheme--dark-neutral .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear):hover{background-color:var(--neutral-light);border-color:var(--neutral-light);color:var(--neutral-ultra-dark);}
.bdd-scheme--light-neutral.bdd-scheme--light-neutral .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear){background-color:var(--neutral);border-color:var(--neutral);color:var(--white);}
.bdd-scheme--light-neutral.bdd-scheme--light-neutral .brxe-button.btn--neutral:not(.btn--outline):not(.btn--clear):hover{background-color:var(--black);border-color:var(--black);color:var(--white);}
/* BDD Before/After fluid fix (BricksExtras xbeforeafterimage) - 2026-08-06.
   The widget's internal .x-before-after_container is not a Bricks element and
   sizes itself to the images' intrinsic width (e.g. 1024px from size-large),
   while the outer wrapper spans its parent. Result: images jam left and the
   drag handle / labels track the full wrapper width, misaligned with the
   images. This scope class makes every internal layer track the element's
   width, so the element can be sized like any other block (width on the
   element or a class). Apply .bdd-before-after--fluid to the before/after
   element in the builder. */
.bdd-before-after--fluid .x-before-after_container,
.bdd-before-after--fluid .x-before-after-image_block,
.bdd-before-after--fluid .x-before-after-image_image,
.bdd-before-after--fluid .x-before-after-image_image img {
  width: 100%;
}
.bdd-before-after--fluid .x-before-after-image_image img {
  height: auto;
}
/* BDD opening hero height contract — approved 2026-08-25.
   Shared by Crafts, Compositions, the homepage, and Canon. Creations use their
   own hero system, and ordinary pages that happen to reuse bdd-hero-106 remain
   unchanged. The content shift consumes ACSS --header-height at every width. */
:is(body.single-craft, body.single-composition, body.page-id-7, body.page-id-5104, body.bdd-opening-hero-page) {
  --bdd-opening-hero-height: 80svh;
}
:is(body.single-craft, body.single-composition, body.page-id-7, body.page-id-5104, body.bdd-opening-hero-page)
  #brx-content > .bdd-hero-106:first-child {
  --bdd-hero-content-shift: 0px;
  min-height: 80vh;
  min-height: var(--bdd-opening-hero-height, 80svh);
  justify-content: center;
}
/* Closing Craft and Composition CTA: 82% of the opening hero, as a minimum
   rather than a fixed height. This preserves the large closing beat without
   compressing motifs, while wrapped content can still make the section taller. */
:is(body.single-craft, body.single-composition, body.bdd-opening-hero-page)
  #brx-content > .bdd-cta-10:last-child {
  min-height: calc(var(--bdd-opening-hero-height, 80svh) * .82);
  justify-content: center;
}
/* The résumé CTA carries a deliberately longer headline. One step less
   vertical padding keeps its total beat aligned with the shared 82% close. */
body.bdd-opening-hero-page #brx-content > .bdd-cta-10:last-child {
  padding-block: var(--section-space-l);
}
:is(body.single-craft, body.single-composition, body.page-id-7, body.page-id-5104, body.bdd-opening-hero-page)
  #brx-content > .bdd-hero-106:first-child > .bdd-hero-106__container {
  /* Desktop has enough natural clearance to center optically in the hero. */
  translate: 0 var(--bdd-hero-content-shift);
}
@media (max-width: 992px) {
  :is(body.single-craft, body.single-composition, body.page-id-7, body.page-id-5104, body.bdd-opening-hero-page)
    #brx-content > .bdd-hero-106:first-child {
    /* Retain part of ACSS's header keep-out as the content begins to wrap. */
    --bdd-hero-content-shift: calc(var(--header-height) * .25);
  }
}
@media (max-width: 768px) {
  :is(body.single-craft, body.single-composition, body.page-id-7, body.page-id-5104, body.bdd-opening-hero-page)
    #brx-content > .bdd-hero-106:first-child {
    --bdd-hero-content-shift: calc(var(--header-height) * .33);
  }
}
@media (max-width: 480px) {
  :is(body.single-craft, body.single-composition, body.page-id-7, body.page-id-5104, body.bdd-opening-hero-page)
    #brx-content > .bdd-hero-106:first-child {
    --bdd-hero-content-shift: calc(var(--header-height) * .5);
  }
}
@media (hover: hover) and (pointer: fine) and (min-width: 993px) {
  :is(body.single-craft, body.single-composition, body.page-id-7, body.page-id-5104, body.bdd-opening-hero-page) {
    --bdd-opening-hero-height: 90svh;
  }
  :is(body.single-craft, body.single-composition, body.page-id-7, body.page-id-5104, body.bdd-opening-hero-page)
    #brx-content > .bdd-hero-106:first-child {
    min-height: 90vh;
    min-height: var(--bdd-opening-hero-height, 90svh);
  }
}
/* BDD Creations hero — short-viewport (phone landscape) fix - 2026-08-11.
   The hero min-height ladder lives on .creations-hero__image-container in
   vh units across width-based Bricks breakpoints. A phone held landscape
   (typ. 667-932px wide, 375-430px tall) lands in the tablet-portrait or
   mobile-landscape bucket and gets 50vh of a ~390px viewport: a ~195px
   hero. Width breakpoints cannot see this case - the failing dimension is
   viewport HEIGHT - so it is handled here with a height media query, which
   the Bricks UI cannot express. Short viewports get a full-screen hero
   (svh avoids the mobile URL-bar resize jump; vh line is the fallback). */
@media (max-height: 500px) {
  /* Tripled class: Bricks emits its breakpoint rules as
     .creations-hero__image-container.brxe-container (0,2,0) in an inline
     style tag that loads after this sheet, so this must be 0,3,0 to win. */
  .creations-hero__image-container.creations-hero__image-container.creations-hero__image-container {
    min-height: 100vh;
    min-height: 100svh;
  }
}
/* Homepage advanced slider: short-viewports use content-driven height.
   Approved 2026-09-27. Like the Creation height repair above, this is scoped
   to short screens. Unlike the ordinary heroes, the slider must rejoin flow.
   Header clearance and spacing remain owned by ACSS; all slides stretch to
   the tallest content so autoplay does not change the page height. */
@media (max-height: 500px) {
  body.home #brxe-pflwmd {
    min-height: 100svh;
    padding: 0;
  }
  body.home #brxe-shfcuh {
    position: relative;
    inset: auto;
    height: auto;
  }
  body.home #brxe-shfcuh .splide__track,
  body.home #brxe-shfcuh .splide__list {
    height: auto;
  }
  body.home #brxe-shfcuh .splide__slide {
    /* Splide writes height:100% inline; only this short-screen case differs. */
    height: auto !important;
    min-height: 100svh;
    padding-block: calc(var(--header-height) + var(--space-m)) var(--space-xl);
  }
}

/* ROI Solutions hero logo box in short viewports (phone landscape) - 2026-08-11.
   The boxed logo's height ladder is width-breakpoint based; landscape phones
   land in the tablet bucket (12vh of ~390px = 47px box). Give the box a
   short-viewport size of its own, padding held at the height/10 ratio
   (right side 0.8x, matching the element's optical trim). ID+class beats
   the Bricks element rule (#brxe-xnotkj, 1,0,0) at 1,1,0. */
@media (max-height: 500px) {
  #brxe-xnotkj.creations-hero__logo--sm {
    height: 24vh;
    height: 24svh;
    padding: 2.4vh 1.92vh 2.4vh 2.4vh;
    padding: 2.4svh 1.92svh 2.4svh 2.4svh;
  }
}
/* Creations hero header keep-out (desktop window resize guard) - 2026-08-11.
   The transparent header (~123-141px tall) overlays the hero; at squat
   window sizes the centered logo (and ROI's floated box) can rise into the
   header band. Guard: the hero grows just enough that a centered logo
   always clears ~140px of header (min-height: max(bucket, logo + 2*140px)),
   and ROI's negative-margin float relaxes continuously toward center as
   space runs out (margin-top: max(design-value, geometric bound)).
   Scoped to (hover+fine pointer) so REAL phones/tablets keep their approved
   looks untouched - only resizable desktop/laptop windows get the guard.
   Logo heights per bucket are the site max (SonoTone element ladder /
   class values): base 32vh / tp 26vh / ml 22vh / mp 17.5vh / xs 15.5vh; ROI
   box 18/12/12/9/8vh. All rules are no-ops at normal window sizes.
   Known residual: windows wider than ~1400px AND shorter than ~430px can
   still graze the band by ~10px - accepted as absurd-rectangle territory. */
@media (hover: hover) and (pointer: fine) and (min-height: 501px) {
  .creations-hero__image-container.creations-hero__image-container.creations-hero__image-container {
    min-height: max(75vh, calc(32vh + 284px));
  }
  #brxe-xnotkj.creations-hero__logo--sm {
    margin-top: max(-18.5vh, min(calc(284px - 57vh), -14vh));
  }
}
@media (hover: hover) and (pointer: fine) and (min-height: 501px) and (max-width: 992px) {
  .creations-hero__image-container.creations-hero__image-container.creations-hero__image-container {
    min-height: max(50vh, calc(26vh + 284px));
  }
  #brxe-xnotkj.creations-hero__logo--sm {
    margin-top: max(-12.3vh, min(calc(284px - 38vh), -14vh));
  }
}
@media (hover: hover) and (pointer: fine) and (min-height: 501px) and (max-width: 768px) {
  .creations-hero__image-container.creations-hero__image-container.creations-hero__image-container {
    min-height: max(50vh, calc(22vh + 284px));
  }
  #brxe-xnotkj.creations-hero__logo--sm {
    margin-top: max(-12.3vh, min(calc(284px - 38vh), -10vh));
  }
}
@media (hover: hover) and (pointer: fine) and (min-height: 501px) and (max-width: 480px) {
  .creations-hero__image-container.creations-hero__image-container.creations-hero__image-container {
    min-height: max(45vh, calc(17.5vh + 284px));
  }
  #brxe-xnotkj.creations-hero__logo--sm {
    margin-top: max(-11.1vh, min(calc(284px - 36vh), -8.5vh));
  }
}
@media (hover: hover) and (pointer: fine) and (min-height: 501px) and (max-width: 360px) {
  .creations-hero__image-container.creations-hero__image-container.creations-hero__image-container {
    min-height: max(40vh, calc(15.5vh + 284px));
  }
  #brxe-xnotkj.creations-hero__logo--sm {
    margin-top: max(-9.8vh, min(calc(284px - 32vh), -7.5vh));
  }
}
/* Squat desktop windows (<=500px tall): the 100svh full-screen hero rule
   above already applies; here only clamp ROI's float so the box never
   crosses into the header band. Fine-pointer only - touch landscape
   phones keep the approved floaty position. */
@media (hover: hover) and (pointer: fine) and (max-height: 500px) {
  #brxe-xnotkj.creations-hero__logo--sm {
    margin-top: max(-24.6vh, min(calc(284px - 76vh), 0px));
    margin-top: max(-24.6svh, min(calc(284px - 76svh), 0px));
  }
}
/* Squat + wide fine-pointer windows: grow the hero past 100svh just enough
   for the biggest logo (32vh base bucket) to clear the header; the hero
   scrolls slightly instead of the logo entering the band. Touch devices
   excluded - phones keep the exact 100svh full-screen hero. */
@media (hover: hover) and (pointer: fine) and (max-height: 500px) {
  .creations-hero__image-container.creations-hero__image-container.creations-hero__image-container {
    min-height: max(100vh, calc(32vh + 284px));
    min-height: max(100svh, calc(32vh + 284px));
  }
}

/* ============================================================
   BDD TOC - page table of contents (toggle + offcanvas + list)
   Bricks global classes bdd-toc__* carry native settings only;
   every custom rule for the system lives here. First install:
   ROI Solutions. 2026-08-15.
   ============================================================ */

/* Anchor landing: ACSS applies scroll-margin-top: var(--offset) to all
   [id], but that parks headings at the header's top edge and the sticky
   header covers them on reveal. Tagged ToC stops get header clearance
   plus breathing room. */
.bdd-focus {
  scroll-margin-top: calc(var(--offset, 0px) + 100px);
}

/* Focus ring kill on both toggles (house pattern, matches the header
   mobile toggles; Bricks paints the site primary otherwise). */
.bdd-toc__toggle,
.bdd-toc__toggle:focus,
.bdd-toc__toggle:focus-visible,
.bdd-toc__close,
.bdd-toc__close:focus,
.bdd-toc__close:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Icon sizing: ACSS owns [data-icon] svg dimensions via --icon-size
   (Bricks' iconSize control only emits font-size, which SVGs ignore). */
.bdd-toc__toggle {
  --icon-size: var(--text-m);
  transition:
    background-color var(--transition-duration) var(--transition-timing),
    border-color var(--transition-duration) var(--transition-timing),
    scale var(--transition-duration) var(--transition-timing),
    opacity var(--transition-duration) var(--transition-timing);
}
@media (max-width: 992px) {
  .bdd-toc__toggle {
    --icon-size: var(--text-s);
  }
}

/* Keep the chip inside the gutter (2026-08-22). Body text starts exactly
   at --gutter on every viewport up to 1440, and the class's native
   left/size (space-s + text-xl chip) overshot it by 2-26px, so the chip
   sat on the first characters. Size = preferred chip capped to the gutter
   minus 6px clearance each side, centered in the gutter. Below 992px the
   gutter (<=45px) cannot hold a tappable chip, so it docks bottom-left
   instead of sitting in the reading line. `body` prefix: Bricks prints the
   class's own left/size as `.bdd-toc__toggle.brxe-toggle` in an inline
   <style> AFTER this sheet (same specificity, later order wins). */
body .brxe-toggle.bdd-toc__toggle {
  --bdd-toc-size: min(calc(var(--text-xl) + 10px), calc(var(--gutter) - 12px));
  width: var(--bdd-toc-size);
  height: var(--bdd-toc-size);
  left: calc((var(--gutter) - var(--bdd-toc-size)) / 2);
  top: calc(50vh - var(--bdd-toc-size) / 2);
}
@media (max-width: 992px) {
  body .brxe-toggle.bdd-toc__toggle {
    --bdd-toc-size: calc(var(--text-l) + 10px);
    left: var(--space-s);
    top: auto;
    bottom: var(--space-s);
  }
}

/* Hover: motion + border flash read on light AND dark alike (background
   shifts alone vanish on dark sections). Chip lightening is the class's
   native hover setting. */
.bdd-toc__toggle.brxe-toggle:hover {
  scale: 1.1;
  border-color: var(--white);
}

/* Hide the toggle while its offcanvas is open (Bricks adds .is-active
   to a toggle whose target carries brx-open). */
.bdd-toc__toggle.is-active {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* List rows: dividers between items (the post-toc itemBorder control
   maps to .toc-link::before, the active marker - it cannot draw these),
   and hover to full white. */
/* Heading levels create nested lists. Divide links, not list groups, so
   every selected heading receives a separator regardless of nesting. */
.bdd-toc__list .toc-link {
  padding-block: var(--space-xs);
  border-top: 1px solid var(--white-trans-10);
}
.bdd-toc__list > .toc-list > .toc-list-item:first-child > .toc-link {
  border-top: 0;
}
.bdd-toc__list .toc-link {
  transition: color var(--transition-duration) var(--transition-timing);
}
.bdd-toc__list.brxe-post-toc .toc-link:hover {
  color: var(--white);
}

/* Close toggle hover: same white brighten as the list. */
.bdd-toc__close {
  transition: color var(--transition-duration) var(--transition-timing);
}
.bdd-toc__close.brxe-toggle:hover {
  color: var(--white);
  fill: var(--white);
}

/* The Creation title is also a return-to-page control. JavaScript adds
   role/button semantics so this affordance remains keyboard-accessible. */
.bdd-toc__title[role="button"] {
  cursor: pointer;
  transition: color var(--transition-duration) var(--transition-timing);
}
.bdd-toc__title[role="button"]:hover,
.bdd-toc__title[role="button"]:focus-visible {
  color: var(--white);
}
.bdd-toc__title[role="button"]:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.25em;
}

/* ============================================================
   BDD slider arrows - the ToC toggle recipe applied site-wide
   Covers Bricks nestable sliders AND BricksExtras Pro Slider
   (both are Splide). Per-slider arrow color/size/border settings
   were stripped 2026-08-16 (backups *_20260816_arrows) so this is
   the single home; each slider keeps its own icon choice and edge
   offsets in Bricks. Splide flips the prev button (scaleX) so the
   right-arrow asset reads left automatically. 2026-08-16.
   ============================================================ */
.splide__arrow {
  width: calc(var(--text-xl) + 10px);
  height: calc(var(--text-xl) + 10px);
  background: var(--black-trans-70);
  border: 1px solid var(--base-semi-light);
  border-radius: var(--radius-s);
  opacity: 1;
  color: var(--white);
  fill: var(--white);
  /* font-size drives font icons; --icon-size drives ACSS-locked svgs */
  font-size: var(--text-m);
  --icon-size: var(--text-m);
  transition:
    background-color var(--transition-duration) var(--transition-timing),
    border-color var(--transition-duration) var(--transition-timing),
    scale var(--transition-duration) var(--transition-timing);
}
.splide__arrow:hover {
  background: var(--black-trans-40);
  border-color: var(--white);
  scale: 1.1;
}
.splide__arrow:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
/* BricksExtras Pro Slider ships its own round/gray arrow styling at
   higher specificity - pin the recipe's radius and icon color there. */
.brxe-xproslider .splide__arrow,
.x-pro-slider .splide__arrow {
  border-radius: var(--radius-s);
  color: var(--white);
  fill: var(--white);
}
/* Arrow ICONS are set per slider in the Bricks UI (Prev/Next arrow
   controls): the house asset arrow-right-thin-full-acss.svg for both.
   Bricks sliders flip prev via the control's Transform
   (translateY(-50%) rotate(180deg) - Bricks emits the raw value, so the
   deg unit and the centering translate must both be typed). The
   BricksExtras Pro Slider has NO arrow transform control, so its prev
   flip is the one icon rule that lives here. */
.brxe-xproslider .splide__arrow--prev svg,
.x-pro-slider .splide__arrow--prev svg {
  rotate: 180deg;
}
@media (max-width: 992px) {
  .splide__arrow {
    width: calc(var(--text-l) + 10px);
    height: calc(var(--text-l) + 10px);
    font-size: var(--text-s);
    --icon-size: var(--text-s);
  }
}
/* Light-context arrow variant (2026-08-16): apply the global class
   .bdd-arrows--light to any SLIDER element sitting on a white background
   (e.g. the Related Crafts sliders on Creation pages). Transparent white
   chip, black arrow + outline; hover keeps the base scale and shifts both
   to neutral-semi-dark while the white fill firms up. */
.bdd-arrows--light .splide__arrow {
  background: var(--white-trans-60);
  border-color: var(--black);
  color: var(--black);
  fill: var(--black);
}
/* The house arrow svg is hairline-thin filled geometry - stroking it with
   its own color adds weight so the resting arrow reads darker. Explicit
   colors: currentColor inherits a link color here. */
.bdd-arrows--light .splide__arrow svg path {
  stroke: var(--black);
  stroke-width: 12;
  transition: stroke var(--transition-duration) var(--transition-timing);
}
.bdd-arrows--light .splide__arrow:hover {
  background: var(--white-trans-90);
  border-color: var(--neutral-dark);
  color: var(--neutral-dark);
  fill: var(--neutral-dark);
}
.bdd-arrows--light .splide__arrow:hover svg path {
  stroke: var(--neutral-dark);
}

/* Semi-dark-context arrow variant (2026-09-04): sibling to the established
   default dark and light-context recipes. Keep the chip quiet against the
   neutral-semi-dark ground while the white icon and rule retain contrast. */
.bdd-arrows--semidark .splide__arrow {
  background: var(--white-trans-10);
  border-color: var(--white-trans-40);
  color: var(--white);
  fill: var(--white);
}
.bdd-arrows--semidark .splide__arrow svg path {
  stroke: var(--white);
  stroke-width: 12;
  transition: stroke var(--transition-duration) var(--transition-timing);
}
.bdd-arrows--semidark .splide__arrow:hover {
  background: var(--white-trans-20);
  border-color: var(--white);
  color: var(--white);
  fill: var(--white);
}
.bdd-arrows--semidark .splide__arrow:hover svg path {
  stroke: var(--white);
}

/* Custom arrow chips (Brixie patterns that ship their own prev/next divs
   instead of Splide arrows: testimonial-20 on Canon and the résumé,
   testimonial-43, process-33, hero-102). Same motion as .splide__arrow:
   scale 1.1, border flash, chip firms up. Colors stay the light-context
   chip the classes already carry (white chip, neutral-ultra-dark arrow).
   2026-08-23, after Bill noticed the testimonial chips did not move. */
.bdd-testimonial-20__arrow,
.bdd-testimonial-43__arrow,
.bdd-process-33__arrow,
.bdd-hero-102__arrow {
  transition:
    background-color var(--transition-duration) var(--transition-timing),
    border-color var(--transition-duration) var(--transition-timing),
    scale var(--transition-duration) var(--transition-timing);
}
.bdd-testimonial-20__arrow:hover,
.bdd-testimonial-43__arrow:hover,
.bdd-process-33__arrow:hover,
.bdd-hero-102__arrow:hover {
  scale: 1.1;
  border-color: var(--neutral-dark) !important;
  background: var(--white-trans-90);
}
.bdd-testimonial-20__arrow svg path,
.bdd-testimonial-43__arrow svg path,
.bdd-process-33__arrow svg path,
.bdd-hero-102__arrow svg path {
  transition: stroke var(--transition-duration) var(--transition-timing);
}
.bdd-testimonial-20__arrow:hover svg path,
.bdd-testimonial-43__arrow:hover svg path,
.bdd-process-33__arrow:hover svg path,
.bdd-hero-102__arrow:hover svg path {
  stroke: var(--neutral-dark);
}

/* === BDD link color by hue and ground (2026-08-23, site-wide) === */
/* Source: brand-contexts/bdd/visual/bdd-link-colors.md (measured AA). Scheme sections
   (bdd-scheme--*) carry their own link color in their class CSS. Neutral grounds read the
   PAGE hue: the MetaBox field bdd_hue becomes body.bdd-hue--{magenta|blue|orange|yellow}
   (functions.php). Default hue is magenta, so pages without the field are unchanged on
   light grounds; dark grounds step to the hue's legible tint. Buttons excluded. */
:root { --bdd-link: var(--primary); --bdd-link-hover: var(--primary-hover); --bdd-link-dark: var(--primary-semi-light); --bdd-link-dark-hover: var(--primary-light); }
body.bdd-hue--blue   { --bdd-link: var(--accent);             --bdd-link-hover: var(--accent-hover);        --bdd-link-dark: var(--accent-semi-light);   --bdd-link-dark-hover: var(--accent-light); }
body.bdd-hue--orange { --bdd-link: var(--tertiary-semi-dark); --bdd-link-hover: var(--tertiary);            --bdd-link-dark: var(--tertiary);            --bdd-link-dark-hover: var(--tertiary-semi-light); }
body.bdd-hue--yellow { --bdd-link: var(--secondary-dark);     --bdd-link-hover: var(--secondary-semi-dark); --bdd-link-dark: var(--secondary);           --bdd-link-dark-hover: var(--secondary-semi-light); }
/* Light grounds on hued pages (magenta pages keep ACSS's default link color, which is the same value). */
body[class*="bdd-hue--"] #brx-content a:not(.brxe-button):not(.bdd-os-ring__chip):not(.card-link):not(.bdd-view-all-link) { color: var(--bdd-link); }
body[class*="bdd-hue--"] #brx-content a:not(.brxe-button):not(.bdd-os-ring__chip):not(.card-link):not(.bdd-view-all-link):hover { color: var(--bdd-link-hover); }
/* Dark neutral grounds, every page. */
.color-scheme--dark a:not(.brxe-button):not(.bdd-os-ring__chip):not(.card-link) { color: var(--bdd-link-dark); }
.color-scheme--dark a:not(.brxe-button):not(.bdd-os-ring__chip):not(.card-link):hover { color: var(--bdd-link-dark-hover); }
/* === End BDD link color by hue and ground === */

/* === BDD Button Typography Contract (2026-09-03) === */
/* Neue Haas Grotesk supports one consistent medium weight across filled,
   outlined, and clear treatments. Apply both the ACSS token and the rendered
   property so Bricks buttons without a btn--* utility inherit the same system.
   Interaction states do not change weight. Button labels are always one line;
   labels that do not fit must be rewritten or the surrounding layout must
   change breakpoint. */
.brxe-button.brxe-button,
.bdd-mobile-account-dropdown > .brx-submenu-toggle {
  --btn-font-weight: 500;
  font-weight: 500;
  white-space: nowrap;
}

/* Linked content cards use Bricks' button element for structure, but their
   titles are editorial headings and must wrap inside the card. */
.brxe-button.brxe-button.card-link {
  color: inherit;
  white-space: normal;
}

/* Only Composition "Assembled From" lists consume the section scheme's link
   role. Archive cards keep their authored/inherited title color. */
.bdd-feature-80__list .brxe-button.brxe-button.card-link {
  color: var(--bdd-scheme-link, var(--neutral-ultra-dark));
}

/* Chronicles card titles match the archive title tracking explicitly. */
.brxe-blgttl.brxe-button.card-link {
  letter-spacing: 0;
}
.brxe-button.brxe-button.card-link > svg[data-icon] {
  color: inherit;
  fill: currentColor;
}

/* === BDD Navigation Outline CTA Contract (2026-08-30) === */
/* One color, border, and fill interaction system for the light header, dark
   header, sticky header, and footer CTA. Typography inherits the single global
   500 button weight above. Header rules stop above the 1080px nav breakpoint
   so the filled mobile CTA retains its existing responsive treatment. */
.bdd-nav-cta--dark-outline {
  --bdd-nav-cta-border-width: 1px;
  --bdd-nav-cta-stroke: var(--neutral-ultra-dark);
  --bdd-nav-cta-ink: var(--neutral-ultra-dark);
  --bdd-nav-cta-hover-fill: var(--black);
  --bdd-nav-cta-hover-stroke: var(--black);
  --bdd-nav-cta-hover-ink: var(--white);
}
.bdd-nav-cta--light-outline {
  --bdd-nav-cta-border-width: .5px;
  --bdd-nav-cta-stroke: var(--white);
  --bdd-nav-cta-ink: var(--white);
  --bdd-nav-cta-hover-fill: var(--white);
  --bdd-nav-cta-hover-stroke: var(--white);
  --bdd-nav-cta-hover-ink: var(--black);
}
.bdd-nav-cta {
  --bdd-nav-cta-transition: background-color .16s ease-out,
    border-color .16s ease-out,
    color .16s ease-out;
}
#brx-footer .bdd-nav-cta.bdd-nav-cta {
  background-color: transparent;
  border-width: var(--bdd-nav-cta-border-width);
  border-color: var(--bdd-nav-cta-stroke);
  color: var(--bdd-nav-cta-ink);
  transition: var(--bdd-nav-cta-transition);
}
#brx-footer .bdd-nav-cta.bdd-nav-cta:is(:hover, :focus-visible) {
  background-color: var(--bdd-nav-cta-hover-fill);
  border-color: var(--bdd-nav-cta-hover-stroke);
  color: var(--bdd-nav-cta-hover-ink);
}
@media (min-width: 1081px) {
  #brx-header .bdd-nav-cta.bdd-nav-cta {
    background-color: transparent;
    border-width: var(--bdd-nav-cta-border-width);
    border-color: var(--bdd-nav-cta-stroke);
    color: var(--bdd-nav-cta-ink);
    transition: var(--bdd-nav-cta-transition);
  }
  #brx-header .bdd-nav-cta.bdd-nav-cta:is(:hover, :focus-visible) {
    background-color: var(--bdd-nav-cta-hover-fill);
    border-color: var(--bdd-nav-cta-hover-stroke);
    color: var(--bdd-nav-cta-hover-ink);
  }
  #brx-header.brx-sticky.scrolling .brx-nav-nested-items > li > a.bdd-nav-cta {
    --bdd-nav-cta-border-width: .5px;
    --bdd-nav-cta-stroke: var(--white);
    --bdd-nav-cta-ink: var(--white);
    --bdd-nav-cta-hover-fill: var(--white);
    --bdd-nav-cta-hover-stroke: var(--white);
    --bdd-nav-cta-hover-ink: var(--black);
  }
  #brx-header.brx-sticky.scrolling .brx-nav-nested-items > li > a.bdd-nav-cta:is(:hover, :focus-visible) {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--black);
  }

  /* The authenticated account control occupies the same visual slot as the
     public Connect button. Bricks' native dropdown owns the interaction; this
     adapter gives its split link/toggle the established outline CTA recipe. */
  #brx-header .bdd-account-nav.brxe-dropdown {
    --btn-font-weight: 500;
    color: var(--bdd-nav-cta-ink);
    inline-size: max-content;
  }
  #brx-header .bdd-account-nav.brxe-dropdown > .brx-submenu-toggle {
    align-items: stretch;
    background-color: transparent;
    border: var(--bdd-nav-cta-border-width) solid var(--bdd-nav-cta-stroke);
    border-radius: var(--btn-radius);
    color: inherit;
    gap: .45em;
    min-inline-size: 0;
    transition: background-color .16s ease-out, border-color .16s ease-out, color .16s ease-out;
  }
  #brx-header .bdd-account-nav.brxe-dropdown > .brx-submenu-toggle > a {
    align-items: center;
    display: flex;
    font-style: var(--btn-font-style);
    font-weight: var(--btn-font-weight);
    letter-spacing: var(--btn-letter-spacing);
    line-height: var(--btn-line-height);
    padding: var(--btn-padding-block) 0 var(--btn-padding-block) var(--btn-padding-inline);
    text-decoration: var(--btn-text-decoration);
    text-transform: var(--btn-text-transform);
    /* ACSS gives ordinary links a generic 0.3s transition. The enclosing
       toggle owns this CTA's 0.16s color transition, so a second transition on
       the inherited link color creates a visible trailing animation. */
    transition: none;
  }
  #brx-header .bdd-account-nav.brxe-dropdown > .brx-submenu-toggle > a::before {
    display: none;
  }
  #brx-header .bdd-account-nav.brxe-dropdown > .brx-submenu-toggle > button {
    align-self: stretch;
    color: inherit;
    padding: 0 var(--btn-padding-inline) 0 0;
  }
  #brx-header .bdd-account-nav.brxe-dropdown:is(:hover, :focus-within, .open) > .brx-submenu-toggle {
    background-color: var(--bdd-nav-cta-hover-fill);
    border-color: var(--bdd-nav-cta-hover-stroke);
    color: var(--bdd-nav-cta-hover-ink);
  }
  #brx-header .bdd-account-nav.brxe-dropdown > .brx-dropdown-content {
    inline-size: 100%;
    left: auto;
    margin-top: var(--space-xs);
    min-inline-size: 100%;
    right: 0;
  }
  #brx-header :is(.bdd-account-nav__signout, .bdd-account-nav__link).brxe-text-link {
    align-items: center;
    color: var(--neutral-ultra-dark);
    display: flex;
    line-height: var(--btn-line-height);
    padding: var(--btn-padding-block) var(--btn-padding-inline);
    text-decoration: none;
    width: 100%;
  }
  #brx-header :is(.bdd-account-nav__signout, .bdd-account-nav__link).brxe-text-link:is(:hover, :focus-visible) {
    background-color: var(--neutral-ultra-light);
    color: var(--neutral-ultra-dark);
  }
  #brx-header:not(.scrolling)
    .bdd-account-nav.bdd-nav-cta--dark-outline
    > .brx-dropdown-content {
    background-color: var(--black);
    border-color: var(--black);
  }
  #brx-header:not(.scrolling)
    .bdd-account-nav.bdd-nav-cta--dark-outline
    :is(.bdd-account-nav__signout, .bdd-account-nav__link).brxe-text-link {
    background-color: var(--black);
    color: var(--white);
    font-weight: 500;
    transition: background-color .16s ease-out, color .16s ease-out;
  }
  #brx-header:not(.scrolling)
    .bdd-account-nav.bdd-nav-cta--dark-outline
    :is(.bdd-account-nav__signout, .bdd-account-nav__link).brxe-text-link:is(:hover, :focus-visible) {
    background-color: var(--neutral-ultra-dark);
    color: var(--white);
  }
  #brx-header.brx-sticky.scrolling .bdd-account-nav.brxe-dropdown {
    --bdd-nav-cta-border-width: .5px;
    --bdd-nav-cta-stroke: var(--white);
    --bdd-nav-cta-ink: var(--white);
    --bdd-nav-cta-hover-fill: var(--white);
    --bdd-nav-cta-hover-stroke: var(--white);
    --bdd-nav-cta-hover-ink: var(--black);
  }
}

/* Keep the mobile account state in one consistent composition: the primary
   destination spans the menu, while Sign In / Sign Out remains a quiet,
   centered utility immediately above the mobile identity mark. Bricks wraps
   every direct nested-nav child in a generated .menu-item, so both that wrapper
   and the account element must span the menu for centering to be real. */
@media (max-width: 991px) {
  #brx-header .brx-offcanvas-inner .bdd-nav-cta,
  #brx-header .bdd-mobile-account-nav > .bdd-nav-cta {
    justify-content: center;
    width: 100%;
  }

  #brx-header .bdd-mobile-account-nav {
    align-items: stretch !important;
    gap: calc(var(--space-xs) / 2) !important;
  }

  #brx-header .brx-nav-nested-items > li.menu-item:has(> :is(
    .bdd-mobile-account-nav,
    .bdd-mobile-account-nav__signin,
    .bdd-mobile-account-nav__signout
  )) {
    align-self: stretch;
    display: flex;
    justify-content: center;
    margin-inline: 0;
    width: 100%;
  }

  #brx-header .brx-nav-nested-items > li.menu-item > .bdd-mobile-account-nav {
    width: 100%;
  }

  #brx-header :is(.bdd-mobile-account-nav__signin, .bdd-mobile-account-nav__signout) {
    align-self: stretch;
    color: var(--white-trans-70);
    display: flex;
    font-weight: 400;
    justify-content: center;
    margin: 0;
    padding-block: calc(var(--space-xs) / 2) var(--space-s);
    text-align: center;
    text-decoration: underline;
    width: 100%;
  }

  #brx-header :is(.bdd-mobile-account-nav__signin, .bdd-mobile-account-nav__signout):is(:hover, :focus-visible) {
    color: var(--white);
  }
}

/* The account dropdown retains the original outlined mobile button. Its
   native Bricks toggle opens the existing second-level navigation. */
@media (max-width: 1080px) {
  #brx-header .bdd-mobile-account-dropdown {
    width: 100%;
  }
  #brx-header .bdd-mobile-account-dropdown > .brx-submenu-toggle {
    width: 100%;
    justify-content: center;
    padding: var(--btn-padding-block) var(--btn-padding-inline);
    border: var(--btn-outline-border-width) var(--btn-border-style) var(--bdd-nav-cta-stroke);
    border-radius: var(--btn-radius);
    color: var(--bdd-nav-cta-ink);
    background: transparent;
    font-size: var(--btn-font-size, var(--text-m));
    line-height: var(--btn-line-height);
  }
  #brx-header .bdd-mobile-account-dropdown > .brx-submenu-toggle > :is(span, button) {
    color: inherit;
    font: inherit;
  }
}

/* === BDD Sticky-Header Logo Shrink (2026-08-29) === */
/* The header shrinks vertically only in the sticky/scrolled state - the resting
   header keeps its full 9em logo and all its padding (the negative space is the
   design). The logo is the header's height floor (nav row is shorter), so
   shrinking it to 5.9em drops the sticky header ~20% with padding untouched.
   The current BDD header uses Bricks' native logo/inverse-logo swap; the legacy
   Frames selectors remain here so either backup can still be restored intact.
   Bricks' sticky UI offers no size controls, hence child theme. The eased width
   + padding transitions animate the shrink in both directions. */
#brx-header :is(.bdd-header-1__logo, .fr-header-alpha__logo) {
  transition: width 0.3s ease-in-out;
}
#brx-header :is(.bdd-header-1, .fr-header-alpha) {
  transition: padding 0.3s ease-in-out;
}
#brx-header.scrolling :is(.bdd-header-1__logo, .fr-header-alpha__logo) {
  width: 6.5em;
}
#brx-header.scrolling :is(.bdd-header-1, .fr-header-alpha) {
  padding-block: var(--space-s);
}
@media (prefers-reduced-motion: reduce) {
  #brx-header :is(.bdd-header-1__logo, .fr-header-alpha__logo),
  #brx-header :is(.bdd-header-1, .fr-header-alpha) {
    transition: none;
  }
}

/* === BDD Button SVG Icons (2026-08-19) === */
/* House-arrow SVG icons in Bricks buttons (swap from fas fa-arrow-right, the
   unapproved solid arrow). ACSS owns [data-icon] svg sizing through
   --icon-size (32px in button context, black default fill); scoping the var
   here rides the ACSS chain. Size is anchored to --h3: the card-link arrows
   (archives, Creations cards) are 1em of their var(--h3) text, and Bill's
   ruling 2026-08-21 is ONE arrow size for every button site-wide. The arrow
   rides the button's own text color (so the scheme-aware bridge flips it). */
.brxe-button > svg[data-icon] {
  --icon-size: var(--h3);

  color: inherit; /* ACSS seeds [data-icon] with --icon-color; the button's own text color must win */
  fill: currentColor;
}

/* === BDD Linked Card Button Contract (2026-08-30) === */
/* Linked card titles use a real Bricks card-link button with the house-arrow
   SVG. The arrow aligns to the center of the first text line, so wrapping never
   recenters it against the full text block. */
.card-link {
  align-items: flex-start;
}
.card-link > svg[data-icon] {
  flex: 0 0 auto;
  translate: 0 calc(.5lh - 50%);
}

@media (prefers-reduced-motion: reduce) {
  .card-link,
  .card-link svg {
    transition: none;
  }
  .card-link:is(:hover, :focus-visible) svg {
    --bdd-card-arrow-hover-shift: 0px;
  }
}

/* === BDD Business OS page patterns (2026-08-21) === */
/* Active Business OS grid breakpoints and homepage relationship strip.
   Legacy ring, role filters, and numbered lists were archived on 2026-09-28
   in bdd-core/bdd-business-os/02-archive/landing-page-components-2026-09-28/. */
@media (max-width: 1279px) {
  body.postid-5125
    .bdd-feature-80:has(#what-this-composition-assembles)
    .bdd-feature-80__list {
    grid-template-columns: var(--grid-2) !important;
  }
}
@media (max-width: 600px) {
  body.postid-5125
    .bdd-feature-80:has(#what-this-composition-assembles)
    .bdd-feature-80__list {
    grid-template-columns: var(--grid-1) !important;
  }
}


.bdd-os-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-s);
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}
.bdd-os-strip__node {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: var(--space-s);
  /* Match the feature-80 card-grid borders: black-trans-10 on light, neutral-semi-dark on dark. */
  border-top: 1px solid var(--black-trans-10);
}
.color-scheme--dark .bdd-os-strip__node { border-top-color: var(--neutral-semi-dark); }
[class*="bdd-scheme--dark-"] .bdd-os-strip__node { border-top-color: var(--bdd-scheme-rule, var(--white-trans-20)); }
[class*="bdd-scheme--ground"] .bdd-os-strip__node { border-top-color: var(--bdd-scheme-rule); }
.bdd-os-strip__label {
  margin: 0;
}
.bdd-os-strip__line {
  font-size: var(--text-m);
  margin: 0;
}
@media (max-width: 992px) { .bdd-os-strip { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) { .bdd-os-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .bdd-os-strip { grid-template-columns: 1fr; } }
/* === End BDD Business OS page patterns === */

/* Inline house arrow for headings and links (the only approved arrow: attachment 364,
   arrow-right-thin-full-acss.svg). Mask = currentColor, so it follows the text color. */
.bdd-house-arrow {
  display: inline-block;
  width: 1em;
  height: 0.7em;
  margin-inline: 0.3em;
  vertical-align: -0.05em;
  background-color: currentColor;
  -webkit-mask: url('assets/arrow-right-thin-full-acss.svg') center / contain no-repeat;
  mask: url('assets/arrow-right-thin-full-acss.svg') center / contain no-repeat;
}

/* Fluent Booking calendar navigation: use Bowman's approved house arrow in a
   high-contrast outlined control instead of the plugin's stock blue angles. */
#ff_3_fcal_booking .calendar_nav {
  column-gap: var(--space-xs);
}
#ff_3_fcal_booking .calendar_nav button[aria-label="Previous Month"],
#ff_3_fcal_booking .calendar_nav button[aria-label="Next Month"] {
  position: relative;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 3.6rem;
  padding: 0;
  color: var(--black, #000) !important;
  border: 1px solid currentColor !important;
  border-radius: var(--radius-xs);
  background: transparent;
  transition: color 180ms ease, background-color 180ms ease, opacity 180ms ease;
}
#ff_3_fcal_booking .calendar_nav button[aria-label="Previous Month"] svg,
#ff_3_fcal_booking .calendar_nav button[aria-label="Next Month"] svg {
  display: none;
}
#ff_3_fcal_booking .calendar_nav button[aria-label="Previous Month"]::before,
#ff_3_fcal_booking .calendar_nav button[aria-label="Next Month"]::before {
  content: "";
  display: block;
  width: 2.8rem;
  height: 1.8rem;
  margin-inline: auto;
  background-color: currentColor;
  filter: drop-shadow(0 0 0.35px currentColor);
  -webkit-mask: url('assets/arrow-right-thin-full-acss.svg') center / contain no-repeat;
  mask: url('assets/arrow-right-thin-full-acss.svg') center / contain no-repeat;
}
#ff_3_fcal_booking .calendar_nav button[aria-label="Previous Month"]::before {
  transform: scaleX(-1) !important;
}
#ff_3_fcal_booking .calendar_nav button.fcal_nav_active:hover,
#ff_3_fcal_booking .calendar_nav button.fcal_nav_active:focus-visible {
  color: var(--primary) !important;
}
#ff_3_fcal_booking .calendar_nav button.fcal_btn_disabled {
  color: var(--black, #000) !important;
  opacity: 0.22;
}
/* === BDD Section Link Contract ===
   Centered section-level actions beneath systems and preview sliders.
   Future instances use bdd-section-link; bdd-view-all-link remains supported.
   The underline stays beneath the type—no upper rule or pseudo-element. */
#brx-content :is(.bdd-section-link, .bdd-view-all-link) {
  align-self: center;
  width: fit-content;
  font-size: var(--text-m);
  font-weight: 500;
  line-height: 1.25;
  color: var(--neutral-ultra-dark);
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--transition-duration) var(--transition-timing);
}
#brx-content :is(.bdd-section-link, .bdd-view-all-link):is(:hover, :focus-visible) {
  color: var(--neutral-ultra-dark-trans-80);
}
#brx-content :is(
  .color-scheme--dark,
  .color-scheme--semidark,
  .color-scheme--ultra-dark,
  [class*="bdd-scheme--dark-"],
  [class*="bdd-scheme--charcoal-"],
  .bdd-scheme--ground-magenta,
  .bdd-scheme--ground-blue,
  .bdd-scheme--ground-orange
) :is(.bdd-section-link, .bdd-view-all-link) {
  color: var(--white);
  text-decoration-thickness: .5px;
}
#brx-content :is(
  .color-scheme--dark,
  .color-scheme--semidark,
  .color-scheme--ultra-dark,
  [class*="bdd-scheme--dark-"],
  [class*="bdd-scheme--charcoal-"],
  .bdd-scheme--ground-magenta,
  .bdd-scheme--ground-blue,
  .bdd-scheme--ground-orange
) :is(.bdd-section-link, .bdd-view-all-link):is(:hover, :focus-visible) {
  color: var(--white-trans-80);
}
/* === End BDD Section Link Contract === */

/* === BDD Résumé page (/bill-bowman/) — screen + print (2026-08-23) === */
/* Contact details exist in the markup for the PDF only; never shown on screen. */
.bdd-resume__contact { display: none; }
.bdd-resume__meta { margin-top: calc(-1 * var(--space-xs)); }
.bdd-resume__proof-link { font-weight: 500; }
.bdd-resume__links a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.bdd-resume__list ul { padding-left: 1.2em; }
.bdd-resume__list li { margin-bottom: var(--space-xs); }
.bdd-resume__print-only { display: none; }
/* Links inside the résumé body keep the site's link color (Bill, 2026-08-23). The timeline's gray cards are the
   one place the hue fails, so those links inherit the card color and underline instead. */
#experience a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
#experience a:hover { text-decoration-thickness: 2px; }
body.bdd-opening-hero-page #profile .bdd-resume__profile {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-m);
  align-items: start;
  width: var(--width-xl);
  max-width: 100%;
  margin-top: calc(var(--space-m) - var(--space-xs));
  text-align: left;
}
body.bdd-opening-hero-page #profile .bdd-resume__profile p + p { margin-top: 0; }
@media (max-width: 768px) {
  body.bdd-opening-hero-page #profile .bdd-resume__profile {
    display: block;
    width: var(--width-l);
  }
  body.bdd-opening-hero-page #profile .bdd-resume__profile p + p { margin-top: var(--space-s); }
}
/* Recognition list: balanced CSS columns, not a grid (2026-08-23). A grid
   row is as tall as its tallest item (the 3-line award left 62px of air
   under its neighbour) and five items orphan the last one; columns fill
   top-down and balance. li + li neutralises the site's list-item spacing. */
.bdd-resume__list li + li { margin-top: 0 !important; padding-top: 0 !important; }
@media (min-width: 993px) { .bdd-resume__list ul { columns: 2; column-gap: var(--space-l); } .bdd-resume__list li { break-inside: avoid; } }
/* Capabilities groups: label + roster travel together with --space-xs
   between them; the feature-80 container's --space-xl separates groups
   (same rhythm as header -> cards on Creations). Was: loose elements in
   the container, each adding its own margin to the 68px gap = 88-98px rivers. */
.bdd-resume__group { display: flex; flex-direction: column; align-items: center; row-gap: var(--space-xs); width: 100%; }
.bdd-resume__roster summary { cursor: pointer; font-weight: 500; list-style: none; }
.bdd-resume__roster summary::after { content: ' +'; }
.bdd-resume__roster[open] summary::after { content: ' −'; }
.bdd-resume__roster p { margin-top: var(--space-s); line-height: 2; }
/* Portrait orbit: reusable brand treatment for circular linked portraits. */
.bdd-portrait-orbit {
  --bdd-portrait-orbit-accent: var(--primary);

  position: relative;
  isolation: isolate;
  transition:
    border-color 350ms ease,
    box-shadow 350ms ease;
}
.bdd-portrait-orbit::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
#brx-content .bdd-portrait-orbit:hover,
#brx-content .bdd-portrait-orbit:focus-within {
  border-color: color-mix(in srgb, var(--bdd-portrait-orbit-accent) 30%, transparent);
  box-shadow:
    0 0 24px color-mix(in srgb, var(--bdd-portrait-orbit-accent) 35%, transparent),
    0 0 48px color-mix(in srgb, var(--bdd-portrait-orbit-accent) 18%, transparent);
}

/* Timeline descriptions carry lists on this page. */
.card-bdd-timeline-2__description ul { padding-left: 1.2em; margin-top: var(--space-xs); }
.card-bdd-timeline-2__description li { margin-bottom: var(--space-xxs, 0.6rem); }

/* === End BDD Résumé page === */

/* Calendar month controls: medium on tablet, small on mobile. */
@media (max-width: 992px) {
  #ff_3_fcal_booking .calendar_nav button[aria-label="Previous Month"],
  #ff_3_fcal_booking .calendar_nav button[aria-label="Next Month"] {
    width: 3.6rem;
    height: 3.4rem;
  }
  #ff_3_fcal_booking .calendar_nav button[aria-label="Previous Month"]::before,
  #ff_3_fcal_booking .calendar_nav button[aria-label="Next Month"]::before {
    width: 2.4rem;
    height: 1.6rem;
  }
}
@media (max-width: 767px) {
  #ff_3_fcal_booking .calendar_nav button[aria-label="Previous Month"],
  #ff_3_fcal_booking .calendar_nav button[aria-label="Next Month"] {
    width: 3.2rem;
    height: 3.2rem;
  }
  #ff_3_fcal_booking .calendar_nav button[aria-label="Previous Month"]::before,
  #ff_3_fcal_booking .calendar_nav button[aria-label="Next Month"]::before {
    width: 2rem;
    height: 1.4rem;
  }
}

/* Secondary card CTAs: keep baseline placement out of the animated transform.
   Header, mega-menu and Creation archive title arrows retain their own contracts. */
#brx-content :is(.bdd-feature-80, .bdd-portfolio-21) .card-link > svg[data-icon] {
  position: relative;
  top: calc((1lh - var(--icon-size)) / 2);
  translate: none;
}