/* Dev-only component gallery. Removed at cutover with inc/dev-gallery.php. */
.bx-gallery { display: flex; flex-direction: column; gap: 28px; }
.bx-gallery__note { color: var(--c-text-muted); }
.bx-gallery__h {
  margin-block-start: 28px;
  padding-block-end: 8px;
  border-block-end: 2px solid var(--c-primary);
  font-size: 22px;
  line-height: 28px;
}
.bx-gallery__row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.bx-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 30px;
}

/* Form status message */
.bx-formmsg {
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  font-weight: var(--fw-bold);
  margin-block-end: 18px;
}
.bx-formmsg--success { background: #E8F5EC; color: #1E6B38; }
.bx-formmsg--error { background: #FBEAEA; color: #8A1F1F; }

/* ---------------------------------------------------------------------------
   Responsive corrections, taken from the Elementor source grid settings.
   Our Team uses a different column count per section:
     Leaders           0.55fr 0.45fr / - / 1fr
     Expert Witnesses  4 / 4 / 1
     Speakers          4 / 3 / 2
   Gap is 60px, not the 30px default.
   --------------------------------------------------------------------------- */
.bx-teamgrid { gap: 60px; }
.bx-teamgrid--leaders  { grid-template-columns: 0.55fr 0.45fr; }
.bx-teamgrid--experts  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bx-teamgrid--speakers { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
  .bx-teamgrid--speakers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bx-teamgrid { gap: 40px; }

  /* The blog sidebar is hidden below desktop in the original; the category row
     moves above the listing in its place. */
  .bx-blog-layout { grid-template-columns: 1fr; }
  .bx-blog-side { display: none; }
  .bx-blog-cats { padding-block: 0 40px; order: -1; }
  .bx-main .bx-blog-cats { margin-block-start: -20px; }
}

@media (max-width: 767px) {
  .bx-teamgrid--leaders,
  .bx-teamgrid--experts { grid-template-columns: 1fr; }
  .bx-teamgrid--speakers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bx-teamgrid { gap: 30px; }
}

/* ---------------------------------------------------------------------------
   Section head — two-column grid, matching the Elementor source.
   Parent grid is 0.35fr 0.75fr; the heading column carries 25px left padding.
   Stacks to one column on mobile, as the source does.
   --------------------------------------------------------------------------- */
.bx-sechead {
  display: grid;
  grid-template-columns: 0.35fr 0.75fr;
  gap: 0;
  align-items: start;
}
.bx-sechead__aside { min-width: 0; }
.bx-sechead__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-gap);
  padding-inline-start: 25px;
  min-width: 0;
}
.bx-sechead__title { margin: 0; }
.bx-sechead__body { max-width: 62ch; }

/* Heading and button on one row, inside the heading column. */
.bx-sechead--split .bx-sechead__main {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-gap);
}

/* Single column, for narrow contexts such as a sidebar or card. */
.bx-sechead--stack { grid-template-columns: 1fr; }
.bx-sechead--stack .bx-sechead__main { padding-inline-start: 0; gap: var(--space-gap-sm); }

@media (max-width: 1024px) {
  .bx-sechead { grid-template-columns: 0.4fr 0.6fr; }
}
@media (max-width: 767px) {
  .bx-sechead { grid-template-columns: 1fr; gap: 16px; }
  .bx-sechead__main { padding-inline-start: 0; }
  .bx-sechead--split .bx-sechead__main { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------------------
   Measured corrections against the archived original.
   --------------------------------------------------------------------------- */

/* Dark top hero: text 0.6fr / image 0.4fr. Measured 774px / 516px over a
   1290px container, not the even split I had. */
.bx-tophero__inner,
.bx-bio-hero__inner { grid-template-columns: 0.6fr 0.4fr; }

/* Elementor buttons and pills shrink to their content; a block-level <p> or
   heading stretches. These are the ones where the difference is visible
   because they carry a border or background. */
.bx-tcard--reveal .bx-tcard__role,
.bx-tcard__caption .bx-btn,
.bx-pmeta__item { width: fit-content; }

/* Headings fill their grid column rather than shrinking to the text, so long
   headings wrap at the same point as the original. */
.bx-sechead__main > .bx-sechead__title { align-self: stretch; width: 100%; }

@media (max-width: 767px) {
  .bx-tophero__inner,
  .bx-bio-hero__inner { grid-template-columns: 1fr; }
}

/* Header grid carries Elementor's default 20px widget gap. Without it each
   column is ~10px too wide and the logo sits 46px off. */
.bx-header__inner { gap: var(--widgets-spacing); }

/* The logo fills its grid column and the image is centred within it at 70%,
   matching the original (column 309 wide, image 216 at x=75). */
.bx-header__brand > a { display: block; width: 100%; text-align: center; }
.bx-header__brand img { width: 70%; margin-inline: auto; }

/* ---------------------------------------------------------------------------
   Dark top hero (Our Team, About, team bios) — measured from the original.
   Grid 0.55fr 0.45fr with a 110px gap; the media column is padded 13-15px;
   the portrait is a fixed 714px tall (429 on tablet) with object-fit: cover,
   so it deliberately overruns the section.
   --------------------------------------------------------------------------- */
.bx-tophero__inner,
.bx-bio-hero__inner {
  grid-template-columns: 0.55fr 0.45fr;
  gap: 110px;
}
.bx-tophero__media,
.bx-bio-hero__media { padding-inline-start: 15px; }

.bx-tophero__img,
.bx-bio-hero__img {
  width: 100%;
  height: 714px;
  object-fit: cover;
  object-position: center top;
}

@media (max-width: 1024px) {
  .bx-tophero__inner,
  .bx-bio-hero__inner { gap: 60px; }
  .bx-tophero__img,
  .bx-bio-hero__img { height: 429px; }
}
@media (max-width: 767px) {
  .bx-tophero__inner,
  .bx-bio-hero__inner { grid-template-columns: 1fr; gap: 30px; }
  .bx-tophero__media,
  .bx-bio-hero__media { padding-inline-start: 0; }
  .bx-tophero__img,
  .bx-bio-hero__img { height: auto; }
}

/* The portrait is taller than the hero and deliberately overruns it, so the
   section height is driven by the text column alone. Taking the image out of
   flow reproduces that: section 770 tall, image 714 running 64px past it. */
.bx-tophero__inner,
.bx-bio-hero__inner { align-items: start; }

.bx-tophero__media,
.bx-bio-hero__media { position: relative; }

.bx-tophero__img,
.bx-bio-hero__img {
  position: absolute;
  top: 0;
  left: 15px;
  right: 0;
  width: auto;
}

@media (max-width: 767px) {
  .bx-tophero__img,
  .bx-bio-hero__img { position: static; left: auto; right: auto; width: 100%; }
  .bx-tophero__media,
  .bx-bio-hero__media { position: static; }
}
/* The 15px inset belongs to the image, not the column, or the absolute right
   edge resolves past the container. */
.bx-tophero__media,
.bx-bio-hero__media { padding-inline-start: 0; }
/* Explicit width: the auto/left/right form was being overridden by the
   earlier width:100% rule. */
.bx-tophero__img,
.bx-bio-hero__img { width: calc(100% - 15px); right: auto; }
@media (max-width: 767px) {
  .bx-tophero__img,
  .bx-bio-hero__img { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Measured against the original at 1920 (widescreen).
   --------------------------------------------------------------------------- */

/* Header inner is 96% of the 1800 box, i.e. 1728 — not 1800. */
.bx-header__inner { max-width: calc(1800px * .96); }

/* Hero: the grid row is 650 tall; the portrait overruns it. */
.bx-tophero__inner,
.bx-bio-hero__inner { min-height: 650px; }

/* Lede is 22px and sits under a hairline rule with 50px of space above it. */
.bx-tophero__lede,
.bx-bio-hero__summary {
  font-size: 22px;
  line-height: 32px;
  padding-block-start: 50px;
  border-block-start: 1px solid var(--c-rule-on-dark);
  width: 100%;
}

/* Oversized translucent wordmark, 137px Nyght Serif in #32324E. */
.bx-tophero { position: relative; overflow: hidden; }
.bx-tophero__mark {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: var(--container-inner);
  max-width: calc(var(--container-max) * var(--container-ratio));
  bottom: 13px;
  margin: 0;
  font-family: var(--ff-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 137px;
  line-height: .72;
  color: #32324E;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.bx-tophero__inner { position: relative; z-index: 1; }

/* Leaders grid is Elementor's default three columns with two cards in it, so
   the cards are 390 wide and sit to the left rather than stretching. */
.bx-teamgrid--leaders { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Overlay card caption: role pill above the name, 40px inset, 10px gap. */
.bx-tcard__caption { padding: 40px; gap: 10px; }
.bx-tcard__caption .bx-btn--glass { --btn-pad: 7px 20px; font-size: 16px; }
.bx-tcard__caption .bx-tcard__name { font-size: 38px; line-height: 44px; }

/* Reveal card: role is a bordered pill, then the name. */
.bx-tcard--reveal .bx-tcard__body { gap: 12px; align-items: flex-start; }
.bx-tcard--reveal .bx-tcard__role { font-size: 14px; color: var(--c-text); }
.bx-tcard--reveal .bx-tcard__name { font-size: 24px; line-height: 30px; }

@media (max-width: 1024px) {
  .bx-tophero__inner,
  .bx-bio-hero__inner { min-height: 0; }
  .bx-tophero__mark { font-size: 90px; }
  .bx-teamgrid--leaders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .bx-tophero__mark { display: none; }
  .bx-tophero__lede,
  .bx-bio-hero__summary { font-size: 18px; line-height: 26px; padding-block-start: 24px; }
  .bx-teamgrid--leaders { grid-template-columns: 1fr; }
}
/* Team card images keep their own aspect ratio; the original sets no height. */
.bx-tcard__media { aspect-ratio: auto; background: none; }
.bx-tcard__img { height: auto; }
/* The portrait must overrun the hero, so the section cannot clip. The wordmark
   is inset from the container, so nothing escapes horizontally. */
.bx-tophero { overflow: visible; }
/* Exact rule colour from the original. */
.bx-tophero__lede,
.bx-bio-hero__summary { border-block-start-color: rgba(226, 226, 226, .31); }

/* Hero portrait carries a 20px radius on all four corners (15px on mobile). */
.bx-tophero__img,
.bx-bio-hero__img { border-radius: 20px; }

/* Wordmark drifts horizontally on scroll — Elementor translateX, speed 2,
   negative direction, desktop and widescreen only. The transform keeps the
   existing centring translate. */
.bx-tophero__mark {
  transform: translateX(calc(-50% + var(--drift-x, 0px)));
  will-change: transform;
}

@media (max-width: 767px) {
  .bx-tophero__img,
  .bx-bio-hero__img { border-radius: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .bx-tophero__mark { transform: translateX(-50%); }
}
/* The wordmark sits inside the container, so it aligns to the container's left
   edge and sizes to its text — no centring maths needed. */
.bx-tophero__mark {
  left: 0;
  right: auto;
  width: auto;
  max-width: none;
  transform: translateX(var(--drift-x, 0px));
}
@media (prefers-reduced-motion: reduce) {
  .bx-tophero__mark { transform: none; }
}

/* ---------------------------------------------------------------------------
   Round 3 — Our Team reveal cards and section headings, measured at 1920
   against the archived original. Every value below is read from the Elementor
   source (2319.json) rather than eyeballed.
   --------------------------------------------------------------------------- */

/* Section-head headings carry an explicit `_element_custom_width` of 653px, so
   they wrap where the original wraps instead of filling the grid column. The
   same 653px shows up on the homepage section heads. */
.bx-sechead__main > .bx-sechead__title {
  width: 653px;
  max-width: 100%;
  align-self: flex-start;
}

/* The heading column is a 35px-gap flex column with 25px of left padding. */
.bx-sechead__main { gap: 35px; }

/* Reveal card (.main1) is a flex column on Elementor's 20px widget gap:
   portrait 381 + 20 + role 32 + 20 + name 17 = 470 at 1920. The 1/1
   aspect-ratio in the component layer was cropping the portrait to 278. */
.bx-tcard--reveal .bx-tcard__media {
  aspect-ratio: auto;
  border-radius: 18px;
}
.bx-tcard--reveal .bx-tcard__img {
  height: auto;
  object-fit: initial;
}
.bx-tcard--reveal .bx-tcard__body {
  gap: var(--widgets-spacing);
  padding-block-start: var(--widgets-spacing);
  align-items: flex-start;
}

/* The role is the same glass pill as the overlay card, not a tan tag:
   16/16 at 700, 7px/20px padding, 20px radius, 1px #E2E2E2, black text. */
.bx-tcard--reveal .bx-tcard__role {
  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
  padding: 7px 20px;
  border: 1px solid var(--c-border);
  border-radius: 20px;
  background: rgba(255, 255, 255, .11);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #000;
}

.bx-tcard--reveal .bx-tcard__name {
  font-size: 30px;
  line-height: 17px;
  letter-spacing: -.7px;
}

/* Overlay card portrait is 15px, the reveal portrait 18px. */
.bx-tcard--overlay .bx-tcard__media { border-radius: 15px; }

/* Socials sit over the portrait, offset 10% from the right and 7% from the
   bottom, as a 20px row spaced 9px apart, hidden until the card is hovered.
   The original sets the icon colour to #02010100 — fully transparent — so they
   never actually appear on the live site; rendered white here, which is plainly
   what was intended. */
.bx-tcard--reveal .bx-tcard__socials {
  top: auto;
  right: 10%;
  bottom: 7%;
}
.bx-tcard--reveal .bx-tcard__social-list {
  flex-direction: row;
  align-items: center;
  gap: 9px;
  padding: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.bx-tcard--reveal .bx-tcard__social-list .bx-social__link {
  width: 20px;
  height: 20px;
}

@media (max-width: 1024px) {
  .bx-tcard--reveal .bx-tcard__name { font-size: 24px; line-height: 13px; }
  .bx-tcard__caption .bx-tcard__name { font-size: 22px; line-height: 29px; }
}
@media (max-width: 767px) {
  .bx-tcard--reveal .bx-tcard__name { font-size: 22px; line-height: 20px; }
  .bx-tcard__caption .bx-tcard__name { font-size: 28px; line-height: normal; }
}

/* Section head: the grid stretches both columns and the eyebrow is pinned to
   the bottom of the heading column, 48px down on a single-line heading. */
.bx-sechead { align-items: stretch; }
.bx-sechead__aside {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--widgets-spacing);
}
.bx-sechead__aside .bx-eyebrow {
  line-height: 22px;
  letter-spacing: normal;
  gap: 12px;
}
.bx-sechead__aside .bx-eyebrow .bx-icon { font-size: 14px; }
.bx-sechead__title { letter-spacing: -2px; }

/* Each team group is head + 40px gap + a card block with 60px of top padding,
   and groups are 120px apart. */
.bx-teamgroup { gap: 100px; }
.bx-teamgroup + .bx-teamgroup { margin-block-start: 120px; }

/* The glass pill is 16/16 at 700, so it measures 32px tall, not 38. */
.bx-btn--glass { line-height: 16px; font-weight: var(--fw-bold); }

/* Hero title carries -1.8px letter-spacing. Without it the line is ~117px
   wider and the heading wraps to four lines instead of three, which pushed the
   lede and the whole column 70px down. The heading widget also sits above 20px
   of its own bottom padding, on top of the 31px column gap. */
.bx-tophero__title,
.bx-bio-hero__title {
  letter-spacing: -1.8px;
  margin-block-end: 20px;
}

/* The grid row supplies the 650px min-height, so the text column needs no
   padding of its own. */
.bx-tophero__text { padding-block-end: 0; }

/* Hero eyebrow: 16/22 with a 14px mark and 13px of space (8px after the icon
   plus 5px before the text). */
.bx-tophero__text > .bx-eyebrow,
.bx-bio-hero__text > .bx-eyebrow {
  line-height: 22px;
  letter-spacing: normal;
  gap: 13px;
}
.bx-tophero__text > .bx-eyebrow .bx-icon,
.bx-bio-hero__text > .bx-eyebrow .bx-icon { font-size: 14px; }

/* ---------------------------------------------------------------------------
   Our Team — tablet and mobile, from 2319.json's responsive values
   --------------------------------------------------------------------------- */

/* Hero: 120 above, nothing below on desktop; 80/80 at tablet; 60/60 on mobile. */
.bx-tophero { padding-block: 120px 0; }

/* The team groups live in one <main>: 180 above the first group, 120 below the
   last, and 120 between groups (120 bottom + 0 top in the original). */
.bx-main.bx-section--lg { padding-block: 180px 120px; }

@media (max-width: 1024px) {
  .bx-tophero { padding-block: 80px; }
  .bx-main.bx-section--lg { padding-block: 80px; }

  /* 30px container gap + 50px of card-block top padding. */
  .bx-teamgroup { gap: 80px; }
  .bx-teamgroup + .bx-teamgroup { margin-block-start: 80px; }

  .bx-teamgrid { gap: 30px; }
  .bx-teamgrid--leaders  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bx-teamgrid--experts  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bx-teamgrid--speakers { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .bx-tophero__inner,
  .bx-bio-hero__inner { gap: 60px; }
}

@media (max-width: 767px) {
  .bx-tophero { padding-block: 60px; }
  .bx-main.bx-section--lg { padding-block: 60px; }

  /* 30px container gap + 30px of card-block top padding. */
  .bx-teamgroup { gap: 60px; }
  .bx-teamgroup + .bx-teamgroup { margin-block-start: 120px; }

  /* Elementor emits an invalid `grid-template-columns: 1` for the Leaders and
     Expert grids on mobile, so the browser falls back to one content-sized
     column and the cards render at their natural 390px, left-aligned. Capped
     with minmax so narrow phones shrink instead of scrolling sideways. */
  .bx-teamgrid--leaders,
  .bx-teamgrid--experts {
    grid-template-columns: minmax(0, 390px);
    justify-content: start;
    gap: 30px;
  }
  .bx-teamgrid--speakers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 20px;
  }

  .bx-sechead { gap: 10px; }
  .bx-tcard--reveal .bx-tcard__body { gap: 10px; padding-block-start: 10px; }
  .bx-tophero__inner,
  .bx-bio-hero__inner { gap: 30px; }
}

/* The section-head grid keeps its desktop 0.35fr / 0.75fr ratio at tablet —
   Elementor leaves the tablet value empty, which inherits. */
@media (max-width: 1024px) {
  .bx-sechead { grid-template-columns: 0.35fr 0.75fr; }
  /* Overlay caption inset drops from 40px to 15px at tablet and below. */
  .bx-tcard__caption { padding: 15px; }
}

/* Footer office heading shrinks to its text in the original. */
.bx-footer__office .bx-icon-box__title { width: fit-content; }

/* Mobile section head stacks into one full-width column with a 10px gap and no
   left padding — re-asserted here because the tablet ratio above also matches
   at this width. */
@media (max-width: 767px) {
  .bx-sechead { grid-template-columns: 1fr; gap: 10px; align-items: start; }
  .bx-sechead__aside { justify-content: flex-start; }
  .bx-sechead__main { padding-inline-start: 0; }
}

/* Mobile hero: the text column tightens to a 7px gap, the lede sits 30px under
   its rule with -0.9px tracking, and the portrait keeps the tablet 429px height
   rather than falling back to its natural ratio. */
@media (max-width: 767px) {
  .bx-tophero__text,
  .bx-bio-hero__text { gap: 7px; }
  .bx-tophero__title,
  .bx-bio-hero__title { margin-block-end: 20px; }
  .bx-tophero__lede,
  .bx-bio-hero__summary { padding-block-start: 30px; letter-spacing: -.9px; }
  .bx-tophero__img,
  .bx-bio-hero__img { height: 429px; object-fit: cover; }
}

/* ---------------------------------------------------------------------------
   Team group: the 100px I had collapsed two separate things into one gap and
   lost the divider. The real structure is a 40px container gap, then the card
   block's own 60px top padding sitting under a 1px #E2E2E2 rule
   (border_border: solid, border_width top 1, global colour 3bb1039).
   --------------------------------------------------------------------------- */
.bx-teamgroup { gap: 40px; }
.bx-teamgrid {
  padding-block-start: 60px;
  border-block-start: 1px solid var(--c-border);
}

@media (max-width: 1024px) {
  .bx-teamgroup { gap: 30px; }
  .bx-teamgrid { padding-block-start: 50px; }
}
@media (max-width: 767px) {
  .bx-teamgroup { gap: 30px; }
  .bx-teamgrid { padding-block-start: 30px; }
}

/* The social row is 16px tall in the original (20px icons at the 0.8 resting
   scale). A list-item <li> adds a line box on top of the inline-flex link,
   which made the row 21 tall and lifted the icons off the 7% bottom offset. */
.bx-tcard--reveal .bx-tcard__social-list li { display: flex; }

/* ---------------------------------------------------------------------------
   Reveal card role pill on phones — a deliberate departure from the original.
   The original keeps the pill at 16/16 with 7px/20px padding at every width, so
   in the two-up Speakers grid on a 390px screen the card is 173px wide and the
   pill wraps to two lines at 173x48 — as wide as the card and taller than the
   portrait caption it sits under. Scaled down so the longest role
   ("Construction Expert Witness") stays on one line.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .bx-tcard--reveal .bx-tcard__role {
    font-size: 13px;
    line-height: 14px;
    padding: 5px 12px;
    border-radius: 14px;
  }
}

/* Two-up Speakers cards are only ~173px wide here, so the pill goes smaller
   again rather than wrapping. */
@media (max-width: 560px) {
  .bx-tcard--reveal .bx-tcard__role {
    font-size: 12px;
    line-height: 13px;
    padding: 4px 10px;
    border-radius: 12px;
  }
}

/* ===========================================================================
   About Us (2525) — measured from the source container tree, not the render.
   The page is built almost entirely out of 1px rules and rounded panels, none
   of which a geometry diff can see.
   =========================================================================== */

/* --- Ruled split: head, then two columns under a rule, divided by a rule ---
   Source: head container, 60px gap, then a grid with border-top; the left
   column pads 50/60/0/0 and the right 45/0/0/60 with a border-left. The rule
   reads as one continuous line because the column gap is 0. */
.bx-split--ruled {
  column-gap: 0;
  row-gap: 60px;
  align-items: stretch;
}
.bx-split--ruled .bx-split__media,
.bx-split--ruled .bx-split__body {
  border-block-start: 1px solid var(--c-border);
}
.bx-split--ruled .bx-split__media { padding: 50px 60px 0 0; }
.bx-split--ruled .bx-split__body {
  padding: 45px 0 0 60px;
  border-inline-start: 1px solid var(--c-border);
  gap: 30px;
  justify-content: space-between;
}

/* The pillar lists sit under a third rule, in a row rather than a 2-up grid. */
.bx-split--ruled .bx-pillars {
  display: flex;
  flex-direction: row;
  gap: 60px;
  padding-block-start: 30px;
  border-block-start: 1px solid var(--c-border);
}

/* Awards variant: narrow image column. */
.bx-split--aside { grid-template-columns: 0.35fr 0.75fr; }
.bx-split--aside .bx-split__body { gap: 35px; }
.bx-split--aside .bx-split__img { border-radius: 20px; }

@media (max-width: 1024px) {
  .bx-split--ruled { row-gap: 60px; }
  .bx-split--ruled .bx-split__media { padding: 50px 30px 0 0; }
  .bx-split--ruled .bx-split__body { padding: 40px 0 0 30px; }
  .bx-split--ruled .bx-pillars { gap: 10px; }
}

@media (max-width: 767px) {
  .bx-split--ruled,
  .bx-split--aside { grid-template-columns: 1fr; row-gap: 30px; }
  .bx-split--ruled .bx-split__media { padding: 30px 0 0; }
  .bx-split--ruled .bx-split__body {
    padding: 30px 0 0;
    border-inline-start: 0;
    gap: 20px;
  }
  .bx-split--aside .bx-split__media { padding: 0; }
  .bx-split--aside .bx-split__body { padding-block-start: 20px; gap: 20px; }
  .bx-split--ruled .bx-pillars { flex-direction: column; gap: 0; }
}

/* Eyebrow placement in its column varies per section. Our Team is flex-end on
   all three heads (the default); About Us centres most and tops the "Why Choose
   us" one with 40px of padding. The Elementor JSON says `justify center` on both
   pages, but the rendered original computes flex-end on Our Team — measured, not
   inferred. */
.bx-sechead--eyebrow-mid .bx-sechead__aside { justify-content: center; }
.bx-sechead--eyebrow-top .bx-sechead__aside {
  justify-content: flex-start;
  padding-block-start: 40px;
}
@media (max-width: 767px) {
  .bx-sechead--eyebrow-top .bx-sechead__aside { padding-block-start: 0; }
}

/* --- "Why Choose us": a full-bleed cream panel, not a band ---
   bg #F9F6F1 with a 30px radius (23 tablet, 15 mobile), and the four values are
   grid cells divided by 1px rules under a 1px rule — not white cards. Measured
   on the original: panel 1920 wide radius 30, grid 1290x443 with border-top,
   cells 323x442 with border-right and 50/40 padding, no background, no radius. */
.bx-section--cream { border-radius: 30px; }

.bx-why__grid {
  gap: 0;
  border-block-start: 1px solid var(--c-border);
}
.bx-why__card {
  background: none;
  border-radius: 0;
  border-inline-end: 1px solid var(--c-border);
  padding: 50px 40px;
}

@media (max-width: 1024px) {
  .bx-section--cream { border-radius: 23px; }
  .bx-why__card { padding: 20px; }
}
@media (max-width: 767px) {
  .bx-section--cream { border-radius: 15px; }
  .bx-why__card {
    padding: 20px 0;
    border-inline-end: 0;
    border-block-end: 1px solid var(--c-border);
  }
}

/* The icon-box icon had no spacing rule of its own. Elementor's `icon_space`
   sets the gap below it, and the why cells use a generous 70px (30 on mobile). */
.bx-icon-box__icon {
  display: block;
  margin-block-end: var(--ib-icon-gap, 20px);
}

/* Why cell type: 30/34 at 700 with -0.9px tracking, not 20/26. */
.bx-why__card {
  --ib-icon-gap: 70px;
  --ib-icon-size: 50px;
  --ib-title-size: 30px;
  --ib-title-lh: 34px;
  --ib-desc-size: 18px;
}
.bx-why__card .bx-icon-box__title { letter-spacing: -.9px; }

@media (max-width: 767px) {
  .bx-why__card { --ib-icon-gap: 30px; }
  .bx-why__card .bx-icon-box__title { letter-spacing: 0; }
}

/* The icon sizes off its own font-size (.bx-icon is 1em square), so the icon-box
   needs a size hook. The why cells use a 50px mark. */
.bx-icon-box__icon {
  font-size: var(--ib-icon-size, 18px);
  line-height: 1;
  color: var(--ib-icon-color, var(--c-primary));
}

/* --- Counters ---
   The number is a 140/98 watermark in rgba(40,39,69,.1) — Elementor's
   `number_color: #2827451A` — with the title pill sitting 63px up over it. Mine
   was a solid dark 90px, which a geometry diff only showed as a 31px shift.
   Driven by variables because front-page.php and the testimonial block reuse
   this component at other sizes. */
.bx-counter__number {
  font-size: var(--counter-size, 90px);
  line-height: var(--counter-lh, 1);
  color: var(--counter-color, inherit);
}
.bx-counter__title {
  top: var(--counter-title-y, -24px);
  line-height: var(--counter-title-lh, 26px);
}

.bx-counters {
  --counter-size: 140px;
  --counter-lh: 98px;
  --counter-color: rgba(40, 39, 69, .1);
  --counter-title-y: -63px;
  --counter-title-lh: 22px;
}
/* Shrinks to its content and centres in the grid column, 266 of 300. */
.bx-counters .bx-counter {
  width: fit-content;
  margin-inline: auto;
}
.bx-counters .bx-counter__title { text-transform: capitalize; }

@media (max-width: 1024px) {
  .bx-counters { --counter-size: 120px; --counter-lh: 84px; }
}
@media (max-width: 767px) {
  .bx-counters { --counter-size: 100px; --counter-lh: 70px; }
}

/* --- Awards ---
   Year chip is 160px wide (80 at tablet) in #888888 at 16/16, not 110px. */
.bx-awards__year {
  flex: 0 0 160px;
  color: var(--c-text-muted);
  font-size: 16px;
  line-height: 16px;
}
@media (max-width: 1024px) {
  .bx-awards__year { flex-basis: 80px; }
}

/* Section-head heading width varies: 653px on Our Team and the homepage, 600px
   on the About Us awards and testimonial heads. */
.bx-sechead__main > .bx-sechead__title { width: var(--sechead-title-w, 653px); }
.bx-split--aside .bx-sechead,
.bx-tsection .bx-sechead { --sechead-title-w: 600px; }

/* The "Why Choose us" heading is 528px, which wraps it to four lines rather
   than three — the single cause of the 70px that every section below it was
   riding too high. */
.bx-why .bx-sechead { --sechead-title-w: 528px; }

/* The why panel's inner gap is 60, not 40, and the closing line is a bordered
   pill — 1px, 40px radius, 3px/20px padding, shrink-to-fit and centred — with
   its second line a link. The original points that link at "#". */
.bx-why { gap: 60px; }
.bx-why__foot {
  width: fit-content;
  margin-inline: auto;
  padding: 3px 20px;
  border: 1px solid var(--c-border);
  border-radius: 40px;
  text-align: center;
}
.bx-why__foot a { text-decoration: underline; }

@media (max-width: 767px) {
  .bx-why { gap: 30px; }
  .bx-why__foot { margin-block-start: 20px; }
}

/* ===========================================================================
   Testimonials — one cream panel in two blocks, from the reference.
   Top block: radius 20px on the top corners only, pad 80/0/80/60.
   Bottom block: radius 30px on the bottom corners, 1px rule above, pad 60/0.
   =========================================================================== */
.bx-tsection { padding-block: 0 120px; }

.bx-tsection--panel .bx-tsection__panel,
.bx-tsection--panel .bx-tsection__brands { background: var(--c-bg-lite); }

.bx-tsection--panel .bx-tsection__panel {
  border-radius: 20px 20px 0 0;
  padding: 80px 0 80px 60px;
}
.bx-tsection--panel .bx-tsection__brands {
  border-radius: 0 0 30px 30px;
  border-block-start: 1px solid var(--c-border);
  padding-block: 60px;
}

/* Narrow copy column, carousel on the right; Home mirrors it. */
.bx-tsection__grid {
  display: grid;
  grid-template-columns: 0.33fr 0.67fr;
  gap: 0;
  align-items: start;
}
.bx-tsection--mirror .bx-tsection__grid { grid-template-columns: 0.67fr 0.33fr; }
.bx-tsection--mirror .bx-tsection__head { order: 2; }

.bx-tsection__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.bx-tsection__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: -2px;
}
.bx-tsection__proof {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.bx-tsection__group { width: 185px; height: auto; }
.bx-tsection__note { width: 276px; max-width: 100%; }

.bx-tsection__slider { padding-inline-start: 60px; }
.bx-tsection--mirror .bx-tsection__slider { padding-inline: 0 60px; }

/* The counter here is 38/44, not the watermark used on the stats row. */
.bx-tsection__counter {
  --counter-size: 38px;
  --counter-lh: 44px;
  --counter-color: inherit;
}
.bx-tsection__counter .bx-counter__title { display: none; }
.bx-tsection__counter .bx-counter__number sup { color: var(--c-primary); }

/* Quote cards: white, 50px padding, 20px radius, equal height. */
.bx-tsection .bx-testimonial {
  padding: 50px;
  border-radius: 20px;
  background: var(--c-white);
  justify-content: space-between;
  min-height: 100%;
}

/* Brand strip: five across on desktop, three on tablet, two on mobile. */
.bx-carousel--brands { --peek: 5; }
.bx-tsection__brand {
  width: auto;
  max-width: 100%;
  height: 46px;
  object-fit: contain;
}

@media (max-width: 1024px) {
  .bx-tsection { padding-block: 0 80px; }
  .bx-tsection .bx-testimonial { padding: 20px; }
  .bx-tsection--panel .bx-tsection__brands { border-radius: 0 0 20px 20px; }
  .bx-carousel--brands { --peek: 3; }
}

@media (max-width: 767px) {
  .bx-tsection { padding-block: 0 60px; }
  .bx-tsection--panel .bx-tsection__panel { padding: 60px 15px; }
  .bx-tsection__grid,
  .bx-tsection--mirror .bx-tsection__grid { grid-template-columns: 1fr; gap: 35px; }
  .bx-tsection--mirror .bx-tsection__head { order: 0; }
  .bx-tsection__slider,
  .bx-tsection--mirror .bx-tsection__slider { padding-inline: 0; }
  .bx-tsection--panel .bx-tsection__brands { padding-block: 30px 60px; }
  .bx-tsection .bx-testimonial { border-radius: 13px; }
  .bx-carousel--brands { --peek: 2; }
}

/* Brand strip has no navigation and no gap in the reference: the 1290px row is
   divided into five 258px slides with the logo 38px tall and centred. */
.bx-carousel--brands .bx-carousel__track {
  gap: 0;
  padding-block-end: 0;
}
.bx-carousel--brands .bx-carousel__slide {
  flex: 0 0 calc(100% / var(--peek));
  display: flex;
  align-items: center;
  justify-content: center;
}
.bx-tsection__brand { height: 38px; }

/* Quote type is Nyght Serif 22/32 at 400 (19/28 mobile), not 18/28.
   Note: the archived baseline renders this carousel un-initialised at full
   width, because it is an Elementor Pro nested-carousel and Pro's JS is not in
   the replay. `slides_to_show: 2` from the source is the authored design and
   what the live site shows, so the drift profile carries a fixed offset here. */
.bx-tsection .bx-testimonial__quote {
  font-family: var(--ff-accent);
  font-size: 22px;
  line-height: 32px;
  font-weight: 400;
}
.bx-carousel--brands .bx-carousel__slide { height: 46px; }

@media (max-width: 767px) {
  .bx-tsection .bx-testimonial__quote { font-size: 19px; line-height: 28px; }
}

/* Quote card internals: 20px card gap, 50px under the quote, and the
   attribution sits under a 1px rule with 40px of space above it. */
.bx-tsection .bx-testimonial { gap: 20px; }
.bx-tsection .bx-testimonial__quote { padding-block-end: 50px; }
.bx-tsection .bx-testimonial__by {
  padding-block-start: 40px;
  border-block-start: 1px solid var(--c-border);
}

/* The heading fits its 406px column because "genius people" is set in the
   italic Nyght accent face, which is far narrower than the bold sans. */

/* minmax(0, …) so the over-wide heading overflows its column instead of
   stretching the track and pushing the carousel across. */
.bx-tsection__grid { grid-template-columns: minmax(0, 0.33fr) minmax(0, 0.67fr); }
.bx-tsection--mirror .bx-tsection__grid { grid-template-columns: minmax(0, 0.67fr) minmax(0, 0.33fr); }

/* The pillar lists stay a two-up row on mobile — the source sets `dir: row`
   with no mobile override and only drops the gap to 0. */
@media (max-width: 767px) {
  .bx-split--ruled .bx-pillars { flex-direction: row; gap: 0; }
}

/* Award titles are 22/30 at 700. */
.bx-awards__title { font-size: 22px; line-height: 30px; }

/* Attribution: name 18/26 at 400, stars 18px in #F7C400. The theme had the
   name bold and the stars in the tan primary. */
.bx-tsection .bx-testimonial__name {
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
}
.bx-tsection .bx-testimonial__stars {
  font-size: 18px;
  color: #F7C400;
}

/* About Us mobile corrections, measured against the reference at 767.
   The awards grid collapses to one content-sized column of 575px (Elementor's
   invalid `grid-template-columns: 1` again), so the portrait renders 575x789
   with a 15px radius rather than filling the 713px container. */
@media (max-width: 767px) {
  /* About Us awards only — Home's About block uses the same modifier but
     runs full width at this breakpoint. */
  .bx-split--awards { grid-template-columns: minmax(0, 575px); }
  .bx-split--awards .bx-split__img { border-radius: 15px; }

  /* Measured on the reference: title 53px up, block 98 = number 70 + title 28. */
  .bx-counters { --counter-title-y: -53px; }
}

/* The suffix must not grow the number's line box — the reference's number
   wrapper is a flex row, so its 70px line-height holds. Mine was 86. */
.bx-counter__number sup { line-height: 0; }

/* ===========================================================================
   Home (24) — measured from the source container tree.
   =========================================================================== */

/* Hero: 20px between the title and the consult box; the h1 is 707px wide. */
.bx-home-hero__inner { gap: 20px; }
.bx-home-hero__title { width: 707px; max-width: 100%; }

/* "Book Consult" is a 150px bordered box with a 33px mark above the label. */
.bx-home-hero__consult {
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  width: 150px;
  padding: 20px 10px;
  border-radius: 20px;
  text-align: center;
}
.bx-home-hero__consult .bx-icon { font-size: 33px; }

/* The proof bar runs the full 96% of the viewport — 1843 at 1920 — not the
   1290 content container, and spreads its three items. */
.bx-home-hero__proof {
  width: 96%;
  max-width: none;
  justify-content: space-between;
  gap: 20px;
  padding-block: 25px;
  border-block-start: 1px solid #82819759;
}
.bx-home-hero__note { font-size: 18px; }

/* The consult box is taken out of flow in the reference: the title block stays
   270 + 53 = 323 tall and the box sits at its right edge, 215px down, overlapping
   the last line of the heading. */
.bx-home-hero__inner { position: relative; }
.bx-home-hero__consult {
  position: absolute;
  right: 0;
  top: 200px;
}

/* Home's About block is the same ruled split; its card carries a 20px radius. */
.bx-split--aside .bx-tcard__media { border-radius: 20px; }

/* Service cards carry their own photo under a #383759 wash, with a 50px inner
   (32 tablet, 30/15 mobile) and a 38/44 title at -2px tracking. The theme had
   flat navy cards with 24px titles. */
.bx-svccard {
  position: relative;
  border-radius: 20px;
  background-image: var(--svccard-bg, none);
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.bx-svccard__inner {
  position: relative;
  justify-content: space-between;
  padding: 50px;
  border-radius: 20px;
  background: #383759C7;
}
.bx-svccard__title {
  font-size: 38px;
  line-height: 44px;
  letter-spacing: -2px;
}
.bx-svccard__copy {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #F9F6F1;
}

@media (max-width: 1024px) { .bx-svccard__inner { padding: 32px; } }
@media (max-width: 767px)  { .bx-svccard__inner { padding: 30px 15px; } }

/* Home services: the lede sits in its own row under a 1px #E2E2E22E rule with
   60px above it, right-aligned in the 0.75fr column at 511px / 22px. */
.bx-home-services__note {
  padding-block-start: 60px;
  border-block-start: 1px solid #E2E2E22E;
}
.bx-home-services__note .bx-sechead__main {
  align-items: flex-end;
  padding-inline-start: 25px;
}
.bx-home-services__note p {
  width: 511px;
  max-width: 100%;
  font-size: 22px;
  line-height: 32px;
}
@media (max-width: 1024px) { .bx-home-services__note { padding-block-start: 40px; } }
@media (max-width: 767px)  { .bx-home-services__note { padding-block-start: 30px; } }

/* Home values: the ruled split runs the other way — a 0.75fr list beside a
   0.35fr aside — and the list itself is Elementor's default three columns with
   a rule under each item in the first row. */
.bx-values { grid-template-columns: 0.75fr 0.35fr; }
.bx-values .bx-values__list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 35px;
  row-gap: 50px;
  padding: 60px 60px 0 0;
  border-block-start: 1px solid var(--c-border);
}
.bx-values .bx-values__item {
  gap: 10px;
  padding-block-end: 45px;
}
.bx-values .bx-values__item:nth-child(-n+3) {
  border-block-end: 1px solid var(--c-border);
}
.bx-values .bx-values__aside {
  gap: 35px;
  justify-content: space-between;
  padding: 45px 0 0 60px;
  border-block-start: 1px solid var(--c-border);
  border-inline-start: 1px solid var(--c-border);
}

@media (max-width: 1024px) {
  .bx-values .bx-values__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
    row-gap: 30px;
    padding-inline-end: 30px;
  }
  .bx-values .bx-values__item:nth-child(4) { border-block-end: 1px solid var(--c-border); }
  .bx-values .bx-values__aside { padding: 60px 0 0 30px; }
}
@media (max-width: 767px) {
  .bx-values,
  .bx-values .bx-values__list { grid-template-columns: 1fr; }
  .bx-values .bx-values__list { gap: 0; padding: 0; }
  .bx-values .bx-values__item { padding-block: 30px 40px; }
  .bx-values .bx-values__item:nth-child(5) { border-block-end: 1px solid var(--c-border); }
  .bx-values .bx-values__aside {
    gap: 20px;
    padding: 9px 0 0;
    border-inline-start: 0;
  }
}

/* Homepage partner logos: Elementor justified gallery, five 89x88 marks 40px
   apart, left-aligned, 30px below the button. The washed-out look is the
   widget's own CSS filters (brightness 174%, contrast 35%, saturate 21%). */
.bx-partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
  padding-block-start: 30px;
  width: 100%;
}
.bx-partners__item {
  width: 89px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bx-partners__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(174%) contrast(35%) saturate(21%);
}

@media (max-width: 1024px) {
  .bx-partners__item { width: 80px; height: 80px; }
}
@media (max-width: 767px) {
  .bx-partners { gap: 20px; }
  .bx-partners__item { width: 60px; height: 60px; }
}

/* Service card badge: 92x92 framed square, 20px radius, #37375078 on a
   rgba(255,255,255,.2) hairline, holding a 45px glyph. The card's icon-to-text
   gap is 104px and the title sits 16px above the copy. */
/* Inner gap is 0: the 104 sits between the badge and the text block, 16
   between title and copy, and 45 before the button. */
.bx-svccard__inner { gap: 0; }
.bx-svccard__icon { margin-block-end: 104px; }
.bx-svccard__copy { margin-block-end: 45px; }
.bx-svccard__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  padding: 22.5px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 20px;
  background: #37375078;
  flex: none;
}
.bx-svccard__icon img {
  width: 45px;
  height: 45px;
  object-fit: contain;
}
.bx-svccard__title { margin-block-end: 16px; }

/* Outcomes are a single-column list of full-width rows in the reference, not a
   two-up grid: each row is 1290x670 with 10px padding, split 0.35fr / 0.65fr,
   the copy column padded 50 and the media 650 tall. Rows sit 20px apart. */
.bx-outcomes__grid {
  grid-template-columns: 1fr;
  gap: 20px;
}
.bx-outcome {
  grid-template-columns: 0.35fr 0.65fr;
  gap: 0;
}
.bx-outcome__body { padding: 50px; }
.bx-outcome__img { min-height: 650px; }
.bx-outcomes .bx-tag { font-size: 16px; }

@media (max-width: 767px) {
  .bx-outcome { grid-template-columns: 1fr; }
  .bx-outcome__body { padding: 30px; }
  .bx-outcome__img { min-height: 320px; }
}

/* The services head grid carries 20px of bottom padding before the lede row. */
#advisory-lines .bx-sechead:not(.bx-home-services__note) { padding-block-end: 20px; }

/* The photo is there, but Elementor paints a SOLID #383759 over it at rest and
   fades that overlay to 0.83 on hover over 0.5s — so the card reads flat until
   you point at it and the venue shows through. */
.bx-svccard { overflow: hidden; }
.bx-svccard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #383759;
  transition: opacity .5s var(--ease);
}
.bx-svccard:hover::before { opacity: .83; }
.bx-svccard__inner { background: none; }

/* "Learn More" is transparent with no border and no left padding — white text
   with a circular outlined arrow beside it. */
#advisory-lines .bx-svccard .bx-btn {
  background: none;
  border: 0;
  padding: 15px 30px 15px 0;
  color: var(--c-on-dark);
}
#advisory-lines .bx-svccard .bx-btn .bx-icon {
  width: 44px;
  height: 44px;
  padding: 12px;
  border: 1px solid var(--c-rule-on-dark);
  border-radius: 50%;
  box-sizing: border-box;
}

/* The carousel arrows sit above the cards, at the left of the lede row. */
#advisory-lines .bx-carousel { position: relative; }
#advisory-lines .bx-carousel__nav {
  position: absolute;
  top: -157px;
  left: 0;
  margin: 0;
}

/* The fill is drawn by .bx-btn::before, so it has to go too. */
#advisory-lines .bx-svccard .bx-btn::before { content: none; }

/* Home team carousel: fixed 552px cards with a 60px gap on an overflowing
   track — the reference shows two full cards and a sliver of the third, with
   the portrait at a 15px radius. */
.bx-home-team .bx-carousel__track { gap: 60px; }
.bx-home-team .bx-carousel__slide { flex: 0 0 552px; }
.bx-home-team .bx-tcard__media { border-radius: 15px; }

@media (max-width: 1024px) {
  .bx-home-team .bx-carousel__slide { flex-basis: 60%; }
  .bx-home-team .bx-carousel__track { gap: 30px; }
}
@media (max-width: 767px) {
  .bx-home-team .bx-carousel__slide { flex-basis: 100%; }
}

/* ---------------------------------------------------------------------------
   Home reviews ('plain' variant) are nothing like the About Us panel: one
   full-width slide per view holding a 50/60 display quote 849px wide, with a
   small bordered attribution chip under it. Measured on the live reference:
   slide 1290x590, quote 849x434, chip 235x76 with 7px padding and a 1px rule.
   --------------------------------------------------------------------------- */


/* On Home the head sits above a full-width carousel rather than beside it. */


/* Attribution avatar is 60px in the Home chip. */


/* About Us runs this section flush to the awards block above it; Home pads it
   top and bottom like any other section. */


/* The services section stacks head / lede / carousel with a 40px gap. */
.bx-home-services { display: flex; flex-direction: column; gap: 40px; }
@media (max-width: 767px) { .bx-home-services { gap: 30px; } }

/* ---------------------------------------------------------------------------
   Home — tablet and mobile, measured on the live reference.
   --------------------------------------------------------------------------- */

/* The hero shrinks: 880 desktop, 700 tablet, 480 mobile. */
@media (max-width: 1024px) { .bx-home-hero { min-height: 700px; } }
@media (max-width: 767px)  { .bx-home-hero { min-height: 480px; border-radius: 0 0 14px 14px; } }

@media (max-width: 1024px) {
  /* Outcome rows go to equal halves with a 14px radius and a 30px inset. */
  .bx-outcome {
    grid-template-columns: 1fr 1fr;
    border-radius: 14px;
  }
  .bx-outcome__body { padding: 30px; }
  .bx-outcome__img { min-height: 520px; }

  /* Team cards drop to 286px. */
  .bx-home-team .bx-carousel__slide { flex-basis: 286px; }
}

@media (max-width: 767px) {
  /* Outcome rows stack with the media on top: row 713x694, media 350 tall,
     copy padded 20/15/30/15. Re-asserted after the tablet two-up rule. */
  .bx-outcome { grid-template-columns: 1fr; }
  .bx-outcome__media { order: -1; }
  .bx-outcome__img { min-height: 350px; }
  .bx-outcome__body { padding: 20px 15px 30px; }
}

/* The values aside drops its image on mobile — the reference keeps only the
   counter, its label and the button (177 tall, against 997 with the image). */
@media (max-width: 767px) {
  .bx-values__aside .bx-values__img { display: none; }
}

/* Home's About portrait is cropped to 480px tall on mobile rather than running
   to its natural 979. */
@media (max-width: 767px) {
  #about .bx-tcard__media { height: 480px; }
  #about .bx-tcard__img { height: 100%; object-fit: cover; }
}

/* ---------------------------------------------------------------------------
   Interactions the reference has and the theme was missing.
   --------------------------------------------------------------------------- */

/* The four outcome rows are sticky at a 60px offset so each one parks under the
   header while the next scrolls up and covers it — the reference's card stack.
   The list has to be block flow for this: as grid items the rows are trapped in
   their own grid area, which is exactly their own height, so they never move.
   The 20px that was the grid gap becomes a bottom margin. Desktop only, matching
   Elementor's sticky_on: [widescreen, desktop]. */
@media (min-width: 1025px) {
  .bx-outcomes__grid { display: block; }
  .bx-outcome {
    position: sticky;
    top: 60px;
    margin-block-end: 20px;
  }
  .bx-outcome:last-child { margin-block-end: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bx-outcome { position: static; }
}

/* The hero's drifting consult box keeps its absolute placement. */
.bx-home-hero__consult { transform: translateX(var(--drift-x, 0px)); }

/* About Us hero carries the same drifting wordmark as Our Team, sitting 6px
   from the bottom instead of 13. */
.bx-tophero__mark--low { bottom: 6px; }

/* ---------------------------------------------------------------------------
   Contact — measured on the live reference.
   The two columns sit under a 1px rule in a 0.55fr / 0.45fr grid with no gap,
   each carrying its own inset: 53px for the locations, 60px for the form.
   --------------------------------------------------------------------------- */
.bx-contact__layout {
  grid-template-columns: 0.55fr 0.45fr;
  gap: 0;
  border-block-start: 1px solid var(--c-border);
}
.bx-contact__locations { padding: 53px; }
.bx-contact__form { padding: 60px; }

@media (max-width: 1024px) {
  .bx-contact__locations { padding: 40px 30px; }
  .bx-contact__form { padding: 40px 30px; }
}
@media (max-width: 767px) {
  .bx-contact__layout { grid-template-columns: 1fr; }
  .bx-contact__locations,
  .bx-contact__form { padding: 30px 0; }
}

/* ---------------------------------------------------------------------------
   Services hub — measured on the live reference.
   Outer grid is 0.36fr / 0.64fr with no gap (464.5 / 825.75 of 1290), and each
   service block splits into equal halves with the numbered list inset 60px.
   --------------------------------------------------------------------------- */
.bx-svcpage {
  grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr);
  gap: 0;
}
.bx-svcblock__cols {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
}
.bx-svcblock__cols > :nth-child(2) { padding-block-start: 60px; }

@media (max-width: 1024px) {
  .bx-svcpage { grid-template-columns: 1fr; gap: 40px; }
  .bx-svcblock__cols > :nth-child(2) { padding-block-start: 30px; }
}

/* Service list rows are 15px/10px padded with no left inset — 61 tall, not 51. */
.bx-svcblock__row { padding: 15px 10px 15px 0; }

/* Row labels are 22px and shrink to their text; the arrow sits at the row's
   right edge rather than being pushed by a stretched label. */
.bx-svcblock__label {
  flex: 0 1 auto;
  font-size: 22px;
}
.bx-svcblock__row { justify-content: flex-start; gap: 10px; }
.bx-svcblock__row .bx-icon { margin-inline-start: auto; }

/* ---------------------------------------------------------------------------
   Service detail — measured on the live reference.
   The layout runs wider than the 1344 content cap: 1814 at x=53 on a 1920
   viewport, holding a 405 / 950 / 405 three-column grid with no gap.
   --------------------------------------------------------------------------- */
/* 1760 of 1920: the 1814 outer at 94.5% with Elementor's 97% inner. */
.bx-service__layout {
  max-width: none;
  width: 91.67%;
  grid-template-columns: minmax(0, 0.23fr) minmax(0, 0.54fr) minmax(0, 0.23fr);
  gap: 0;
}

@media (max-width: 1024px) {
  .bx-service__layout { width: var(--container-inner); max-width: calc(var(--container-max) * var(--container-ratio)); }
}

/* ---------------------------------------------------------------------------
   Home hero — corrected against the live reference.
   --------------------------------------------------------------------------- */

/* "Book Consult" is a 150x146 circle with the label on two lines, not a
   rounded square. */
.bx-home-hero__consult {
  width: 150px;
  height: 146px;
  padding: 0;
  border-radius: 50%;
  gap: 6px;
}
.bx-home-hero__consult > span {
  max-width: 76px;
  line-height: 22px;
}

/* The proof-bar links are plain 16/22 text at 50% white with an arrow — no
   fill, no border, no padding. The fill came from .bx-btn::before. */
.bx-home-hero__proof .bx-btn {
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .5);
  font-size: 16px;
  line-height: 22px;
  gap: 10px;
}
.bx-home-hero__proof .bx-btn::before { content: none; }
.bx-home-hero__proof .bx-btn:hover { color: var(--c-white); }

/* The proof bar's centre note occupies a 40px line box, which makes the bar 91
   tall and — because the hero is bottom-aligned — puts the title block at the
   reference's y. */
.bx-home-hero__note { line-height: 40px; }

/* ---------------------------------------------------------------------------
   Home closing CTA — corrected against the live reference.
   --------------------------------------------------------------------------- */

/* Heading is 70px with the accent on its own line. */
.bx-homecta__text .bx-icon-box__title {
  font-size: 70px;
  line-height: 70px;
  letter-spacing: -2px;
}

/* The cut-out portrait sits behind the form, anchored to the panel's bottom. */
.bx-homecta { position: relative; }
.bx-homecta__figure {
  position: absolute;
  inset-block-end: 0;
  /* Centred on the panel — the reference sits it at 54.2% of the panel width,
     straddling the gap between the copy and the form, with the head overhanging
     the top edge by 64px. */
  inset-inline-start: 44%;
  transform: translateX(-50%);
  /* The reference let the stock cut-out overhang the panel top by 64px. Ryan's
     portrait is framed tighter, so the same overhang sliced his head off: it is
     anchored to the panel instead. */
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.bx-homecta__img {
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: bottom;
}
.bx-homecta__form { position: relative; z-index: 1; }

/* Phone block: a filled circular mark beside the label and number. */
.bx-homecta__phone {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 20px;
}
.bx-homecta__phone-icon {
  grid-row: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--c-primary);
  color: var(--c-white);
  font-size: 22px;
}

@media (max-width: 1024px) {
  .bx-homecta__text .bx-icon-box__title { font-size: 52px; line-height: 52px; }
  .bx-homecta__figure { display: none; }
}
@media (max-width: 767px) {
  .bx-homecta__text .bx-icon-box__title { font-size: 40px; line-height: 40px; }
}

/* The closing CTA's form uses pill fields with the label carried by the
   placeholder, as the reference does. Labels stay in the DOM for screen
   readers rather than being removed. The consent row is exempt: its label is
   the consent wording itself and has to be read by the person ticking it. */
.bx-homecta__form .bx-form__field:not(.bx-form__consent) > label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.bx-homecta__form input,
.bx-homecta__form select { border-radius: 50px; }
.bx-homecta__form textarea { border-radius: 25px; }

/* CTA fields: 59 tall, 26px radius, 7/20 padding, 20px gaps — measured on the
   live reference. The panel itself carries a 30px radius. */
.bx-homecta { border-radius: 30px; }
.bx-homecta__form input,
.bx-homecta__form select,
.bx-homecta__form textarea {
  min-height: 59px;
  padding: 7px 20px;
  border-radius: 26px;
}
.bx-homecta__form textarea { min-height: 140px; }
.bx-homecta__form .bx-form__grid { gap: 20px; }
.bx-homecta__form .bx-form { gap: 20px; }

/* --- Home values, measured against the live reference ----------------------
   The aside is a counter, an out-of-flow statue and a ghost button; the number
   is 100px tan with the plus at full size, and the caption is plain bold black,
   not the bordered pill the other counters use. The statue hangs out of its
   column: 546px wide inside a 411px box, pinned 176px below the rule, which is
   also what sets the aside's height. */
.bx-values .bx-tag {
  gap: 4px;
  padding: 4px 20px;
  border-radius: 24px;
  background: var(--c-white);
  font-size: 16px;
  line-height: 23px;
}
.bx-values .bx-tag__num { color: var(--c-primary); }

.bx-values__aside .bx-counter {
  --counter-size: 100px;
  --counter-lh: 100px;
  --counter-color: var(--c-primary);
}
.bx-values__aside .bx-counter__number sup {
  font-size: 1em;
  line-height: inherit;
  vertical-align: baseline;
}
.bx-values__aside .bx-counter__title {
  position: static;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  font-weight: var(--fw-bold);
  line-height: 16px;
  color: var(--c-black);
}

@media (min-width: 1025px) {
  .bx-values .bx-values__aside { position: relative; min-height: 769px; }
  .bx-values__aside .bx-values__img {
    position: absolute;
    top: 176px;
    left: 0;
    width: 133%;
    max-width: none;
    height: auto;
    border-radius: 0;
  }
}

/* Variant: ghost — white pill, hairline border, black label, tan arrow. The
   tan layer is collapsed at rest and grows behind the arrow on hover. */
.bx-btn--light {
  --btn-fg: var(--c-black);
  --btn-fg-hover: var(--c-black);
  --btn-border: var(--c-border);
  --btn-pad: 14px 30px;

  gap: 26px;
  background: var(--c-white);
}
.bx-btn--light::before { width: 0; }
.bx-btn--light:hover::before { width: 50px; }
.bx-btn--light .bx-btn__icon { color: var(--c-primary); }
.bx-btn--light:hover .bx-btn__icon { color: var(--c-white); }

/* ---------------------------------------------------------------------------
   Home — reviews, measured on the live reference.

   A full-bleed photo under a 15% black wash, the eyebrow and the two carousel
   arrows on one row, then a hairline rule and a one-slide-at-a-time carousel.
   The quote is the upright cut of Nyght at 50/60 capped at 849px; the author
   sits in a translucent pill. Elementor numbers: section padding 120/80/60,
   stack gap 50/40/30, rule + 50px (40/30) above the slides, arrows 49px circles
   pinned 93px (80/65) above the slide top at the right edge.
   --------------------------------------------------------------------------- */
.bx-reviews {
  position: relative;
  isolation: isolate;
  padding-block: 120px;
  background-image: var(--reviews-bg);
  background-position: center center;
  background-size: cover;
}
.bx-reviews::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #000;
  opacity: .15;
}
.bx-reviews__inner {
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.bx-reviews__eyebrow { color: var(--c-white); }

.bx-reviews__slider {
  position: relative;
  padding-block-start: 50px;
  border-block-start: 1px solid rgba(226, 226, 226, .58);
}

/* One slide per view; the track gap is Elementor's 10px here, not the site 30. */
.bx-reviews .bx-carousel__track { gap: 10px; }
.bx-reviews .bx-carousel__slide { flex: 0 0 100%; }

/* Arrows leave the flow and sit on the eyebrow row, hard right. */
.bx-reviews .bx-carousel__nav {
  position: absolute;
  inset-block-start: -93px;
  inset-inline-end: 0;
  margin-block-start: 0;
  gap: 31px;
}
.bx-reviews .bx-carousel__arrow {
  width: 49px;
  height: 49px;
  padding: 11px;
  border-color: var(--c-white);
  color: #e2e2e2;
}
.bx-reviews .bx-carousel__arrow:hover:not(:disabled) {
  background: none;
  border-color: var(--c-primary);
  color: var(--c-primary);
}
/* Looping, so neither arrow is ever a dead end. */
.bx-reviews .bx-carousel__arrow:disabled { opacity: 1; cursor: pointer; }

.bx-testimonial--over {
  gap: 20px;
  height: auto;
  min-height: 0;
  align-items: flex-start;
  padding: 0;
  border-radius: 0;
  background: none;
}
.bx-testimonial--over .bx-testimonial__quote {
  width: 849px;
  max-width: 100%;
  flex: 0 0 auto;
  font-family: var(--ff-accent);
  font-style: normal;
  font-size: 50px;
  font-weight: 400;
  line-height: 60px;
  color: var(--c-white);
}
.bx-testimonial--over .bx-testimonial__by {
  width: fit-content;
  padding: 7px;
  gap: 8px;
  border: 1px solid rgba(226, 226, 226, .33);
  border-radius: 49px;
  background: rgba(88, 88, 88, .4);
}
.bx-testimonial--over .bx-testimonial__avatar { width: 60px; height: 60px; }
.bx-testimonial--over .bx-testimonial__meta { gap: 1px; }
.bx-testimonial--over .bx-testimonial__name {
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
  color: var(--c-white);
}
.bx-testimonial--over .bx-testimonial__stars {
  font-size: 18px;
  line-height: 26px;
  color: #f7c400;
}

@media (max-width: 1024px) {
  .bx-reviews { padding-block: 80px; }
  .bx-reviews__inner { gap: 40px; }
  .bx-reviews__slider { padding-block-start: 40px; }
  .bx-reviews .bx-carousel__nav { inset-block-start: -80px; }
  .bx-testimonial--over .bx-testimonial__quote { width: 100%; font-size: 36px; line-height: 44px; }
}
@media (max-width: 767px) {
  .bx-reviews { padding-block: 60px; }
  .bx-reviews__inner { gap: 30px; }
  .bx-reviews__slider { padding-block-start: 30px; }
  .bx-reviews .bx-carousel__nav { inset-block-start: -65px; }
  .bx-testimonial--over .bx-testimonial__quote { font-size: 24px; line-height: 34px; }
  .bx-testimonial--over .bx-testimonial__by { width: 100%; border-radius: 35px; }
}

/* The advisory-lines block is not flat navy: a diagonal-stripe photo sits under
   a 96% #282745 wash, which reads as a faint texture. The card arrow is tan,
   not white. */
#advisory-lines {
  position: relative;
  isolation: isolate;
  background-image: var(--svcsection-bg, none);
  background-position: center center;
  background-size: cover;
}
#advisory-lines::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-navy);
  opacity: .96;
}
#advisory-lines .bx-svccard .bx-btn .bx-icon { color: var(--c-primary); }

/* --- Home closing CTA, measured on the live reference ----------------------
   The copy column is capped at 365px (the heading wraps there), the title runs
   70/65 with 30px under it, and the phone block is a 68px disc beside a 16/20
   label and a 30/43 number, pushed 23px down from the lede. */
.bx-homecta__text .bx-icon-box { max-width: 365px; }
.bx-homecta__text .bx-icon-box__title {
  margin-block: 8px 30px;
  line-height: 65px;
}
.bx-homecta__phone {
  margin-block-start: 23px;
  gap: 1px 15px;
  grid-template-columns: 68px minmax(0, 1fr);
}
.bx-homecta__phone-icon { width: 68px; height: 68px; }
.bx-homecta__phone-label {
  margin-block-start: 8px;
  font-size: 16px;
  line-height: 20px;
  text-transform: uppercase;
}
.bx-homecta__phone-num {
  font-size: 30px;
  line-height: 43px;
  color: var(--c-black);
}

@media (max-width: 1024px) {
  .bx-homecta__text .bx-icon-box { max-width: none; }
  .bx-homecta__phone-num { font-size: 24px; line-height: 32px; }
}

/* --- Post meta chips, measured on the live reference -----------------------
   The category is a filled tan pill; the date is an outlined half-pill tucked
   16px under its right edge, so the two read as one badge. */
.bx-pmeta { gap: 0; align-items: center; }
.bx-pmeta__item--cat {
  position: relative;
  z-index: 1;
  background: var(--c-primary);
  color: var(--c-white);
}
.bx-pmeta__item--cat a:hover { color: var(--c-white); opacity: .85; }
.bx-pmeta__item--date {
  margin-inline-start: -16px;
  padding: 6px 20px 6px 30px;
  border: 1px solid var(--c-border);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background: none;
  color: var(--c-text-muted);
}

/* --- Home latest posts, measured on the live reference ---------------------
   0.67 / 0.33 under a full-width rule, the columns divided by a second rule:
   the feature is padded 60 top and 60 right, the list 60 top and 60 left, and
   each list item closes with 40px and its own hairline. */
.bx-home-posts__grid {
  grid-template-columns: minmax(0, 864.453fr) minmax(0, 425.781fr);
  gap: 0;
  border-block-start: 1px solid var(--c-border);
}
.bx-home-posts__lead { padding: 60px 60px 0 0; }
.bx-home-posts__rest {
  gap: 30px;
  padding: 60px 0 0 60px;
  border-inline-start: 1px solid var(--c-border);
}
.bx-home-posts__rest .bx-pcard {
  padding-block-end: 40px;
  border-block-end: 1px solid var(--c-border);
}
.bx-home-posts__lead .bx-pcard { gap: 30px; }
.bx-home-posts__lead .bx-pcard__body { gap: 20px; }
.bx-home-posts__rest .bx-pcard__title { font-size: 30px; line-height: 34px; }

@media (max-width: 1024px) {
  .bx-home-posts__lead { padding: 40px 30px 0 0; }
  .bx-home-posts__rest { padding: 40px 0 0 30px; gap: 24px; }
}
@media (max-width: 767px) {
  .bx-home-posts__grid { grid-template-columns: minmax(0, 1fr); }
  .bx-home-posts__lead { padding: 30px 0 0; }
  .bx-home-posts__rest { padding: 30px 0 0; border-inline-start: 0; }
}

/* The feature card closes the column, so its own rule would double the grid's
   divider; only the side list keeps one. */
.bx-home-posts__lead .bx-pcard { padding-block-end: 40px; border-block-end: 0; }

/* The marquee band closes on 100px, not a full section's worth. */
.bx-section--marquee { padding-block-end: 100px; }
@media (max-width: 1024px) { .bx-section--marquee { padding-block-end: 70px; } }
@media (max-width: 767px)  { .bx-section--marquee { padding-block-end: 50px; } }

/* --- Team card height ------------------------------------------------------
   The reference lets the portrait set its own height (1:1.37), which runs the
   cards to 757px on Home and 535px on Our Team. Pinned to 4:5 instead, a
   deliberate departure from the reference. The crop is anchored to the top so
   the face is never the part that gets trimmed. */
.bx-home-team .bx-tcard__media,
.bx-teamgrid .bx-tcard__media { aspect-ratio: 4 / 5; }
.bx-home-team .bx-tcard__img,
.bx-teamgrid .bx-tcard__img {
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* --- position: sticky needs room to travel ---------------------------------
   A sticky box can only move inside its containing block. Where that block is a
   grid item on a grid with `align-items: start`, the item shrinks to the sticky
   box's own height and it never moves. These columns stretch instead; they draw
   no background, so nothing changes visually. */
.bx-service__layout > .bx-service__rail,
.bx-service__layout > .bx-service__aside,
.bx-svcpage > .bx-svcpage__intro { align-self: stretch; }

/* --- Footer, measured on the live reference --------------------------------
   The newsletter heading is an h2, so the global heading colour was painting it
   black on the navy panel. The field pair is 47px, not 54, and the Subscribe
   arrow is tan on the white button. */
.bx-footer__signup-title { color: var(--c-on-dark); }

.bx-newsletter__input,
.bx-newsletter__submit {
  height: 47px;
  padding-block: 0;
}
.bx-newsletter__submit {
  gap: 13px;
  --btn-pad: 0 30px;
}
.bx-newsletter__submit .bx-btn__icon { color: var(--c-primary); }
.bx-newsletter__submit:hover .bx-btn__icon { color: var(--c-primary); }

/* The ruled block is inset to the container in the reference, not full-bleed;
   the wrapper only exists to hold the grid. */
.bx-footer__mainwrap { border-block: 0; }
.bx-footer__main { border-block: 1px solid rgba(211, 211, 211, .28); }

/* `.bx-footer a { color: inherit }` outranks the component's own
   `--social-color`, so the marks were rendering white instead of #66677A. */
.bx-footer .bx-social__link { color: var(--social-color); }
.bx-footer .bx-social__link:hover { color: var(--c-primary); }
.bx-footer__social { padding-block-start: 15px; }

/* Link columns: three equal tracks 20px apart. */
.bx-footer__links { gap: 20px; }

/* The button's transparent 1px border let the navy show through between the
   field and the button, splitting what should read as one white pill. */
.bx-newsletter__submit { border: 0; }

/* ---------------------------------------------------------------------------
   Responsive repairs.

   Three grids kept their desktop track lists on narrow screens: the mobile
   rules live in 04-sections.css inside media queries, but unconditional rules
   later in THIS file outrank them whatever the viewport. Restated here, after
   those rules, so the cascade lands the right way round.
   --------------------------------------------------------------------------- */

/* Services hub: one service block per row from tablet down (the reference
   stacks at 767 and stays stacked). */
@media (max-width: 767px) {
  .bx-svcblock__cols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .bx-svcblock__cols > :nth-child(2) { padding-block-start: 0; }
}

/* Service detail: the reference drops the rail and the aside out of the row at
   tablet and runs the article full width, body copy first. */
@media (max-width: 1024px) {
  .bx-service__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .bx-service__layout > .bx-service__main { order: -1; }
  .bx-service__layout > .bx-service__rail,
  .bx-service__layout > .bx-service__aside { align-self: auto; }
  .bx-service__layout .bx-sticky { position: static; }
}

/* About Us testimonials: one column on a phone, head above the carousel. */
@media (max-width: 767px) {
  .bx-tsection__grid,
  .bx-tsection--mirror .bx-tsection__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 35px;
  }
}

/* --- Service detail, measured on the live reference ------------------------
   The sidebar CTA is #020033 with a repeating line texture over it, and the
   rail is a list of closed disclosures in grey — the reference opens none of
   them, including the service you are reading. */
.bx-service__cta {
  background-image: var(--cta-texture, none);
  background-size: cover;
  background-position: 0 0;
  background-repeat: repeat;
}
.bx-svcnav .bx-accordion__title { color: var(--c-text-muted); }
.bx-svcnav .bx-accordion__item.is-current > .bx-accordion__summary .bx-accordion__title { color: var(--c-text); }
.bx-svcnav .bx-accordion__summary:hover .bx-accordion__title { color: var(--c-primary); }

/* --- Hero portraits --------------------------------------------------------
   All three heroes crop from the centre in the reference, not the top: at
   767 the bio portrait is a 713x429 landscape slice of a 390x535 picture, so
   anchoring to the top cut the face off below the eyes. The bio hero also
   closes with 60px under the portrait on a phone, and its radius is 30px at
   desktop where the page heroes use 20px. */
.bx-tophero__img,
.bx-bio-hero__img { object-position: 50% 50%; }

.bx-bio-hero__img { border-radius: 30px; }

@media (max-width: 767px) {
  .bx-bio-hero { padding-block-end: 60px; }
  .bx-bio-hero__img { border-radius: 15px; }
}

/* --- Blog category filter, measured on the live reference ------------------
   A plain uppercase row above the list, 16/700/24 with 30px of air above and
   below, closed by a hairline; the active term carries a short black bar that
   sits on that hairline. It was styled as pills and rendered under the list. */
.bx-blog-cats {
  padding-block: 0;
  border-block-end: 1px solid var(--c-border);
}
.bx-blog-cats ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
}
.bx-blog-cats li { position: relative; }
.bx-blog-cats a {
  display: block;
  padding: 30px 1px;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 16px;
  font-weight: var(--fw-bold);
  line-height: 24px;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.bx-blog-cats li.is-current > a { color: var(--c-black); }
.bx-blog-cats a:hover { background: none; border-color: transparent; color: var(--c-primary); }
.bx-blog-cats li.is-current::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  height: 3px;
  background: var(--c-black);
}

@media (max-width: 1024px) { .bx-blog-cats a { padding-block: 22px; } }
@media (max-width: 767px)  { .bx-blog-cats a { padding-block: 16px; font-size: 15px; } }

/* The list clears the filter rule by 60px in the reference. */
.bx-blog-cats + .bx-blog-layout { padding-block-start: 60px; }
@media (max-width: 1024px) { .bx-blog-cats + .bx-blog-layout { padding-block-start: 40px; } }
@media (max-width: 767px)  { .bx-blog-cats + .bx-blog-layout { padding-block-start: 30px; } }

/* --- Single post -----------------------------------------------------------
   The featured image is a fixed-height band in the reference, not the picture's
   own aspect: 381px on desktop, 346px at tablet, 167px on a phone. */
.bx-article__thumb-img {
  height: 381px;
  object-fit: cover;
  object-position: 50% 50%;
}

/* The paired body images are flex children with `flex: 1 1 0`, which collapses
   them to zero height the moment the row turns into a column. */
@media (max-width: 1024px) {
  .bx-article__thumb-img { height: 346px; }
}
@media (max-width: 767px) {
  .bx-article__thumb-img { height: 167px; }
  .bx-article__pair-img {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    height: auto;
  }
}

/* One team card per view on a phone. The 286px tablet basis sits later in this
   file than the 767 rule it was meant to sit above, so it was winning at every
   width below 1024 and showing two half cards. */
@media (max-width: 767px) {
  .bx-home-team .bx-carousel__slide { flex-basis: 100%; }
}

/* On a phone the reference keeps the Latest-posts heading and its button side
   by side; only the eyebrow moves above. Stacking them cost 150px of height. */
@media (max-width: 767px) {
  .bx-home-posts .bx-sechead--split .bx-sechead__main {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .bx-home-posts .bx-sechead--split .bx-btn { flex: none; }
}

/* Variant: ghost on a dark panel — no fill, white label, tan arrow, hairline.
   Used by the outcome cards; the section head's "All Cases" stays filled. */
.bx-btn--ghost-dark {
  --btn-fg: var(--c-on-dark);
  --btn-fg-hover: var(--c-on-dark);
  --btn-border: var(--c-rule-on-dark);
  --btn-pad: 14px 30px;

  gap: 26px;
  background: none;
}
.bx-btn--ghost-dark::before { width: 0; }
.bx-btn--ghost-dark:hover::before { width: 50px; }
.bx-btn--ghost-dark .bx-btn__icon { color: var(--c-primary); }
.bx-btn--ghost-dark:hover .bx-btn__icon { color: var(--c-white); }

/* --- Service detail: breathing room between the three columns --------------
   The reference runs these flush (gap 0, no column padding), so the rail's
   rules ended a few pixels from the body copy and the body image ended flush
   against the sticky panel. A real gutter instead, tracking the section
   rhythm: 60px desktop, 40px from 1280 down. The 0.23/0.54/0.23 split is
   unchanged, so the columns share the loss proportionally. */
@media (min-width: 1025px) {
  .bx-service__layout { column-gap: var(--space-gap-lg); }
}
@media (min-width: 1025px) and (max-width: 1279px) {
  .bx-service__layout { column-gap: 40px; }
}

/* Build credit, right of the footer bottom bar where the reference put its
   legal links. */
.bx-footer__credit { font-size: 16px; color: rgba(255, 255, 255, .6); }
.bx-footer__credit a { color: var(--c-on-dark); }
.bx-footer__credit a:hover { color: var(--c-primary); }
@media (max-width: 767px) { .bx-footer__credit { font-size: 15px; } }

/* Footer social icons: 16px glyphs gave a 16x16 tap target, under the 44x44
   accessible minimum (fix list F10). Desktop keeps the reference geometry
   exactly; on touch widths the hit area grows to 44x44 and the gap shrinks to
   match, so the row occupies the same space and the glyph is unchanged. */
@media (max-width: 1024px) {
  .bx-footer .bx-social { --social-gap: 8px; }
  .bx-footer .bx-social__link {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    margin-inline-start: -10px;
  }
  .bx-footer .bx-social__link:first-child { margin-inline-start: 0; }
}

/* Consent checkbox on both forms (fix list F6). Sits on one line with the
   label, which carries the link to the Privacy Policy. */
/* Float rather than flex: the themes form labels carry a width of their own,
   which a flex row refuses to shrink, so the checkbox ended up on its own line. */
.bx-form__consent { display: block; }
.bx-form__consent input[type="checkbox"] {
  float: left;
  width: 18px;
  height: 18px;
  margin: 3px 10px 0 0;
  accent-color: var(--c-primary);
}
.bx-form__consent label {
  display: block;
  overflow: hidden;
  width: auto;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}
.bx-form__consent a { color: inherit; text-decoration: underline; }
.bx-form__consent a:hover { color: var(--c-primary); }

/* The footer form asks which document is wanted before the email field. The row
   is a flex pill (input + button); the select and the consent line are given a
   full row of their own so the pill keeps the reference geometry. */
.bx-newsletter { flex-wrap: wrap; }
.bx-newsletter__input { flex: 1 1 0; min-width: 0; }
.bx-newsletter__submit { flex: 0 0 auto; }
.bx-newsletter__select,
.bx-newsletter .bx-form__consent { flex: 0 0 100%; }

.bx-newsletter__select {
  width: 100%;
  margin-block-end: 10px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  color: var(--c-on-dark);
  font: inherit;
}
.bx-newsletter__select option { color: #1b1b1f; }
.bx-newsletter .bx-form__consent { margin-block-start: 12px; }
.bx-newsletter .bx-form__consent label { font-size: 14px; color: rgba(255, 255, 255, .75); }
.bx-newsletter .bx-form__consent a { color: var(--c-on-dark); }

/* The CTA form gives every control a 59px pill height. The consent tickbox is
   not a pill, so it opts out and keeps the same 18px box as the other forms. */
.bx-homecta__form .bx-form__consent input[type="checkbox"] {
  min-height: 0;
  height: 18px;
  padding: 0;
  border-radius: 3px;
}