/* ==========================================================================
   B&B Associates LLP — theme layer over Bootstrap 5
   ========================================================================== */

:root {
  --ink: #0a0a0a;
  --paper: #fafaf8;
  --red: #d92323;
  --red-hot: #ff2a2a;
  --line: #e5e5e5;
  --line-soft: #f2f2f2;
  --serif: "Instrument Serif", "Playfair Display", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --shell-max: 1440px;
}

*,
*::before,
*::after {
  border-radius: 0 !important;
}

html {
  scroll-behavior: smooth;
  /* Must clear the fixed header, otherwise anchor targets land underneath it.
     home-script.js keeps --bnb-header-fixed-height in sync with the header's
     real height (it changes when the notice bar wraps). */
  scroll-padding-top: calc(var(--bnb-header-fixed-height, 112px) + 16px);
}

html,
body {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  width: 100%;
  max-width: 100%;
}

#wrapper,
#main {
  overflow-x: hidden;
  overflow-y: visible;
  margin-top: 0rem !important;
}

.container,
.container-fluid {
  max-width: 100% !important;
}
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.menu-open {
  position: fixed;
  right: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
}
::selection {
  background: var(--ink);
  color: #fff;
}

.font-serif {
  font-family: var(--serif);
}

button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
}

.shell {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: 1.5rem;
  overflow-x: hidden;
}

@media (min-width: 992px) {
  .shell {
    padding-inline: 2.5rem;
  }
}

.section {
  padding-block: 4rem;
}

@media (min-width: 992px) {
  .section {
    padding-block: 4rem;
  }
}

.hairline {
  height: 1px;
  background: var(--line);
}

/* --- shared atoms --------------------------------------------------------- */

.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50% !important;
  flex: 0 0 auto;
}

.dot-red {
  background: var(--red);
}
.dot-lg {
  width: 8px;
  height: 8px;
}

.pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

.tick {
  display: inline-block;
  height: 1px;
  width: 8px;
}
.tick-ink {
  background: var(--ink);
}
.tick-red {
  background: var(--red);
}
.tick-wide {
  width: 24px;
}
.tick-xwide {
  width: 48px;
}

.icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.label-sm {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}

.strong-ink {
  color: var(--ink);
  font-weight: 500;
}

/* --- notice bar ----------------------------------------------------------- */

.notice-bar {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.notice-bar .shell {
  padding-block: 10px;
}

.notice-links {
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 10px;
}

.notice-links button {
  transition: color 0.2s;
}
.notice-links button:hover {
  color: #fff;
}

/* --- header --------------------------------------------------------------- */

/* position: sticky was tried first but Chrome/every browser forces
   overflow-y to auto on any non-viewport ancestor that sets overflow-x
   (#wrapper, body) to anything but visible - and this site relies on
   #wrapper/body overflow-x: hidden site-wide to stop horizontal bleed.
   That auto conversion happens even when overflow-y is explicitly
   authored as visible (verified directly against a live instance), so it
   cannot be fixed by touching overflow rules alone without risking
   horizontal-scroll regressions elsewhere. position: fixed sidesteps the
   whole problem (it only cares about transform/filter/will-change
   ancestors, none of which exist here), so the notice bar + nav were
   grouped under one <header class="site-header-fixed"> in header.php and
   that wrapper is fixed as a single block; assets/js/home-script.js sets
   --bnb-header-fixed-height from its real rendered height so #wrapper can
   reserve the right amount of space below it (see padding-top rule further
   down) and nothing jumps, including when the bar's text wraps to 2 lines
   on narrow screens. */
.site-header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}

/* WP admin bar sits above everything at a fixed 32px/46px height; without this
   the fixed header would tuck under it for logged-in users. */
body.admin-bar .site-header-fixed {
  top: var(--wp-admin--admin-bar--height, 32px);
}

#wrapper {
  padding-top: var(--bnb-header-fixed-height, 112px);
}

.site-header {
  background: rgba(250, 250, 248, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding-block: 8px;
  transition:
    border-color 0.3s,
    padding 0.3s;
}

.site-header.is-scrolled {
  border-bottom-color: rgba(10, 10, 10, 0.1);
  padding-block: 0;
}

.header-inner {
  min-height: 64px;
  gap: 32px;
}

.navbar-brand {
  position: relative;
  z-index: 10000;
  flex: 0 0 auto;
}

.header-logo {
  display: block;
  width: auto;
  max-width: 190px;
  max-height: 44px;
  object-fit: contain;
}

.brand {
  color: inherit;
}

.brand-mark {
  width: 36px;
  height: 36px;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.brand-text {
  line-height: 0.9;
}
.brand-name {
  font-size: 17px;
  letter-spacing: -0.01em;
}

.brand-sub {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.6;
  font-weight: 500;
}

.primary-nav {
  font-size: 13px;
  letter-spacing: 0.02em;
}

.nav-link-underline {
  position: relative;
  color: inherit;
  text-decoration: none;
  padding-block: 0.5rem;
}

.nav-link-underline:hover {
  opacity: 0.6;
}

.nav-link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--ink);
  transition: width 0.3s;
}

.nav-link-underline:hover::after {
  width: 100%;
}

.btn-consult {
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  padding-left: 1.25rem;
  padding-right: 0.75rem;
  height: 48px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.2s;
  gap: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-consult:hover {
  background: #000;
  color: #fff;
}

.btn-consult-icon {
  width: 24px;
  height: 24px;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.btn-consult:hover .btn-consult-icon {
  background: var(--red-hot);
}
.btn-consult-icon .icon {
  width: 14px;
  height: 14px;
}

/* Hide mobile button on desktop */

.custom-menu-btn {
  display: none;
}

@media (max-width: 991px) {
  .custom-menu-btn {
    display: flex;

    width: 48px;

    height: 48px;

    border: 1px solid var(--line);

    background: transparent;

    position: relative;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    z-index: 9999;
  }

  .custom-menu-btn span {
    position: absolute;

    width: 22px;

    height: 2px;

    background: #111;

    transition: 0.35s;
  }

  .custom-menu-btn span:nth-child(1) {
    transform: translateY(-7px);
  }

  .custom-menu-btn span:nth-child(2) {
    transform: translateY(0);
  }

  .custom-menu-btn span:nth-child(3) {
    transform: translateY(7px);
  }

  /* X */

  .custom-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg);
  }

  .custom-menu-btn.active span:nth-child(2) {
    opacity: 0;
  }

  .custom-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg);
  }
}
.custom-mobile-menu {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
}

.custom-mobile-menu .primary-nav {
  margin-left: auto;
}

.primary-nav > .menu-item {
  margin: 0 12px;
}

.primary-nav > .menu-item > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.2s, opacity 0.2s;
}

.primary-nav > .menu-item > a:hover,
.primary-nav > .menu-item > a:focus,
.primary-nav > .menu-item.current-menu-item > a,
.primary-nav > .menu-item.current-menu-ancestor > a {
  color: var(--red);
}

.primary-nav > .menu-item > a::after {
  bottom: 3px;
  height: 2px;
  background: var(--red);
}

.primary-nav > .menu-item > .dropdown-toggle::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.primary-nav > .menu-item > .dropdown-toggle[aria-expanded="true"]::before {
  transform: translateY(1px) rotate(225deg);
}

.primary-nav > .menu-item > .dropdown-toggle::after {
  display: none;
}
@media (max-width: 991px) {
  .custom-mobile-menu {
    position: fixed;

    top: 0;

    right: -100%;

    width: 100%;

    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    box-sizing: border-box;

    background: #fafaf8;

    transition: 0.45s ease;

    z-index: 9998;

    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    padding: 112px 28px calc(40px + env(safe-area-inset-bottom));
    flex-direction: column;
    align-items: stretch;
  }

  .custom-mobile-menu.open {
    right: 0;
  }

  .custom-mobile-menu .navbar-nav {
    flex-direction: column;

    width: 100%;
    margin: 0;
    flex: 0 0 auto;
  }

  .custom-mobile-menu .nav-item {
    width: 100%;

    border-bottom: 1px solid var(--line);
  }

  .custom-mobile-menu .nav-link {
    display: block;

    padding: 16px 0;

    font-size: clamp(24px, 7vw, 34px);

    font-family: var(--serif);
  }

  .custom-mobile-menu .primary-nav > .menu-item {
    margin: 0;
  }

  .custom-mobile-menu .primary-nav > .menu-item > a:hover,
  .custom-mobile-menu .primary-nav > .menu-item > a:focus,
  .custom-mobile-menu .primary-nav > .menu-item.current-menu-item > a,
  .custom-mobile-menu .primary-nav > .menu-item.current-menu-ancestor > a {
    color: var(--red);
  }

  .custom-mobile-menu .primary-nav > .menu-item > .dropdown-toggle::before {
    width: 7px;
    height: 7px;
    margin-right: 12px;
  }

  .custom-mobile-menu .primary-nav > .menu-item > .dropdown-toggle[aria-expanded="true"]::before {
    transform: translateY(1px) rotate(225deg);
  }

  .custom-mobile-menu .search-form {
    margin-top: 28px !important;
    flex: 0 0 auto;
  }

  .custom-mobile-menu .header-actions {
    position: sticky;
    bottom: 0;
    display: block !important;
    margin: 22px -28px 0;
    padding: 14px 28px calc(14px + env(safe-area-inset-bottom));
    flex: 0 0 auto;
    background: rgba(250, 250, 248, 0.98);
    border-top: 1px solid var(--line);
    z-index: 3;
  }

  .custom-mobile-menu .btn-consult {
    display: flex;
    width: 100%;
    height: 52px;
  }
}
.navbar-expand-lg .navbar-nav .nav-link {
  text-wrap-mode: nowrap;
}
/* --- hero ----------------------------------------------------------------- */

.hero {
  padding-top: 4rem;
  padding-bottom: 2.5rem;
}

@media (min-width: 992px) {
  .hero {
    padding-top: 7rem;
    padding-bottom: 5rem;
  }
}

.hero-copy {
  position: relative;
  padding-left: 1.5rem;
}

@media (min-width: 992px) {
  .hero-copy {
    padding-left: 2.5rem;
  }
}

.hero-rule {
  position: absolute;
  left: 0;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: var(--red);
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero-title {
  font-size: 9vw;
  line-height: 0.86;
  letter-spacing: -0.04em;
  margin: 0;
}

@media (min-width: 992px) {
  .hero-title {
    font-size: 96px;
  }
}

.hero-lede {
  font-size: 16px;
  line-height: 1.6;
  max-width: 53ch;
  margin-top: 2rem;
  font-weight: 300;
  opacity: 0.8;
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-title {
    font-size: 56px;
  }
}
@media (min-width: 992px) {
  .hero-lede {
    font-size: 18px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .custom-mobile-menu .nav-link {
    font-size: 22px; /* reduce from 30px */
    padding: 14px 0; /* reduce from 18px */
  }
}
.hero-location {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 1.5rem;
}

.hero-location__current {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: var(--ink);
}

.hero-location__change {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 0;
  border: 0;
  background: none;

  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;

  color: var(--red);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.hero-location__change span {
  font-size: 13px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.hero-location__change:hover,
.hero-location__change:focus-visible {
  opacity: 0.7;
}

.hero-location__change:hover span,
.hero-location__change:focus-visible span {
  transform: translateX(3px);
}

@media (min-width: 768px) {
  .hero-location {
    margin-top: 1.75rem;
  }
}

@media (min-width: 992px) {
  .hero-location__current,
  .hero-location__change {
    font-size: 11px;
  }
}

.hero-stats {
  margin-top: 3rem !important;
  border-top: 1px solid var(--line);
  padding-top: 2rem;
  max-width: 520px;
}

.stat-key {
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.03em;
}

@media (min-width: 992px) {
  .stat-key {
    font-size: 44px;
  }
}
@media (max-width: 540px) {
  .stat-key {
    font-size: 27px;
  }
}

.stat-val {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-top: 0.5rem;
}

/* Phones: keep the four stats on one line, as four equal columns split by
   hairline dividers. Bootstrap's g-4 gutters were too wide for a phone,
   which squeezed "Associates" against the edge. */
@media (max-width: 575px) {
  .hero-stats {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    display: grid;
    /* "5000+" is the widest figure, so its column gets a little more room. */
    grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr));
    max-width: none;
    margin-right: 0;
    margin-left: 0;
  }

  .hero-stats > .col {
    width: auto;
    max-width: none;
    margin-top: 0;
    padding: 0 10px;
    border-left: 1px solid var(--line);
  }

  .hero-stats > .col:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .hero-stats > .col:last-child {
    padding-right: 0;
  }

  .stat-key {
    font-size: clamp(22px, 7vw, 28px);
    white-space: nowrap;
  }

  .stat-val {
    margin-top: 0.45rem;
    font-size: 9px;
    line-height: 1.35;
    letter-spacing: 0.1em;
  }
}

/* Small phones (360px class): tighter spacing so "Associates" stays inside. */
@media (max-width: 400px) {
  .hero-stats {
    grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr));
  }

  .hero-stats > .col {
    padding: 0 7px;
  }

  .stat-val {
    letter-spacing: 0.04em;
  }
}

@media (max-width: 340px) {
  .hero-stats > .col {
    padding: 0 5px;
  }

  .stat-val {
    font-size: 8px;
    letter-spacing: 0.02em;
  }
}

.map-card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 1.5rem;
}

@media (min-width: 992px) {
  .map-card {
    padding: 2.5rem;
    margin-top: 2.5rem;
  }
}
.map-card-h {
  background: var(--paper);
  padding: 1.5rem;
}

@media (min-width: 992px) {
  .map-card-h {
    padding: 2.5rem;
    margin-top: 2.5rem;
  }

  .map-card-h .contact-logo {
    background: transparent;
  }

  .map-card-h .contact-logo img {
    display: inline-block;
    max-width: 220px;
    mix-blend-mode: multiply;
  }
}
.map-frame {
  position: relative;
  aspect-ratio: 8 / 4;
  border: 1px solid var(--line-soft);
  background: var(--paper);
}

.map-badge {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ink);
  color: #fff;
  padding: 0.25rem 0.5rem;
}

.map-legend {
  margin-top: 1rem !important;
  font-size: 12px;
  line-height: 1.5;
}

/* --- section headings ----------------------------------------------------- */

.section-title {
  font-size: 40px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin: 0;
}

.section-title-narrow {
  max-width: 12ch;
}

/* Centred head for the "Identify your concern" services section
   (template-parts/identify-concern.php). Uses the existing .po-eyebrow for
   the red kicker, so only the centring and type scale live here.

   Sizes are scoped to .concern-head rather than changed on .section-title /
   .po-eyebrow, which are shared with other sections: the global 56px title
   against a 10px kicker was too wide a jump for a centred head, so the
   kicker comes up and the title comes down to sit closer together. */
.concern-head {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.concern-head .po-eyebrow {
  margin-bottom: 14px;
  font-size: 20px;
  letter-spacing: 0.18em;
}

.concern-head .section-title {
  font-size: clamp(4px, 3.4vw, 24px);
  line-height: 1.08;
}

@media (min-width: 992px) {
  .section-title {
    font-size: 56px;
  }
}

.section-title-sm {
  font-size: 32px;
}

@media (min-width: 992px) {
  .section-title-sm {
    font-size: 48px;
  }
}

.section-note {
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.7;
  max-width: 36ch;
}

@media (min-width: 992px) {
  .section-note {
    max-width: 36ch;
  }
}

.note-flag {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 1;
}

/* --- hairline grid frame -------------------------------------------------- */

.grid-frame {
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
}

.grid-frame > .col,
.grid-frame > [class*="col-"] {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* "Identify with your concern" is borderless. Scoped to a modifier because the
   Offices band below reuses .grid-frame and keeps its seams. */
.grid-frame--borderless,
.grid-frame--borderless > .col,
.grid-frame--borderless > [class*="col-"] {
  border: 0;
}

/* --- practice cards ------------------------------------------------------- */

.practice-card {
  background: #fafaf8;
  padding: 1.75rem;
  min-height: 200px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}

.practice-card .dot-red {
  transition: transform 0.3s ease;
}

/* .practice-card links to a real practice page (was a plain <button>) - reset
   the anchor's default link colour/underline so it still looks and behaves
   exactly like the button it replaced. The hover state no longer recolours
   the text at all, so inheriting here is safe. */
a.practice-card,
a.practice-card:visited {
  color: inherit;
  text-decoration: none;
}

@media (min-width: 992px) {
  .practice-card {
    padding: 2.25rem;
  }
}

/* Hover: a low-contrast warm tint and a 1.5% scale. The card keeps its own
   colours - no inversion - so the title, copy and red accent never change
   hue. z-index lifts the scaled tile above the shared 1px grid seams its
   neighbours draw, which is what stops the growth reading as a broken edge.
   Scale (not width/height) means no reflow, so the grid never shifts. */
.practice-card:hover,
.practice-card:focus-visible {
  background: #f3f2ee;
  transform: scale(1.015);
  z-index: 1;
}

.practice-card:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -4px;
}

/* The accent stays red and only grows a little. */
.practice-card:hover .dot-red,
.practice-card:focus-visible .dot-red {
  transform: scale(1.15);
}

.card-title {
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.card-desc {
  font-size: 12px;
  line-height: 1.5;
  margin-top: 0.75rem;
  opacity: 0.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.practice-card:hover .card-desc,
.practice-card:focus-visible .card-desc {
  opacity: 0.78;
}

/* Load More: cards past the sixth are hidden until expanded. Button itself
   reuses the existing .team-view-all pill style verbatim; this only places it. */
.practice-card-extra {
  display: none;
}

.practice-load-more {
  margin-top: 1.5rem;
  text-align: center;
}

/* --- location directory -------------------------------------------------- */

.directory-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 60px;
  align-items: end;
  margin-bottom: 54px;
}

.directory-intro__eyebrow {
  display: block;
  margin-bottom: 16px;
  color: var(--red);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.directory-intro__title,
.directory-cta h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 400;
  line-height: 0.98;
}

.directory-intro__title em,
.directory-cta h2 em {
  color: var(--red);
  font-style: italic;
}

.directory-intro__copy {
  max-width: 34ch;
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.7;
  opacity: 0.68;
}

.region-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.region-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.region-card:hover {
  color: var(--ink);
  box-shadow: 0 18px 38px rgba(10, 10, 10, 0.12);
  transform: translateY(-5px);
}

.region-card__image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #d8d2c8;
}

.region-card__image::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.03), rgba(10, 10, 10, 0.3));
  content: '';
}

.region-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.region-card:hover .region-card__image img {
  transform: scale(1.06);
}

.region-card__number {
  position: absolute;
  z-index: 1;
  top: 14px;
  right: 14px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.region-card__body {
  display: flex;
  min-height: 190px;
  flex: 1;
  flex-direction: column;
  padding: 24px 22px 22px;
  border: 1px solid var(--line);
  border-top: 0;
}

.region-card__body h3 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
}

.region-card__body p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.64;
}

.region-card__link,
.directory-cta__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 24px;
  color: var(--red);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.region-card__link span,
.directory-cta__link span {
  font-size: 18px;
  line-height: 0;
  transition: transform 0.2s ease;
}

.region-card:hover .region-card__link span,
.directory-cta__link:hover span {
  transform: translateX(4px);
}

.practice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  background: var(--paper);
}

.practice-grid .practice-card,
.practice-grid .practice-card:visited {
  min-height: 240px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  margin: -1px 0 0 -1px;
}

.practice-grid .practice-card:hover,
.practice-grid .practice-card:focus-visible {
  background: #f3f2ee;
  border-color: #d9d7d0;
  color: var(--ink);
}

.practice-grid .practice-card h3 {
  margin: 0;
  color: inherit;
  font-family: var(--serif);
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 400;
  line-height: 1.08;
}

.practice-grid .practice-card:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -4px;
}

.practice-grid .practice-card .practice-icon {
  flex: 0 0 auto;
}

.practice-grid .practice-card .practice-card__link {
  color: var(--red);
}

.practice-grid .practice-card:hover .practice-card__link,
.practice-grid .practice-card:focus-visible .practice-card__link {
  color: var(--red);
}

.practice-grid .practice-card .practice-icon img {
  filter: grayscale(1) contrast(1.3);
}

.practice-grid .practice-card:hover .practice-icon img,
.practice-grid .practice-card:focus-visible .practice-icon img {
  transform: scale(1.04);
}

.practice-card {
  position: relative;
}

.practice-card__number {
  position: absolute;
  top: 22px;
  right: 24px;
  color: var(--red);
  font-size: 11px;
  letter-spacing: 0.1em;
  opacity: 0.7;
}

.practice-card__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.practice-card__link span {
  font-size: 18px;
  line-height: 0;
  transition: transform 0.2s ease;
}

.practice-card:hover .practice-card__link span {
  transform: translateX(4px);
}


.practice-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  margin-bottom: 32px;
  border: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.practice-icon img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.practice-icon__mark {
  color: var(--red);
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
}

.practice-card:hover .practice-icon,
.practice-card:focus-visible .practice-icon {
  border-color: #d9d7d0;
}

.practice-directory-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 60px;
  align-items: end;
  margin-bottom: 54px;
}

.practice-directory-head__aside p {
  max-width: 34ch;
  margin: 0 0 20px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.7;
  opacity: 0.68;
}

.practice-directory-head__count {
  display: block;
  color: var(--red);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.practice-directory-empty {
  padding: 54px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.practice-directory-empty h2 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 400;
}

.practice-directory-empty p {
  margin: 0 0 24px;
  opacity: 0.68;
}

.directory-cta {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-top: 96px;
  padding: 42px 0 8px;
  border-top: 1px solid var(--line);
}

.directory-cta h2 {
  font-size: clamp(32px, 4vw, 52px);
}

.directory-cta__link {
  margin: 0 0 8px;
  padding: 0;
  white-space: nowrap;
}

@media (max-width: 991px) {
  .region-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .practice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .practice-directory-head {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 36px;
  }

  .directory-intro {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 36px;
  }

  .region-grid {
    gap: 14px;
  }

  .region-card__body {
    min-height: 175px;
    padding: 18px 16px 16px;
  }

  .region-card__body h3 {
    font-size: 22px;
  }

  .region-card__body p {
    font-size: 12px;
  }

  .practice-grid {
    grid-template-columns: 1fr;
  }

  .directory-cta {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 64px;
    padding-top: 32px;
  }
}

@media (max-width: 480px) {
  .region-grid {
    grid-template-columns: 1fr;
  }

  .region-card__image {
    aspect-ratio: 16 / 9;
  }
}

.icon-arrow {
  opacity: 0.2;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    color 0.3s ease;
}

.practice-card:hover .icon-arrow,
.practice-card:focus-visible .icon-arrow {
  opacity: 1;
  color: var(--red);
  transform: translate(3px, -3px);
}
/* Service cards: the arrow is always red, not only on hover. */
.practice-card .icon-arrow {
  opacity: 1;
  color: var(--red);
}
/* The hover is a low-contrast tint plus a 1.5% scale, so every moving part is
   opt-out under reduced motion while the colour feedback is kept. */
@media (prefers-reduced-motion: reduce) {
  .practice-card,
  .practice-card .dot-red,
  .practice-card .icon-arrow,
  .practice-card .practice-icon img,
  .practice-card .practice-card__link span,
  .office-card-home,
  .office-card-home .dot-red {
    transition-duration: 0.01ms;
  }

  .practice-card:hover,
  .practice-card:focus-visible,
  .practice-card:hover .dot-red,
  .practice-card:focus-visible .dot-red,
  .practice-card:hover .icon-arrow,
  .practice-card:focus-visible .icon-arrow,
  .practice-card:hover .practice-icon img,
  .practice-card:focus-visible .practice-icon img,
  .practice-card:hover .practice-card__link span,
  .office-card-home:hover,
  .office-card-home:focus-within,
  .office-card-home:hover .dot-red,
  .office-card-home:focus-within .dot-red {
    transform: none;
  }
}

/* --- firm band ------------------------------------------------------------ */

.firm-band {
  background: #fff;
  border-block: 1px solid var(--line);
}

.firm-copy {
  padding-block: 4rem;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 992px) {
  .firm-copy {
    padding-block: 7rem;
    padding-right: 5rem;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
}

.firm-copy .section-title {
  font-size: 36px;
}

@media (min-width: 992px) {
  .firm-copy .section-title {
    font-size: 52px;
  }
}

.firm-body {
  margin-top: 2rem;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 300;
  opacity: 0.8;
  max-width: 52ch;
}

.firm-body p {
  margin-bottom: 1.25rem;
}

.pull-quote {
  opacity: 1;
  font-weight: 500;
  color: var(--ink);
  border-left: 2px solid var(--red);
  padding-left: 1rem;
  margin-top: 2rem !important;
}

.protocol-col {
  padding-block: 2rem;
}

@media (min-width: 992px) {
  .protocol-col {
    padding-block: 2.5rem;
  }
}

.protocol-item {
  padding-block: 2.25rem;
  border-bottom: 1px solid var(--line);
}

.protocol-item:last-of-type {
  border-bottom: 0;
}

@media (min-width: 992px) {
  .protocol-item {
    padding-inline: 3.5rem;
  }
}

.protocol-num {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--red);
  margin-top: 0.25rem;
}

.protocol-title {
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.protocol-desc {
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.6;
  margin-top: 0.75rem;
  max-width: 48ch;
}

.protocol-plus {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
  flex: 0 0 auto;
  transition:
    opacity 0.2s,
    border-color 0.2s;
}

.protocol-item:hover .protocol-plus {
  opacity: 1;
  border-color: var(--ink);
}
.protocol-plus .icon {
  width: 12px;
  height: 12px;
}

.protocol-foot {
  padding-top: 2rem;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.4;
}

@media (min-width: 992px) {
  .protocol-foot {
    padding-inline: 3.5rem;
  }
}

/* --- team ----------------------------------------------------------------- */

.team-card {
  display: block;
  background: var(--paper);
  padding: 1.5rem;
  height: 100%;
}

/* Each card links to its lawyer profile, so it must not read as a link. */
a.team-card {
  color: inherit;
  text-decoration: none;
  transition: background 0.25s ease;
}

a.team-card:hover,
a.team-card:focus-visible {
  background: var(--line-soft);
}

a.team-card:hover .team-name,
a.team-card:focus-visible .team-name {
  color: var(--red);
}

a.team-card:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}

a.team-card .portrait-figure img {
  transition: transform 0.4s ease;
}

a.team-card:hover .portrait-figure img {
  transform: scale(1.04);
}

/* Below the 8-across breakpoint the card is narrow, so the desktop padding
   eats most of the portrait. Tighten padding and text with the card. */
@media (max-width: 1279px) {
  .team-card {
    padding: 1rem;
  }
}

@media (max-width: 767px) {
  .team-slide .team-card > .mt-4 {
    margin-top: 0.75rem !important;
  }
}

.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--line-soft);
  border: 1px solid var(--line);
  overflow: hidden;
}

/* =========================================
   LAWYER / TEAM CARD IMAGE
   ========================================= */

.portrait-figure {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: relative;
  margin: 0;
  background: #eeeae3;
}

/* All lawyer images become exactly the same size */
.portrait-figure img {
  display: block;
  width: 100% !important;
  height: 100% !important;

  object-fit: cover;
  object-position: center top;

  margin: 0 !important;
  padding: 0 !important;

  vertical-align: middle;
}

/* =========================================
   CARD
   ========================================= */

.divy.team-card,
.team-card {
  width: 100%;
  min-width: 0;
}

.divy.team-card .portrait,
.team-card .portrait {
  width: 100%;
  min-width: 0;
}

/* =========================================
   DESKTOP
   ========================================= */

@media (min-width: 992px) {
  .portrait-figure {
    aspect-ratio: 4 / 5;
  }
}

/* =========================================
   TABLET
   ========================================= */

@media (max-width: 991px) {
  .portrait-figure {
    aspect-ratio: 4 / 5;
  }
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {
  .portrait-figure {
    aspect-ratio: 4 / 5;
  }

  .portrait-figure img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center top;
  }
}

/* =========================================
   SMALL MOBILE
   ========================================= */

@media (max-width: 480px) {
  .portrait-figure {
    aspect-ratio: 4 / 5;
  }
}
.team-name {
  font-size: 15px;
  line-height: 1.2;
}

.team-role {
  font-size: 11px;
  margin-top: 0.2rem;
  letter-spacing: 0.02em;
}

.team-exp {
  font-size: 9px;
  margin-top: 0.4rem;
  opacity: 0.5;
  letter-spacing: 0.05em;
  line-height: 1.35;
  text-transform: uppercase;
}

/* Declared after the base sizes above so the mobile step-down actually wins
   (a media query adds no specificity). */
@media (max-width: 767px) {
  .team-name {
    font-size: 13px;
  }

  .team-role {
    font-size: 10px;
  }

  .team-exp {
    font-size: 8px;
    letter-spacing: 0.04em;
    margin-top: 0.3rem;
  }
}

/* --- team: responsive lawyer slider ----------------------------------------- */

.team-slider {
  position: relative;
  max-width: 100%;
}

.team-slider__viewport {
  display: flex;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
}

.team-slider__viewport::-webkit-scrollbar {
  display: none;
}

.team-slider__viewport:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}

.team-slide {
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  /* Every slide is exactly 1/Nth of the viewport, so all cards share one width. */
  flex: 0 0 calc(100% / var(--team-per-view, 1));
  max-width: calc(100% / var(--team-per-view, 1));
  scroll-snap-align: start;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* The slides sit in a single flex row, so every card stretches to the tallest
   one. The section height is therefore fixed no matter which page is shown. */
.team-slide > .team-card {
  flex: 1 1 auto;
}

/* --- team: section head (title + meta rule + slider arrows) ---------------- */

.team-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
}

.team-head__meta {
  flex: 1 1 auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.team-head__meta > span:first-child {
  white-space: nowrap;
}

.team-head__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

/* --- team: footer row (View All Associates + slider controls) -------------- */

.team-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.team-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  grid-column: 2;
  justify-self: center;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.team-view-all span {
  color: var(--red);
  transition: transform 0.25s ease;
}

.team-view-all:hover,
.team-view-all:focus-visible {
  border-color: var(--red);
  color: var(--red);
}

.team-view-all:hover span,
.team-view-all:focus-visible span {
  transform: translateX(4px);
}

.team-view-all:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.team-slider__controls {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.team-slider__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.team-slider__nav:hover:not(:disabled),
.team-slider__nav:focus-visible {
  border-color: var(--red);
  color: var(--red);
}

.team-slider__nav:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.team-slider__nav:disabled {
  opacity: 0.3;
  cursor: default;
}

/* --- team: slides per view -------------------------------------------------
   One knob per breakpoint. The slide width, the JS page step and the snap
   points all derive from it, so any number of members slides cleanly.        */

.team-slider__viewport {
  --team-per-view: 2.2; /* phones: 2 full cards + a peek of the 3rd */
}

@media (min-width: 576px) {
  .team-slider__viewport {
    --team-per-view: 3;
  }
}

@media (min-width: 768px) {
  .team-slider__viewport {
    --team-per-view: 4;
  }
}

@media (min-width: 992px) {
  .team-slider__viewport {
    --team-per-view: 6;
  }
}

@media (min-width: 1280px) {
  .team-slider__viewport {
    --team-per-view: 8; /* desktop: exactly 8 across */
  }
}

/* --- team: featured partners ------------------------------------------------
   Savita and Ambransh lead the section. Same card component, one modifier: the
   portrait sits beside the copy so a card twice as wide does not also run twice
   as tall as the ordinary cards sharing its row. The stacked layout is left
   alone between 768px and 1279px, where a featured slide is no wider than the
   rest and the side-by-side split would only squeeze both halves.            */

@media (min-width: 1280px), (max-width: 767px) {
  .team-card--featured {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .team-card--featured .portrait {
    flex: 0 0 50%;
  }

  .team-slide .team-card--featured > .mt-4 {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0 !important;
  }

  .team-card--featured .team-name {
    font-size: 19px;
  }

  .team-card--featured .team-role {
    font-size: 12px;
    margin-top: 0.35rem;
  }

  .team-card--featured .team-exp {
    font-size: 10px;
    margin-top: 0.55rem;
  }
}

/* Desktop: two rows, each opening with a featured partner. Row 1 is exactly
   full (featured + 7), so the second featured card lands at the start of row 2
   on its own; grid-column pins it there should the roster ever change. The
   whole team is on screen, so the viewport no longer scrolls and the arrows
   have nothing left to page through. */
@media (min-width: 1280px) {
  .team-slider__viewport {
    display: grid;
    grid-template-columns: 2.6fr repeat(7, minmax(0, 1fr));
    overflow: visible;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .team-slide {
    max-width: none;
  }

  .team-slide--featured {
    grid-column: 1;
  }

  /* Eight cells to a row rather than eight cards, so the ordinary cards keep
     the tighter padding they already use at this density. */
  .team-slider__viewport .team-card {
    padding: 1rem;
  }

  .team-slider__controls {
    display: none;
  }
}

/* Phones: the two partners come first, full width, then the rest of the roster
   in the existing two-up cards. order only reshuffles the visual flow, so no
   card is repeated and the DOM keeps its single copy of each profile. */
@media (max-width: 767px) {
  .team-slider__viewport {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .team-slide {
    max-width: none;
  }

  .team-slide--featured {
    grid-column: 1 / -1;
    order: -1;
  }

  .team-slider__controls {
    display: none;
  }
}

/* Tablet: the slider stays as it is, with the partners at the head of it. */
@media (min-width: 768px) and (max-width: 1279px) {
  .team-slide--featured {
    order: -1;
  }
}

@media (max-width: 991px) {
  .team-head {
    align-items: center;
  }
}

/* --- team: mobile is a full grid, not a slider -----------------------------
   Below 768px the whole roster is laid out at once, so the viewport stops
   scrolling and the arrows have nothing to do. The JS reads scrollWidth, sees
   nothing to scroll, and parks autoplay on its own.                          */

@media (max-width: 767px) {
  .team-slider__viewport {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    scroll-snap-type: none;
  }

  .team-slide {
    flex: none;
    max-width: none;
  }

  .team-head .team-slider__controls {
    display: none;
  }
}

/* --- offices -------------------------------------------------------------- */

.offices-band {
  background: var(--line-soft);
  border-block: 1px solid var(--line);
  padding-block: 4rem;
}

@media (min-width: 992px) {
  .offices-band {
    padding-block: 7rem;
  }
}

.office-card-home {
  position: relative;
  background: #f2f2f2;
  padding: 1.75rem;
  min-height: 190px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}

.office-card-home .dot-red {
  transition: transform 0.3s ease;
}

/* Matches the practice-card hover: a low-contrast warm tint plus a 1.5% scale,
   no inversion. The step is larger here (#f2f2f2 -> #eae8e2) than on the
   practice cards because this card starts on a grey rather than near-white, so
   the same absolute colour would have been invisible. z-index lifts the scaled
   tile over the .grid-frame seams this band still draws. */
.office-card-home:hover,
.office-card-home:focus-within {
  background: #eae8e2;
  transform: scale(1.0);
  z-index: 1;
}

.office-card-home:hover .dot-red,
.office-card-home:focus-within .dot-red {
  transform: scale(1.15);
}

.office-tag {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.5;
}

.office-city {
  font-size: 18px;
  line-height: 1.1;
  margin-top: 0.75rem;
  letter-spacing: -0.01em;
}

.office-address {
  font-size: 12px;
  line-height: 1.5;
  margin-top: 0.75rem;
  opacity: 0.6;
}
.office-card-home:hover .office-address,
.office-card-home:focus-within .office-address {
  opacity: 0.78;
}

.office-phone {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.office-card-home:hover .office-phone,
.office-card-home:focus-within .office-phone {
  border-top-color: #dedcd5;
}

/* --- FAQ ------------------------------------------------------------------ */

.faq-intro {
  margin-top: 2rem;
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.6;
  max-width: 36ch;
}

.faq-flag {
  margin-top: 2.5rem;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.faq-accordion {
  border-top: 1px solid var(--ink);
}

.faq-accordion .accordion-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
}

.faq-accordion .accordion-button {
  background: transparent;
  box-shadow: none;
  padding: 1.75rem 0;
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  align-items: flex-start;
  color: var(--ink);
}

.faq-accordion .accordion-button::after {
  display: none;
}
.faq-accordion .accordion-button:focus {
  box-shadow: none;
}
.faq-accordion .accordion-button:hover .faq-q {
  opacity: 0.7;
}

.faq-q {
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 42ch;
  text-align: left;
  transition: opacity 0.2s;
}

@media (min-width: 992px) {
  .faq-q {
    font-size: 20px;
  }
}

.plus-box {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}

.plus-box .icon {
  transition: transform 0.2s;
}

.accordion-button:not(.collapsed) .plus-box {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.accordion-button:not(.collapsed) .plus-box .icon {
  transform: rotate(45deg);
}
.accordion-button.collapsed:hover .plus-box {
  border-color: var(--ink);
  color: var(--red);
}

.faq-accordion .accordion-body {
  padding: 0 0 1.5rem;
  font-size: 14px;
  line-height: 1.7;
  opacity: 0.7;
  max-width: 62ch;
}

@media (min-width: 992px) {
  .faq-accordion .accordion-body {
    padding-left: 0.5rem;
    border-left: 1px solid var(--line);
  }
}

/* Homepage FAQ: two-column grid, flowing left-to-right/top-to-bottom in DOM order. */
@media (min-width: 768px) {
  .home .faq-accordion {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
  }
}

@media (min-width: 992px) {
  .home .faq-accordion {
    column-gap: 3.5rem;
  }
}

/* --- contact -------------------------------------------------------------- */

.contact-band {
  background: var(--ink);
  color: #fff;
  padding-block: 4rem;
}

@media (min-width: 992px) {
  .contact-band {
    padding-block: 7rem;
  }
}

.contact-title {
  font-size: 40px;
  line-height: 0.88;
  letter-spacing: -0.04em;
  margin-top: 1.5rem;
}

@media (min-width: 992px) {
  .contact-title {
    font-size: 64px;
  }
}

.contact-lede {
  margin-top: 2rem;
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.6;
  max-width: 44ch;
}

.contact-meta {
  margin-top: 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 2rem;
  max-width: 420px;
}

.contact-meta-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.4;
}

.contact-meta-value {
  font-size: 18px;
  margin-top: 0.5rem;
}

.intake-card {
  background: #fff;
  color: var(--ink);
  padding: 1.75rem;
}

@media (min-width: 992px) {
  .intake-card {
    padding: 2.5rem;
  }
}

.field {
  display: block;
  width: 100%;
}

.field-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

.field-input {
  width: 100%;
  margin-top: 0.5rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  outline: none;
  padding-block: 0.75rem;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  transition: border-color 0.2s;
}

.field-input:focus {
  border-bottom-color: var(--ink);
}
.field-input::placeholder {
  opacity: 0.3;
}
textarea.field-input {
  resize: none;
}

.intake-note {
  font-size: 10px;
  line-height: 1.4;
  opacity: 0.4;
  max-width: 22ch;
}

.btn-submit {
  height: 44px;
  padding-inline: 1.5rem;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  flex: 0 0 auto;
  transition: background 0.2s;
}

.btn-submit:hover {
  background: #000;
}

/* --- footer --------------------------------------------------------------- */

.site-footer {
  position: relative;
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding-block: 4.5rem 2rem;
}

.site-footer::before {
  position: absolute;
  top: -1px;
  left: max(40px, calc((100vw - var(--shell-max)) / 2));
  width: 72px;
  height: 2px;
  background: var(--red);
  content: '';
}

@media (min-width: 992px) {
  .site-footer {
    padding-block: 6rem 2rem;
  }
}

/* --- brand block --- */

/* Above the decorative photo that bleeds out of .footer-cols on wide screens. */
.footer-brand {
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* The 520px basis is a WIDTH only while brand and columns share a row; in the
   stacked (column) layout a flex-basis would become a 520px height. */
@media (min-width: 1400px) {
  .footer-brand {
    flex: 0 1 520px;
  }
}

/* Laptops: the footer is stacked, so split the brand block into two halves
   (lockup + tagline | values + address) instead of leaving the right empty. */
@media (min-width: 992px) and (max-width: 1399px) {
  .footer-brand {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 4rem;
    align-items: start;
  }

  .footer-lockup {
    grid-column: 1;
    grid-row: 1;
  }

  .footer-tagline {
    grid-column: 1;
    grid-row: 2;
  }

  .footer-values {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0.5rem;
  }

  .footer-address {
    grid-column: 2;
    grid-row: 2;
    margin-top: 1.75rem;
  }
}

.footer-lockup {
  display: flex;
  align-items: flex-start;
  gap: 1.75rem;
}

.footer-mark {
  flex: 0 0 84px;
  width: 84px;
  line-height: 0;
}

.footer-mark img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 96px;
  object-fit: contain;
  object-position: top left;
}

.footer-name {
  color: var(--ink);
  font-size: clamp(28px, 2.4vw, 36px);
  line-height: 1;
}

.footer-sub {
  margin-top: 0.75rem;
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.72;
}

.footer-rule {
  display: block;
  width: 48px;
  height: 2px;
  margin-top: 1.25rem;
  background: var(--red);
}

.footer-tagline {
  margin: 1.75rem 0 0;
  color: var(--ink);
  font-size: clamp(24px, 2vw, 29px);
  font-style: italic;
  line-height: 1.2;
  opacity: 0.85;
}

.footer-values {
  display: flex;
  flex-wrap: wrap;
  margin: 2rem 0 0;
  row-gap: 1rem;
}

.footer-values li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 1.75rem;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
  opacity: 0.8;
}

.footer-values li + li {
  padding-left: 1.75rem;
  border-left: 1px solid var(--line);
}

.footer-values li:last-child {
  padding-right: 0;
}

.footer-values .icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  stroke-width: 1.3;
}

.footer-address {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 2.25rem;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
}

.footer-address > div {
  color: rgba(10, 10, 10, 0.55);
}

.footer-address .icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  stroke-width: 1.4;
}

.footer-address__main {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--ink);
  font-size: 14px;
}

@media (max-width: 575px) {
  .footer-lockup {
    gap: 1.1rem;
  }

  .footer-mark {
    flex-basis: 64px;
    width: 64px;
  }

  .footer-sub {
    font-size: 10px;
    letter-spacing: 0.16em;
  }

  /* Three equal cells, icon above label, so the row never wraps. */
  .footer-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-values li {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 0 0.75rem;
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .footer-values li:first-child {
    padding-left: 0;
  }

  .footer-values li + li {
    padding-left: 0.75rem;
  }

  .footer-values .icon {
    flex-basis: auto;
    width: 22px;
    height: 22px;
  }
}

/* --- link columns and bottom bar --- */

.footer-cols {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 2rem;
  font-size: 14px;
  line-height: 1.6;
}

.footer-cols .footer-col-wide {
  grid-column: span 2;
}

/* Small phones: the two-column office list needs the full width. */
@media (max-width: 575px) {
  .footer-cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-cols .footer-col-wide {
    grid-column: auto;
  }
}

/* Tablet up: three columns separated by hairlines. */
@media (min-width: 768px) {
  .footer-cols {
    grid-template-columns: max-content max-content minmax(0, 30ch);
    gap: 0;
  }

  .footer-cols .footer-col-wide {
    grid-column: auto;
  }

  .footer-cols > div {
    padding: 0 2.25rem 0.5rem;
  }

  .footer-cols > div:first-child {
    padding-left: 0;
  }

  .footer-cols > div:last-child {
    padding-right: 0;
  }

  .footer-cols > div + div {
    border-left: 1px solid var(--line);
  }
}

@media (min-width: 992px) {
  .footer-cols > div {
    padding-right: 3rem;
    padding-left: 3rem;
  }
}

/* Wide desktop, where the columns sit beside the brand block: a faded photo of
   classical columns bleeds out to the left of Offices. Purely decorative, so
   it lives in a pseudo-element rather than markup. */
@media (min-width: 1400px) {
  .footer-cols {
    margin-top: 1.5rem;
  }

  .footer-cols::before {
    position: absolute;
    z-index: -1;
    content: '';
    pointer-events: none;
    top: -5rem;
    left: -230px;
    width: 190px;
    height: 380px;
    /* Tall crop of the capitals, washed out to a pale grey on the paper tone. */
    background: url('../img/footer-bg.jpg') 58% 20% / auto 150% no-repeat;
    filter: grayscale(1) brightness(1.55) contrast(0.5);
    opacity: 0.55;
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%), linear-gradient(to right, transparent 0, #000 35%, #000 80%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, #000 45%, transparent 100%), linear-gradient(to right, transparent 0, #000 35%, #000 80%, transparent 100%);
    mask-composite: intersect;
  }
}

.footer-col-head {
  color: var(--red);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 1;
  margin-bottom: 1.25rem;
}

.footer-list {
  color: var(--ink);
  opacity: 0.82;
  margin: 0;
}

.footer-offices {
  columns: 2;
  column-gap: 2.5rem;
  min-width: 190px;
}

.footer-offices li {
  break-inside: avoid;
}

.footer-list li + li {
  margin-top: 0.6rem;
}
.footer-list a {
  color: inherit;
  text-decoration: none;
}
.footer-list a:hover {
  color: var(--red);
  opacity: 1;
}

.footer-social {
  margin-top: 1.75rem;
}

.footer-social__label {
  display: block;
  margin-bottom: 12px;
  color: var(--ink);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  opacity: 0.6;
  text-transform: uppercase;
}

.footer-social__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-social__link {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.footer-social__link i {
  line-height: 1;
}

.footer-social__link:hover,
.footer-social__link:focus-visible {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

.footer-disclaimer {
  max-width: 34ch;
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.65;
  opacity: 0.6;
  margin: 0;
}

.footer-bottom {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  opacity: 0.62;
}

.footer-legal a {
  color: inherit;
  text-decoration: none;
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
  color: var(--red);
  opacity: 1;
}

.footer-bottom-row {
  width: 100%;
}

.footer-copy {
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.4;
}

.back-to-top {
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  color: var(--red);
}

.btt-line {
  width: 32px;
  height: 1px;
  background: var(--red);
  transition: width 0.3s;
}
.back-to-top:hover .btt-line {
  width: 48px;
}

.btt-box {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s;
}

.back-to-top:hover .btt-box {
  border-color: var(--ink);
}
.btt-box .icon {
  width: 14px;
  height: 14px;
}

.progress-bar-strip {
  height: 3px;
  width: 100%;
  background: var(--ink);
  position: relative;
  overflow: hidden;
}
.progress-bar-strip span {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 12%;
  background: var(--red);
}

/* --- modals --------------------------------------------------------------- */

/* --- toast ---------------------------------------------------------------- */

.toast-shell {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1090;
}

.ink-toast {
  background: var(--ink);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.ink-toast .toast-body {
  padding: 0.75rem 1rem;
}

/* new Css */

/* Menu spacing */

.primary-nav > .menu-item {
  margin: 0 12px;
}

/* Link */

.primary-nav > .menu-item > a {
  position: relative;

  display: inline-flex;
  align-items: center;
  min-height: 44px;

  padding: 0;

  color: var(--ink);

  font-size: 11px;
  font-weight: 500;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  text-decoration: none;
}

/* Underline */

.primary-nav > .menu-item > a::after {
  content: "";

  position: absolute;

  left: 0;

  bottom: 3px;

  width: 0;

  height: 2px;

  background: var(--red);

  transition: 0.35s;
}

.primary-nav > .menu-item > a:hover::after {
  width: 100%;
}

.primary-nav > .current-menu-item > a::after {
  width: 100%;
}
.header-actions {
  margin-left: 30px;
}

.contact-logo {
  text-align: center;
  overflow: hidden;
}

.contact-logo img {
  max-width: 180px;
  width: 100%;
  height: auto;
}

.contact-logo__mark {
  position: relative;
  display: inline-block;
  max-width: 180px;
  line-height: 0;
}

.contact-logo__reg {
  position: absolute;
  top: 0px;
  right: 2px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 100;
  line-height: 1;
}
.contact-logo__reg-header {
  position: absolute;
  top: 0px;
  left: 36px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 100;
  line-height: 1;
}

@media (min-width: 992px) {
  .map-card-h .contact-logo__mark {
    max-width: 220px;
  }

  .map-card-h .contact-logo__reg {
    font-size: 20px;
  }
}
/*=====================================
  CONTACT SECTION
======================================*/

.contact-section {
  background: var(--paper);
  padding: 120px 0;
  border-top: 1px solid var(--line);
}
@media (max-width: 991px) {
  .contact-section {
    padding: 60px 0;
  }
}
.contact-card {
  max-width: 1100px;
  margin: 0 auto;
}

/* --- secure consultation ------------------------------------------------- */

.secure-consultation-section {
  padding: 56px 0 72px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.secure-consultation-card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 64px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px;
  border: 1px solid var(--line);
  background: #fff;
}

@media (min-width: 992px) {
  .secure-consultation-section {
    padding: 88px 0 60px;
    background: var(--paper);
  }

  .secure-consultation-card {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.78fr);
    gap: 88px;
  }
}

.secure-consultation-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--red);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.secure-consultation-eyebrow .dot {
  width: 7px;
  height: 7px;
}

.secure-consultation-title {
  margin: 24px 0 20px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 400;
  line-height: 0.94;
}

.secure-consultation-title em {
  color: var(--red);
  font-style: italic;
}
.secure-consultation-form__heading p em {
  color: var(--red);
  font-style: italic;
}
.offices-band h2 em {
  color: var(--red);
  font-style: italic;
}

/* --- clients logo slider (template-parts/clients-slider.php) -------------
   Two rows flowing by column, so the scroller (and the JS step) moves one
   column of two logos at a time. --clients-cols sets how many show.          */

.clients-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  opacity: 0.6;
  text-transform: uppercase;
}

.clients-head h2 em {
  color: var(--red);
  font-style: italic;
}

.clients-slider {
  --clients-cols: 2;
  --clients-cell-h: 96px;
}

.clients-slider__viewport {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, var(--clients-cell-h));
  grid-auto-columns: calc(100% / var(--clients-cols));
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.clients-slider__viewport::-webkit-scrollbar {
  display: none;
}

.clients-slider__viewport:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.clients-slider__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  scroll-snap-align: start;
}

.clients-slider__cell img {
  display: block;
  width: auto;
  max-width: 78%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.72;
  mix-blend-mode: multiply;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.clients-slider__cell:hover img {
  filter: none;
  opacity: 1;
}

@media (min-width: 768px) {
  .clients-slider {
    --clients-cols: 4;
    --clients-cell-h: 110px;
  }

  .clients-slider__cell {
    padding: 18px 24px;
  }
}

@media (min-width: 1200px) {
  .clients-slider {
    --clients-cols: 6;
    --clients-cell-h: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clients-slider__cell img {
    transition: none;
  }
}
.main-bnb-work__legacy-title em {
  color: var(--red);
  font-style: italic;
}
.secure-consultation-lede {
  max-width: 100%;
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.7;
  opacity: 0.68;
}

.secure-consultation-details {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 42px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.secure-consultation-details div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.secure-consultation-details span,
.secure-consultation-form__heading span {
  color: var(--red);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.secure-consultation-details a {
  color: var(--ink);
  font-size: 13px;
}

.secure-consultation-details a:hover,
.secure-consultation-details a:focus-visible {
  color: var(--red);
}

.secure-consultation-reviews {
  margin-top: 42px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.secure-consultation-reviews__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.secure-consultation-reviews__head span,
.secure-consultation-reviews__head a {
  color: var(--red);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.secure-consultation-reviews__head a {
  color: var(--ink);
  opacity: 0.6;
}

.secure-consultation-reviews__head a:hover,
.secure-consultation-reviews__head a:focus-visible {
  color: var(--red);
  opacity: 1;
}

.secure-consultation-review-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.secure-consultation-review {
  margin: 0;
  padding-right: 18px;
  border-right: 1px solid var(--line);
}

.secure-consultation-review:last-child {
  padding-right: 0;
  border-right: 0;
}

.secure-consultation-review__stars {
  color: var(--red);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.secure-consultation-review p {
  margin: 10px 0 14px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.25;
}

.secure-consultation-review cite {
  color: var(--ink);
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.secure-consultation-review cite span {
  display: block;
  margin-top: 5px;
  color: var(--red);
  font-size: 9px;
  letter-spacing: 0.1em;
}

.secure-consultation-form {
  min-width: 0;
  max-width: 620px;
  width: 100%;
  margin-left: auto;
  padding-left: 40px;
  border-left: 1px solid var(--line);
}

.secure-consultation-form__heading {
  margin-bottom: 22px;
}

.secure-consultation-form__title {
  margin: 0 0 10px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(30px, 3.2vw, 40px);
  font-weight: 400;
  line-height: 1;
}

.secure-consultation-form__title em {
  color: var(--red);
  font-style: italic;
}

.secure-consultation-form__heading p {
  margin: 8px 0 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.64;
}

.secure-consultation-form .forminator-ui.forminator-custom-form {
  padding: 0;
  border: 0;
  background: transparent;
}

.secure-consultation-form input:-webkit-autofill,
.secure-consultation-form input:-webkit-autofill:hover,
.secure-consultation-form input:-webkit-autofill:focus,
.secure-consultation-form textarea:-webkit-autofill,
.secure-consultation-form select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--paper) inset !important;
  box-shadow: 0 0 0 1000px var(--paper) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* Forminator regenerates the suffix after select-1_, so target the stable ID prefix. */
.secure-consultation-form .forminator-field:has(> select[id^="forminator-form-277342__field--select-1_"]),
.secure-consultation-form select[id^="forminator-form-277342__field--select-1_"] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

.secure-consultation-form select[id^="forminator-form-277342__field--select-1_"] {
  display: block !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 992px) {
  .secure-consultation-form .forminator-ui .forminator-row {
    margin-bottom: 12px !important;
  }

  .secure-consultation-form .forminator-ui input:not(.forminator-screen-reader-only),
  .secure-consultation-form .forminator-ui textarea {
    padding: 11px 0 !important;
    font-size: 14px;
  }

  .secure-consultation-form .forminator-ui textarea {
    min-height: 110px;
  }

  .secure-consultation-form .forminator-ui .select2-selection__rendered {
    line-height: 46px !important;
  }

  .secure-consultation-form .forminator-ui .select2-selection__arrow {
    height: 46px !important;
  }
}

@media (max-width: 991px) {
  .secure-consultation-card {
    /* minmax(0, ...) not 1fr: a plain 1fr track cannot shrink below its
       widest child, so one wide form field (a native <select> sizes itself
       to its longest option) stretched the card past the screen edge. */
    grid-template-columns: minmax(0, 1fr);
    gap: 38px;
    padding: 34px;
  }

  .secure-consultation-copy {
    display: contents;
  }

  .secure-consultation-eyebrow {
    order: 1;
  }

  .secure-consultation-title {
    order: 2;
  }

  .secure-consultation-lede {
    order: 3;
  }

  .secure-consultation-copy .main-bnb-work__legacy-actions {
    order: 3;
  }

  .secure-consultation-form {
    order: 4;
    /* Desktop pushes the form right (margin-left: auto, max 620px). */
    max-width: 100%;
    margin-left: 0;
    padding: 34px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  /* Nothing inside the form may be wider than the form. */
  .secure-consultation-form .forminator-ui,
  .secure-consultation-form .forminator-row,
  .secure-consultation-form .forminator-col,
  .secure-consultation-form .forminator-field,
  .secure-consultation-form .select2-container,
  .secure-consultation-form .iti,
  .secure-consultation-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .secure-consultation-form select:not(.select2-hidden-accessible),
  .secure-consultation-form textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  .secure-consultation-form .forminator-row {
    flex-wrap: wrap;
  }

  .secure-consultation-form .forminator-ui label,
  .secure-consultation-form .forminator-ui .forminator-description,
  .secure-consultation-form .forminator-ui .forminator-checkbox-label {
    overflow-wrap: anywhere;
  }

  .secure-consultation-details {
    order: 5;
  }

  .secure-consultation-reviews {
    order: 6;
  }

  .secure-consultation-review-list {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .secure-consultation-review,
  .secure-consultation-review:last-child {
    padding: 0 0 20px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .secure-consultation-review:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
}

/* Google reviews slider (template-parts/google-reviews.php + assets/js/reviews-slider.js).
   Same three columns, gap and dividers as the static list; the track simply
   holds more cards and slides one card at a time. */
.secure-consultation-review-list--slider {
  --reviews-per-view: 3;
  --reviews-gap: 18px;
  display: block;
  overflow: hidden;
}

.secure-consultation-review-track {
  display: flex;
  gap: var(--reviews-gap);
  transition: transform 0.6s ease;
  will-change: transform;
}

.secure-consultation-review-list--slider .secure-consultation-review {
  flex: 0 0 calc((100% - (var(--reviews-per-view) - 1) * var(--reviews-gap)) / var(--reviews-per-view));
  box-sizing: border-box;
  min-width: 0;
}

/* Every card keeps its divider; only the right-most visible one hides it,
   as :last-child did in the static grid. */
.secure-consultation-review-list--slider .secure-consultation-review:last-child {
  padding-right: 18px;
  border-right: 1px solid var(--line);
}

.secure-consultation-review-list--slider .secure-consultation-review.is-edge {
  border-right-color: transparent;
}

@media (max-width: 991px) {
  .secure-consultation-review-list--slider {
    --reviews-per-view: 1;
    --reviews-gap: 20px;
  }

  .secure-consultation-review-list--slider .secure-consultation-review,
  .secure-consultation-review-list--slider .secure-consultation-review:last-child {
    padding: 0;
    border-right: 0;
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .secure-consultation-review-track {
    transition: none;
  }
}

/* Google attribution inside the review cards and block (Places API policy):
   avatar + author link + link to the review on Google Maps. The heading's
   "Google Review" link to the Maps listing is the block's Google attribution. */
.secure-consultation-review-list--slider[hidden] {
  display: none;
}

.secure-consultation-review cite a {
  color: inherit;
  text-decoration: none;
}

.secure-consultation-review cite a:hover,
.secure-consultation-review cite a:focus-visible {
  text-decoration: underline;
}

.secure-consultation-review__avatar {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: middle;
  object-fit: cover;
}


@media (max-width: 576px) {
  .secure-consultation-section {
    padding: 32px 0 48px;
  }

  .secure-consultation-card {
    gap: 12px;
    padding: 24px 18px;
  }

  .secure-consultation-details {
    flex-direction: column;
    gap: 18px;
  }
}
/* Mobile/tablet: "A Legacy of Legal Excellence" ends as its own block, the
   consultation form sits in a separate full-width white band, and Central
   line / Email / reviews start after it - instead of all three sharing one card. */
@media (max-width: 991px) {
  .secure-consultation-card {
    /* Stacking context for the band below, so it paints above the section
       background but under the form's own flash tint. */
    position: relative;
    z-index: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .secure-consultation-form {
    position: relative;
    margin: 18px 0;
    padding: 40px 0;
    border-top: 0;
  }

  /* The band itself: stretched from the form's column to the screen edges. */
  .secure-consultation-form::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    background: #fff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .secure-consultation-details {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
}
/*=====================================
  FORMINATOR
======================================*/

/*=========================================
FORM WRAPPER
=========================================*/

.forminator-ui.forminator-custom-form {
  background: #fff;
  border: 1px solid var(--line);
  padding: 60px;
}

@media (max-width: 991px) {
  .forminator-ui.forminator-custom-form {
    padding: 35px;
  }
}

@media (max-width: 576px) {
  .forminator-ui.forminator-custom-form {
    padding: 20px;
  }
}
/* Your specific field */

/*=========================================
ROWS
=========================================*/

.forminator-ui .forminator-row {
  margin-bottom: 20px !important;
}

.forminator-ui .forminator-col {
  min-width: 0;
}

/*=========================================
LABELS
=========================================*/

.forminator-ui label {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 10px;
}

/*=========================================
INPUTS
=========================================*/

.forminator-ui input:not(.forminator-screen-reader-only),
.forminator-ui textarea {
  width: 100% !important;

  background: transparent !important;

  border: none !important;
  border-bottom: 1px solid var(--line) !important;

  border-radius: 0 !important;

  padding: 16px 0 !important;

  color: var(--ink);

  font-size: 16px;

  font-family: var(--sans);

  box-shadow: none !important;

  transition: 0.3s;
}

.forminator-ui input::placeholder,
.forminator-ui textarea::placeholder {
  color: #999;
}

.forminator-ui input:focus,
.forminator-ui textarea:focus {
  border-bottom-color: var(--red) !important;

  box-shadow: none !important;
}

/* Inputs with a Forminator icon (e.g. the date picker's calendar): the rule
   above zeroes the side padding, so the text ran under the icon. Keep the
   icon on the left edge of the underline and give the text room beside it.
   More specific than every input rule here, including the consultation form. */
.forminator-ui .forminator-input-with-icon {
  position: relative;
}

.forminator-ui .forminator-input-with-icon [class*="forminator-icon-"] {
  position: absolute;
  top: 50%;
  left: 0 !important;
  margin: 0;
  transform: translateY(-50%);
  pointer-events: none;
}

.forminator-ui .forminator-input-with-icon input.forminator-input:not(.forminator-screen-reader-only) {
  padding-left: 28px !important;
}

/*=========================================
TEXTAREA
=========================================*/

.forminator-ui textarea {
  min-height: 180px;

  resize: vertical;
}

/*=========================================
SELECT2 FIX
=========================================*/

.forminator-ui .forminator-field {
  width: 100%;
  min-width: 0;
}

.forminator-ui .forminator-select,
.forminator-ui .select2-container,
.forminator-ui .select2,
.forminator-ui .selection,
.forminator-ui .select2-selection,
.forminator-ui .select2-selection--single {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  box-sizing: border-box;
}

.forminator-ui .select2-selection--single {
  height: 39px !important;

  border: none !important;

  border-bottom: 1px solid var(--line) !important;

  border-radius: 0 !important;

  background: transparent !important;
}

.forminator-ui .select2-selection__rendered {
  line-height: 56px !important;

  padding-left: 0 !important;

  color: var(--ink) !important;
}

.forminator-ui .select2-selection__arrow {
  height: 56px !important;

  right: 0 !important;
}

/*=========================================
CHECKBOX
=========================================*/

.forminator-ui .forminator-checkbox-box {
  border: 1px solid #bbb !important;

  border-radius: 0 !important;
}

.forminator-ui .forminator-checkbox-label {
  font-size: 13px;
}

/*=========================================
BUTTON
=========================================*/

.forminator-ui .forminator-button {
  width: 220px;

  height: 52px;

  background: var(--red) !important;

  color: #fff !important;

  border: none !important;

  border-radius: 0 !important;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  font-size: 13px;

  transition: 0.35s;
}

.forminator-ui .forminator-button:hover {
  background: var(--ink) !important;
}

/*=========================================
DESCRIPTION
=========================================*/

.forminator-ui .forminator-description {
  color: #777;

  font-size: 13px;
}

/*=========================================
FIELD ORDER — move the "career page" note
below the Submit button instead of above it
=========================================*/

.forminator-custom-form-277342 {
  display: flex;
  flex-direction: column;
}

.forminator-custom-form-277342 .forminator-row-last {
  order: 2;
}

.forminator-custom-form-277342 .forminator-row:has(#html-2) {
  order: 3;
  margin-top: 15px;
}

/*=========================================
ERRORS
=========================================*/

.forminator-ui .forminator-error-message {
  color: var(--red) !important;
}

/*=========================================
OVERFLOW FIX
=========================================*/

.forminator-ui,
.forminator-ui .forminator-row,
.forminator-ui .forminator-col,
.forminator-ui .forminator-field {
  max-width: 100%;
  box-sizing: border-box;
}
.forminator-ui.forminator-custom-form-277342.forminator-design--default
  .forminator-field
  select {
  width: 97% !important;
  max-width: 0% !important;
}
.contact-heading {
  margin-bottom: 50px;
}

.contact-heading .eyebrow {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 0.2em;

  color: #777;
}

.contact-heading .eyebrow::before {
  content: "";

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: var(--red);
}

.contact-heading h2 {
  margin: 25px 0;

  font-family: var(--serif);

  font-size: 64px;

  line-height: 0.92;

  font-weight: 400;

  color: var(--ink);
}

.contact-heading em {
  font-style: italic;
}
@media (max-width: 991px) {
  .contact-heading h2 {
    font-size: 42px;
  }
}
@media (max-width: 576px) {
  .contact-heading h2 {
    font-size: 32px;
  }
}
.contact-heading p {
  max-width: 500px;

  color: #666;

  font-size: 17px;

  line-height: 1.8;
}

.dropdown-menu {
  display: none;
  min-width: 220px;
  margin-top: 0;
  padding: 10px 0;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #fafaf8;
  box-shadow: 0 18px 36px rgba(10, 10, 10, 0.12);
}

.dropdown-menu.show {
  display: block;
}

@media (min-width: 992px) {
  .primary-nav > .menu-item.dropdown {
    position: relative;
  }

  .primary-nav > .menu-item.dropdown > .dropdown-menu {
    top: calc(100% + 12px);
    left: 0;
  }

  .primary-nav .dropdown-item {
    padding: 11px 18px;
    color: var(--ink);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .primary-nav .dropdown-item:hover,
  .primary-nav .dropdown-item:focus,
  .primary-nav .dropdown-item.active,
  .primary-nav .dropdown-item:active {
    color: var(--ink);
    background: #f0efeb;
  }
}

@media (max-width: 991px) {
  .custom-mobile-menu .primary-nav > .menu-item {
    margin: 0;
  }

  .custom-mobile-menu .primary-nav > .menu-item > a {
    display: block;
    min-height: 0;
    padding: 16px 0;
    font-size: clamp(24px, 7vw, 34px);
    font-family: var(--serif);
    letter-spacing: 0;
  }

  .custom-mobile-menu .dropdown-menu {
    position: static;
    display: none;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 0 14px 18px;
    overflow: visible;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  .custom-mobile-menu .dropdown-menu.show {
    display: block;
    visibility: visible;
    opacity: 1;
  }

  .custom-mobile-menu .dropdown {
    overflow: visible;
  }

  .custom-mobile-menu .dropdown-item {
    padding: 12px 0;
    color: #5f6267;
    font-family: var(--sans);
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .custom-mobile-menu .dropdown-item:hover,
  .custom-mobile-menu .dropdown-item:focus,
  .custom-mobile-menu .dropdown-item.active,
  .custom-mobile-menu .dropdown-item:active {
    color: var(--red);
    background: transparent;
  }

  .custom-mobile-menu .search-form {
    margin-top: 28px !important;
  }

  .custom-mobile-menu .header-actions {
    position: sticky;
    bottom: 0;
    display: block !important;
    margin: 22px -28px 0;
    padding: 14px 28px calc(14px + env(safe-area-inset-bottom));
    background: rgba(250, 250, 248, 0.98);
    border-top: 1px solid var(--line);
    z-index: 3;
  }

  .custom-mobile-menu .btn-consult {
    display: flex;
    width: 100%;
    height: 52px;
  }
}
#faqAccordion .accordion-button:not(.collapsed) {
  background: transparent !important;
}
@media (max-width: 575px) {
  .custom-mobile-menu .header-actions {
    margin-bottom: 4rem;
  }
}
@media (max-width: 991px) {
  body.menu-open {
    overflow: hidden !important;
    touch-action: none;
  }

  .custom-mobile-menu {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* =========================================
   PRACTICE TABS
========================================= */

.practice-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 35px;
  overflow-x: auto;
  scrollbar-width: none;
}

.practice-tabs::-webkit-scrollbar {
  display: none;
}

.practice-tab {
  position: relative;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;

  padding: 16px 24px;

  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: #777;

  white-space: nowrap;
  cursor: pointer;

  transition: 0.3s ease;
}

.practice-tab:hover {
  color: var(--ink);
}

.practice-tab.active {
  color: var(--ink);
}

/* RED ACTIVE LINE */

.practice-tab.active::after {
  content: "";
  position: absolute;

  left: 24px;
  right: 24px;
  bottom: -1px;

  height: 2px;

  background: var(--red);
}

/* =========================================
   TAB CONTENT
========================================= */

.practice-tab-content {
  min-height: 250px;
}

/* Bootstrap fade animation */

.practice-tab-content .tab-pane {
  transition: opacity 0.25s ease;
}

/* --- single practice area ----------------------------------------------- */

.practice-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 64px;
  align-items: start;
  width: min(100% - 80px, var(--shell-max));
  margin: 0 auto;
  padding: 64px 0 100px;
}

.practice-main {
  min-width: 0;
}

.practice-tabs {
  position: sticky;
  top: 84px;
  z-index: 2;
  margin-bottom: 42px;
  background: var(--paper);
}

.practice-tab {
  flex: 0 0 auto;
}

.practice-panel {
  display: none;
}

.practice-panel.active {
  display: block;
}

.practice-panel[hidden] {
  display: none !important;
}

/* Practice page body is editor content pasted from Word / Google Docs, so it
   arrives full of inline styles (font-size: 14pt / 12px / 18pt on spans,
   stray colours, <b> wrapped around whole headings) and uses h1-h6 almost at
   random. The rules below set one type scale and neutralise those inline
   styles; !important is only used where it has to beat a style attribute. */
.practice-content {
  max-width: 76ch;
  color: #333;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.8;
  overflow-wrap: break-word;
}

.practice-content > :first-child {
  margin-top: 0 !important;
}

.practice-content :is(p, li, div, span, b, strong, em, i, u, a, font, summary, td, th) {
  font-family: inherit !important;
}

.practice-content :is(p, li, div, span, b, strong, em, i, u, a, font)[style*="font-size"] {
  font-size: inherit !important;
}

.practice-content :is(p, li, span, b, strong, em, i, u, font)[style*="color"] {
  color: inherit !important;
}

.practice-content p {
  margin: 0 0 18px;
}

.practice-content :is(h1, h2, h3, h4, h5, h6) {
  margin: 40px 0 14px;
  color: var(--ink);
  font-family: var(--serif) !important;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.practice-content :is(h1, h2) {
  font-size: 30px !important;
}

.practice-content h3 {
  font-size: 24px !important;
}

.practice-content h4 {
  font-size: 20px !important;
}

.practice-content :is(h5, h6) {
  font-size: 18px !important;
}

/* Headings are already set in the display face; pasted <b>/<strong> inside
   them would only fake-bold a single-weight serif. */
.practice-content :is(h1, h2, h3, h4, h5, h6) :is(b, strong, span) {
  font-weight: inherit !important;
}

.practice-content :is(b, strong) {
  color: var(--ink);
  font-weight: 600;
}

.practice-content a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.practice-content :is(ul, ol) {
  margin: 0 0 22px;
  padding-left: 22px;
}

.practice-content li {
  margin-bottom: 8px;
  padding-left: 4px;
}

.practice-content li::marker {
  color: var(--red);
}

.practice-content li > :is(ul, ol) {
  margin: 8px 0 0;
}

.practice-content img {
  max-width: 100%;
  height: auto;
}

/* In-content FAQs: each question is a <details class="faq-section"> with an
   inline dark-card style. Restyled to match the homepage FAQ accordion. */
.practice-content :not(.faq-sec) + .faq-sec {
  border-top: 1px solid var(--ink);
}

.practice-content .faq-section {
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--line);
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
}

.practice-content .faq-ques {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}

.practice-content .faq-ques::-webkit-details-marker {
  display: none;
}

.practice-content .faq-ques::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--red);
  font-size: 22px;
  line-height: 1;
}

.practice-content .faq-section[open] > .faq-ques::after {
  content: "\2212";
}

.practice-content .faq-ques :is(b, strong) {
  font-weight: 500;
}

.practice-content .faq-section > :not(summary) {
  display: block;
  padding: 0 0 20px;
}

@media (max-width: 767px) {
  .practice-content {
    font-size: 15px;
  }

  .practice-content :is(h1, h2) {
    font-size: 24px !important;
  }

  .practice-content h3 {
    font-size: 21px !important;
  }

  .practice-content h4 {
    font-size: 18px !important;
  }

  .practice-content :is(h5, h6) {
    font-size: 17px !important;
  }

  .practice-content .faq-ques {
    font-size: 16px;
  }
}

.practice-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.practice-item {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s ease, padding 0.2s ease;
}

.practice-item:hover,
.practice-item:focus-visible {
  padding-right: 8px;
  padding-left: 8px;
  color: var(--red);
}

.practice-badge {
  color: var(--red);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.practice-item h3 {
  margin: 0;
  color: inherit;
  font-family: var(--serif);
  font-size: clamp(23px, 2.5vw, 34px);
  font-weight: 400;
  line-height: 1.05;
}

.practice-link {
  color: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.practice-sidebar {
  display: grid;
  gap: 18px;
}

.practice-sidebar .news-sidebar__card,
.practice-sidebar .sidebar-card,
.practice-sidebar .sidebar-cta {
  border: 1px solid var(--line);
  background: #fff;
}

.practice-sidebar .news-sidebar__card,
.practice-sidebar .sidebar-card {
  padding: 22px;
}

.practice-sidebar .sidebar-cta {
  padding: 26px 22px;
  border-top: 2px solid var(--red);
}

.practice-sidebar .sidebar-cta h3 {
  margin: 0 0 12px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
}

.practice-sidebar .sidebar-cta p {
  margin: 0 0 20px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.68;
}

.practice-sidebar .news-search {
  display: flex;
  gap: 8px;
}

.practice-sidebar .news-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  outline: 0;
}

.practice-sidebar .news-search button,
.practice-sidebar .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 14px;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

.practice-sidebar .btn-primary:hover,
.practice-sidebar .btn-primary:focus-visible,
.practice-sidebar .news-search button:hover,
.practice-sidebar .news-search button:focus-visible {
  background: var(--red);
  color: #fff;
}

.practice-sidebar__services .section-heading {
  margin-bottom: 18px;
}

/* Sidebar heading. Now that it names the location the string is long
   ("Legal Services in Chandigarh"), so it is set well below the 28-30px used
   by the other sidebar headings - at that size it wrapped to two lines and
   overpowered the 11px link list beneath it. */
.practice-sidebar .section-heading {
  margin-bottom: 16px;
}

.practice-sidebar .section-heading span {
  display: block;
  margin-bottom: 6px;
  color: var(--red);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.practice-sidebar .section-heading h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
}

/* Recent Articles / News / Bare Acts (template-parts/sidebar/recent.php). */
.sidebar-recent__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.sidebar-recent__list li {
  border-bottom: 1px solid var(--line);
}

.sidebar-recent__list a {
  display: block;
  padding: 12px 0;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s ease, padding 0.2s ease;
}

.sidebar-recent__list a:hover,
.sidebar-recent__list a:focus-visible {
  padding-left: 6px;
  color: var(--red);
}

.sidebar-recent__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
}

.sidebar-recent__meta {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 10px;
  letter-spacing: 0.1em;
  opacity: 0.5;
  text-transform: uppercase;
}

.sidebar-recent__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--red);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
}

.sidebar-recent__all span {
  font-size: 16px;
  line-height: 0;
  transition: transform 0.2s ease;
}

.sidebar-recent__all:hover span,
.sidebar-recent__all:focus-visible span {
  transform: translateX(4px);
}

.practice-sidebar__eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--red);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.practice-sidebar__services h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}

.legal-services-grid {
  display: grid;
  gap: 0;
  max-height: 370px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-color: var(--red) var(--line-soft);
  scrollbar-width: thin;
}

.single-practice-service-card {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  font-size: 11px;
  line-height: 1.35;
  text-decoration: none;
}

.single-practice-service-card:hover,
.single-practice-service-card:focus-visible {
  padding-left: 6px;
  color: var(--red);
}

/* The page being viewed: marked, not linked back to itself. */
.single-practice-service-card.is-current {
  color: var(--red);
  font-weight: 600;
}

/* An area with no page yet - listed, but not a dead link. */
.single-practice-service-card--plain {
  color: var(--ink);
  opacity: 0.45;
  cursor: default;
}

/* Recent resources below practice content. */
.bnb-resources {
  padding: 76px 0 100px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.bnb-resources > .bnb-container {
  width: min(100% - 80px, var(--shell-max));
  margin-inline: auto;
}

.bnb-resource-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 30px;
}

.bnb-resource-divider span {
  height: 1px;
  flex: 1;
  background: var(--line);
}

.bnb-resource-divider i {
  color: var(--red);
  font-size: 14px;
}

.bnb-resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.bnb-resource-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  min-height: 485px;
  border: 1px solid var(--line);
  background: #fafaf8;
}

.bnb-resource-card__header {
  display: flex;
  min-height: 88px;
  align-items: center;
  gap: 14px;
  padding: 22px;
  border-bottom: 1px solid var(--line);
}

.bnb-resource-card__icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
}

.bnb-resource-card__header h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.bnb-resource-card__line {
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 9px;
  background: var(--red);
}

.bnb-resource-list {
  flex: 1;
  padding: 0 24px;
}

.bnb-resource-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 68px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  text-decoration: none;
}

.bnb-resource-item:last-child {
  border-bottom: 0;
}

.bnb-resource-item:hover,
.bnb-resource-item:focus-visible {
  color: var(--red);
}

.bnb-resource-item__icon {
  color: var(--red);
  font-size: 11px;
}

.bnb-resource-item__content {
  display: -webkit-box;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
}

.bnb-resource-item__arrow {
  color: inherit;
  font-size: 16px;
}

.bnb-resource-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 24px 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--red);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

.bnb-resource-btn:hover,
.bnb-resource-btn:focus-visible {
  color: var(--ink);
}

@media (max-width: 991px) {
  .bnb-resources {
    padding: 56px 0 72px;
  }

  .bnb-resource-grid {
    grid-template-columns: 1fr;
  }

  .bnb-resource-card {
    min-height: 0;
  }
}

@media (max-width: 576px) {
  .bnb-resources > .bnb-container {
    width: calc(100% - 32px);
  }

  .bnb-resource-card__header {
    min-height: 78px;
    padding: 18px;
  }

  .bnb-resource-list {
    padding: 0 18px;
  }

  .bnb-resource-btn {
    margin-right: 18px;
    margin-left: 18px;
  }
}

@media (max-width: 991px) {
  .practice-layout {
    grid-template-columns: 1fr;
    gap: 44px;
    width: calc(100% - 40px);
    padding: 44px 0 72px;
  }

  .practice-tabs {
    top: 0;
  }

  .practice-sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .practice-sidebar .sidebar-cta {
    grid-column: 1 / -1;
  }
}

@media (max-width: 576px) {
  .practice-layout {
    width: calc(100% - 32px);
    padding-top: 28px;
  }

  .practice-tabs {
    margin-bottom: 28px;
  }

  .practice-item {
    grid-template-columns: 1fr auto;
    gap: 10px 16px;
  }

  .practice-badge {
    grid-column: 1 / -1;
  }

  .practice-item h3 {
    font-size: 24px;
  }

  .practice-sidebar {
    grid-template-columns: 1fr;
  }

  .practice-sidebar .sidebar-cta {
    grid-column: auto;
  }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 576px) {
  .practice-tabs {
    margin-bottom: 25px;
    display: block;
  }

  .practice-tab {
    padding: 14px 16px;
    font-size: 10px;
  }

  .practice-tab.active::after {
    left: 16px;
    right: 16px;
  }
}
/* =========================================================
   TRUSTED LEGAL EXPERTS + HOW WE WORK
   Theme:
   --ink  : #0a0a0a
   --paper: #fafaf8
   --red  : #d92323
   --line : #e5e5e5
   ========================================================= */

/* =========================================================
   SHARED CONTAINER
   ========================================================= */

.practice-overview-pro .bnb-container,
.po-workflow .bnb-container {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}

/* =========================================================
   TRUSTED LEGAL EXPERTS
   ========================================================= */

.practice-overview-pro {
  width: 100%;
  background: var(--paper);
  color: var(--ink);
  padding: 100px 0 80px;
  overflow: hidden;
}

/* Main two-column layout */

.practice-overview-pro .row {
  margin-left: 0;
  margin-right: 0;
}

/* Left content */

.po-left {
  width: 100%;
  max-width: 520px;
  padding-right: 60px;
  box-sizing: border-box;
}

/* Eyebrow */

.po-eyebrow {
  display: block;
  margin-bottom: 18px;

  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  color: var(--red);
}

/* Main heading */

.po-left h2 {
  margin: 0;
  max-width: 500px;

  font-family: var(--serif);
  font-size: clamp(42px, 4vw, 64px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.025em;

  color: var(--ink);
}

/* Red divider */

.po-line {
  width: 34px;
  height: 1px;
  background: var(--red);

  margin: 28px 0 24px;
}

/* Left paragraphs */

.po-left p {
  max-width: 470px;

  margin: 0 0 20px;

  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;

  color: #555;
}

/* Links */

.po-links {
  margin-top: 24px !important;
}

.po-links a {
  color: var(--red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.po-links a:hover {
  color: var(--red-hot);
}

/* =========================================================
   RIGHT FEATURE AREA
   ========================================================= */

.po-right {
  width: 100%;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  column-gap: 70px;
  row-gap: 55px;

  box-sizing: border-box;
}

/* Individual feature */

.po-feature {
  width: 100%;
  min-width: 0;

  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);

  column-gap: 16px;

  align-items: start;

  box-sizing: border-box;
}

/* Icon */

.po-feature-icon {
  width: 24px;

  display: flex;
  align-items: flex-start;
  justify-content: flex-start;

  padding-top: 2px;

  color: var(--red);
  font-size: 15px;
}

/* Feature content */

.po-feature > div:last-child {
  min-width: 0;
}

/* Feature heading */

.po-feature h3 {
  margin: 0;

  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;

  color: var(--ink);
}

/* Small red line */

.mini-line {
  width: 20px;
  height: 1px;

  margin: 8px 0 12px;

  background: var(--red);
}

/* Feature paragraph */

.po-feature p {
  max-width: 360px;

  margin: 0;

  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;

  color: #666;
}

/* =========================================================
   HOW WE WORK
   ========================================================= */

.po-workflow {
  width: 100%;
  background: var(--paper);
  color: var(--ink);
  padding: 50px 0 50px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

/* Workflow heading */

.po-workflow-head {
  width: 100%;
  max-width: 760px;

  margin: 0 auto;

  text-align: center;
}

/* Eyebrow */

.po-workflow-head .po-eyebrow {
  margin-bottom: 18px;
  font-size: 25px;
}

/* Divider */

.po-workflow-head .bnb-insights-divider {
  width: 40px;
  height: 1px;

  margin: 0 auto 22px;

  background: var(--red);
}

.po-workflow-head .bnb-insights-divider span {
  display: none;
}

/* Workflow heading */

.po-workflow-head h2 {
  margin: 0;

  font-family: var(--serif);
  font-size: clamp(21px, 4vw, 21px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;

  color: var(--ink);
}

/* Workflow description */

.po-workflow-head p {
  max-width: 620px;

  margin: 20px auto 0;

  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;

  color: #666;
}

/* =========================================================
   TIMELINE
   ========================================================= */

.po-timeline {
  position: relative;

  width: 100%;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 60px;
  row-gap: 55px;

  margin-top: 20px;

  box-sizing: border-box;
}

/* =========================================================
   TIMELINE - DESKTOP SINGLE ROW (01 -> 02 -> 03 -> 04)

   Desktop only (>=992px). Tablet keeps the 2x2 grid and mobile keeps its
   vertical timeline, both untouched. The four steps sit in one grid row, so
   they are already equal height; the content area below is clamped to a
   fixed height so a long step (02) cannot set a tall height for everything,
   and retainer-steps.js adds a Read more toggle to any step that overflows
   that clamp.
   ========================================================= */

@media (min-width: 992px) {
  .po-timeline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 32px;
    align-items: stretch;
  }

  .po-step {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 14px;
  }

  /* Wrapper is created by retainer-steps.js around the existing <ul>/<p>. */
  .po-step__content {
    position: relative;
    overflow: hidden;
    max-height: var(--po-step-content-max, 200px);
    transition: max-height 0.3s ease;
  }

  .po-step__content.is-expanded {
    max-height: var(--po-step-content-full, none);
  }

  /* Fade only while collapsed, so clipped text does not end mid-letter. */
  .po-step__content.is-clamped:not(.is-expanded)::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 42px;

    background: linear-gradient(to bottom, rgba(250, 250, 248, 0), var(--paper));

    pointer-events: none;
  }

  .po-step__content p,
  .po-step__content ul {
    max-width: none;
  }

  .po-step__toggle {
    align-self: flex-start;

    margin-top: 12px;
    padding: 0;

    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: var(--red);
    background: none;
    border: 0;
    cursor: pointer;
  }

  .po-step__toggle:hover,
  .po-step__toggle:focus-visible {
    color: var(--ink);
  }

  .po-step__toggle-icon {
    display: inline-block;
    margin-left: 6px;
    transition: transform 0.2s ease;
  }

  .po-step__toggle[aria-expanded="true"] .po-step__toggle-icon {
    transform: rotate(180deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .po-step__content,
  .po-step__toggle-icon {
    transition: none;
  }
}

/* =========================================================
   WORKFLOW CTA

   Centred "Get started" below the four steps. Reuses the site-wide
   .btn-consult component, so this only handles placement.
   ========================================================= */

.po-cta {
  display: flex;
  justify-content: center;

  margin-top: 60px;
}

@media (max-width: 767px) {
  .po-cta {
    margin-top: 42px;
  }

  .po-cta .btn-consult {
    width: 100%;
    justify-content: center;
  }
}

/* One-shot highlight on the consultation form when the CTA points at it.
   The form sits on the paper background with only a left rule, so the cue is
   a soft tint plus that rule turning red - no box-shadow ring, which would
   float oddly around an otherwise borderless column. */
@keyframes bnb-form-flash {
  0% {
    background-color: rgba(217, 35, 35, 0);
    border-left-color: var(--line);
  }

  25% {
    background-color: rgba(217, 35, 35, 0.08);
    border-left-color: var(--red);
  }

  100% {
    background-color: rgba(217, 35, 35, 0);
    border-left-color: var(--line);
  }
}

.secure-consultation-form.is-flash {
  /* Five blinks. Each cycle is kept short so the whole sequence stays around
     2.5s rather than dragging. */
  animation: bnb-form-flash 0.5s ease-out 5;
}

.secure-consultation-form:focus {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .secure-consultation-form.is-flash {
    animation: none;
  }
}

/* Individual step */

.po-step {
  position: relative;

  min-width: 0;

  padding: 0 30px;

  text-align: center;

  box-sizing: border-box;
}

.po-step::before {
  content: "";

  position: absolute;
  top: 12px;
  left: 0;
  right: 0;

  height: 1px;

  background: var(--line);

  z-index: 0;
}

/* Number circle */

.po-step-circle {
  position: relative;
  z-index: 2;

  width: 24px;
  height: 24px;

  margin: 0 auto 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--red);
  color: #fff;

  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;

  border-radius: 50%;
}

/* Step heading */

.po-step h3 {
  margin: 0 0 12px;

  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;

  color: var(--ink);
}

/* Step paragraph */

.po-step p {
  max-width: 440px;

  margin: 0 auto;

  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
  text-align: left;

  color: #666;
}

/* Step list (used when a step has multiple points) */

.po-step ul {
  max-width: 440px;

  margin: 0 auto;
  padding: 0;

  list-style: none;
  text-align: left;
}

.po-step li {
  position: relative;

  padding-left: 15px;
  margin-bottom: 10px;

  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;

  color: #666;
}

.po-step li:last-child {
  margin-bottom: 0;
}

.po-step li::before {
  content: "";

  position: absolute;
  top: 8px;
  left: 0;

  width: 5px;
  height: 5px;

  border-radius: 50%;
  background: var(--red);
}

/* =========================================================
   LARGE TABLET
   ========================================================= */

@media (max-width: 1199px) {
  .practice-overview-pro .bnb-container,
  .po-workflow .bnb-container {
    padding-left: 30px;
    padding-right: 30px;
  }

  .po-left {
    padding-right: 40px;
  }

  .po-right {
    column-gap: 45px;
    row-gap: 45px;
  }

  .po-feature p {
    font-size: 12.5px;
  }

  .po-step {
    padding: 0 20px;
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {
  .practice-overview-pro {
    padding: 75px 0 60px;
  }

  .practice-overview-pro .bnb-container,
  .po-workflow .bnb-container {
    padding-left: 25px;
    padding-right: 25px;
  }

  /* Trusted section becomes one column */

  .po-left {
    max-width: 700px;
    padding-right: 0;
    margin-bottom: 55px;
  }

  .po-left h2 {
    max-width: 650px;
  }

  .po-left p {
    max-width: 650px;
  }

  /* Features */

  .po-right {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 45px;
  }

  /* Workflow */

  .po-workflow {
    padding: 80px 0 90px;
  }

  .po-workflow-head h2 {
    font-size: 48px;
  }

  .po-timeline {
    margin-top: 60px;
  }

  .po-step {
    padding: 0 12px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
  .practice-overview-pro {
    padding: 60px 0 50px;
  }

  .practice-overview-pro .bnb-container,
  .po-workflow .bnb-container {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Trusted */

  .po-left {
    margin-bottom: 45px;
  }

  .po-left h2 {
    font-size: 44px;
    line-height: 1;
  }

  .po-left p {
    font-size: 13px;
    line-height: 1.7;
  }

  /* Feature grid becomes single column */

  .po-right {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .po-feature {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .po-feature p {
    max-width: none;
    font-size: 13px;
  }

  /* Workflow */

  .po-workflow {
    padding: 70px 0 75px;
  }

  .po-workflow-head h2 {
    font-size: 42px;
  }

  .po-workflow-head p {
    font-size: 13px;
  }

  /* Timeline becomes vertical */

  .po-timeline {
    grid-template-columns: 1fr;

    margin-top: 50px;

    gap: 30px;
    padding-left: 0;
  }

  /* Vertical line (replaces the desktop per-step horizontal line) */

  .po-timeline::before {
    content: "";

    position: absolute;

    top: 12px;
    bottom: 12px;
    left: 12px;

    width: 1px;
    height: auto;

    background: var(--line);
    z-index: 0;
  }

  .po-step::before {
    content: none;
  }

  .po-step {
    padding: 0 0 0 48px;
    text-align: left;
  }

  .po-step-circle {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
  }

  .po-step h3 {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.3;
  }

  .po-step p {
    max-width: none;
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
  }

  .po-step ul {
    max-width: none;
    margin: 0;
  }

  .po-step li {
    font-size: 12px;
    line-height: 1.6;
  }
}

/* Narrower desktops: four columns need tighter side padding than the 2x2
   grid did, so this reclaims the 20px set by the max-width:1199px block
   above. Scoped to >=992px, so tablet and mobile keep that padding. */
@media (min-width: 992px) and (max-width: 1199px) {
  .po-step {
    padding: 0 8px;
  }

  .po-timeline {
    column-gap: 24px;
  }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {
  .practice-overview-pro .bnb-container,
  .po-workflow .bnb-container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .po-left h2 {
    font-size: 38px;
  }

  .po-eyebrow {
    font-size: 9px;
  }

  .po-feature h3 {
    font-size: 12px;
  }

  .po-feature p {
    font-size: 12px;
  }

  .po-workflow-head h2 {
    font-size: 36px;
  }

  .po-workflow-head p {
    font-size: 12px;
  }

  .po-timeline {
    margin-top: 38px;
    gap: 26px;
  }

  .po-step {
    padding-left: 44px;
  }

  .po-timeline::before {
    left: 11px;
  }

  .po-step-circle {
    width: 22px;
    height: 22px;
  }
}
/* =========================================================
   ABOUT PAGE — FINAL SPACING / OFFICES / QUOTE
   Theme:
   --ink: #0a0a0a
   --paper: #fafaf8
   --red: #d92323
   --red-hot: #ff2a2a
   --line: #e5e5e5
   --line-soft: #f2f2f2
   ========================================================= */

/* ---------------------------------------------------------
   GLOBAL ABOUT PAGE
   --------------------------------------------------------- */

.bnb-section {
  padding: 90px 0;
  background: var(--paper);
}

.bnb-section--alt {
  background: #f5f5f2;
}

.bnb-section .bnb-container {
  width: min(100% - 80px, var(--shell-max));
  margin-inline: auto;
}

.bnb-page-hero .bnb-container {
  width: min(100% - 80px, var(--shell-max));
  margin-inline: auto;
}
.about-quote .bnb-container {
  width: min(100% - 80px, var(--shell-max));
  margin-inline: auto;
}
/* =========================================
   ABOUT HERO — COMPACT
   ========================================= */

/* Inner-page hero. Every standard page/archive/single uses this one component
   (the homepage and the city location pages have their own heroes and never
   use this class). The photo's columns sit on the right and its left side is
   near-black, so the text column stays readable; the overlay deepens the left
   and is strengthened on small screens where the text spans the full width.
   A page can swap the photo by setting --bnb-hero-image on the section. */
.bnb-page-hero {
  --bnb-hero-image: url('../img/hero-banner.png');
  position: relative;
  isolation: isolate;
  background: var(--ink) var(--bnb-hero-image) right center / cover no-repeat;
  color: var(--paper);
  padding: 90px 0 85px;
}

.bnb-page-hero::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(10, 10, 10, 0.88) 0%, rgba(10, 10, 10, 0.72) 45%, rgba(10, 10, 10, 0.25) 100%);
  content: '';
  pointer-events: none;
}

@media (max-width: 767px) {
  .bnb-page-hero {
    background-position: 72% center;
  }

  .bnb-page-hero::before {
    background: linear-gradient(90deg, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.75) 60%, rgba(10, 10, 10, 0.55) 100%);
  }
}

/* Per page type, keyed off WordPress body classes so no template changes:
   - single practice area pages  -> hero-banner5
   - every archive (post type + taxonomy, incl. /lawyers/) -> hero-banner1
   - search results             -> hero-banner-2
   - default-template pages      -> hero-banner4
   Everything else (contact, FAQ, single posts, profiles...) keeps the base
   hero-banner. All five photos are dark on the left with the subject on the
   right, so the shared position and overlay above suit each of them. */
.page-template-practice-single .bnb-page-hero {
  --bnb-hero-image: url('../img/hero-banner5.png');
}

.archive .bnb-page-hero {
  --bnb-hero-image: url('../img/hero-banner1.png');
}

.search .bnb-page-hero {
  --bnb-hero-image: url('../img/hero-banner-2.png');
}

.page-template-default .bnb-page-hero {
  --bnb-hero-image: url('../img/hero-banner4.png');
}

.bnb-page-hero__content {
  max-width: 850px;
}

.bnb-page-hero__title {
  color: var(--paper);
  font-family: var(--serif);
  font-size: clamp(48px, 5vw, 72px);
  line-height: 0.95;
  font-weight: 400;
  letter-spacing: -2px;
  margin: 18px 0 24px;
}

.bnb-page-hero__subtitle {
  max-width: 720px;
  color: rgba(250, 250, 248, 0.72);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

.bnb-page-hero__rule {
  width: 52px;
  height: 2px;
  border: 0;
  background: var(--red);
  margin: 28px 0 0;
}
.bnb-eyebrow,
.bnb-eyebrow--light {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.bnb-eyebrow {
  color: var(--red);
}

.bnb-eyebrow--light {
  color: var(--red);
}

/* ---------------------------------------------------------
   VISION
   --------------------------------------------------------- */

.bnb-section .split {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  gap: 90px;
  align-items: start;
}

.split__left {
  padding-right: 20px;
}

.bnb-h2 {
  font-family: var(--serif);
  color: var(--ink);
  font-size: clamp(42px, 4.5vw, 64px);
  line-height: 0.98;
  font-weight: 400;
  letter-spacing: -1.5px;
  margin: 16px 0 0;
}

.bnb-body {
  color: #444;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.75;
  margin: 0;
}

.split > div:last-child {
  padding-top: 25px;
}

.split > div:last-child .bnb-body + .bnb-body {
  margin-top: 25px;
}

/* ---------------------------------------------------------
   HISTORY / JOURNEY
   --------------------------------------------------------- */

.bnb-section--alt .bnb-h2 {
  margin-top: 12px;
}

.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}

.timeline__item {
  position: relative;
  padding: 32px 28px 0;
  border-left: 1px solid var(--line);
}

.timeline__item:first-child {
  border-left: 0;
  padding-left: 0;
}

.timeline__year {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 18px;
}

.timeline__text {
  color: #555;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
  max-width: 250px;
}

/* ---------------------------------------------------------
   PATRONS
   --------------------------------------------------------- */

.bnb-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.bnb-card {
  background: transparent;
  border: 1px solid var(--line);
  overflow: hidden;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease;
}

.bnb-card:hover {
  transform: translateY(-4px);
  border-color: #cfcfcf;
}

.bnb-card__img {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.05;
  overflow: hidden;
  background: #222;
}

.bnb-card__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);

  transition:
    filter 0.45s ease,
    transform 0.45s ease;
}
.bnb-card:hover .bnb-card__img img {
  filter: grayscale(0%);
  transform: scale(1.02);
}
.bnb-card__body {
  padding: 25px 25px 30px;
}

.bnb-label {
  color: var(--red);
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.bnb-h4 {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  font-weight: 400;
  margin: 0;
}

.bnb-body--muted {
  color: #666;
  font-family: var(--sans);
  line-height: 1.65;
  margin: 0;
}

/* ---------------------------------------------------------
   OFFICES
   --------------------------------------------------------- */

.bnb-section--dark {
  background: var(--ink);
  color: var(--paper);
  padding: 100px 0;
}

.bnb-section--dark .bnb-h2 {
  color: var(--paper) !important;
}

.bnb-section--dark .bnb-eyebrow--light {
  color: var(--red);
}

/* Office heading */
.bnb-section--dark > .bnb-container > .bnb-h2 {
  margin-top: 12px;
  margin-bottom: 50px;
}

/* Main office grid */
.offices-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid #292929;
  background: #111;
}

/* Individual office */
.office-card {
  min-height: 210px;
  padding: 30px;
  background: #111;
  border-right: 1px solid #292929;
  border-bottom: 1px solid #292929;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.office-card:nth-child(4n) {
  border-right: 0;
}

.office-card:nth-last-child(-n + 4) {
  border-bottom: 0;
}

.office-card:hover {
  background: #171717;
  border-color: #333;
}

/* Location icon */
.office-card .pin {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--red);
  font-family: var(--sans);
  font-size: 20px;

  border: 1px solid #333;
  margin-bottom: 28px;
}

/* Office name */
.office-card h5 {
  color: var(--paper);
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.05;
  margin: 0 0 12px;
}

/* Office address */
.office-card p {
  color: #999;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  max-width: 230px;
}

/* ---------------------------------------------------------
   VALUES
   --------------------------------------------------------- */

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.value-item {
  min-height: 170px;
  padding: 30px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.value-item h5 {
  position: relative;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-left: 22px;
  margin: 0 0 16px;
}

.value-item h5::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 1px;
  background: var(--red);
}

.value-item p {
  color: #666;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
  max-width: 300px;
}

/* ---------------------------------------------------------
   QUOTE
   --------------------------------------------------------- */

.about-quote {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 115px 0 110px;
  text-align: center;
}

.about-quote .bnb-container {
  max-width: 1000px;
}

.about-quote q {
  display: block;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -1.5px;
  margin: 0 auto 35px;
}

.about-quote q::before,
.about-quote q::after {
  color: var(--red);
}

.about-quote .author {
  color: #777;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.about-quote .author strong {
  color: var(--ink);
  font-weight: 600;
}

/* ---------------------------------------------------------
   UTILITY SPACING
   --------------------------------------------------------- */

.mb-8 {
  margin-bottom: 8px !important;
}

.mb-16 {
  margin-bottom: 16px !important;
}

.mb-48 {
  margin-bottom: 48px !important;
}

.text-center {
  text-align: center;
}

/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 991px) {
  .bnb-section .bnb-container {
    width: min(100% - 48px, var(--shell-max));
  }

  .bnb-section {
    padding: 75px 0;
  }

  .bnb-page-hero {
    padding: 100px 0 90px;
  }

  .bnb-section .split {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .split__left {
    padding-right: 0;
  }

  .split > div:last-child {
    padding-top: 0;
  }

  .timeline {
    grid-template-columns: repeat(2, 1fr);
  }

  .timeline__item {
    min-height: 190px;
    border-left: 1px solid var(--line);
  }

  .timeline__item:nth-child(3) {
    border-left: 0;
  }

  .timeline__item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .bnb-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .offices-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .office-card:nth-child(4n) {
    border-right: 1px solid #292929;
  }

  .office-card:nth-child(2n) {
    border-right: 0;
  }

  .office-card:nth-last-child(-n + 4) {
    border-bottom: 1px solid #292929;
  }

  .office-card:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-quote {
    padding: 90px 0;
  }
}

/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 767px) {
  .bnb-section .bnb-container {
    width: min(100% - 32px, var(--shell-max));
  }

  .bnb-section {
    padding: 60px 0;
  }

  /* HERO */
  .bnb-page-hero {
    padding: 65px 0 60px;
  }

  .bnb-page-hero__title {
    font-size: 46px;
    letter-spacing: -1px;
  }

  .bnb-page-hero__subtitle {
    font-size: 14px;
    line-height: 1.6;
  }

  /* VISION */
  .bnb-section .split {
    gap: 28px;
  }

  .bnb-h2 {
    font-size: 42px;
    letter-spacing: -1px;
  }

  .bnb-body {
    font-size: 14px;
    line-height: 1.7;
  }

  /* JOURNEY */
  .timeline {
    grid-template-columns: 1fr;
  }

  .timeline__item,
  .timeline__item:nth-child(3) {
    border-left: 0;
    border-bottom: 1px solid var(--line);
    padding: 28px 0;
    min-height: auto;
  }

  .timeline__item:last-child {
    border-bottom: 0;
  }

  .timeline__text {
    max-width: none;
  }

  /* PATRONS */
  .bnb-grid-3 {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .bnb-card__body {
    padding: 22px;
  }

  .bnb-h4 {
    font-size: 28px;
  }

  /* OFFICES */
  .bnb-section--dark {
    padding: 70px 0;
  }

  .bnb-section--dark > .bnb-container > .bnb-h2 {
    margin-bottom: 35px;
  }

  .offices-grid {
    grid-template-columns: 1fr;
  }

  .office-card,
  .office-card:nth-child(2n),
  .office-card:nth-child(4n) {
    border-right: 0;
    border-bottom: 1px solid #292929;
    min-height: auto;
    padding: 28px 24px;
  }

  .office-card:last-child {
    border-bottom: 0;
  }

  .office-card h5 {
    font-size: 27px;
  }

  /* VALUES */
  .values-grid {
    grid-template-columns: 1fr;
  }

  .value-item {
    min-height: auto;
    padding: 25px 22px;
  }

  /* QUOTE */
  .about-quote {
    padding: 75px 0;
  }

  .about-quote q {
    font-size: 40px;
    line-height: 1.02;
    letter-spacing: -0.8px;
  }

  .about-quote .author {
    font-size: 9px;
  }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {
  .bnb-section .bnb-container {
    width: calc(100% - 28px);
  }

  .bnb-page-hero {
    padding: 55px 0 50px;
  }

  .bnb-page-hero__title {
    font-size: 40px;
  }

  .bnb-h2 {
    font-size: 37px;
  }

  .timeline__year {
    font-size: 30px;
  }

  .office-card h5 {
    font-size: 25px;
  }

  .about-quote q {
    font-size: 34px;
  }
}
.hp-about-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}

.hp-about-list li {
  position: relative;
  padding-left: 24px;
  margin: 0 0 13px;

  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  color: #333;

  letter-spacing: 0;
}
.hp-about-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;

  width: 8px;
  height: 1px;

  background: var(--red);
}
/* =========================================================
   B&B INTERNS
   ========================================================= */

.bnb-interns-section {
  background: var(--paper);
  color: var(--ink);
  padding: 110px 0 120px;
}

.bnb-interns-container {
  width: min(1320px, calc(100% - 80px));
  margin: 0 auto;
}

/* =========================================================
   HEADER
   ========================================================= */

.bnb-interns-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 35px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.14);
}

.bnb-interns-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  color: var(--red);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.bnb-interns-eyebrow__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--red);
}

.bnb-interns-title {
  margin: 0;
  max-width: 760px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(48px, 5.5vw, 78px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.98;
}

.bnb-interns-title em {
  color: var(--red);
  font-style: italic;
}

.bnb-interns-count {
  flex-shrink: 0;
  color: #777777;
  font-family: Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* =========================================================
   FILTERS
   ========================================================= */

.bnb-interns-filters {
  padding: 28px 0 40px;
}

.bnb-intern-filter-form {
  display: flex;
  align-items: flex-end;
  gap: 18px;
}

.bnb-intern-search {
  width: 320px;
}

.bnb-intern-year {
  width: 180px;
}

.bnb-intern-search label,
.bnb-intern-year label {
  display: block;
  margin-bottom: 8px;
  color: #666666;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.bnb-search-field {
  position: relative;
}

.bnb-search-field input,
.bnb-intern-year select {
  width: 100%;
  height: 48px;
  padding: 0 45px 0 16px;
  border: 1px solid rgba(17, 17, 17, 0.2);
  border-radius: 0;
  outline: none;
  background: #ffffff;
  color: #111111;
  font-family: Arial, sans-serif;
  font-size: 13px;
  box-shadow: none;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.bnb-intern-year select {
  padding: 0 14px;
}

.bnb-search-field input:focus,
.bnb-intern-year select:focus {
  border-color: #111111;
  box-shadow: 0 0 0 1px #111111;
}

.bnb-search-field button {
  position: absolute;
  top: 50%;
  right: 13px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #111111;
  cursor: pointer;
  transform: translateY(-50%);
}

.bnb-search-field button svg {
  display: block;
  width: 18px;
  height: 18px;
}

.bnb-intern-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 20px;
  border: 1px solid #111111;
  color: #111111 !important;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-decoration: none !important;
  text-transform: uppercase;
  transition: all 0.25s ease;
}

.bnb-intern-reset:hover {
  background: #111111;
  color: #ffffff !important;
}

/* =========================================================
   GRID
   ========================================================= */

.bnb-intern-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  background: var(--paper);
}

/* =========================================================
   CARD
   ========================================================= */

.bnb-intern-card {
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  margin: -1px 0 0 -1px;
  overflow: hidden;
}

/* =========================================================
   IMAGE
   ========================================================= */

.bnb-intern-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 0.82 / 1;
  overflow: hidden;
  background: #e8e6e1;
}

.bnb-intern-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  /* filter: grayscale(100%); */
  transition:
    transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.45s ease;
}

/* Placeholder */

.bnb-intern-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #e8e6e1;
}

.bnb-intern-card__placeholder span {
  color: rgba(17, 17, 17, 0.22);
  font-family: Georgia, serif;
  font-size: 46px;
}

/* =========================================================
   DESCRIPTION HOVER
   ========================================================= */

.bnb-intern-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 28px;
  background: rgba(17, 17, 17, 0);
  opacity: 0;
  transition:
    opacity 0.35s ease,
    background 0.35s ease;
}

.bnb-intern-card__description {
  max-width: 100%;
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 13px;
  line-height: 1.65;
  transform: translateY(18px);
  transition: transform 0.4s ease;
}

/* Hover */

.bnb-intern-card:hover .bnb-intern-card__image img {
  transform: scale(1.045);
  filter: grayscale(20%);
}

.bnb-intern-card:hover .bnb-intern-card__overlay {
  opacity: 1;
  background: rgba(17, 17, 17, 0.82);
}

.bnb-intern-card:hover .bnb-intern-card__description {
  transform: translateY(0);
}

/* =========================================================
   DIFFERENT DESCRIPTION OVERLAY COLORS
   B&B THEME COLORS
   ========================================================= */

.bnb-intern-card.overlay-1:hover .bnb-intern-card__overlay {
  background: rgba(20, 20, 20, 0.9);
}

.bnb-intern-card.overlay-2:hover .bnb-intern-card__overlay {
  background: rgba(80, 26, 31, 0.92);
}

.bnb-intern-card.overlay-3:hover .bnb-intern-card__overlay {
  background: rgba(47, 43, 40, 0.92);
}

.bnb-intern-card.overlay-4:hover .bnb-intern-card__overlay {
  background: rgba(91, 24, 32, 0.92);
}

.bnb-intern-card.overlay-5:hover .bnb-intern-card__overlay {
  background: rgba(43, 42, 39, 0.92);
}

/* =========================================================
   CARD CONTENT
   ========================================================= */

.bnb-intern-card__content {
  min-height: 130px;
  padding: 22px 22px 24px;
  background: #ffffff;
}

.bnb-intern-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: #888888;
  font-family: Arial, sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.bnb-intern-card__batch {
  color: #d71920;
}
.bt-title {
  color: #d71920;
}
.bt-btitle {
  margin-top: 0.5rem;
}
.bnb-intern-card__name {
  margin: 0;
  color: #111111;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

/* Batch instead of View Profile */

.bnb-intern-card__batch-label {
  display: inline-block;
  margin-top: 16px;
  padding-top: 9px;
  border-top: 1px solid #d71920;
  color: #555555;
  font-family: Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* --- intern directory card ---------------------------------------------- */

.bnb-intern-card {
  background: var(--paper);
  border-color: var(--line);
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.bnb-intern-card:hover {
  background: #fff;
  border-color: var(--ink);
  transform: translateY(-4px);
}

.bnb-intern-card__image {
  aspect-ratio: 4 / 5;
  background: #e7e2da;
}

.bnb-intern-card__image img {
  filter: none;
}

.bnb-intern-card:hover .bnb-intern-card__image img {
  filter: none;
}

.bnb-intern-card__overlay {
  display: flex;
  align-items: flex-end;
  padding: 22px;
  background: rgba(10, 10, 10, 0.84);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.bnb-intern-card:hover .bnb-intern-card__overlay,
.bnb-intern-card:focus .bnb-intern-card__overlay,
.bnb-intern-card:focus-within .bnb-intern-card__overlay,
.bnb-intern-card:active .bnb-intern-card__overlay {
  opacity: 1;
  pointer-events: auto;
}

.bnb-intern-card__description {
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
  transform: none;
}

.bnb-intern-card__description::-webkit-scrollbar {
  width: 4px;
}

.bnb-intern-card__description::-webkit-scrollbar-thumb {
  background: var(--red);
}

.bnb-intern-card__content {
  min-height: 240px;
  padding: 22px 22px 24px;
  background: var(--paper);
}

.bnb-intern-card:hover .bnb-intern-card__content {
  background: #fff;
}

.bnb-intern-card__meta {
  margin-bottom: 14px;
  color: var(--red);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.13em;
}

.bnb-intern-card__batch {
  color: var(--ink);
  opacity: 0.55;
}

.bt-title {
  color: var(--red);
}

.bnb-intern-card__name {
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(25px, 2.2vw, 34px);
  letter-spacing: 0;
  line-height: 1.05;
}

.bnb-intern-card__college {
  margin: 11px 0 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.45;
  opacity: 0.62;
}

/* =========================================================
   NO RESULTS
   ========================================================= */

.bnb-intern-empty {
  padding: 100px 30px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  text-align: center;
  background: #ffffff;
}

.bnb-intern-empty__eyebrow {
  margin-bottom: 12px;
  color: #d71920;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.bnb-intern-empty h3 {
  margin: 0 0 12px;
  font-family: Georgia, serif;
  font-size: 38px;
  font-weight: 400;
}

.bnb-intern-empty p {
  margin: 0 0 25px;
  color: #666666;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

.bnb-intern-empty__button {
  display: inline-block;
  padding: 13px 20px;
  background: #111111;
  color: #ffffff !important;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-decoration: none !important;
  text-transform: uppercase;
}

/* End-of-page careers CTA. Built entirely from existing generic components
   (.bnb-section, .bnb-h2, .bnb-body, .btn-consult) - this block only adds
   the centered stack layout around them. */
.bnb-interns-cta__inner {
  max-width: 640px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.bnb-interns-cta .bnb-h2 {
  font-size: clamp(32px, 4vw, 44px);
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {
  .bnb-interns-container {
    width: min(100% - 50px, 1000px);
  }

  .bnb-intern-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =========================================================
   MOBILE
   IMPORTANT: TWO COLUMNS
   ========================================================= */

@media (max-width: 767px) {
  .bnb-interns-section {
    padding: 70px 0 80px;
  }

  .bnb-interns-container {
    width: calc(100% - 28px);
  }
  .bt-btitle {
    margin-top: 0.5rem;
  } /* Header */

  .bnb-interns-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 24px;
  }

  .bnb-interns-title {
    font-size: clamp(42px, 12vw, 62px);
    line-height: 0.98;
  }

  .bnb-interns-count {
    font-size: 9px;
  }

  /* Filters */

  .bnb-interns-filters {
    padding: 22px 0 28px;
  }

  .bnb-intern-filter-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .bnb-intern-search {
    width: auto;
    grid-column: 1 / -1;
  }

  .bnb-intern-year {
    width: auto;
  }

  .bnb-intern-reset {
    width: 100%;
  }

  /* TWO COLUMN GRID */

  .bnb-intern-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Smaller cards */

  .bnb-intern-card__image {
    aspect-ratio: 0.78 / 1;
  }

  .bnb-intern-card__content {
    min-height: 105px;
    padding: 14px 12px 16px;
  }

  .bnb-intern-card__meta {
    display: block;
    margin-bottom: 8px;
    margin-top: 0.5rem;
    font-size: 7px;
    line-height: 1.5;
  }

  .bnb-intern-card__batch {
    display: none;
  }

  .bnb-intern-card__name {
    font-size: 18px;
    line-height: 1.08;
  }

  .bnb-intern-card__batch-label {
    margin-top: 10px;
    padding-top: 7px;
    font-size: 7px;
  }

  /* Hover description becomes tap/focus friendly */

  .bnb-intern-card__overlay {
    padding: 15px;
  }

  .bnb-intern-card__description {
    font-size: 10px;
    line-height: 1.5;
    max-height: 120px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {
  .bnb-interns-title {
    font-size: 38px;
  }

  .bnb-intern-card__name {
    font-size: 16px;
  }

  .bnb-intern-card__description {
    font-size: 9px;
    max-height: 120px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 767px) {
  .bnb-intern-card__content {
    min-height: 220px;
    padding: 16px 14px 18px;
  }

  .bnb-intern-card__meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 8px;
  }

  .bnb-intern-card__batch {
    display: block;
    text-align: right;
  }

  .bnb-intern-card__name {
    font-size: 20px;
  }

  .bnb-intern-card__college {
    font-size: 10px;
  }

  .bnb-intern-card__excerpt {
    font-size: 11px;
  }
}

/* Final intern-card alignment overrides. */
.bnb-intern-card {
  display: flex;
  flex-direction: column;
}

.bnb-intern-card__image {
  flex: 0 0 auto;
  aspect-ratio: 4 / 5;
}

.bnb-intern-card__image img {
  object-position: center 12%;
}

.bnb-intern-card__content {
  display: flex;
  min-height: 115px;
  flex: 1;
  flex-direction: column;
  padding: 20px 20px 0px;
}

.bnb-intern-card__meta {
  min-height: 18px;
  margin-bottom: 12px;
}

.bnb-intern-card__name {
  min-height: 2.1em;
}

.bnb-intern-card__college {
  min-height: 32px;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .bnb-intern-card__image {
    aspect-ratio: 4 / 5;
  }

  .bnb-intern-card__content {
    min-height: 100px;
    padding: 15px 14px 17px;
  }

  .bnb-intern-card__meta {
    min-height: 24px;
  }

  .bnb-intern-card__name {
    min-height: 2.16em;
    font-size: 19px;
  }

  .bnb-intern-card__college {
    min-height: 30px;
  }
}

/* =========================================================
   B&B CAREERS
   ========================================================= */
.career-intro {
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;

  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  grid-template-areas:
    "eyebrow content"
    "title   content";
  grid-template-rows: auto 1fr;
  column-gap: 70px;
  align-items: start;
}

.career-intro .bnb-eyebrow {
  grid-area: eyebrow;
  margin-bottom: 16px;
}

.bnb-careers-hero .career-title {
  grid-area: title;
  max-width: none;
  margin: 0;
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(38px, 4.4vw, 62px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.03em;
}

.career-title span {
  color: var(--red);
}

.career-intro__content {
  grid-area: content;
  border-left: 2px solid var(--red);
  padding-left: 28px;
}

.bnb-careers-hero .career-intro__content p {
  max-width: none;
  margin: 0 0 14px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: #555;
}

.bnb-careers-hero .career-intro__content p:last-child {
  margin-bottom: 0;
}

.bnb-careers {
  background: var(--paper, #fafaf8);
  color: var(--ink, #0a0a0a);
}

/* =========================================================
   HERO
   ========================================================= */

.bnb-careers-hero {
  padding: 60px 0 55px;
  border-bottom: 1px solid var(--line, #e5e5e5);
}

.bnb-careers-container {
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
}

.bnb-careers-eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  font-family: var(--sans, Inter, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red, #d92323);
}

.bnb-careers-hero h1 {
  margin: 0;
  max-width: 850px;
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(48px, 7vw, 86px);
  line-height: 0.95;
  font-weight: 400;
  letter-spacing: -0.035em;
}

.bnb-careers-hero p {
  max-width: 720px;
  margin: 28px 0 0;
  font-family: var(--sans, Inter, sans-serif);
  font-size: 17px;
  line-height: 1.75;
  color: #555;
}

/* =========================================================
   CAREERS CONTENT
   ========================================================= */

.bnb-careers-content {
  padding: 70px 0 90px;
}

.bnb-careers-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}

/* LEFT */

.bnb-careers-intro {
  position: sticky;
  top: 120px;
}

.bnb-careers-intro h2 {
  margin: 0 0 18px;
  font-family: var(--serif, Georgia, serif);
  font-size: 38px;
  line-height: 1.05;
  font-weight: 400;
}

.bnb-careers-intro p {
  margin: 0;
  font-family: var(--sans, Inter, sans-serif);
  font-size: 14px;
  line-height: 1.75;
  color: #666;
}

/* =========================================================
   ACCORDION
   ========================================================= */

.bnb-careers-accordion {
  border-top: 1px solid var(--line, #e5e5e5);
}

.bnb-career-item {
  border-bottom: 1px solid var(--line, #e5e5e5);
}

/* HEADER */

.bnb-career-trigger {
  width: 100%;
  padding: 28px 0;
  border: 0;
  background: transparent;
  color: var(--ink, #0a0a0a);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;

  text-align: left;
  cursor: pointer;
}

.bnb-career-trigger:hover {
  color: var(--red, #d92323);
}

.bnb-career-trigger-left {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.bnb-career-number {
  flex: 0 0 auto;

  font-family: var(--sans, Inter, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--red, #d92323);
}

.bnb-career-title {
  margin: 0;

  font-family: var(--serif, Georgia, serif);
  font-size: clamp(25px, 3vw, 36px);
  line-height: 1.1;
  font-weight: 400;
}

.bnb-career-arrow {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;

  border: 1px solid var(--line, #e5e5e5);
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: 0.3s ease;
}

.bnb-career-arrow svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: transform 0.3s ease;
}

/* OPEN */

.bnb-career-item.is-open .bnb-career-arrow {
  border-color: var(--red, #d92323);
  color: var(--red, #d92323);
}

.bnb-career-item.is-open .bnb-career-arrow svg {
  transform: rotate(45deg);
}

/* =========================================================
   ACCORDION CONTENT
   ========================================================= */

.bnb-career-panel {
  display: grid;
  grid-template-rows: 0fr;

  transition: grid-template-rows 0.4s ease;
}

.bnb-career-item.is-open .bnb-career-panel {
  grid-template-rows: 1fr;
}

.bnb-career-panel-inner {
  overflow: hidden;
}

.bnb-career-details {
  padding: 0 58px 35px 48px;
}

.bnb-career-description {
  max-width: 720px;
  margin: 0 0 25px;

  font-family: var(--sans, Inter, sans-serif);
  font-size: 15px;
  line-height: 1.75;
  color: #555;
}

.bnb-career-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.bnb-career-meta span {
  padding: 8px 13px;

  border: 1px solid var(--line, #e5e5e5);
  border-radius: 3px;

  font-family: var(--sans, Inter, sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: #555;
}

/* =========================================================
   POSITION FACTS
   ========================================================= */

.bnb-career-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 40px;
  margin: 0 0 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line, #e5e5e5);
}

.bnb-career-fact--wide {
  grid-column: 1 / -1;
}

.bnb-career-fact dt {
  margin: 0 0 7px;

  font-family: var(--sans, Inter, sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: var(--red, #d92323);
}

.bnb-career-fact dd {
  margin: 0;

  font-family: var(--sans, Inter, sans-serif);
  font-size: 14px;
  line-height: 1.7;
  color: #555;
}

.bnb-career-fact dd a {
  color: var(--ink, #0a0a0a);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bnb-career-fact ul,
.bnb-career-fact ol {
  margin: 0;
  padding-left: 18px;
}

.bnb-career-fact--wide ul {
  columns: 2;
  column-gap: 40px;
}

.bnb-career-fact li {
  break-inside: avoid;
  margin-bottom: 3px;
}

/* =========================================================
   SIDEBAR NOTES
   ========================================================= */

.bnb-careers-notes {
  list-style: none;
  margin: 30px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line, #e5e5e5);
}

.bnb-careers-notes li {
  margin-bottom: 14px;

  font-family: var(--sans, Inter, sans-serif);
  font-size: 13px;
  line-height: 1.65;
  color: #666;
}

.bnb-careers-notes li span {
  display: block;
  margin-bottom: 2px;

  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink, #0a0a0a);
}

.bnb-careers-notes a {
  color: var(--ink, #0a0a0a);
}

.bnb-careers-notes__strong {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--red, #d92323) !important;
}

@media (max-width: 767px) {
  .bnb-career-facts {
    grid-template-columns: 1fr;
  }

  .bnb-career-fact--wide ul {
    columns: 1;
  }
}

/* =========================================================
   APPLY BUTTON
   ========================================================= */

.bnb-career-apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  padding: 13px 22px;

  border: 1px solid var(--ink, #0a0a0a);
  border-radius: 3px;

  background: var(--ink, #0a0a0a);
  color: #fff;

  font-family: var(--sans, Inter, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  text-decoration: none;
  cursor: pointer;

  transition: 0.3s ease;
}

.bnb-career-apply:hover {
  background: var(--red, #d92323);
  border-color: var(--red, #d92323);
  color: #fff;
}

.bnb-career-apply svg {
  width: 15px;
  height: 15px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* =========================================================
   APPLICATION MODAL
   ========================================================= */

.bnb-application-modal .modal-dialog {
  max-width: 850px;
}

.bnb-application-modal .modal-content {
  position: relative;

  border: 1px solid var(--line, #e5e5e5);
  border-radius: 0;

  background: var(--paper, #fafaf8);
  color: var(--ink, #0a0a0a);

  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.18);
}

.bnb-application-modal .modal-header {
  padding: 32px 40px 22px;

  border-bottom: 1px solid var(--line, #e5e5e5);
}

.bnb-application-modal .modal-title {
  margin: 0;

  font-family: var(--serif, Georgia, serif);
  font-size: 38px;
  font-weight: 400;
}

.bnb-application-modal .modal-subtitle {
  margin: 8px 0 0;

  font-family: var(--sans, Inter, sans-serif);
  font-size: 13px;
  color: #777;
}

.bnb-application-modal .btn-close {
  position: absolute;
  top: 22px;
  right: 25px;

  width: 35px;
  height: 35px;

  opacity: 1;
  border: 1px solid var(--line, #e5e5e5);
  border-radius: 50%;

  background-size: 11px;
}

.bnb-application-modal .modal-body {
  padding: 35px 40px 40px;
}

/* Forminator inside modal */

.bnb-application-modal .forminator-ui {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;
}

.bnb-application-modal .forminator-ui input,
.bnb-application-modal .forminator-ui textarea,
.bnb-application-modal .forminator-ui select {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 991px) {
  .bnb-careers-hero {
    padding: 50px 0 45px;
  }

  .career-intro {
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "title"
      "content";
    grid-template-rows: auto;
  }

  .bnb-careers-hero .career-title {
    margin-bottom: 26px;
  }

  .bnb-careers-content {
    padding: 55px 0 65px;
  }

  .bnb-careers-notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 30px;
  }

  .bnb-careers-notes li {
    margin-bottom: 0;
  }

  .bnb-careers-layout {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .bnb-careers-intro {
    position: static;
  }

  .bnb-careers-intro h2 {
    font-size: 34px;
  }

  .bnb-career-details {
    padding-left: 35px;
    padding-right: 20px;
  }
}

@media (max-width: 767px) {
  .bnb-careers-container {
    width: min(100% - 30px, 1200px);
  }

  .career-intro {
    width: min(100% - 30px, 1200px);
  }

  .bnb-careers-hero {
    padding: 40px 0 36px;
  }

  .bnb-careers-hero .career-title {
    font-size: 36px;
    margin-bottom: 22px;
  }

  .career-intro__content {
    padding-left: 18px;
  }

  .bnb-careers-hero .career-intro__content p {
    font-size: 14px;
    line-height: 1.65;
  }

  .bnb-careers-content {
    padding: 40px 0 50px;
  }

  .bnb-careers-layout {
    gap: 32px;
  }

  .bnb-careers-intro h2 {
    font-size: 28px;
  }

  .bnb-careers-notes {
    grid-template-columns: 1fr;
    margin-top: 22px;
    padding-top: 18px;
  }

  .bnb-career-facts {
    gap: 18px;
    padding-top: 20px;
  }

  .bnb-career-fact dd {
    font-size: 13px;
    overflow-wrap: anywhere;
  }

  .bnb-career-trigger {
    padding: 23px 0;
    gap: 15px;
  }

  .bnb-career-trigger-left {
    gap: 12px;
  }

  .bnb-career-title {
    font-size: 27px;
  }

  .bnb-career-arrow {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .bnb-career-details {
    padding: 0 0 28px 27px;
  }

  .bnb-career-description {
    font-size: 14px;
  }

  .bnb-application-modal .modal-dialog {
    margin: 12px;
  }

  .bnb-application-modal .modal-header {
    padding: 28px 25px 20px;
  }

  .bnb-application-modal .modal-title {
    font-size: 31px;
    padding-right: 35px;
  }

  .bnb-application-modal .modal-body {
    padding: 25px 20px 30px;
  }
}

@media (max-width: 480px) {
  .bnb-careers-hero .career-title {
    font-size: 31px;
  }

  .bnb-career-title {
    font-size: 24px;
  }

  .bnb-career-number {
    font-size: 10px;
  }

  .bnb-career-details {
    padding-left: 0;
  }

  .bnb-career-meta {
    gap: 7px;
  }

  .bnb-career-meta span {
    font-size: 9px;
    padding: 7px 9px;
  }

  .bnb-career-apply {
    width: 100%;
  }
}
/* =========================================================
   CONTACT / CONSULTATION SECTION
   ========================================================= */

.bnb-ct-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 80px;
  align-items: start;
}

/* LEFT FORM */
.bnb-ct-grid > div:first-child {
  min-width: 0;
}

.bnb-ct-field {
  margin-bottom: 24px;
}

.bnb-ct-field label {
  display: block;
  margin-bottom: 9px;

  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: #666;
}

.bnb-ct-field input,
.bnb-ct-field select,
.bnb-ct-field textarea {
  width: 100%;
  box-sizing: border-box;

  padding: 15px 0;

  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;

  color: var(--ink);

  font-family: var(--sans);
  font-size: 16px;

  outline: none;

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.bnb-ct-field input::placeholder,
.bnb-ct-field textarea::placeholder {
  color: #999;
}

.bnb-ct-field input:focus,
.bnb-ct-field select:focus,
.bnb-ct-field textarea:focus {
  border-bottom-color: var(--red);
  box-shadow: none;
}

/* SELECT */
.bnb-ct-field select {
  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;

  padding-right: 30px;

  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);

  background-position:
    calc(100% - 13px) 22px,
    calc(100% - 8px) 22px;

  background-size:
    5px 5px,
    5px 5px;

  background-repeat: no-repeat;
}

/* TEXTAREA */
.bnb-ct-field textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.6;
}

/* TWO FIELDS IN ONE ROW */
.bnb-ct-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

/* SUBMIT BUTTON */
.bnb-ct-grid .bnb-btn {
  margin-top: 8px;

  min-height: 54px;

  border: 1px solid var(--ink);
  border-radius: 0;

  background: var(--ink);
  color: #fff;

  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}

.bnb-ct-grid .bnb-btn:hover {
  background: var(--red);
  border-color: var(--red);
  transform: translateY(-2px);
}

/* ---------------------------------------------------------
   Consultation form (Forminator 277342) on the contact page.
   Scoped to .bnb-ct-forminator so it looks exactly like the
   .bnb-ct-field form above (labels, underlined fields, black
   full-width button) without touching the homepage/location
   copies of the same form. !important is needed because the
   form's own custom CSS (saved in its Forminator settings, e.g.
   ".forminator-ui.forminator-custom-form-277342.forminator-design--default
   .forminator-label { display: none !important }") hides the labels and
   draws boxed fields; these selectors are one level more specific.
   --------------------------------------------------------- */
.bnb-ct-forminator .forminator-ui.forminator-custom-form.forminator-design--default {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.bnb-ct-forminator .forminator-ui.forminator-custom-form.forminator-design--default .forminator-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 30px;
  margin: 0 0 24px !important;
}

.bnb-ct-forminator .forminator-ui.forminator-custom-form.forminator-design--default .forminator-row .forminator-col {
  flex: 1 1 0 !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

.bnb-ct-forminator .forminator-ui.forminator-custom-form.forminator-design--default .forminator-label {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 9px !important;
  padding: 0 !important;
  clip: auto !important;
  overflow: visible !important;

  color: #666 !important;
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
}

.bnb-ct-forminator .forminator-ui.forminator-custom-form.forminator-design--default .forminator-label .forminator-required {
  color: inherit !important;
}

.bnb-ct-forminator .forminator-ui.forminator-custom-form.forminator-design--default input.forminator-input:not(.forminator-screen-reader-only),
.bnb-ct-forminator .forminator-ui.forminator-custom-form.forminator-design--default textarea.forminator-textarea {
  width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
  padding: 15px 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-size: 16px !important;

  outline: none;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.bnb-ct-forminator .forminator-ui.forminator-custom-form.forminator-design--default input.forminator-input::placeholder,
.bnb-ct-forminator .forminator-ui.forminator-custom-form.forminator-design--default textarea.forminator-textarea::placeholder {
  color: #999 !important;
}

.bnb-ct-forminator .forminator-ui.forminator-custom-form.forminator-design--default input.forminator-input:focus,
.bnb-ct-forminator .forminator-ui.forminator-custom-form.forminator-design--default textarea.forminator-textarea:focus {
  border-bottom-color: var(--red) !important;
}

.bnb-ct-forminator .forminator-ui.forminator-custom-form.forminator-design--default textarea.forminator-textarea {
  min-height: 130px !important;
  line-height: 1.6 !important;
  resize: vertical;
}

/* Office dropdown (Forminator renders it with select2). */
.bnb-ct-forminator .forminator-ui.forminator-custom-form.forminator-design--default .select2-container,
.bnb-ct-forminator .forminator-ui.forminator-custom-form.forminator-design--default .forminator-field select:not(.select2-hidden-accessible) {
  width: 100% !important;
  max-width: 100% !important;
}

.bnb-ct-forminator .forminator-ui.forminator-custom-form.forminator-design--default .select2-selection--single,
.bnb-ct-forminator .forminator-ui.forminator-custom-form.forminator-design--default .forminator-select2 + .select2 .select2-selection {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  top: 0 !important;
}

.bnb-ct-forminator .forminator-ui.forminator-custom-form.forminator-design--default .select2-selection__rendered {
  padding: 15px 30px 15px 0 !important;

  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* The outer select2 container gets the form's boxed style - reset it so only
   the underline of .select2-selection shows, as on the original form. */
.bnb-ct-forminator .forminator-ui.forminator-custom-form.forminator-design--default .select2-container.forminator-select {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.bnb-ct-forminator .forminator-ui.forminator-custom-form.forminator-design--default .select2-selection--single {
  position: relative !important;
}

.bnb-ct-forminator .forminator-ui.forminator-custom-form.forminator-design--default .select2-selection__arrow {
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  height: auto !important;
  transform: translateY(-50%);
}

/* Submit - same as the page's original "Send Consultation Request" button. */
.bnb-ct-forminator .forminator-ui.forminator-custom-form.forminator-design--default .forminator-button-submit {
  width: 100% !important;
  height: auto !important;
  min-height: 54px;
  margin-top: 8px;

  background: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  color: #fff !important;

  font-family: var(--sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;

  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}

.bnb-ct-forminator .forminator-ui.forminator-custom-form.forminator-design--default .forminator-button-submit:hover {
  background: var(--red) !important;
  border-color: var(--red) !important;
  transform: translateY(-2px);
}

@media (max-width: 767px) {
  .bnb-ct-forminator .forminator-ui.forminator-custom-form.forminator-design--default .forminator-row {
    flex-direction: column;
    gap: 21px;
    margin-bottom: 21px !important;
  }

  .bnb-ct-forminator .forminator-ui.forminator-custom-form.forminator-design--default input.forminator-input:not(.forminator-screen-reader-only),
  .bnb-ct-forminator .forminator-ui.forminator-custom-form.forminator-design--default textarea.forminator-textarea,
  .bnb-ct-forminator .forminator-ui.forminator-custom-form.forminator-design--default .select2-selection__rendered {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 480px) {
  .bnb-ct-forminator .forminator-ui.forminator-custom-form.forminator-design--default .forminator-label {
    font-size: 10px !important;
  }

  .bnb-ct-forminator .forminator-ui.forminator-custom-form.forminator-design--default input.forminator-input:not(.forminator-screen-reader-only),
  .bnb-ct-forminator .forminator-ui.forminator-custom-form.forminator-design--default textarea.forminator-textarea,
  .bnb-ct-forminator .forminator-ui.forminator-custom-form.forminator-design--default .select2-selection__rendered {
    font-size: 14px !important;
  }
}

/* =========================================================
   RIGHT SIDE INFORMATION
   ========================================================= */

.bnb-ct-info {
  padding: 28px 0;

  border-top: 1px solid var(--line);
}

.bnb-ct-info:first-child {
  padding-top: 0;
  border-top: 0;
}

.bnb-ct-info h4 {
  margin: 0 0 15px;

  font-family: var(--serif);
  font-size: 25px;
  font-weight: 400;

  color: var(--ink);
}

.bnb-ct-info p {
  margin: 0 0 7px;

  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.7;

  color: #666;
}

.bnb-ct-info p strong {
  color: var(--ink);
  font-weight: 600;
}

.bnb-ct-info a {
  color: var(--ink);
  text-decoration: none;

  border-bottom: 1px solid var(--line);

  transition:
    color 0.25s ease,
    border-color 0.25s ease;
}

.bnb-ct-info a:hover {
  color: var(--red);
  border-color: var(--red);
}

/* =========================================================
   MAP
   ========================================================= */

.bnb-ct-map {
  width: 100%;
  height: 260px;

  margin-top: 18px;

  overflow: hidden;

  border: 1px solid var(--line);

  background: #eee;
}

.bnb-ct-map iframe {
  display: block;

  width: 100%;
  height: 100%;

  border: 0;

  filter: grayscale(100%);
}

/* =========================================================
   OFFICES SECTION
   ========================================================= */

.bnb-section--dark .bnb-ct-offices {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.bnb-ct-loc {
  min-height: 170px;

  padding: 28px;

  border-right: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);

  transition:
    background 0.3s ease,
    transform 0.3s ease;
}

.bnb-ct-loc:hover {
  background: rgba(255, 255, 255, 0.05);
}

.bnb-ct-loc h5 {
  margin: 0 0 14px;

  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;

  color: #fff;
}

.bnb-ct-loc p {
  margin: 0;

  max-width: 230px;

  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.7;

  color: rgba(255, 255, 255, 0.62);
}

/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 991px) {
  .bnb-ct-grid {
    grid-template-columns: 1fr;
    gap: 55px;
  }

  .bnb-ct-grid > div:last-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .bnb-ct-info {
    padding: 25px 0;
  }

  .bnb-ct-info:first-child {
    padding-top: 0;
  }

  .bnb-ct-info:last-child {
    grid-column: 1 / -1;
  }

  .bnb-ct-map {
    height: 300px;
  }

  .bnb-section--dark .bnb-ct-offices {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 767px) {
  .bnb-ct-grid {
    gap: 45px;
  }

  .bnb-ct-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .bnb-ct-field {
    margin-bottom: 21px;
  }

  .bnb-ct-field input,
  .bnb-ct-field select,
  .bnb-ct-field textarea {
    font-size: 15px;
    padding: 14px 0;
  }

  .bnb-ct-grid .bnb-btn {
    width: 100% !important;
  }

  .bnb-ct-grid > div:last-child {
    display: block;
  }

  .bnb-ct-info {
    padding: 24px 0;
  }

  .bnb-ct-info h4 {
    font-size: 23px;
  }

  .bnb-ct-info p {
    font-size: 13px;
  }

  .bnb-ct-map {
    height: 240px;
  }

  .bnb-section--dark .bnb-ct-offices {
    grid-template-columns: 1fr 1fr;
  }

  .bnb-ct-loc {
    min-height: 150px;
    padding: 20px;
  }

  .bnb-ct-loc h5 {
    font-size: 21px;
    margin-bottom: 10px;
  }

  .bnb-ct-loc p {
    font-size: 12px;
    line-height: 1.6;
  }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {
  .bnb-ct-grid {
    gap: 35px;
  }

  .bnb-ct-field label {
    font-size: 10px;
  }

  .bnb-ct-field input,
  .bnb-ct-field select,
  .bnb-ct-field textarea {
    font-size: 14px;
  }

  .bnb-ct-info h4 {
    font-size: 22px;
  }

  .bnb-ct-map {
    height: 220px;
  }

  .bnb-section--dark .bnb-ct-offices {
    grid-template-columns: 1fr;
  }

  .bnb-ct-loc {
    min-height: auto;
    padding: 22px 20px;
  }

  .bnb-ct-loc h5 {
    font-size: 22px;
  }
}
/* Test Start */
/* =========================================================
   B&B PORTRAIT SHOWCASE
   Completely isolated class names
========================================================= */

.bnb-portrait-showcase {
  width: 100%;
  background: #fafaf8;
  padding: 100px 0;
  color: #151515;
}

.bnb-portrait-container {
  width: min(1360px, calc(100% - 80px));
  margin: 0 auto;
}

/* =========================================================
   HEADER
========================================================= */

.bnb-portrait-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  margin-bottom: 38px;
}

.bnb-portrait-heading-left {
  max-width: 700px;
}

.bnb-portrait-eyebrow {
  display: block;

  margin-bottom: 12px;

  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;

  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: #7a1f2b;
}

.bnb-portrait-title {
  margin: 0;

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(42px, 4vw, 64px);
  font-weight: 400;
  line-height: 0.98;

  letter-spacing: -0.035em;

  color: #111;
}

.bnb-portrait-heading-right {
  display: flex;
  align-items: center;
  gap: 10px;

  padding-bottom: 7px;

  font-family: Arial, sans-serif;
  font-size: 9px;

  letter-spacing: 0.16em;
  text-transform: uppercase;

  color: #888;
}

.bnb-portrait-dot {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: #7a1f2b;
}

/* =========================================================
   GRID
========================================================= */

.bnb-portrait-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  border: 1px solid #dedbd5;
}

.bnb-portrait-card {
  min-width: 0;

  padding: 24px;

  border-right: 1px solid #dedbd5;

  background: #fafaf8;

  transition:
    background 0.3s ease,
    transform 0.3s ease;
}

.bnb-portrait-card:last-child {
  border-right: 0;
}

.bnb-portrait-card:hover {
  background: #f5f2ec;
}

/* =========================================================
   FRAME
========================================================= */

.bnb-frame {
  position: relative;

  width: 100%;

  aspect-ratio: 4 / 5;

  padding: 7px;

  background: linear-gradient(
    135deg,
    #583329 0%,
    #9a654d 17%,
    #69402f 32%,
    #b27c60 48%,
    #60372a 66%,
    #a36d52 83%,
    #4c2b23 100%
  );

  border: 1px solid #42251e;

  box-shadow:
    0 0 0 1px #c49a81,
    0 0 0 3px #633b2c,
    0 0 0 4px #d0a68d,
    0 10px 25px rgba(0, 0, 0, 0.1);

  overflow: hidden;

  transition:
    transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.45s ease;
}

.bnb-portrait-card:hover .bnb-frame {
  transform: translateY(-5px);

  box-shadow:
    0 0 0 1px #c49a81,
    0 0 0 3px #633b2c,
    0 0 0 4px #d0a68d,
    0 18px 35px rgba(0, 0, 0, 0.16);
}

/* Inner wooden edge */

.bnb-frame-inner {
  position: relative;

  width: 100%;
  height: 100%;

  background: #fafaf8;

  border: 2px solid #4b2c23;

  overflow: hidden;

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    inset 0 0 15px rgba(0, 0, 0, 0.25);
}

/* Small inner highlight */

.bnb-frame-inner::after {
  content: "";

  position: absolute;

  inset: 4px;

  border: 1px solid rgba(255, 255, 255, 0.25);

  pointer-events: none;

  z-index: 2;
}

/* =========================================================
   IMAGE
========================================================= */

.bnb-frame-inner img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center top;

  background: #fafaf8;

  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.bnb-portrait-card:hover .bnb-frame-inner img {
  transform: scale(1.025);
}

/* --- lawyer directory and profile --------------------------------------- */

.bnb-lawyer-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
  transition: background 0.3s ease, transform 0.3s ease;
}

.bnb-lawyer-card:hover {
  background: #fff;
  transform: translateY(-4px);
}

.bnb-lawyer-card__image {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #e7e2da;
}

.bnb-lawyer-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.5s ease;
}

.bnb-lawyer-card:hover .bnb-lawyer-card__image img {
  transform: scale(1.035);
}

.bnb-lawyer-card__content {
  display: flex;
  min-height: 245px;
  flex-direction: column;
  padding: 24px 22px 22px;
}

.bnb-lawyer-card__designation {
  margin-bottom: 12px;
  color: var(--red);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bnb-lawyer-card__name {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(25px, 2.2vw, 34px);
  font-weight: 400;
  line-height: 1.05;
}

.bnb-lawyer-card__court {
  margin: 10px 0 0;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 1.5;
  opacity: 0.6;
  text-transform: uppercase;
}

.bnb-lawyer-card__excerpt {
  display: -webkit-box;
  margin: 18px 0 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.68;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  -webkit-line-clamp: 3;
}

.bnb-lawyer-card__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 22px;
  color: var(--red);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.bnb-lawyer-card__link span {
  font-size: 18px;
  line-height: 0;
  transition: transform 0.2s ease;
}

.bnb-lawyer-card:hover .bnb-lawyer-card__link span {
  transform: translateX(4px);
}

/* Lawyer directory grid. Flex rather than grid so the lead row (3 large cards)
   and the compact rows (--cols per row) can share one list without a
   60-track grid. Cards in a short last row keep their width and sit left.
   Column counts assume the 320px archive sidebar beside it from 992px up. */
.bnb-people-grid {
  --people-gap: 18px;
  --people-cols: 5;
  display: flex;
  flex-wrap: wrap;
  gap: var(--people-gap);
}

.bnb-people-grid > * {
  flex: 0 0 calc((100% - (var(--people-cols) - 1) * var(--people-gap)) / var(--people-cols));
}

.bnb-people-grid--lead > :nth-child(-n + 3) {
  flex-basis: calc((100% - 2 * var(--people-gap)) / 3);
}

/* Compact cards: name, role and court only. */
.bnb-people-grid .bnb-lawyer-card__content {
  min-height: 0;
  padding: 16px 14px 16px;
}

.bnb-people-grid .bnb-lawyer-card__designation {
  margin-bottom: 8px;
  font-size: 9px;
}

.bnb-people-grid .bnb-lawyer-card__name {
  font-size: 21px;
}

.bnb-people-grid .bnb-lawyer-card__court {
  font-size: 10px;
}

.bnb-people-grid .bnb-lawyer-card__excerpt {
  display: none;
}

.bnb-people-grid .bnb-lawyer-card__link {
  padding-top: 14px;
}

/* The lead row keeps the full card. */
.bnb-people-grid--lead > :nth-child(-n + 3) .bnb-lawyer-card__content {
  min-height: 245px;
  padding: 24px 22px 22px;
}

.bnb-people-grid--lead > :nth-child(-n + 3) .bnb-lawyer-card__designation {
  margin-bottom: 12px;
  font-size: 10px;
}

.bnb-people-grid--lead > :nth-child(-n + 3) .bnb-lawyer-card__name {
  font-size: clamp(25px, 2.2vw, 34px);
}

.bnb-people-grid--lead > :nth-child(-n + 3) .bnb-lawyer-card__court {
  font-size: 11px;
}

.bnb-people-grid--lead > :nth-child(-n + 3) .bnb-lawyer-card__excerpt {
  display: -webkit-box;
}

.bnb-people-grid--lead > :nth-child(-n + 3) .bnb-lawyer-card__link {
  padding-top: 22px;
}

@media (max-width: 1439px) {
  .bnb-people-grid {
    --people-cols: 4;
  }
}

/* Main column is ~560px here, so the lead cards drop to the compact style. */
@media (min-width: 992px) and (max-width: 1199px) {
  .bnb-people-grid {
    --people-cols: 3;
  }

  .bnb-people-grid--lead > :nth-child(-n + 3) .bnb-lawyer-card__content {
    min-height: 0;
    padding: 16px 14px 16px;
  }

  .bnb-people-grid--lead > :nth-child(-n + 3) .bnb-lawyer-card__excerpt {
    display: none;
  }

  .bnb-people-grid--lead > :nth-child(-n + 3) .bnb-lawyer-card__name {
    font-size: 22px;
  }
}

/* Sidebar drops below the list, so the grid has the full width again. */
@media (max-width: 991px) {
  .bnb-people-grid {
    --people-cols: 3;
  }
}

@media (max-width: 767px) {
  .bnb-people-grid {
    --people-gap: 14px;
    --people-cols: 2;
  }

  .bnb-people-grid--lead > :nth-child(-n + 3) .bnb-lawyer-card__content {
    min-height: 0;
    padding: 16px 14px 16px;
  }

  .bnb-people-grid--lead > :nth-child(-n + 3) .bnb-lawyer-card__excerpt {
    display: none;
  }

  .bnb-people-grid--lead > :nth-child(-n + 3) .bnb-lawyer-card__name {
    font-size: 22px;
  }
}

/* Phones: first lead card full width, the other two join the 2-up rows. */
@media (max-width: 575px) {
  .bnb-people-grid--lead > :nth-child(-n + 3) {
    flex-basis: calc((100% - var(--people-gap)) / 2);
  }

  .bnb-people-grid--lead > :first-child {
    flex-basis: 100%;
  }

  .bnb-people-grid--lead > :first-child .bnb-lawyer-card__image {
    aspect-ratio: 1 / 1;
  }

  .bnb-people-grid .bnb-lawyer-card__name,
  .bnb-people-grid--lead > :nth-child(-n + 3) .bnb-lawyer-card__name {
    font-size: 18px;
  }

  .bnb-people-grid--lead > :first-child .bnb-lawyer-card__name {
    font-size: 26px;
  }
}
/* Phones: the two senior partners match the homepage team section - full
   width, portrait on the left and name/role/court on the right - instead of
   one oversized square photo. The third lead card joins the 2-up rows. */
@media (max-width: 575px) {
  .bnb-people-grid--lead > :nth-child(-n + 2) {
    flex-basis: 100%;
  }

  .bnb-people-grid--lead > :nth-child(-n + 2) > a {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1rem;
    color: inherit;
    text-decoration: none;
  }

  .bnb-people-grid--lead > :nth-child(-n + 2) .bnb-lawyer-card__image {
    flex: 0 0 50%;
    aspect-ratio: 4 / 5;
    border: 1px solid var(--line);
  }

  .bnb-people-grid--lead > :nth-child(-n + 2) .bnb-lawyer-card__content {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
  }

  .bnb-people-grid--lead > :nth-child(-n + 2) .bnb-lawyer-card__name {
    order: -1;
    font-size: 19px;
  }

  .bnb-people-grid--lead > :nth-child(-n + 2) .bnb-lawyer-card__designation {
    margin: 0.5rem 0 0;
    color: var(--ink);
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
  }

  .bnb-people-grid--lead > :nth-child(-n + 2) .bnb-lawyer-card__court {
    margin-top: 0.75rem;
    font-size: 10px;
  }

  .bnb-people-grid--lead > :nth-child(-n + 2) .bnb-lawyer-card__link {
    padding-top: 0.75rem;
  }
  .bnb-people-grid > :nth-child(n + 3) .bnb-lawyer-card__court {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
  }
}
.bnb-lawyer-profile__layout {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) 220px;
  gap: 56px;
  align-items: start;
}

.bnb-lawyer-profile__portrait {
  position: relative;
  margin: 0;
  background: #e7e2da;
}

.bnb-lawyer-profile__portrait img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  object-position: center top;
}

.bnb-lawyer-profile__portrait span {
  display: block;
  padding: 13px 16px;
  background: var(--ink);
  color: var(--paper);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.bnb-lawyer-profile__intro {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.bnb-lawyer-profile__intro h2 {
  margin: 12px 0 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 400;
  line-height: 1;
}

.bnb-lawyer-profile__credential {
  margin: 14px 0 0;
  color: var(--red);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bnb-lawyer-profile__body .bnb-entry {
  margin-top: 30px;
}

.bnb-lawyer-profile__quote {
  margin: 38px 0 0;
  padding: 24px 0 0 22px;
  border-top: 1px solid var(--red);
  border-left: 2px solid var(--red);
}

.bnb-lawyer-profile__quote p {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.25;
}

.bnb-lawyer-profile__quote cite {
  display: block;
  margin-top: 16px;
  color: var(--ink);
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.1em;
  opacity: 0.6;
  text-transform: uppercase;
}

.bnb-lawyer-profile__contact {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border-top: 2px solid var(--red);
  background: #fff;
}

.bnb-lawyer-profile__contact a {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.bnb-lawyer-profile__contact a:hover,
.bnb-lawyer-profile__contact a:focus-visible {
  color: var(--red);
}

@media (max-width: 991px) {
  .bnb-lawyer-profile__layout {
    grid-template-columns: minmax(200px, 270px) minmax(0, 1fr);
    gap: 36px;
  }

  .bnb-lawyer-profile__contact {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

@media (max-width: 767px) {
  .bnb-lawyer-card__content {
    min-height: 220px;
    padding: 20px 18px 18px;
  }

  .bnb-lawyer-profile__layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .bnb-lawyer-profile__portrait {
    max-width: 420px;
  }

  .bnb-lawyer-profile__contact {
    align-items: flex-start;
    flex-direction: column;
  }
  
  /* Phones: a small portrait floats top left with the name beside it; practice
     areas and the bio run full width underneath. */
  .bnb-lawyer-profile__layout {
    display: block;
  }

  .bnb-lawyer-profile__portrait {
    float: left;
    width: 112px;
    margin: 0 18px 12px 0;
  }

  .bnb-lawyer-profile__portrait img {
    aspect-ratio: 4 / 5;
    max-height: none;
  }

  .bnb-lawyer-profile__portrait span {
    padding: 6px 8px;
    font-size: 8px;
    letter-spacing: 0.1em;
  }

  .bnb-lawyer-profile__intro h2 {
    margin-top: 8px;
    font-size: 28px;
    line-height: 1.05;
  }

  .bnb-lawyer-profile__credential {
    margin-top: 10px;
    font-size: 10px;
    line-height: 1.5;
  }

  .bnb-lawyer-profile__intro .bnb-single__tags {
    clear: left;
    padding-top: 16px;
  }

  /* Keep the intro's bottom rule below the portrait when there are no tags. */
  .bnb-lawyer-profile__intro::after {
    content: "";
    display: block;
    clear: both;
  }

  .bnb-lawyer-profile__contact {
    margin-top: 32px;
  }
}

/* =========================================================
   BADGE
========================================================= */

.bnb-frame-badge {
  position: absolute;

  left: 14px;
  bottom: 14px;

  z-index: 5;

  display: inline-flex;
  align-items: center;

  min-height: 28px;

  padding: 7px 11px;

  background: #7a1f2b;

  color: #fff;

  font-family: Arial, sans-serif;

  font-size: 9px;
  font-weight: 500;

  line-height: 1;

  letter-spacing: 0.13em;

  text-transform: uppercase;

  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

/* =========================================================
   TEXT
========================================================= */

.bnb-portrait-info {
  padding-top: 20px;
}

.bnb-portrait-info h3 {
  margin: 0 0 7px;

  font-family: Georgia, "Times New Roman", serif;

  font-size: 22px;
  font-weight: 400;

  line-height: 1.15;

  color: #171717;
}

.bnb-portrait-position {
  margin: 0 0 13px;

  font-family: Arial, sans-serif;

  font-size: 12px;
  line-height: 1.4;

  color: #7a1f2b;
}

.bnb-portrait-court {
  margin: 0;

  font-family: Arial, sans-serif;

  font-size: 9px;
  line-height: 1.5;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: #92908c;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {
  .bnb-portrait-container {
    width: min(100% - 50px, 1000px);
  }

  .bnb-portrait-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bnb-portrait-card:nth-child(2) {
    border-right: 0;
  }

  .bnb-portrait-card:nth-child(-n + 2) {
    border-bottom: 1px solid #dedbd5;
  }

  .bnb-portrait-card {
    padding: 20px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {
  .bnb-portrait-showcase {
    padding: 65px 0;
  }

  .bnb-portrait-container {
    width: calc(100% - 30px);
  }

  .bnb-portrait-heading {
    display: block;

    margin-bottom: 28px;
  }

  .bnb-portrait-title {
    font-size: 42px;
  }

  .bnb-portrait-heading-right {
    margin-top: 18px;
  }

  .bnb-portrait-grid {
    grid-template-columns: 1fr;
  }

  .bnb-portrait-card {
    padding: 18px;

    border-right: 0 !important;
    border-bottom: 1px solid #dedbd5;
  }

  .bnb-portrait-card:last-child {
    border-bottom: 0;
  }

  .bnb-frame {
    aspect-ratio: 4 / 5;
  }

  .bnb-portrait-info {
    padding-top: 16px;
  }

  .bnb-portrait-info h3 {
    font-size: 24px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
  .bnb-portrait-container {
    width: calc(100% - 24px);
  }

  .bnb-portrait-title {
    font-size: 36px;
  }

  .bnb-portrait-card {
    padding: 14px;
  }

  .bnb-frame {
    padding: 6px;
  }

  .bnb-frame-badge {
    left: 11px;
    bottom: 11px;

    font-size: 8px;

    padding: 6px 9px;
  }
}

/* Test End */

/* =========================================================
   PHASE 1 — SHARED TEMPLATE PART COMPONENTS
   Added because no existing equivalent was found in this file.
   Everything else the new template parts use is reused as-is:
   .bnb-card / .bnb-grid-3 / .bnb-portrait-card / .bnb-intern-empty /
   .bnb-intern-card__placeholder / .bnb-label / .bnb-h2 / .bnb-h4 /
   .bnb-body--muted / .bnb-section / .bnb-container / .btn-consult.
   Uses only the existing tokens: --ink --paper --red --line --serif --sans.
   ========================================================= */

/* --- Card link + meta (extends the existing .bnb-card) --- */

.bnb-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.bnb-card__link:hover,
.bnb-card__link:focus-visible {
  color: inherit;
}

.bnb-card__body .bnb-h4 {
  margin: 10px 0 12px;
}

.bnb-card__body .bnb-body--muted {
  margin: 0;
  font-size: 14px;
}

.bnb-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  color: #777;
  font-family: var(--sans);
  font-size: 12px;
}

.bnb-card__meta a {
  color: #777;
  text-decoration: none;
}

.bnb-card__meta a:hover,
.bnb-card__meta a:focus-visible {
  color: var(--red);
  text-decoration: underline;
}

/* --- Breadcrumbs --- */

.bnb-breadcrumb {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.bnb-breadcrumb__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
  color: #777;
  font-family: var(--sans);
  font-size: 13px;
}

.bnb-breadcrumb__inner a {
  color: #777;
  text-decoration: none;
}

.bnb-breadcrumb__inner a:hover,
.bnb-breadcrumb__inner a:focus-visible {
  color: var(--red);
  text-decoration: underline;
}

.bnb-breadcrumb__current {
  color: var(--ink);
  /* Long judgment titles must wrap rather than widen the page. */
  min-width: 0;
  overflow-wrap: anywhere;
}

/* --- Pagination --- */

.bnb-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 56px;
}

.bnb-pagination__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bnb-pagination__list .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  text-decoration: none;
  transition:
    border-color 0.25s ease,
    color 0.25s ease;
}

.bnb-pagination__list a.page-numbers:hover,
.bnb-pagination__list a.page-numbers:focus-visible {
  border-color: var(--ink);
  color: var(--red);
}

.bnb-pagination__list .page-numbers.current {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.bnb-pagination__list .page-numbers.dots {
  border-color: transparent;
}

.bnb-pagination__count {
  margin: 0;
  color: #777;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* --- Sidebar cards --- */

.bnb-sidebar-card {
  padding: 24px;
  border: 1px solid var(--line);
  margin-bottom: 22px;
}

.bnb-sidebar-card__title {
  margin: 0 0 16px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
}

.bnb-sidebar-card--cta {
  background: var(--ink);
}

.bnb-sidebar-card--cta .bnb-sidebar-card__title {
  color: #fff;
}

.bnb-sidebar-card--cta .bnb-body--muted {
  color: #fff;
  opacity: 0.75;
}

/* --- Term filter list --- */

.bnb-termlist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bnb-termlist__item + .bnb-termlist__item {
  border-top: 1px solid var(--line-soft);
}

.bnb-termlist__item a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  text-decoration: none;
}

.bnb-termlist__item a:hover .bnb-termlist__name,
.bnb-termlist__item a:focus-visible .bnb-termlist__name {
  color: var(--red);
}

.bnb-termlist__name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.bnb-termlist__count {
  flex: 0 0 auto;
  color: #777;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.bnb-termlist__item.is-current a {
  color: var(--red);
  font-weight: 600;
}

.bnb-termlist__more {
  width: 100%;
  margin-top: 14px;
  padding: 10px;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color 0.25s ease,
    color 0.25s ease;
}

.bnb-termlist__more:hover,
.bnb-termlist__more:focus-visible {
  border-color: var(--ink);
  color: var(--red);
}

/* Sidebar search intentionally has NO styles of its own: it reuses the
   theme's existing .bnb-search-field component (see above), the same one
   templates/interns.php uses. */

@media (max-width: 767px) {
  .bnb-pagination {
    margin-top: 36px;
  }

  .bnb-sidebar-card {
    padding: 20px;
  }
}

/* PHASE 1 COMPONENTS END */

/* =========================================================
   PHASE 2 — ARTICLES: ARCHIVE + SINGLE LAYOUT
   Only rules with no existing equivalent. Everything visual is inherited:
   .bnb-page-hero (dark hero), .bnb-section, .bnb-grid-3 (3/2/1 at 991/767),
   .bnb-card, .bnb-label, .bnb-h4, .bnb-body--muted, .bnb-eyebrow--light,
   .bnb-intern-empty, .bnb-sidebar-card, .bnb-pagination.
   Tokens and breakpoints unchanged: --ink --paper --red --line --line-soft
   --serif --sans --shell-max, 991px / 767px / 480px.
   ========================================================= */

/* .bnb-container has no bare rule - it is width-scoped per section in this
   file (.bnb-section, .bnb-page-hero, .about-quote). Breadcrumbs need the
   same treatment. */
.bnb-breadcrumb .bnb-container {
  width: min(100% - 80px, var(--shell-max));
  margin-inline: auto;
}

/* --- Two column archive / single layout --- */

.bnb-archive {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 60px;
  align-items: start;
}

.bnb-archive__main {
  min-width: 0;
}

.bnb-archive__side {
  min-width: 0;
}

/* Article grid beside the sidebar.
   3 across on desktop. Between 992px and 1199px the main column is only ~550px
   wide, so three would be ~165px each - it steps back to 2 there, then hands
   over to the theme's existing 991px (2 cols) and 767px (1 col) rules.
   Scoped to min-width so those existing rules are never out-specified. */
@media (min-width: 992px) {
  .bnb-archive__main .bnb-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .bnb-archive__main .bnb-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Post meta on the dark hero (light variant of the Phase 1 rule) --- */

.bnb-page-hero .bnb-card__meta {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  color: rgba(250, 250, 248, 0.72);
}

.bnb-page-hero .bnb-card__meta a {
  color: rgba(250, 250, 248, 0.72);
}

.bnb-page-hero .bnb-card__meta a:hover,
.bnb-page-hero .bnb-card__meta a:focus-visible {
  color: var(--paper);
}

/* --- Single: featured image --- */

.bnb-single__figure {
  margin: 0 0 40px;
}

.bnb-single__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.bnb-single__figure figcaption {
  margin-top: 12px;
  color: #777;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
}

/* --- Single: editor content ---
   Editors paste long HTML judgments and articles here, so everything is
   constrained to the column and nothing is allowed to widen the page. */

.bnb-entry {
  color: #444;
  position: relative;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  overflow-wrap: break-word;
}

.bnb-entry > * {
  max-width: 100%;
}

.bnb-entry p {
  margin: 0 0 22px;
}

.bnb-entry h1,
.bnb-entry h2,
.bnb-entry h3,
.bnb-entry h4,
.bnb-entry h5,
.bnb-entry h6 {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  margin: 44px 0 16px;
}

.bnb-entry h2 {
  font-size: 34px;
}

.bnb-entry h3 {
  font-size: 26px;
}

.bnb-entry h4,
.bnb-entry h5,
.bnb-entry h6 {
  font-size: 20px;
}

.bnb-entry a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bnb-entry ul,
.bnb-entry ol {
  margin: 0 0 22px;
  padding-left: 22px;
}

.bnb-entry li {
  margin-bottom: 8px;
}

.bnb-entry img,
.bnb-entry iframe,
.bnb-entry video {
  max-width: 100%;
  height: auto;
}

/* Third-party embeds inject their own inline width after load, which beats any
   selector, so iframes need !important to stay inside the reading column.
   Instagram additionally sets position:absolute on its iframe - without a
   positioned ancestor that resolves against the viewport, so .bnb-entry
   establishes the containing block. Do NOT add width:100% here: on the
   absolutely-positioned Instagram frame it resolves to the viewport and blows
   the layout out to full width. */
.bnb-entry iframe {
  max-width: 100% !important;
}

/* Embed captions and bare URLs are frequently one long unbroken string. */
.bnb-entry a {
  overflow-wrap: anywhere;
}

.bnb-entry blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--red);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.4;
}

.bnb-entry pre {
  overflow-x: auto;
  padding: 18px;
  background: var(--line-soft);
  font-size: 14px;
}

/* Wide tables scroll inside the column instead of stretching the page. */
.bnb-entry table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 22px;
  font-size: 14px;
}

.bnb-entry th,
.bnb-entry td {
  padding: 10px 12px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

/* --- Single: tags --- */

.bnb-single__tags {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.bnb-taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.bnb-taglist a {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  text-decoration: none;
  transition:
    border-color 0.25s ease,
    color 0.25s ease;
}

.bnb-taglist a:hover,
.bnb-taglist a:focus-visible {
  border-color: var(--ink);
  color: var(--red);
}

/* --- Single: previous / next --- */

.bnb-postnav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.bnb-postnav__link {
  display: block;
  padding: 22px;
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  transition:
    border-color 0.25s ease,
    transform 0.25s ease;
}

.bnb-postnav__link:hover,
.bnb-postnav__link:focus-visible {
  border-color: #cfcfcf;
  color: var(--ink);
  transform: translateY(-4px);
}

.bnb-postnav__link--next {
  text-align: right;
}

.bnb-postnav__title {
  display: block;
  margin-top: 10px;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

@media (max-width: 991px) {
  .bnb-archive {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .bnb-breadcrumb .bnb-container {
    width: calc(100% - 40px);
  }
}

@media (max-width: 767px) {
  .bnb-entry {
    font-size: 15px;
  }

  .bnb-entry h2 {
    font-size: 28px;
  }

  .bnb-entry h3 {
    font-size: 22px;
  }

  .bnb-postnav {
    grid-template-columns: 1fr;
  }

  .bnb-postnav__link--next {
    text-align: left;
  }
}

@media (max-width: 480px) {
  .bnb-breadcrumb .bnb-container {
    width: calc(100% - 28px);
  }
}

/* PHASE 2 ARTICLES END */

/* =========================================================
   EDITORIAL CARD  (.bnb-card--article + .bnb-card--editorial)
   Shared by the Articles archive and by template-parts/card/editorial.php,
   which News uses. Both modifiers carry identical rules - the pair exists only
   so Articles keeps its own class name.
   The plain .bnb-card used by templates/about.php, Landmark Judgments and
   Bare Acts is untouched.
   Colours are limited to the existing palette: var(--ink), var(--red),
   var(--line), var(--line-soft), var(--paper) and #777.
   ========================================================= */

/* A near-square frame suits the About page portraits but leaves Articles very
   tall. 3:2 is editorial and removes the dead vertical space. Scoped to the
   article card variant rather than to the archive, so related Article cards on
   single posts match the archive, while About, News, Landmark Judgments and
   Bare Acts keep the original ratio. */
.bnb-card--article .bnb-card__img,
.bnb-card--editorial .bnb-card__img {
  aspect-ratio: 3 / 2;
}

.bnb-card--article .bnb-card__body,
.bnb-card--editorial .bnb-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 24px 24px 26px;
}

/* Category + date on one line, replacing the generic card's separate badge
   and footer meta row. */
.bnb-card__kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
  color: #777;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.bnb-card__kicker .bnb-label {
  letter-spacing: 0.13em;
}

.bnb-card__kicker time {
  white-space: nowrap;
}

.bnb-card__kicker-sep {
  width: 14px;
  height: 1px;
  flex: 0 0 auto;
  background: var(--line);
}

.bnb-card--article .bnb-card__title,
.bnb-card--editorial .bnb-card__title {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

.bnb-card--article .bnb-card__excerpt,
.bnb-card--editorial .bnb-card__excerpt {
  margin: 0 0 22px;
  font-size: 14px;
}

/* Pins the action to the bottom so cards in a row align regardless of how
   long the title or excerpt runs. */
.bnb-card--article .bnb-card__action,
.bnb-card--editorial .bnb-card__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.bnb-card--article .bnb-card__action span,
.bnb-card--editorial .bnb-card__action span {
  transition: transform 0.25s ease;
}

.bnb-card--article:hover .bnb-card__action,
.bnb-card--editorial:hover .bnb-card__action {
  color: var(--red);
}

.bnb-card--article:hover .bnb-card__action span,
.bnb-card--editorial:hover .bnb-card__action span {
  transform: translateX(4px);
}

.bnb-card--article .bnb-card__link:focus-visible,
.bnb-card--editorial .bnb-card__link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .bnb-card--article .bnb-card__body {
    padding: 20px 20px 22px;
  }

  .bnb-card--article .bnb-card__title {
    font-size: 21px;
  }
}

/* ARTICLES ARCHIVE CARD END */

/* =========================================================
   LIBRARY HUB
   Scoped to .bnb-library-*. Everything else is reused as-is:
   .bnb-page-hero, .bnb-section, .bnb-container, .bnb-grid-3, .bnb-card,
   .bnb-eyebrow, .bnb-h2, .section-title-sm, .bnb-body--muted, .dot/.dot-red.
   Palette limited to var(--ink) var(--paper) var(--red) var(--line)
   var(--line-soft) var(--serif) var(--sans) and #777.
   ========================================================= */

.bnb-library-head {
  margin-bottom: 46px;
}

.bnb-library-head .bnb-h2 {
  margin-top: 10px;
}

/* Editorial rule-separated list rather than a grid of boxes: one hairline
   between rows, none around them. */
.bnb-library-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}

.bnb-library-item {
  padding: 30px 30px 32px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Close the right edge of each row. */
.bnb-library-item:nth-child(3n) {
  border-right: 0;
}

.bnb-library-item__link {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: baseline;
  gap: 14px;
  color: var(--ink);
  text-decoration: none;
}

.bnb-library-item__index {
  color: var(--red);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.bnb-library-item__title {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

.bnb-library-item__count {
  color: #777;
  font-family: var(--sans);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.bnb-library-item__arrow {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  transition:
    transform 0.25s ease,
    color 0.25s ease;
}

.bnb-library-item:hover .bnb-library-item__arrow {
  color: var(--red);
  transform: translateX(4px);
}

.bnb-library-item:hover .bnb-library-item__title {
  color: var(--red);
}

.bnb-library-item__link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.bnb-library-item__desc {
  margin: 12px 0 0;
  font-size: 14px;
}

.bnb-library-item__preview {
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line-soft);
  list-style: none;
}

.bnb-library-item__preview li + li {
  margin-top: 9px;
}

.bnb-library-item__preview a {
  display: block;
  color: #777;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  text-decoration: none;
  overflow-wrap: break-word;
}

.bnb-library-item__preview a:hover,
.bnb-library-item__preview a:focus-visible {
  color: var(--ink);
}

/* The hero paragraph is wrapped in a div here so page content can be used. */
.bnb-page-hero__subtitle p {
  margin: 0;
}

.bnb-page-hero__subtitle p + p {
  margin-top: 12px;
}

.bnb-page-hero .bnb-eyebrow--light .dot {
  margin-right: 7px;
  vertical-align: middle;
}

@media (max-width: 1199px) {
  .bnb-library-nav {
    grid-template-columns: repeat(2, 1fr);
  }

  .bnb-library-item:nth-child(3n) {
    border-right: 1px solid var(--line);
  }

  .bnb-library-item:nth-child(2n) {
    border-right: 0;
  }
}

@media (max-width: 767px) {
  .bnb-library-head {
    margin-bottom: 32px;
  }

  .bnb-library-nav {
    grid-template-columns: 1fr;
  }

  .bnb-library-item {
    padding: 24px 0 26px;
    border-right: 0;
  }

  .bnb-library-item:nth-child(3n),
  .bnb-library-item:nth-child(2n) {
    border-right: 0;
  }

  .bnb-library-item__title {
    font-size: 22px;
  }
}

/* Match the 3:2 frame used by the Articles archive so the hub reads as one
   system. Scoped to the Library feed, so News, Landmark and Bare Act archives
   keep the original .bnb-card ratio. */
.bnb-library-latest .bnb-card__img {
  aspect-ratio: 3 / 2;
}

/* LIBRARY HUB END */

/* =========================================================
   LEGAL REFERENCE ARCHIVE
   Judgements and Bare Acts only. Full-width index rows plus a horizontal
   filter bar, in place of the card grid + sidebar used by Articles and News.
   Tokens only: --ink --paper --red --line --line-soft --serif --sans, #777.
   ========================================================= */

/* Full-width variant of the archive grid (no sidebar column). */
.bnb-archive--full {
  grid-template-columns: minmax(0, 1fr);
}

/* --- Filter bar --- */

.bnb-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.bnb-filterbar__search {
  flex: 1 1 280px;
  min-width: 0;
}

.bnb-filterbar__select {
  flex: 0 1 210px;
  min-width: 0;
}

.bnb-filterbar__select select {
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  cursor: pointer;
}

.bnb-filterbar__select select:focus-visible,
.bnb-filterbar__submit:focus-visible,
.bnb-filterbar__reset:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.bnb-filterbar__submit {
  flex: 0 0 auto;
  height: 48px;
  padding: 0 24px;
  border: 0;
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease;
}

.bnb-filterbar__submit:hover {
  background: var(--red);
}

.bnb-filterbar__reset {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 14px;
  color: #777;
  font-family: var(--sans);
  font-size: 12px;
  text-decoration: underline;
}

.bnb-filterbar__reset:hover {
  color: var(--red);
}

/* --- Result bar --- */

.bnb-resultbar {
  margin-bottom: 6px;
}

.bnb-resultbar__count {
  margin: 0;
  color: #777;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* --- Index rows --- */

.bnb-index {
  border-top: 1px solid var(--line);
}

.bnb-index-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 92px;
  gap: 0 24px;
  align-items: start;
  padding: 26px 0 28px;
  border-bottom: 1px solid var(--line);
  transition: background 0.25s ease;
}

.bnb-index-row:hover {
  background: var(--line-soft);
}

.bnb-index-row__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  color: #777;
  transition:
    color 0.25s ease,
    border-color 0.25s ease;
}

.bnb-index-row__icon svg {
  width: 20px;
  height: 20px;
}

.bnb-index-row:hover .bnb-index-row__icon {
  border-color: var(--red);
  color: var(--red);
}

.bnb-index-row__body {
  min-width: 0;
}

/* Court | Year | Citation on one uppercase line. */
.bnb-index-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 9px;
  margin: 0 0 8px;
  color: var(--red);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.bnb-index-row__meta a {
  color: var(--red);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.bnb-index-row__meta a:hover,
.bnb-index-row__meta a:focus-visible {
  text-decoration: underline;
}

.bnb-index-row__sep {
  color: var(--line);
  font-weight: 400;
}

/* Case and Act names run long - they wrap, never truncate. */
.bnb-index-row__title {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

.bnb-index-row__title a {
  color: var(--ink);
  text-decoration: none;
}

.bnb-index-row__title a:hover,
.bnb-index-row__title a:focus-visible {
  color: var(--red);
}

.bnb-index-row__excerpt {
  max-width: 82ch;
  margin: 0 0 10px;
  color: #444;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.65;
}

.bnb-index-row__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
}

.bnb-index-row__action span {
  transition: transform 0.25s ease;
}

.bnb-index-row__action:hover,
.bnb-index-row__action:focus-visible {
  color: var(--red);
}

.bnb-index-row:hover .bnb-index-row__action span {
  transform: translateX(4px);
}

/* Right-hand year. */
.bnb-index-row__stat {
  margin: 0;
  text-align: right;
}

.bnb-index-row__stat-value {
  display: block;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1;
}

.bnb-index-row__stat-label {
  display: block;
  margin-top: 4px;
  color: #777;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --- Single: structured fact list under the title --- */

.bnb-single__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 40px;
  margin: 22px 0 0;
}

.bnb-single__facts div {
  min-width: 0;
}

.bnb-single__facts dt {
  margin-bottom: 4px;
  color: var(--red);
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bnb-single__facts dd {
  margin: 0;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.bnb-single__facts dd a {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid rgba(250, 250, 248, 0.35);
}

.bnb-single__facts dd a:hover,
.bnb-single__facts dd a:focus-visible {
  color: #fff;
  border-bottom-color: #fff;
}

@media (max-width: 991px) {
  .bnb-filterbar__select {
    flex: 1 1 180px;
  }
}

@media (max-width: 767px) {
  .bnb-index-row {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 22px 0 24px;
  }

  .bnb-index-row__icon {
    margin-bottom: 14px;
  }

  .bnb-index-row__title {
    font-size: 22px;
  }

  .bnb-index-row__stat {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 14px;
    text-align: left;
  }

  .bnb-index-row__stat-value {
    font-size: 18px;
  }

  .bnb-index-row__stat-label {
    margin-top: 0;
  }

  .bnb-filterbar {
    gap: 8px;
  }

  .bnb-filterbar__search,
  .bnb-filterbar__select {
    flex: 1 1 100%;
  }

  .bnb-filterbar__submit {
    flex: 1 1 auto;
  }

  .bnb-single__facts {
    gap: 14px 26px;
  }
}

/* LEGAL REFERENCE ARCHIVE END */

/* =========================================================
   LEGAL MAXIMS GLOSSARY
   Legal Maxims only. Short reference definitions in a two-up glossary rather
   than cards or full-width index rows, because each entry is a term plus a
   one-line meaning. Tokens only.
   ========================================================= */

.bnb-glossary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 60px;
  border-top: 1px solid var(--line);
}

.bnb-glossary__item {
  padding: 24px 0 26px;
  border-bottom: 1px solid var(--line);
}

.bnb-glossary__label {
  margin: 0 0 6px;
  color: var(--red);
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bnb-glossary__term {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

.bnb-glossary__term a {
  color: var(--ink);
  text-decoration: none;
}

.bnb-glossary__term a:hover,
.bnb-glossary__term a:focus-visible {
  color: var(--red);
}

.bnb-glossary__meaning {
  max-width: 56ch;
  margin: 0 0 12px;
  color: #444;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: break-word;
}

.bnb-glossary__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
}

.bnb-glossary__action span {
  transition: transform 0.25s ease;
}

.bnb-glossary__action:hover,
.bnb-glossary__action:focus-visible {
  color: var(--red);
}

.bnb-glossary__action:hover span {
  transform: translateX(4px);
}

@media (max-width: 991px) {
  .bnb-glossary {
    gap: 0 40px;
  }

  .bnb-glossary__term {
    font-size: 24px;
  }
}

@media (max-width: 767px) {
  .bnb-glossary {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .bnb-glossary__term {
    font-size: 22px;
  }
}

/* LEGAL MAXIMS GLOSSARY END */

/* Legal Maxim listing metadata - deliberately quieter than the term and its
   meaning, so the glossary still reads as a reference list. */
.bnb-glossary__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 12px;
  color: #777;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
}

/* =========================================================
   FAQ KNOWLEDGE CENTRE
   Accordion for individual questions plus the legacy guide index.
   Tokens only; no new colours, no radius, no shadow.
   ========================================================= */

.bnb-faq-heading {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
}

.bnb-faq-heading + .bnb-faq,
.bnb-faq-heading + .bnb-index {
  margin-top: 22px;
}

.bnb-faq-heading__note {
  margin: 0 0 22px;
  color: #777;
  font-family: var(--sans);
  font-size: 13px;
}

.bnb-index + .bnb-faq-heading,
.bnb-faq + .bnb-faq-heading {
  margin-top: 60px;
}

.bnb-faq {
  border-top: 1px solid var(--line);
}

.bnb-faq__item {
  border-bottom: 1px solid var(--line);
}

.bnb-faq__q {
  margin: 0;
}

.bnb-faq__trigger {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 28px;
  align-items: start;
  gap: 16px;
  width: 100%;
  padding: 22px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.bnb-faq__trigger:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.bnb-faq__num {
  color: var(--red);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  line-height: 1.9;
}

.bnb-faq__text {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  overflow-wrap: break-word;
  transition: color 0.25s ease;
}

.bnb-faq__trigger:hover .bnb-faq__text,
.bnb-faq__item.is-open .bnb-faq__text {
  color: var(--red);
}

/* Plus / minus drawn with two rules, so there is no icon dependency. */
.bnb-faq__icon {
  position: relative;
  width: 16px;
  height: 16px;
  margin-top: 8px;
}

.bnb-faq__icon::before,
.bnb-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 1px;
  background: var(--ink);
  transition:
    transform 0.25s ease,
    background 0.25s ease;
}

.bnb-faq__icon::after {
  transform: rotate(90deg);
}

.bnb-faq__item.is-open .bnb-faq__icon::before,
.bnb-faq__item.is-open .bnb-faq__icon::after {
  background: var(--red);
}

.bnb-faq__item.is-open .bnb-faq__icon::after {
  transform: rotate(0deg);
}

/* No max-height clamp here. Answers range from one sentence to 40,000
   characters, and a height transition cannot interpolate a target that large -
   it leaves the panel computing to 0 and the answer invisible. Visibility is
   the hidden attribute alone; the reveal is a short fade on the answer, which
   costs nothing and works at any length. */
.bnb-faq__answer {
  animation: bnb-faq-reveal 0.28s ease both;
}

@keyframes bnb-faq-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bnb-faq__answer {
    animation: none;
  }
}

.bnb-faq__answer {
  padding: 0 28px 26px 60px;
  font-size: 15px;
}

.bnb-faq__answer > *:first-child {
  margin-top: 0;
}

.bnb-faq__cat {
  margin: 18px 0 0;
}

.bnb-faq__cat span,
.bnb-faq__cat a {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

.bnb-faq__cat a:hover,
.bnb-faq__cat a:focus-visible {
  border-color: var(--red);
  color: var(--red);
}

@media (max-width: 767px) {
  .bnb-faq-heading {
    font-size: 26px;
  }

  .bnb-faq__trigger {
    grid-template-columns: 32px minmax(0, 1fr) 20px;
    gap: 10px;
    padding: 18px 0;
  }

  .bnb-faq__text {
    font-size: 18px;
  }

  .bnb-faq__answer {
    padding: 0 0 22px 42px;
    font-size: 14px;
  }
}

/* FAQ KNOWLEDGE CENTRE END */
/* ==========================================================
   B&B ASSOCIATES — HOME "FIRM / WORK" SECTION
   ==========================================================
   IMPORTANT:
   - Every class is unique to this section.
   - Main wrapper: .main-bnb-work
   - No .bnb-about-* classes are used.
   - Images are CSS background images.
   - Red editorial panels are HTML, not baked into images.
   ========================================================== */

.main-bnb-work {
  --mbw-ink: #0a0a0a;
  --mbw-paper: #fafaf8;
  --mbw-white: #ffffff;
  --mbw-red: #d92323;
  --mbw-red-hot: #ff2a2a;
  --mbw-line: #e4e4e1;
  --mbw-muted: #696c71;
  --mbw-soft: #f2f2ef;
  --mbw-serif: "Instrument Serif", "Playfair Display", Georgia, serif;
  --mbw-sans: "Inter", system-ui, -apple-system, sans-serif;
  --mbw-max: 1440px;

  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--mbw-paper);
  color: var(--mbw-ink);
  font-family: var(--mbw-sans);
  font-size: 14px;
  line-height: 1.7;
}

.main-bnb-work *,
.main-bnb-work *::before,
.main-bnb-work *::after {
  box-sizing: border-box;
}

.main-bnb-work h2,
.main-bnb-work h3,
.main-bnb-work p,
.main-bnb-work blockquote {
  margin-top: 0;
}

.main-bnb-work h2,
.main-bnb-work h3 {
  font-family: var(--mbw-serif);
  font-weight: 400;
  letter-spacing: -0.035em;
}

.main-bnb-work h3 {
  margin-bottom: 25px;
  font-size: clamp(44px, 4.3vw, 68px);
  line-height: .94;
}

.main-bnb-work__wrap {
  width: min(calc(100% - 80px), var(--mbw-max));
  margin-inline: auto;
}

.main-bnb-work__eyebrow {
  margin-bottom: 20px;
  color: var(--mbw-red);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .17em;
  line-height: 1.4;
  text-transform: uppercase;
}

.main-bnb-work__rule {
  display: block;
  width: 32px;
  height: 2px;
  margin-bottom: 27px;
  background: var(--mbw-red);
}

.main-bnb-work__text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--mbw-red);
  color: var(--mbw-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.3;
  text-decoration: none;
  text-transform: uppercase;
}

.main-bnb-work__text-link span {
  font-size: 15px;
  line-height: 1;
  transition: transform .2s ease;
}

.main-bnb-work__text-link:hover span {
  transform: translateX(4px);
}

/* ==========================================================
   LEGACY HERO
   ========================================================== */

.main-bnb-work__legacy {
  padding: 72px 0 90px;
  background: var(--mbw-white);
}

.main-bnb-work__legacy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, .88fr);
  grid-template-rows: auto auto;
  column-gap: 65px;
  align-items: start;
}

.main-bnb-work__legacy-copy {
  padding-top: 15px;
}

.main-bnb-work__legacy-copy h2 {
  max-width: 650px;
  margin-bottom: 28px;
  font-size: clamp(62px, 6vw, 92px);
  line-height: .88;
}

.main-bnb-work__lead {
  max-width: 600px;
  margin-bottom: 0;
  color: var(--mbw-muted);
  font-size: 14px;
  line-height: 1.75;
}

.main-bnb-work__legacy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 28px;
  margin-bottom: 1rem;
}

.main-bnb-work__legacy-visual {
  position: relative;
  min-height: 520px;

  /* ARCHITECTURAL IMAGE ONLY */
  background-image: url("../img/backgrounds/pexels-joaquin-carfagna-3131171-25037495.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.main-bnb-work__legacy-red-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(68%, 360px);
  padding: 31px 35px 27px;
  background: var(--mbw-red);
  color: #fff;
}

.main-bnb-work__legacy-red-panel p {
  margin-bottom: 23px;
  font-family: var(--mbw-serif);
  font-size: 28px;
  font-style: italic;
  line-height: 1.02;
}

.main-bnb-work__legacy-red-panel span {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .16em;
}

.main-bnb-work__legacy-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 650px;
  margin-top: 48px;
  border-top: 1px solid var(--mbw-line);
  border-bottom: 1px solid var(--mbw-line);
}

.main-bnb-work__stat {
  padding: 17px 16px 17px 0;
  border-right: 1px solid var(--mbw-line);
}

.main-bnb-work__stat + .main-bnb-work__stat {
  padding-left: 18px;
}

.main-bnb-work__stat:last-child {
  border-right: 0;
}

.main-bnb-work__stat strong {
  display: block;
  color: var(--mbw-red);
  font-family: var(--mbw-serif);
  font-size: 38px;
  font-weight: 400;
  line-height: 1;
}

.main-bnb-work__stat span {
  display: block;
  margin-top: 5px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .11em;
  line-height: 1.35;
}

/* ==========================================================
   NORMAL EDITORIAL CONTENT
   ========================================================== */

.main-bnb-work__content {
  padding: 105px 0;
  border-top: 1px solid var(--mbw-line);
}

.main-bnb-work__split {
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
  gap: 90px;
}

.main-bnb-work__intro {
  padding-right: 50px;
  border-right: 1px solid var(--mbw-line);
}

.main-bnb-work__section-number {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 24px;
  color: var(--mbw-red);
  font-family: var(--mbw-serif);
  font-size: 25px;
  line-height: 1;
}

.main-bnb-work__section-number i {
  display: block;
  width: 28px;
  height: 1px;
  background: #9c9ea2;
}
/* The section numbers ("01", "02" ...) show as a red square bullet instead.
   font-size: 0 hides the digit printed in the templates; the square takes the
   red (or the --light variant's brighter red) from currentColor. */
.main-bnb-work__section-number {
  font-size: 0;
}

.main-bnb-work__section-number::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  background: currentColor;
}
.main-bnb-work__display {
  max-width: 440px;
  color: #85878c;
  font-family: var(--mbw-serif);
  font-size: clamp(29px, 2.5vw, 42px);
  line-height: 1.02;
}

.main-bnb-work__small {
  max-width: 100%;
  margin-bottom: 25px;
  color: var(--mbw-muted);
  font-size: 13px;
}

.main-bnb-work__body {
  color: var(--mbw-muted);
  font-size: 13px;
  line-height: 1.72;
}

.main-bnb-work__body p {
  margin-bottom: 25px;
}

/* ==========================================================
   LITIGATION HIGHLIGHTS
   ========================================================== */

.main-bnb-work__mini-heading {
  margin-bottom: 17px;
  color: #6d7075;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
}

.main-bnb-work__highlight {
  display: grid;
  grid-template-columns: 55px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--mbw-line);
}

.main-bnb-work__highlight:last-child {
  border-bottom: 1px solid var(--mbw-line);
}

.main-bnb-work__highlight-mark {
  color: var(--mbw-red);
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1;
}

.main-bnb-work__highlight p {
  margin: 0;
  color: #5f6267;
  font-size: 13px;
  line-height: 1.65;
}

/* ==========================================================
   CORPORATE / REGION
   ========================================================== */

.main-bnb-work__practice {
  padding-top: 0;
  border-top: 0;
}

.main-bnb-work__practice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.main-bnb-work__practice-item {
  padding: 100px 75px;
  border-top: 1px solid var(--mbw-line);
}

.main-bnb-work__practice-item:first-child {
  padding-left: 0;
  border-right: 1px solid var(--mbw-line);
}

.main-bnb-work__practice-item:last-child {
  padding-right: 0;
}

.main-bnb-work__practice-item p {
  max-width: 570px;
  color: var(--mbw-muted);
  font-size: 13px;
}

.main-bnb-work__location-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 13px;
  max-width: 600px;
  margin: 27px 0;
}

.main-bnb-work__location-list span {
  position: relative;
  color: #34363a;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .11em;
}

.main-bnb-work__location-list span:not(:last-child)::after {
  content: "|";
  margin-left: 13px;
  color: var(--mbw-red);
}

/* ==========================================================
   COURTS
   ========================================================== */

.main-bnb-work__courts {
  padding: 95px 0;
  background: var(--mbw-soft);
}

.main-bnb-work__courts-grid {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 95px;
}

.main-bnb-work__courts h3 {
  font-size: clamp(48px, 4.4vw, 72px);
}

/* ==========================================================
   LEGAL RESEARCH
   Background image is independent of HTML content.
   ========================================================== */

.main-bnb-work__research {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 105px 0;
  background: #111317;
  color: #fff;
}

.main-bnb-work__research-background {
  position: absolute;
  inset: 0;
  z-index: -1;

  background-image:
    linear-gradient(90deg, rgba(9, 11, 14, .96) 0%, rgba(9, 11, 14, .91) 42%, rgba(9, 11, 14, .62) 72%, rgba(9, 11, 14, .40) 100%),
    url("../img/backgrounds/pexels-pixabay-159720.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.main-bnb-work__research-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}

.main-bnb-work__section-number--light {
  color: var(--mbw-red-hot);
}

.main-bnb-work__research h3 {
  color: #fff;
}

.main-bnb-work__research-copy > p {
  max-width: 500px;
  color: #b4b7bd;
  font-size: 13px;
}

.main-bnb-work__text-link--light {
  color: #fff;
}

.main-bnb-work__research-quote {
  min-height: 270px;
  padding-left: 70px;
  border-left: 1px solid rgba(255,255,255,.25);
}

.main-bnb-work__quote-mark {
  display: block;
  margin-bottom: 10px;
  color: var(--mbw-red-hot);
  font-family: Georgia, serif;
  font-size: 80px;
  line-height: .6;
}

.main-bnb-work__research-quote blockquote {
  max-width: 550px;
  margin-bottom: 28px;
  color: #fff;
  font-family: var(--mbw-serif);
  font-size: clamp(28px, 3vw, 44px);
  font-style: italic;
  line-height: 1.02;
}

.main-bnb-work__quote-rule {
  display: block;
  width: 30px;
  height: 2px;
  margin-bottom: 17px;
  background: var(--mbw-red-hot);
}

.main-bnb-work__research-quote small {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .15em;
}

/* ==========================================================
   ETHICS
   ========================================================== */

.main-bnb-work__ethics-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr .55fr;
  gap: 65px;
  align-items: start;
}

.main-bnb-work__ethics .main-bnb-work__body {
  padding-top: 6px;
}

.main-bnb-work__values {
  margin: 0;
  padding: 0 0 0 20px;
  list-style: none;
  border-left: 1px solid var(--mbw-line);
}

.main-bnb-work__values li {
  position: relative;
  padding: 18px 0 18px 10px;
  color: #55585d;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
}

.main-bnb-work__values li::before {
  position: absolute;
  top: 50%;
  left: -20px;
  width: 11px;
  height: 1px;
  background: var(--mbw-red);
  content: "";
  transform: translateY(-50%);
}

/* ==========================================================
   COMMITMENT / THREE GENERATIONS
   ========================================================== */

.main-bnb-work__commitment {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 470px;
  place-items: center;
  overflow: hidden;
  border-top: 1px solid var(--mbw-line);
  background: #fff;
}

.main-bnb-work__commitment-background {
  position: absolute;
  inset: 0;
  z-index: -1;

  background-image:
    linear-gradient(90deg, rgba(250,250,248,.10), rgba(250,250,248,.72) 45%, rgba(250,250,248,.96) 75%),
    url("../img/backgrounds/pexels-rdne-7841804.jpg");
  background-position: left center;
  background-size: cover;
  background-repeat: no-repeat;
}

.main-bnb-work__commitment-copy {
  width: min(100% - 40px, 780px);
  margin-left: 25%;
  padding: 80px 0;
  text-align: center;
}

.main-bnb-work__commitment-copy h3 {
  font-size: clamp(45px, 4.3vw, 70px);
}

.main-bnb-work__commitment-copy h3 em {
  color: var(--mbw-red);
  font-style: normal;
}

.main-bnb-work__commitment-copy .main-bnb-work__rule {
  margin-inline: auto;
}

.main-bnb-work__commitment-copy > p:last-child {
  max-width: 650px;
  margin-inline: auto;
  color: #686b70;
  font-size: 13px;
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1100px) {
  .main-bnb-work__wrap {
    width: min(calc(100% - 50px), var(--mbw-max));
  }

  .main-bnb-work__legacy-grid {
    column-gap: 40px;
    grid-template-columns: 1fr 1fr;
  }

  .main-bnb-work__legacy-visual {
    min-height: 480px;
  }

  .main-bnb-work__split,
  .main-bnb-work__courts-grid,
  .main-bnb-work__research-grid {
    gap: 55px;
  }

  .main-bnb-work__practice-item:first-child {
    padding-right: 45px;
  }

  .main-bnb-work__practice-item:last-child {
    padding-left: 45px;
  }

  .main-bnb-work__ethics-grid {
    gap: 35px;
  }
}

/* ==========================================================
   MOBILE / TABLET
   ========================================================== */

@media (max-width: 800px) {
  .main-bnb-work__wrap {
    width: min(calc(100% - 40px), var(--mbw-max));
  }

  .main-bnb-work__legacy-grid,
  .main-bnb-work__split,
  .main-bnb-work__practice-grid,
  .main-bnb-work__courts-grid,
  .main-bnb-work__research-grid,
  .main-bnb-work__ethics-grid {
    grid-template-columns: 1fr;
  }

  .main-bnb-work__legacy {
    padding: 50px 0 65px;
  }

  .main-bnb-work__legacy-copy {
    padding: 0;
    margin-bottom: 1rem;
  }

  .main-bnb-work__legacy-copy h2 {
    font-size: 58px;
  }

  .main-bnb-work__legacy-visual {
    min-height: 470px;
  }

  .main-bnb-work__legacy-stats {
    margin-top: 0;
  }

  .main-bnb-work__content {
    padding: 75px 0;
  }

  .main-bnb-work__intro {
    padding: 0 0 45px;
    border-right: 0;
    border-bottom: 1px solid var(--mbw-line);
  }

  .main-bnb-work__practice-item,
  .main-bnb-work__practice-item:first-child,
  .main-bnb-work__practice-item:last-child {
    padding: 70px 0;
    border-right: 0;
  }

  .main-bnb-work__practice-item + .main-bnb-work__practice-item {
    border-top: 1px solid var(--mbw-line);
  }

  .main-bnb-work__courts {
    padding: 75px 0;
  }

  .main-bnb-work__research {
    padding: 75px 0;
  }

  .main-bnb-work__research-quote {
    min-height: auto;
    padding: 55px 0 0;
    border-top: 1px solid rgba(255,255,255,.25);
    border-left: 0;
  }

  .main-bnb-work__ethics {
    padding: 75px 0;
  }

  .main-bnb-work__values {
    padding-top: 25px;
    padding-left: 0;
    border-top: 1px solid var(--mbw-line);
    border-left: 0;
  }

  .main-bnb-work__values li {
    padding-left: 20px;
  }

  .main-bnb-work__values li::before {
    left: 0;
  }

  .main-bnb-work__commitment {
    min-height: 470px;
  }

  .main-bnb-work__commitment-copy {
    width: min(calc(100% - 40px), 720px);
    margin-left: 0;
    padding: 65px 0;
  }

  .main-bnb-work__commitment-background {
    background-image:
      linear-gradient(90deg, rgba(250,250,248,.82), rgba(250,250,248,.94)),
      url("../img/backgrounds/pexels-rdne-7841804.jpg");
    background-position: left center;
  }
}

/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 520px) {
  .main-bnb-work__wrap {
    width: calc(100% - 32px);
  }

  .main-bnb-work {
    font-size: 13px;
  }

  .main-bnb-work h3 {
    font-size: 43px;
  }

  .main-bnb-work__legacy-copy h2 {
    font-size: 52px;
  }

  .main-bnb-work__legacy-visual {
    min-height: 405px;
  }

  .main-bnb-work__legacy-red-panel {
    width: 82%;
    padding: 22px;
  }

  .main-bnb-work__legacy-red-panel p {
    font-size: 22px;
  }

  .main-bnb-work__stats,
  .main-bnb-work__legacy-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .main-bnb-work__stat:nth-child(2) {
    border-right: 0;
  }

  .main-bnb-work__stat:nth-child(3),
  .main-bnb-work__stat:nth-child(4) {
    border-top: 1px solid var(--mbw-line);
  }

  .main-bnb-work__highlight {
    grid-template-columns: 45px 1fr;
    gap: 10px;
  }

  .main-bnb-work__research-background {
    background-image:
      linear-gradient(rgba(9,11,14,.82), rgba(9,11,14,.92)),
      url("../img/backgrounds/pexels-pixabay-159720.jpg");
    background-position: center;
  }

  .main-bnb-work__commitment-copy h3 {
    font-size: 43px;
  }
}

/* =========================================================
   ABOUT US PAGE (abt-*)
   Scoped to templates/about.php. Reuses the theme tokens
   (--ink, --paper, --red, --line, --serif, --sans, --shell-max)
   and the existing .btn-consult / .dot components.
   ========================================================= */

.abt {
  background: var(--paper);
  color: var(--ink);
}

.abt-wrap {
  width: min(100% - 80px, var(--shell-max));
  margin-inline: auto;
}

.abt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  color: var(--red);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.abt-hero__copy .abt-eyebrow {
  font-size: 16px;
}
.abt-section .abt-eyebrow {
  font-size: 25px;
}
.abt-h2 {
  margin: 18px 0 0;
  color: inherit;
  font-family: var(--serif);
  font-size: clamp(24px, 4.6vw, 20px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.abt-h2 em {
  color: var(--red);
  font-style: italic;
}
.abt-hero__title em {
  color: white;
  font-style: italic;
}
.abt-lead {
  margin: 0 0 24px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.32;
}

.abt-text {
  margin: 0;
  color: #555;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.8;
}

.abt-text + .abt-text {
  margin-top: 20px;
}

.abt-num {
  display: block;
  color: var(--red);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.abt-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--red);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.abt-link span {
  font-size: 15px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.abt-link:hover span {
  transform: translateX(4px);
}

.abt-link--light {
  color: var(--paper);
}

.abt-link--light:hover {
  color: #fff;
}

.abt-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
  margin-top: 38px;
}

/* ---------- sections ---------- */

.abt-section {
  padding: 110px 0;
  background: var(--paper);
}

.abt-section--alt {
  background: #f5f5f2;
}

.abt-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 80px;
  align-items: end;
  margin-bottom: 64px;
}

/* ---------- hero ---------- */

.abt-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}

.abt-hero__bg,
.abt-cta__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.abt-hero__bg {
  object-position: center 30%;
  filter: grayscale(1);
  opacity: 0.4;
}

.abt-hero__inner {
  padding: 130px 0 90px;
}

.abt-hero__copy {
  max-width: 820px;
}

.abt-hero__title {
  margin: 87px 0 14px;
  color: var(--paper);
  font-family: var(--serif);
  font-size: clamp(56px, 7.4vw, 57px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.035em;
}

.abt-hero__sub {
  margin: 0 0 26px;
  /* color: rgba(250, 250, 248, 0.6); */
  color: var(--red);
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.abt-hero__lede {
  max-width: 620px;
  margin: 0;
  color: rgba(250, 250, 248, 0.8);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
}

.abt-hero .btn-consult,
.abt-cta .btn-consult {
  background: #0a0a0a;
  color: var(--paper);
}

.abt-hero .btn-consult:hover,
.abt-cta .btn-consult:hover {
  background: #fff;
  color: var(--ink);
}

.abt-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.abt-facts li {
  padding: 28px 28px 32px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.abt-facts li:first-child {
  padding-left: 0;
  border-left: 0;
}

.abt-facts strong {
  display: block;
  margin-bottom: 10px;
  color: var(--paper);
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}

.abt-facts span {
  display: block;
  max-width: 210px;
  color: rgba(250, 250, 248, 0.6);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.55;
}

/* ---------- the firm ---------- */

.abt-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 90px;
  align-items: start;
}

.abt-sheet {
  margin: 44px 0 0;
  border-top: 1px solid var(--line);
}

.abt-sheet > div {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.abt-sheet dt {
  color: var(--red);
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.abt-sheet dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.2;
}

/* ---------- vision ---------- */

.abt-vision {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 90px;
  align-items: start;
}

.abt-vision__head {
  position: sticky;
  top: 110px;
}

/* Lead line under the heading in a vision-style head column (Why B&B). */
.abt-vision__head .abt-text {
  margin-top: 18px;
}

.abt-vision__item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  padding: 34px 0;
  border-top: 1px solid #dcdcd8;
}

.abt-bullet {
  display: block;
  width: 7px;
  height: 7px;
  margin-top: 10px;
  border-radius: 50%;
  background: var(--red);
}

.abt-vision__item:first-child {
  padding-top: 0;
  border-top: 0;
}

/* Why B&B: twelve short points read better two-up, but only once .abt-vision
   itself is side-by-side (992px+). Below that the list stays single column,
   so the mobile layout is untouched. */
@media (min-width: 992px) {
  .abt-vision__list--split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
  }

  /* Two cells now open the list, so the second one drops the divider that
     only makes sense between stacked items. */
  .abt-vision__list--split .abt-vision__item:nth-child(2) {
    padding-top: 0;
    border-top: 0;
  }
}

/* ---------- why B&B ---------- */

.abt-why {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid #dcdcd8;
  border-left: 1px solid #dcdcd8;
}

.abt-why__lead {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  padding: 34px 30px;
  border-right: 1px solid #dcdcd8;
  background: var(--ink);
  color: var(--paper);
}

.abt-why__lead strong {
  font-family: var(--serif);
  font-size: clamp(32px, 3.4vw, 46px);
  font-weight: 400;
  line-height: 1;
}

.abt-why__lead span {
  color: var(--red);
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 32px);
  font-style: italic;
  line-height: 1.1;
}

.abt-why__item {
  min-height: 150px;
  padding: 26px 30px 30px;
  border-right: 1px solid #dcdcd8;
  border-bottom: 1px solid #dcdcd8;
  transition: background 0.25s ease;
}

.abt-why__item:hover {
  background: #fff;
}

.abt-why__item p {
  margin: 16px 0 0;
  max-width: 320px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
}

/* ---------- litigation & research ---------- */

.abt-prose .abt-h2 {
  margin-bottom: 30px;
}

/* ---------- good cause ---------- */

.abt-cause {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 90px;
  align-items: center;
}

.abt-cause__copy .abt-h2 {
  margin-bottom: 30px;
}

.abt-quote {
  margin: 0;
  padding: 44px 44px 40px;
  border: 1px solid var(--line);
  background: #fff;
}

.abt-quote blockquote {
  margin: 0 0 34px;
  padding-left: 28px;
  border-left: 2px solid var(--red);
  font-family: var(--serif);
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.3;
}

.abt-quote figcaption {
  display: flex;
  align-items: center;
  gap: 16px;
}

.abt-quote img {
  width: 64px;
  height: 80px;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(1);
}

.abt-quote figcaption span {
  color: #777;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.abt-quote figcaption strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

/* ---------- CTA ---------- */

.abt-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 130px 0;
  background: var(--ink);
  color: var(--paper);
}

.abt-cta__bg {
  opacity: 0.3;
}

.abt-cta__inner > * {
  max-width: 780px;
}

.abt-cta .abt-h2 {
  color: var(--paper);
}

.abt-cta .abt-text {
  margin-top: 26px;
  color: rgba(250, 250, 248, 0.75);
}

/* ---------- responsive ---------- */

@media (max-width: 1199px) {
  .abt-section {
    padding: 96px 0;
  }

  .abt-head,
  .abt-split,
  .abt-vision,
  .abt-cause {
    gap: 56px;
  }
}

@media (max-width: 991px) {
  .abt-wrap {
    width: min(100% - 48px, var(--shell-max));
  }

  .abt-section {
    padding: 80px 0;
  }

  .abt-head,
  .abt-split,
  .abt-vision,
  .abt-cause {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .abt-head {
    align-items: start;
    margin-bottom: 44px;
  }

  .abt-vision__head {
    position: static;
  }

  .abt-hero__inner {
    padding: 104px 0 70px;
  }

  .abt-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .abt-facts li:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .abt-facts li:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .abt-why {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .abt-cta {
    padding: 96px 0;
  }
}

@media (max-width: 767px) {
  .abt-wrap {
    width: calc(100% - 40px);
  }

  .abt-section {
    padding: 64px 0;
  }

  .abt-hero__inner {
    padding: 88px 0 52px;
  }

  .abt-hero__lede {
    font-size: 16px;
  }

  .abt-facts li {
    padding: 22px 16px 24px;
  }

  .abt-facts strong {
    font-size: 36px;
  }

  .abt-sheet > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .abt-vision__item {
    padding: 28px 0;
  }

  .abt-why {
    grid-template-columns: 1fr;
  }

  .abt-why__item {
    min-height: 0;
  }

  .abt-why__lead {
    padding: 28px 22px;
  }

  .abt-quote {
    padding: 30px 24px 28px;
  }

  .abt-quote blockquote {
    padding-left: 20px;
  }

  .abt-cta {
    padding: 76px 0;
  }
}

@media (max-width: 480px) {
  .abt-actions {
    gap: 22px;
  }

  .abt-actions .btn-consult {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .abt *,
  .abt *::before,
  .abt *::after {
    transition: none !important;
  }
}

/* ==========================================================
   HOMEPAGE FAQ — editorial, filterable
   Replaces the old #faq accordion on the homepage ONLY; the
   location templates still use .faq-accordion (unchanged).
   Tokens only — no new colours, no radius, no shadow.
   ========================================================== */

.bnb-home-faq {
  padding-block: 4rem;
  border-top: 1px solid var(--line);
}

@media (min-width: 992px) {
  .bnb-home-faq {
    padding-block: 6rem;
  }
}

.bnb-home-faq__grid {
  display: grid;
  /* minmax(0,1fr), not the implicit `auto`: an auto track is floored at its
     content's min-content width, and the filter strip's nowrap tabs make that
     ~715px - which blew the whole section past the viewport on phones. The
     >=768px rules below already did this; the mobile base case did not. */
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
}

/* Same reason: grid/flex items default to min-width:auto, so they refuse to
   shrink below their content and overflow the track they sit in. */
.bnb-home-faq__intro,
.bnb-home-faq__panel {
  min-width: 0;
}

@media (min-width: 768px) {
  .bnb-home-faq__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 4rem;
    align-items: start;
  }
}

@media (min-width: 1200px) {
  .bnb-home-faq__grid {
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 5rem;
  }
}

/* Left column ------------------------------------------------ */

.bnb-home-faq__intro {
  position: sticky;
  /* Clears the fixed header (measured into --bnb-header-fixed-height by
     home-script.js) instead of the old hard-coded 96px, which now sat behind
     it. The +24px keeps the previous breathing room above the column. */
  top: calc(var(--bnb-header-fixed-height, 112px) + 24px);
}

@media (max-width: 767px) {
  .bnb-home-faq__intro {
    position: static;
  }
}

.bnb-home-faq__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.6;
  margin-bottom: 18px;
}

.bnb-home-faq__heading {
  font-size: 40px;
  font-weight: 400;
  line-height: 1.08;
  margin: 0 0 20px;
  color: var(--ink);
}

@media (max-width: 767px) {
  .bnb-home-faq__heading {
    font-size: 30px;
  }
}

.bnb-home-faq__rule {
  display: block;
  width: 56px;
  height: 2px;
  background: var(--red);
  margin-bottom: 22px;
}

.bnb-home-faq__lede {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  opacity: 0.75;
  max-width: 40ch;
  margin-bottom: 28px;
}

.bnb-home-faq__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink);
  padding: 15px 26px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.bnb-home-faq__cta:hover,
.bnb-home-faq__cta:focus-visible {
  background: var(--red);
  color: #fff;
}

.bnb-home-faq__cta span {
  transition: transform 0.2s ease;
}

.bnb-home-faq__cta:hover span {
  transform: translateX(3px);
}

.bnb-home-faq__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.bnb-home-faq__contact > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bnb-home-faq__contact span {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.5;
}

.bnb-home-faq__contact a {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}

.bnb-home-faq__contact a:hover,
.bnb-home-faq__contact a:focus-visible {
  color: var(--red);
}

/* Left column: recognition + clientele trust strip -------------- */

.bnb-home-faq__trust {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.bnb-home-faq__trust-label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}

.bnb-home-faq__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bnb-home-faq__chips li {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink);
  padding: 6px 12px;
  border: 1px solid var(--line);
}

/* Right column: filter tabs ----------------------------------- */

.bnb-home-faq__filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.bnb-home-faq__filters::-webkit-scrollbar {
  display: none;
}

@media (min-width: 768px) {
  .bnb-home-faq__filters {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

.bnb-home-faq__tab {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: 1px solid var(--line);
  padding: 9px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.bnb-home-faq__tab:hover,
.bnb-home-faq__tab:focus-visible {
  border-color: var(--red);
  color: var(--red);
}

.bnb-home-faq__tab.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.bnb-home-faq__tab.is-active:hover,
.bnb-home-faq__tab.is-active:focus-visible {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

/* Right column: numbered list ----------------------------------- */

.bnb-home-faq__list {
  border-top: 1px solid var(--line);
  margin-top: 22px;
}

.bnb-home-faq__item {
  border-bottom: 1px solid var(--line);
}

.bnb-home-faq__item[hidden] {
  display: none;
}

.bnb-home-faq__q {
  margin: 0;
}

.bnb-home-faq__trigger {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 24px;
  align-items: start;
  gap: 16px;
  width: 100%;
  padding: 22px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.bnb-home-faq__trigger:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.bnb-home-faq__num {
  color: var(--red);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.9;
}

.bnb-home-faq__text {
  color: var(--ink);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  overflow-wrap: break-word;
  transition: color 0.2s ease;
}

.bnb-home-faq__trigger:hover .bnb-home-faq__text,
.bnb-home-faq__item.is-open .bnb-home-faq__text {
  color: var(--red);
}

/* Plus / minus drawn with two rules — no icon dependency. */
.bnb-home-faq__icon {
  position: relative;
  width: 16px;
  height: 16px;
  margin-top: 8px;
}

.bnb-home-faq__icon::before,
.bnb-home-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 1px;
  background: var(--ink);
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.bnb-home-faq__icon::after {
  transform: rotate(90deg);
}

.bnb-home-faq__item.is-open .bnb-home-faq__icon::before,
.bnb-home-faq__item.is-open .bnb-home-faq__icon::after {
  background: var(--red);
}

.bnb-home-faq__item.is-open .bnb-home-faq__icon::after {
  transform: rotate(0deg);
}

.bnb-home-faq__panel {
  animation: bnb-home-faq-reveal 0.25s ease both;
}

@keyframes bnb-home-faq-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bnb-home-faq__panel {
    animation: none;
  }
}

.bnb-home-faq__answer {
  font-family: var(--sans);
  padding: 0 24px 26px 56px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  opacity: 0.85;
}

.bnb-home-faq__answer > *:first-child {
  margin-top: 0;
}

.bnb-home-faq__answer > *:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .bnb-home-faq__trigger {
    grid-template-columns: 30px minmax(0, 1fr) 20px;
    gap: 10px;
    padding: 18px 0;
  }

  .bnb-home-faq__text {
    font-size: 17px;
  }

  .bnb-home-faq__answer {
    padding: 0 0 22px 40px;
    font-size: 14px;
  }

  .bnb-home-faq__cta {
    width: 100%;
    justify-content: center;
  }
}
section#practice {
  border-bottom: 1px solid var(--line);
}

/* Phones: the services tabs become a dropdown (template-parts/identify-concern.php).
   The tab row wrapped to four lines here and, through the practice page's sticky
   .practice-tabs rule, stuck to the top of the screen over the cards.
   Styled like the consultation form's selects: underline only, red on focus. */
.practice-select {
  position: relative;
  margin-bottom: 8px;
}

.practice-select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: translateY(-75%) rotate(45deg);
  pointer-events: none;
}

.practice-select__field {
  width: 100%;
  padding: 14px 28px 14px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.practice-select__field:focus {
  border-bottom-color: var(--red);
  outline: none;
}

@media (max-width: 767px) {
  #practice .practice-tabs {
    display: none;
  }

  /* Overrides Bootstrap's .mb-5 (3rem !important) under "Identify with your concern". */
  #practice .concern-head {
    margin-bottom: 20px !important;
  }

  #practice .concern-head .po-eyebrow {
    margin-bottom: 8px;
  }

  #practice .practice-tab-content {
    min-height: 0;
  }

  /* Compact list: title and arrow only, two columns, every service shown
     (no Load More). */
  #practice .grid-frame {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    margin: 0;
  }

  #practice .grid-frame > .col,
  #practice .grid-frame > .practice-card-extra {
    display: block;
    width: auto;
    max-width: none;
    padding: 0;
  }

  /* More than 12: six rows by two columns on screen, swipe left for the rest.
     The next column peeks in at the edge to show there is more. */
  #practice .grid-frame:has(> .col:nth-child(13)) {
    grid-template-columns: none;
    /* Equal rows, so one long title further along cannot stretch a whole row. */
    grid-template-rows: repeat(6, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: 43%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  #practice .grid-frame:has(> .col:nth-child(13))::-webkit-scrollbar {
    display: none;
  }

  #practice .grid-frame > .col {
    scroll-snap-align: start;
  }

  #practice .tab-pane:has(.grid-frame > .col:nth-child(13))::after {
    content: "Swipe for more \2192";
    display: block;
    margin-top: 16px;
    color: var(--red);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  #practice .practice-card {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-height: 0;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
  }

  #practice .practice-card > div:last-child {
    min-width: 0;
  }

  #practice .practice-card > .d-flex {
    order: 2;
    flex: 0 0 auto;
  }

  #practice .practice-card .dot-red,
  #practice .practice-card .card-desc,
  #practice .practice-load-more {
    display: none;
  }

  #practice .practice-card .icon-arrow {
    width: 14px;
    height: 14px;
  }

  #practice .practice-card .card-title {
    font-size: 16px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}
/* HOMEPAGE FAQ END */

/* =========================================
   FIRM SIGNATURE (profile colophon)
   ========================================= */

.bnb-firm-sign {
  margin-top: 72px;
  padding-top: 52px;
  border-top: 1px solid var(--line);
  text-align: center;
}

/* Dark disc with the mark reversed out of it. The shared logo is a dark mark
   on transparency, so it is inverted rather than shipping a second asset. */
.bnb-firm-sign__mark {
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  margin: 0 auto 24px;
  /* !important to clear the global "*{border-radius:0!important}" reset at the top of this file, the same escape hatch .dot uses. */
  border-radius: 50% !important;
  background: var(--ink);
}

.bnb-firm-sign__mark img {
  width: 48px;
  height: auto;
  filter: invert(1);
}

/* Matches .footer-name / .footer-sub so both signatures read as one lockup. */
.bnb-firm-sign__name {
  color: var(--ink);
  font-size: 21px;
  line-height: 1.1;
}

.bnb-firm-sign__tagline {
  margin-top: 0.25rem;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.5;
}

.bnb-firm-sign__address {
  max-width: 46ch;
  margin: 18px auto 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.7;
  opacity: 0.6;
}

@media (max-width: 767px) {
  .bnb-firm-sign {
    margin-top: 48px;
    padding-top: 40px;
  }

  .bnb-firm-sign__mark {
    width: 72px;
    height: 72px;
  }

  .bnb-firm-sign__mark img {
    width: 40px;
  }
}

/* Practice tab with nothing to list yet. */
.practice-empty {
  margin: 0;
  padding: 18px 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.55;
}

/* ==========================================================================
   Consultation form - theme design (homepage + location pages)

   Forminator form 277342 carries its own "Custom CSS" (Forms > edit >
   Appearance), written with !important: Orbitron font, a 500px rounded box,
   rounded grey inputs and a white rounded button. Those rules beat every
   class-only selector, so everything here is scoped to the form's wrapper ID
   (#consultationForm, present on front-page.php and every location
   template) - an ID outranks them - and touches no other form.
   ========================================================================== */

#consultationForm .forminator-ui.forminator-custom-form {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-family: var(--sans) !important;
}

#consultationForm .forminator-ui.forminator-custom-form .forminator-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 28px;
  margin-bottom: 6px !important;
}

#consultationForm .forminator-ui.forminator-custom-form .forminator-row .forminator-col {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
}

#consultationForm .forminator-ui.forminator-custom-form .forminator-row .forminator-col-12 {
  flex-basis: 100% !important;
}

#consultationForm .forminator-ui.forminator-custom-form .forminator-field {
  margin-bottom: 14px !important;
}

/* Text fields: one underline, no box. */
#consultationForm .forminator-ui.forminator-custom-form .forminator-input,
#consultationForm .forminator-ui.forminator-custom-form .forminator-textarea,
#consultationForm .forminator-ui.forminator-custom-form input[type="text"],
#consultationForm .forminator-ui.forminator-custom-form input[type="email"],
#consultationForm .forminator-ui.forminator-custom-form input[type="tel"],
#consultationForm .forminator-ui.forminator-custom-form textarea {
  width: 100% !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 12px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(10, 10, 10, 0.22) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color 0.2s ease !important;
}

#consultationForm .forminator-ui.forminator-custom-form .forminator-textarea,
#consultationForm .forminator-ui.forminator-custom-form textarea {
  height: auto !important;
  min-height: 110px !important;
  resize: vertical !important;
}

#consultationForm .forminator-ui.forminator-custom-form input::placeholder,
#consultationForm .forminator-ui.forminator-custom-form textarea::placeholder {
  color: #8a8a8a !important;
  opacity: 1 !important;
}

#consultationForm .forminator-ui.forminator-custom-form .forminator-input:focus,
#consultationForm .forminator-ui.forminator-custom-form .forminator-textarea:focus,
#consultationForm .forminator-ui.forminator-custom-form input:focus,
#consultationForm .forminator-ui.forminator-custom-form textarea:focus {
  border-bottom-color: var(--ink) !important;
  outline: none !important;
}

#consultationForm .forminator-ui.forminator-custom-form .iti {
  display: block !important;
  width: 100% !important;
}

/* Office dropdown (select2) styled as the same underline field. */
#consultationForm .forminator-ui.forminator-custom-form .forminator-field select:not(.select2-hidden-accessible) {
  width: 100% !important;
  max-width: 10% !important;
}

/* select2 keeps the real <select> as a 1px, clipped, absolutely positioned
   element for screen readers. Any width forced onto it (here or in the
   form's own Custom CSS) turns it into an invisible full-width box that
   widens the page on phones, so pin it back to 1px - on every Forminator
   form (the contact page uses the same form without #consultationForm).
   "html body" outranks the form's Custom CSS selector. */
html body .forminator-ui.forminator-custom-form .forminator-field select.select2-hidden-accessible {
  width: 1px !important;
  max-width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

#consultationForm .forminator-ui.forminator-custom-form .select2-container,
#consultationForm .forminator-ui.forminator-custom-form .forminator-select,
#consultationForm .forminator-ui.forminator-custom-form .select2-selection {
  top: 0 !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#consultationForm .forminator-ui.forminator-custom-form .select2-selection--single {
  height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(10, 10, 10, 0.22) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#consultationForm .forminator-ui.forminator-custom-form .select2-selection--single .select2-selection__rendered {
  padding: 0 28px 0 0 !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-size: 15px !important;
  line-height: 48px !important;
}

#consultationForm .forminator-ui.forminator-custom-form .select2-selection--single .select2-selection__arrow {
  top: 0 !important;
  right: 0 !important;
  height: 48px !important;
  color: var(--ink) !important;
}

/* Consent checkboxes: square, ink border, red tick. */
#consultationForm .forminator-ui.forminator-custom-form .forminator-checkbox {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px;
  margin: 0 !important;
}

#consultationForm .forminator-ui.forminator-custom-form .forminator-checkbox .forminator-checkbox-box {
  flex: 0 0 18px;
  width: 18px !important;
  height: 18px !important;
  margin: 2px 12px 0 0 !important;
  border: 1px solid rgba(10, 10, 10, 0.45) !important;
  border-radius: 0 !important;
  background-color: #fff !important;
  color: var(--red) !important;
}

#consultationForm .forminator-ui.forminator-custom-form .forminator-checkbox label,
#consultationForm .forminator-ui.forminator-custom-form .forminator-checkbox__label,
#consultationForm .forminator-ui.forminator-custom-form .forminator-checkbox__label p {
  margin: 0 !important;
  color: #444 !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

#consultationForm .forminator-ui.forminator-custom-form .forminator-checkbox a,
#consultationForm .forminator-ui.forminator-custom-form .forminator-description a,
#consultationForm .forminator-ui.forminator-custom-form .forminator-merge-tags a {
  color: var(--ink) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

#consultationForm .forminator-ui.forminator-custom-form .forminator-checkbox a:hover,
#consultationForm .forminator-ui.forminator-custom-form .forminator-merge-tags a:hover {
  color: var(--red) !important;
}

/* Submit: the theme's square, uppercase button. */
#consultationForm .forminator-ui.forminator-custom-form .forminator-button-submit {
  width: 100% !important;
  height: 54px !important;
  margin: 8px 0 0 !important;
  padding: 0 24px !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  background: var(--ink) !important;
  color: #fff !important;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  transition: background-color 0.25s ease, border-color 0.25s ease !important;
}

#consultationForm .forminator-ui.forminator-custom-form .forminator-button-submit:hover,
#consultationForm .forminator-ui.forminator-custom-form .forminator-button-submit:focus-visible {
  border-color: var(--red) !important;
  background: var(--red) !important;
  color: #fff !important;
}

/* "For job or internship, use the career page." */
#consultationForm .forminator-ui.forminator-custom-form .forminator-merge-tags p,
#consultationForm .forminator-ui.forminator-custom-form .forminator-description {
  margin: 4px 0 0 !important;
  color: #666 !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  text-align: left !important;
}

#consultationForm .forminator-ui.forminator-custom-form .forminator-error-message {
  margin-top: 6px !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--red) !important;
  font-size: 12px !important;
}

/* Phones: one field per row, 16px text so iOS does not zoom on focus. */
@media (max-width: 767px) {
  #consultationForm .forminator-ui.forminator-custom-form .forminator-row .forminator-col {
    flex-basis: 100% !important;
  }

  #consultationForm .forminator-ui.forminator-custom-form .forminator-input,
  #consultationForm .forminator-ui.forminator-custom-form .forminator-textarea,
  #consultationForm .forminator-ui.forminator-custom-form input,
  #consultationForm .forminator-ui.forminator-custom-form textarea,
  #consultationForm .forminator-ui.forminator-custom-form .select2-selection--single .select2-selection__rendered {
    font-size: 16px !important;
  }
}
/* --- header Terms / Disclaimer popups ---------------------------------------
   Same language as the rest of the site: paper ground, hairline border,
   square corners, red dot eyebrow, serif heading and a short red rule. The
   copy is a preview of the real page; "Read more" opens the full page.      */

.legal-modal .modal-dialog {
  max-width: 640px;
}

.legal-modal .modal-content {
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(10, 10, 10, 0.18);
}

.legal-modal .modal-header {
  align-items: flex-start;
  gap: 1.5rem;
  padding: 2rem 2rem 1.25rem;
  border-bottom: 1px solid var(--line);
}

.legal-modal__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--red);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.legal-modal .modal-title {
  margin: 0.6rem 0 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 400;
  line-height: 1.05;
}

.legal-modal__rule {
  display: block;
  width: 48px;
  height: 2px;
  margin-top: 1rem;
  background: var(--red);
}

.legal-modal .modal-body {
  padding: 1.5rem 2rem;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink);
}

.legal-modal .modal-body p {
  margin: 0 0 1rem;
  opacity: 0.75;
}

.legal-modal .modal-body p:last-child {
  margin-bottom: 0;
}

.legal-modal .modal-body .legal-modal__lead {
  padding-left: 1rem;
  border-left: 2px solid var(--red);
  font-weight: 600;
  opacity: 1;
}

.legal-modal .modal-footer {
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 2rem 1.75rem;
  border-top: 1px solid var(--line);
}

.legal-modal__more {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--red);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}

.legal-modal__more span {
  font-size: 16px;
  line-height: 0;
  transition: transform 0.2s ease;
}

.legal-modal__more:hover,
.legal-modal__more:focus-visible {
  color: var(--ink);
}

.legal-modal__more:hover span,
.legal-modal__more:focus-visible span {
  transform: translateX(4px);
}

.legal-modal .btn-modal-close {
  margin-left: auto;
  padding: 0.7rem 1.5rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.legal-modal .btn-modal-close:hover,
.legal-modal .btn-modal-close:focus-visible {
  border-color: var(--red);
  background: var(--red);
}

@media (max-width: 575px) {
  .legal-modal .modal-dialog {
    margin: 0.75rem;
  }

  .legal-modal .modal-header,
  .legal-modal .modal-body,
  .legal-modal .modal-footer {
    padding-inline: 1.25rem;
  }

  .legal-modal .modal-header {
    padding-top: 1.5rem;
  }
}

/* ==========================================================================
   Complianz cookie banner (plugin is live-only). Its stylesheet drives
   everything off --cmplz_* variables on :root; redefining them on the banner
   itself wins regardless of load order. The theme's global
   `* { border-radius: 0 !important }` flattens the plugin's pill toggles,
   so the switch is drawn square on purpose here.
   ========================================================================== */

.cmplz-cookiebanner,
#cmplz-manage-consent {
  --cmplz_banner_background_color: #fff;
  --cmplz_banner_border_color: var(--ink);
  --cmplz_banner_border_width: 1px;
  --cmplz_text_color: var(--ink);
  --cmplz_hyperlink_color: var(--ink);
  --cmplz_text_font_size: 14px;
  --cmplz_link_font_size: 13px;
  --cmplz_category_body_font_size: 13px;
  --cmplz_category_header_title_font_size: 14px;
  --cmplz_category_header_active_font_size: 11px;
  --cmplz_category_header_always_active_color: var(--red);
  --cmplz_button_font_size: 13px;
  --cmplz_button_accept_background_color: var(--ink);
  --cmplz_button_accept_border_color: var(--ink);
  --cmplz_button_accept_text_color: #fff;
  --cmplz_button_deny_background_color: #fff;
  --cmplz_button_deny_border_color: var(--ink);
  --cmplz_button_deny_text_color: var(--ink);
  --cmplz_button_settings_background_color: #fff;
  --cmplz_button_settings_border_color: var(--line);
  --cmplz_button_settings_text_color: var(--ink);
  --cmplz_slider_active_color: var(--ink);
  --cmplz_slider_inactive_color: #c8c8c8;
  --cmplz_slider_bullet_color: #fff;
}

.cmplz-cookiebanner {
  font-family: var(--sans);
  box-shadow: 0 12px 40px rgba(10, 10, 10, 0.18);
}

.cmplz-cookiebanner .cmplz-title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.cmplz-cookiebanner .cmplz-message {
  color: #444;
}

.cmplz-cookiebanner .cmplz-divider {
  border-color: var(--line);
}

.cmplz-cookiebanner .cmplz-categories .cmplz-category {
  background-color: var(--paper);
  border: 1px solid var(--line);
}

.cmplz-cookiebanner .cmplz-always-active {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
  min-height: 44px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover {
  background-color: var(--red);
  border-color: var(--red);
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover {
  background-color: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.cmplz-cookiebanner .cmplz-links .cmplz-link {
  text-underline-offset: 3px;
}

.cmplz-cookiebanner .cmplz-links .cmplz-link:hover {
  color: var(--red);
}

/* Theme `button { padding: 0 }` resets are fine for the chevron toggle,
   but keep it the ink colour rather than inheriting link blue. */
.cmplz-cookiebanner .cmplz-category-toggle {
  color: var(--ink);
}

@media (max-width: 767px) {
  .cmplz-cookiebanner {
    padding: 16px !important;
  }

  .cmplz-cookiebanner .cmplz-title {
    font-size: 20px;
  }

  .cmplz-cookiebanner .cmplz-message {
    font-size: 13px;
    line-height: 1.55;
  }

  .cmplz-cookiebanner .cmplz-close svg {
    width: 14px;
    height: 14px;
  }

  /* Accept/Deny side by side, preferences full width underneath. The plugin
     sets flex-direction: column on mobile, which turns the flex-basis below
     into a height and stacks every button on the same spot. */
  .cmplz-cookiebanner .cmplz-buttons {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 8px;
  }

  .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    width: auto;
    height: auto;
  }

  .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept,
  .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny {
    flex: 1 1 calc(50% - 4px);
  }

  .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
  .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
    flex: 1 1 100%;
  }
}

/* --- floating WhatsApp / call buttons (footer.php) ------------------------ */

/* Desktop: a slim ink dock on the right edge, styled like the header's
   Consultation button. Labels slide out to the left on hover. */
.bnb-float-contact {
  position: fixed;
  right: 0;
  bottom: 96px;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  border-left: 2px solid var(--red);
  box-shadow: 0 12px 30px rgba(10, 10, 10, 0.18);
}

.bnb-float-contact__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.bnb-float-contact__btn + .bnb-float-contact__btn {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.bnb-float-contact__icon {
  display: flex;
}

.bnb-float-contact__label {
  position: absolute;
  top: 0;
  right: 100%;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 18px;
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
}

.bnb-float-contact__btn:hover,
.bnb-float-contact__btn:focus-visible {
  color: #fff;
}

.bnb-float-contact__btn:hover .bnb-float-contact__label,
.bnb-float-contact__btn:focus-visible .bnb-float-contact__label {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.bnb-float-contact__btn--whatsapp:hover,
.bnb-float-contact__btn--whatsapp:focus-visible,
.bnb-float-contact__btn--whatsapp:hover .bnb-float-contact__label,
.bnb-float-contact__btn--whatsapp:focus-visible .bnb-float-contact__label {
  background: #1da851;
}

.bnb-float-contact__btn--call:hover,
.bnb-float-contact__btn--call:focus-visible,
.bnb-float-contact__btn--call:hover .bnb-float-contact__label,
.bnb-float-contact__btn--call:focus-visible .bnb-float-contact__label {
  background: var(--red);
}

.bnb-float-contact__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* Hidden while the mobile menu is open so it doesn't sit on top of it. */
body.menu-open .bnb-float-contact {
  display: none;
}

/* Mobile: a full-width two-up bar pinned to the bottom of the screen. */
@media (max-width: 767px) {
  .bnb-float-contact {
    left: 0;
    bottom: 0;
    flex-direction: row;
    padding-bottom: env(safe-area-inset-bottom);
    border-left: 0;
    box-shadow: 0 -6px 20px rgba(10, 10, 10, 0.12);
  }

  .bnb-float-contact__btn {
    flex: 1 1 50%;
    width: auto;
    height: 52px;
    gap: 10px;
  }

  .bnb-float-contact__btn + .bnb-float-contact__btn {
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
  }

  .bnb-float-contact__btn--call {
    background: var(--red);
  }

  .bnb-float-contact__label,
  .bnb-float-contact__btn:hover .bnb-float-contact__label,
  .bnb-float-contact__btn:focus-visible .bnb-float-contact__label {
    position: static;
    height: auto;
    padding: 0;
    background: transparent;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* Keep the last bit of the footer reachable above the bar. */
  body {
    padding-bottom: calc(52px + env(safe-area-inset-bottom));
  }
}

@media print {
  .bnb-float-contact {
    display: none;
  }
}