/*
 * Design round 1: deliberate departures from the 1:1 live copy (see README "Deviations").
 * Loaded after the original Bricks/ACSS cascade.
 */

/* 1. Mobile header: the logo had a fixed 12rem height with object-fit: cover, so it was cropped on phones,
      and the contact block was right-aligned under it. Scale the logo, stack and center the header,
      and give the header links 44px tap targets. Mobile only; desktop and tablet are unchanged. */
@media (max-width: 767px) {
  .jj-header-section #brxe-beujpz { flex-direction: column; align-items: center; gap: 1.2rem; }
  .jj-header-section #brxe-beujpz > .brxe-block { width: 100%; align-items: center; }
  .jj-header-section #brxe-iiwqog { display: block; max-width: 100%; }
  .jj-header-section #brxe-iiwqog img.bricks-site-logo { width: min(82vw, 32rem); height: auto; aspect-ratio: 1024 / 308; object-fit: contain; }
  .jj-header-section #brxe-osczxq { align-items: center; margin-right: 0; gap: 0.4rem; }
  .jj-header-section #brxe-utcdno, .jj-header-section #brxe-uvmgqo { min-height: 44px; max-width: 100%; justify-content: center; }
  .jj-header-section .jj-btn-main { display: inline-flex; align-items: center; min-height: 44px; }
}

/* 2. Green buttons: white text. White on the original #11b76b is 2.62:1, so the background is darkened
      (same hue and saturation) to #0d8850, the lightest shade at or above 4.5:1 (4.51:1). Same in all states. */
.bricks-button.jj-btn-main.bricks-background-success,
.bricks-button.jj-btn-main.bricks-background-success:hover,
.bricks-button.jj-btn-main.bricks-background-success:focus,
.bricks-button.jj-btn-main.bricks-background-success:focus-visible,
.bricks-button.jj-btn-main.bricks-background-success:active { color: #fff; background-color: #0d8850; }
.bricks-button.jj-btn-main.bricks-background-success:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }