/* Private proposal for the existing Design26 visual system.  It changes only
   crop, header, and navigation presentation.  It does not change copy,
   destinations, image bytes, services, or publication state. */

/* The source portraits have different subject scale.  Enlarge Timothy's
   background while preserving Benjamin's accepted 118% crop; the paired
   card faces then have matching Vision face boxes and eye spans. */
.blg-pilot .blg-attorney-photo.blg-timothy-photo {
    background-size: auto 192.9%;
    background-position: center 21.8%;
}

.blg-pilot .blg-attorney-photo.blg-benjamin-photo {
    background-size: auto, 118% auto;
    background-position: center, center 88%;
}

/* The body shell remains unchanged.  Only the header receives additional
   room on wide screens so stable labels and fallback fonts do not collide. */
@media (min-width: 1401px) {
    .blg-pilot .blg-site-header .blg-nav-shell {
        width: min(1480px, calc(100% - 80px));
    }
}

.blg-pilot .blg-site-header .blg-desktop-nav {
    gap: 18px;
}

.blg-pilot .blg-site-header .blg-desktop-nav > :is(a, button, span),
.blg-pilot .blg-site-header .blg-desktop-nav > .otr-nav-group > summary {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    padding: 12px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 700 15px/1.2 var(--display);
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.blg-pilot .blg-site-header .blg-desktop-nav > .otr-nav-group {
    flex: 0 0 auto;
}

/* Without Search the existing labels collapse at 1400px. */
@media (max-width: 1400px) {
    .blg-pilot .blg-site-header .blg-desktop-nav {
        display: none;
    }

    .blg-pilot .blg-site-header .blg-menu-toggle {
        width: 48px;
        height: 48px;
        display: grid;
        place-items: center;
    }

    .blg-pilot .blg-site-header .blg-nav-actions {
        justify-self: end;
    }
}

/* The protected Search carrier adds a seventh desktop control.  It receives
   the desktop header only when the widened shell has sufficient clearance.
   At earlier widths, the exact existing mobile Search control remains visible. */
@media (max-width: 1480px) {
    .blg-pilot .blg-site-header.blg-has-search .blg-desktop-nav {
        display: none;
    }

    .blg-pilot .blg-site-header.blg-has-search .blg-menu-toggle {
        width: 48px;
        height: 48px;
        display: grid;
        place-items: center;
    }

    .blg-pilot .blg-site-header.blg-has-search .blg-nav-actions {
        justify-self: end;
    }

    .blg-pilot .blg-site-header.blg-has-search .blg-search-mobile {
        display: block;
        padding-top: 4px;
        padding-bottom: 8px;
    }

    .blg-pilot .blg-site-header.blg-has-search .blg-search-mobile .blg-search-open {
        width: 100%;
        padding: 8px 12px;
        color: inherit;
        border-color: currentColor;
        text-align: left;
    }
}

/* Font substitution and user text enlargement can change label metrics without
   changing viewport width.  The local measurement guard adds this class only
   when the rendered controls no longer retain 24px clearances. */
.blg-pilot .blg-site-header.blg-nav-overflow .blg-desktop-nav {
    display: none;
}

.blg-pilot .blg-site-header.blg-nav-overflow .blg-menu-toggle {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
}

.blg-pilot .blg-site-header.blg-nav-overflow .blg-nav-actions {
    justify-self: end;
}

.blg-pilot .blg-site-header.blg-nav-overflow.blg-has-search .blg-search-mobile {
    display: block;
    padding-top: 4px;
    padding-bottom: 8px;
}

.blg-pilot .blg-site-header.blg-nav-overflow.blg-has-search .blg-search-mobile .blg-search-open {
    width: 100%;
    padding: 8px 12px;
    color: inherit;
    border-color: currentColor;
    text-align: left;
}

/* Scope the extended menu treatment to the Design26 site header.  Apply the
   same row presentation to the home buttons and native-shell anchors. */
.blg-pilot .blg-site-header .blg-menu-toggle {
        color: var(--ink) !important;
        border: 1px solid var(--line-strong) !important;
        font-size: 14px !important;
        font-weight: 750 !important;
        letter-spacing: .08em;
        text-transform: uppercase;
}

.blg-pilot .blg-site-header .blg-menu-toggle i {
        width: 20px;
        height: 2px;
        margin: 4px auto 0;
        display: block;
        background: var(--ink);
        box-shadow: 0 5px 0 var(--ink);
}

.blg-pilot .blg-site-header .blg-mobile-menu {
        position: absolute;
        z-index: 101;
        right: max(16px, calc((100% - 1480px) / 2));
        width: min(360px, calc(100% - 32px));
        padding: 16px;
        display: grid;
        background: var(--paper-bright);
        border: 1px solid var(--line-strong);
        box-shadow: var(--shadow);
}

.blg-pilot .blg-site-header .blg-mobile-menu > :is(a, button, span) {
        min-height: 52px;
        padding: 12px 14px;
        display: flex;
        align-items: center;
        color: var(--ink) !important;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid var(--line) !important;
        font: inherit;
        text-align: left;
        text-decoration: none;
}

.blg-pilot .blg-site-header .blg-mobile-menu > :is(a, button, span):last-child {
        margin-top: 12px;
        justify-content: center;
        color: var(--ink) !important;
        background: var(--signal) !important;
        border-bottom: 0 !important;
        text-align: center;
}

/* Use the same mobile contact controls when the shared shell substitutes links
   for the home screen's buttons. */
@media (max-width: 900px) {
    .blg-pilot .blg-site-header .blg-mobile-actions > :is(a, button, span) {
        min-width: 52px;
        min-height: 48px;
        padding: 9px 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        color: var(--ink) !important;
        background: transparent !important;
        border: 1px solid var(--line-strong) !important;
        border-radius: 2px;
        font: 700 14px/1.2 var(--display) !important;
        letter-spacing: .08em;
        text-decoration: none;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .blg-pilot .blg-site-header .blg-mobile-actions > :is(a, button, span):last-child {
        color: var(--ink) !important;
        background: var(--signal) !important;
        border-color: var(--signal) !important;
    }
}

@media (max-width: 767px) {
    .blg-pilot .blg-site-header .blg-mobile-actions > :is(a, button, span) {
        min-width: 48px;
        padding: 9px 10px;
    }

    .blg-pilot .blg-site-header .blg-mobile-actions > :is(a, button, span):last-child {
        min-width: 72px;
    }
}

@media (max-width: 420px) {
    .blg-pilot .blg-site-header .blg-mobile-actions > :is(a, button, span) {
        min-width: 46px;
        min-height: 46px;
        padding: 8px;
    }

    .blg-pilot .blg-site-header .blg-mobile-actions > :is(a, button, span):last-child {
        min-width: 64px;
    }
}

@media (max-width: 360px) {
    .blg-pilot .blg-site-header .blg-mobile-actions > :is(a, button, span):last-child {
        min-width: 58px;
    }
}

/* Collection layout for the two exact testimonial components nested in prose. */
.blg-r4 .blg-r4-prose.blg-r6-testimonial-index { max-width: none; }
.blg-r4 .blg-r4-prose .blg-review-cards { align-items: start; }
.blg-r4 .blg-r4-prose .blg-review-cards > .blg-client-review > blockquote { padding: 0; border: 0; margin: 18px 0 24px; }
.blg-r4 .blg-r4-prose .blg-review-cards > .blg-client-review > blockquote > p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
@media (min-width: 901px) {
    .blg-r4 .blg-r4-prose .blg-review-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
}
@media (max-width: 640px) {
    .blg-r4 .blg-r4-prose .blg-review-cards > .blg-client-review > blockquote { margin: 12px 0 16px; }
}

/* Keep the existing visible travel sentence complete just above the mobile rule. */
@media (min-width: 1121px) {
    .blg-site-header .blg-utility-bar > p {
        flex-wrap: wrap;
        row-gap: 4px;
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
    }
    .blg-site-header .blg-utility-bar > p > span {
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
    }
}

/* Follow the actual utility height; clip only the decorative full-bleed paint. */
@media (min-width: 901px) {
  .blg-site-header::before { display: none; }
  .blg-site-header .blg-utility-bar { position: relative; isolation: isolate; }
  .blg-site-header .blg-utility-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--midnight);
    box-shadow: 0 0 0 100vmax var(--midnight);
    clip-path: inset(0 -100vmax);
  }
}

/* Keep the homepage header CTA in the shared display face despite the button reset. */
#blg-bp05-pilot .blg-site-header .blg-nav-actions > button.blg-nav-cta {
  font-family: var(--display);
}

/* Preserve the shared compact Search button presentation across page families. */
.blg-pilot .blg-site-header .blg-search-mobile .blg-search-open,
.blg-pilot .blg-site-header.blg-has-search .blg-search-mobile .blg-search-open,
.blg-pilot .blg-site-header.blg-nav-overflow.blg-has-search .blg-search-mobile .blg-search-open {
  border: 1px solid var(--line-strong);
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  min-height: 44px;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
}

/* Center the Menu label and complete two-line icon inside the existing toggle. */
.blg-pilot .blg-site-header .blg-menu-toggle {
  line-height: 16px;
  grid-template-rows: 16px 7px;
  row-gap: 6px;
  align-content: center;
}
.blg-pilot .blg-site-header .blg-menu-toggle i {
  margin: 0 auto;
  align-self: start;
}

/* Keep retained disclosure Search and navigation in one content-driven panel. */
.blg-pilot.blg-r4 .blg-site-header.blg-has-search details.blg-passive-mobile[open] {
  width: 48px;
  height: 48px;
  grid-template-columns: min(360px, calc(100vw - 32px));
  grid-template-rows: 48px auto auto;
  justify-content: end;
  align-content: start;
  row-gap: 0;
}
@media (max-width: 1480px) {
  .blg-pilot.blg-r4 .blg-site-header.blg-has-search details.blg-passive-mobile[open] { display: grid; }
}
.blg-pilot.blg-r4 .blg-site-header.blg-has-search.blg-nav-overflow details.blg-passive-mobile[open] { display: grid; }
.blg-pilot.blg-r4 .blg-site-header.blg-has-search details.blg-passive-mobile[open] > summary { justify-self: end; }
.blg-pilot.blg-r4 .blg-site-header.blg-has-search details.blg-passive-mobile[open] > .blg-search-mobile {
  position: static;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 16px;
  background: var(--paper-bright);
  border: 1px solid var(--line-strong);
  border-bottom: 0;
}
.blg-pilot.blg-r4 .blg-site-header.blg-has-search details.blg-passive-mobile[open] > .blg-mobile-menu {
  position: static;
  inset: auto;
  width: 100%;
  margin: 0;
  padding: 0 16px 16px;
  border-top: 0;
}
