/**
 * Goldenblatt Child — responsive overrides.
 *
 * Bold Builder's spacing scale is em-based and fixed (extra_small 0.46875em,
 * small 0.9375em, normal 1.875em, medium 3.75em, large 7.5em, extra_large
 * 15em, set on .bt_bb_section.bt_bb_top/bottom_spacing_X > .bt_bb_port in
 * goldenblatt/style.css) — it does not shrink at narrow widths, so a section
 * costs the same top/bottom padding on a phone as on a desktop. At the large
 * end that's up to 15em (240px) of empty space above and below a single
 * section, on every section, on every page.
 *
 * The site-wide block just below steps that whole scale down at tablet and
 * mobile widths for every section on the site. A handful of sections listed
 * later in this file (attorney bios, the home page hero, blog banners, …)
 * have their own bespoke, hand-tuned spacing for reasons specific to that
 * section — those use a 3-class selector (e.g. .conmy-attorney.bt_bb_section
 * .bt_bb_top_spacing_medium) that already outweighs this file's 2-class
 * global rule, so they aren't affected by it.
 *
 * Headings need no rules here: the builder already sets `margin:0; padding:0`
 * on every h1–h6 inside .bt_bb_headline, so the space around a heading comes
 * entirely from the separator elements bracketing it in the page content.
 */

/* ==========================================================================
   Site-wide section spacing — every .bt_bb_section, every page
   --------------------------------------------------------------------------
   .conmy-hero is excluded: its top/bottom padding is hand-tuned against the
   .conmyTrust/.conmyServing "band" sections it overlaps via a negative
   margin (see the .conmy-hero rules further down, with the exact arithmetic
   in their comments) — shrinking its extra_large port padding here without
   redoing that math would pull the overlap out of alignment. Its own
   section already gets a smaller, purpose-built reduction below instead.
   ========================================================================== */
@media (max-width: 992px) {
	.bt_bb_section:not(.conmy-hero).bt_bb_top_spacing_extra_small > .bt_bb_port    { padding-top: .4em; }
	.bt_bb_section:not(.conmy-hero).bt_bb_top_spacing_small > .bt_bb_port         { padding-top: .75em; }
	.bt_bb_section:not(.conmy-hero).bt_bb_top_spacing_normal > .bt_bb_port        { padding-top: 1.5em; }
	.bt_bb_section:not(.conmy-hero).bt_bb_top_spacing_medium > .bt_bb_port        { padding-top: 2.5em; }
	.bt_bb_section:not(.conmy-hero).bt_bb_top_spacing_large > .bt_bb_port         { padding-top: 4.5em; }
	.bt_bb_section:not(.conmy-hero).bt_bb_top_spacing_extra_large > .bt_bb_port   { padding-top: 7.5em; }

	.bt_bb_section:not(.conmy-hero).bt_bb_bottom_spacing_extra_small > .bt_bb_port  { padding-bottom: .4em; }
	.bt_bb_section:not(.conmy-hero).bt_bb_bottom_spacing_small > .bt_bb_port       { padding-bottom: .75em; }
	.bt_bb_section:not(.conmy-hero).bt_bb_bottom_spacing_normal > .bt_bb_port      { padding-bottom: 1.5em; }
	.bt_bb_section:not(.conmy-hero).bt_bb_bottom_spacing_medium > .bt_bb_port      { padding-bottom: 2.5em; }
	.bt_bb_section:not(.conmy-hero).bt_bb_bottom_spacing_large > .bt_bb_port       { padding-bottom: 4.5em; }
	.bt_bb_section:not(.conmy-hero).bt_bb_bottom_spacing_extra_large > .bt_bb_port { padding-bottom: 7.5em; }
}

@media (max-width: 768px) {
	.bt_bb_section:not(.conmy-hero).bt_bb_top_spacing_extra_small > .bt_bb_port    { padding-top: .35em; }
	.bt_bb_section:not(.conmy-hero).bt_bb_top_spacing_small > .bt_bb_port         { padding-top: .6em; }
	.bt_bb_section:not(.conmy-hero).bt_bb_top_spacing_normal > .bt_bb_port        { padding-top: 1.25em; }
	.bt_bb_section:not(.conmy-hero).bt_bb_top_spacing_medium > .bt_bb_port        { padding-top: 2em; }
	.bt_bb_section:not(.conmy-hero).bt_bb_top_spacing_large > .bt_bb_port         { padding-top: 3.5em; }
	.bt_bb_section:not(.conmy-hero).bt_bb_top_spacing_extra_large > .bt_bb_port   { padding-top: 5.5em; }

	.bt_bb_section:not(.conmy-hero).bt_bb_bottom_spacing_extra_small > .bt_bb_port  { padding-bottom: .35em; }
	.bt_bb_section:not(.conmy-hero).bt_bb_bottom_spacing_small > .bt_bb_port       { padding-bottom: .6em; }
	.bt_bb_section:not(.conmy-hero).bt_bb_bottom_spacing_normal > .bt_bb_port      { padding-bottom: 1.25em; }
	.bt_bb_section:not(.conmy-hero).bt_bb_bottom_spacing_medium > .bt_bb_port      { padding-bottom: 2em; }
	.bt_bb_section:not(.conmy-hero).bt_bb_bottom_spacing_large > .bt_bb_port       { padding-bottom: 3.5em; }
	.bt_bb_section:not(.conmy-hero).bt_bb_bottom_spacing_extra_large > .bt_bb_port { padding-bottom: 5.5em; }
}

@media (max-width: 480px) {
	.bt_bb_section:not(.conmy-hero).bt_bb_top_spacing_extra_small > .bt_bb_port    { padding-top: .3em; }
	.bt_bb_section:not(.conmy-hero).bt_bb_top_spacing_small > .bt_bb_port         { padding-top: .5em; }
	.bt_bb_section:not(.conmy-hero).bt_bb_top_spacing_normal > .bt_bb_port        { padding-top: 1em; }
	.bt_bb_section:not(.conmy-hero).bt_bb_top_spacing_medium > .bt_bb_port        { padding-top: 1.5em; }
	.bt_bb_section:not(.conmy-hero).bt_bb_top_spacing_large > .bt_bb_port         { padding-top: 2.5em; }
	.bt_bb_section:not(.conmy-hero).bt_bb_top_spacing_extra_large > .bt_bb_port   { padding-top: 4em; }

	.bt_bb_section:not(.conmy-hero).bt_bb_bottom_spacing_extra_small > .bt_bb_port  { padding-bottom: .3em; }
	.bt_bb_section:not(.conmy-hero).bt_bb_bottom_spacing_small > .bt_bb_port       { padding-bottom: .5em; }
	.bt_bb_section:not(.conmy-hero).bt_bb_bottom_spacing_normal > .bt_bb_port      { padding-bottom: 1em; }
	.bt_bb_section:not(.conmy-hero).bt_bb_bottom_spacing_medium > .bt_bb_port      { padding-bottom: 1.5em; }
	.bt_bb_section:not(.conmy-hero).bt_bb_bottom_spacing_large > .bt_bb_port       { padding-bottom: 2.5em; }
	.bt_bb_section:not(.conmy-hero).bt_bb_bottom_spacing_extra_large > .bt_bb_port { padding-bottom: 4em; }
}

/* ==========================================================================
   Attorney bio pages (sections carry el_class="conmy-attorney")
   ========================================================================== */

.conmy-attorney .bt_bb_column.bt_bb_padding_normal .bt_bb_column_content {
	padding: 2em;
}

/* Photo columns are background images; padding only adds dead space. */
.conmy-attorney .bt_bb_column_content.bt_bb_column_background_image {
	padding: 0;
}

/* The hero headshot column (el_class="conmyAttorneyPhoto"). Deliberately NOT
   pinned to the portrait's own aspect ratio (1217x1293) — that made the
   panel's height follow the photo regardless of how much copy an attorney
   has, leaving dead white space under a short Practice Areas list. Instead
   it takes the row's height (set by the intro column's content, via the
   default column stretch) and covers it, top-anchored so a shorter row
   crops from the bottom rather than losing the head. */
.conmy-attorney .conmyAttorneyPhoto .bt_bb_column_content.bt_bb_column_background_image {
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
}

/* Breathing room around the vCard entry: gap below the E-MAIL/TELEPHONE row
   above it, and before the rule below it. */
.conmy-attorney .conmy-vcard {
	margin-top: 1.25em;
	margin-bottom: 1.5em;
}

/* The theme pads every icon column 15rem top / 7.5rem bottom (!important) to
   clear the 7.5em icon box — 240px of air above the attorney's name. This
   column also carries its own 2em top padding (.bt_bb_padding_normal below),
   which the icon ignores (it's absolutely positioned off the column's own
   edge) but heading text doesn't — so the two paddings stack. 7rem here
   plus that 2em leaves just ~24px of clearance under the icon, not 9.5rem's
   ~64px. */
.conmy-attorney .bt_bb_column.btWithIcon .bt_bb_column_content .bt_bb_column_content_inner {
	padding-top: 7rem !important;
	padding-bottom: 2rem !important;
}

/* --- Large tablet / small laptop --- */
@media (max-width: 1200px) {
	.conmy-attorney.bt_bb_section.bt_bb_top_spacing_medium    { padding-top: 3em; }
	.conmy-attorney.bt_bb_section.bt_bb_bottom_spacing_medium { padding-bottom: 3em; }

	.conmy-attorney .bt_bb_column.bt_bb_padding_normal .bt_bb_column_content {
		padding: 1.75em;
	}

	.conmy-attorney .bt_bb_separator.bt_bb_bottom_spacing_medium { margin-bottom: 3em; }
	.conmy-attorney .bt_bb_separator.bt_bb_bottom_spacing_normal { margin-bottom: 1.5em; }
	.conmy-attorney .bt_bb_separator.bt_bb_top_spacing_normal    { margin-top: 1.5em; }
}

/* --- Tablet: columns stack --- */
@media (max-width: 992px) {
	.conmy-attorney.bt_bb_section.bt_bb_top_spacing_medium    { padding-top: 2.5em; }
	.conmy-attorney.bt_bb_section.bt_bb_bottom_spacing_medium { padding-bottom: 2.5em; }

	.conmy-attorney .bt_bb_column.bt_bb_padding_normal .bt_bb_column_content {
		padding: 1.5em;
	}

	.conmy-attorney .bt_bb_separator.bt_bb_bottom_spacing_medium      { margin-bottom: 2em; }
	.conmy-attorney .bt_bb_separator.bt_bb_bottom_spacing_normal      { margin-bottom: 1.25em; }
	.conmy-attorney .bt_bb_separator.bt_bb_top_spacing_normal         { margin-top: 1.25em; }
	.conmy-attorney .bt_bb_separator.bt_bb_bottom_spacing_small       { margin-bottom: 0.75em; }
	.conmy-attorney .bt_bb_separator.bt_bb_bottom_spacing_extra_small { margin-bottom: 0.4em; }

	/* Once stacked, the negative overlap drags the navy panel over the text.
	   The parent sets its -7.5em with !important, so this must match it. */
	.conmy-attorney.bt_bb_section.bt_bb_negative_margin_large { margin-top: 0 !important; }

	/* Give the stacked photo a real height instead of a tall empty block.
	   Stacked columns no longer share a row with anything taller, so nothing
	   else sets this — including the headshot, which no longer carries its
	   own aspect-ratio override. */
	.conmy-attorney .bt_bb_column_content.bt_bb_column_background_image {
		min-height: 60vw;
		background-position: center top;
	}
}

/* --- Phone --- */
@media (max-width: 768px) {
	.conmy-attorney.bt_bb_section.bt_bb_top_spacing_medium    { padding-top: 2em; }
	.conmy-attorney.bt_bb_section.bt_bb_bottom_spacing_medium { padding-bottom: 2em; }

	.conmy-attorney .bt_bb_column.bt_bb_padding_normal .bt_bb_column_content {
		padding: 1.25em;
	}

	.conmy-attorney .bt_bb_separator.bt_bb_bottom_spacing_medium      { margin-bottom: 1.5em; }
	.conmy-attorney .bt_bb_separator.bt_bb_bottom_spacing_normal      { margin-bottom: 1em; }
	.conmy-attorney .bt_bb_separator.bt_bb_top_spacing_normal         { margin-top: 1em; }
	.conmy-attorney .bt_bb_separator.bt_bb_bottom_spacing_small       { margin-bottom: 0.6em; }
	.conmy-attorney .bt_bb_separator.bt_bb_bottom_spacing_extra_small { margin-bottom: 0.35em; }

	.conmy-attorney .bt_bb_column_content.bt_bb_column_background_image { min-height: 85vw; }

	/* E-mail / telephone tiles sit at 1/2 each and crush at this width. */
	.conmy-attorney .bt_bb_row_inner > .bt_bb_column_inner { width: 100%; }

	/* vCard reads as a full-width call to action once stacked. */
	.conmy-attorney .conmy-vcard,
	.conmy-attorney .conmy-vcard .btn { width: 100%; text-align: center; }
}

/* --- Small phone --- */
@media (max-width: 480px) {
	.conmy-attorney.bt_bb_section.bt_bb_top_spacing_medium    { padding-top: 1.5em; }
	.conmy-attorney.bt_bb_section.bt_bb_bottom_spacing_medium { padding-bottom: 1.5em; }

	.conmy-attorney .bt_bb_column.bt_bb_padding_normal .bt_bb_column_content {
		padding: 1em;
	}
}

/* ==========================================================================
   Two sections cannot be compacted freely
   --------------------------------------------------------------------------
   .conmy-hero sits beneath the overlaying sticky header, so it needs enough
   top clearance for the headline to not collide with the nav.
   .conmy-band carries a wide background photo that only reads as an image if
   the section is tall enough to show it.
   ========================================================================== */

.conmy-hero.bt_bb_section  { padding-top: 6.5em; }
.conmy-band.bt_bb_section  { min-height: 260px; }

/* Blog single banner: the columns photo sits behind the post's own title
   block (btPageHeadline), black-and-white, under a dark overlay. Image on
   ::before (so it can be grayscaled without touching the text), overlay on
   ::after, text lifted above both. */
.single-post .btPageHeadline {
	position: relative;
	overflow: hidden;
	padding: 3em 0 3.5em;
}
.single-post .btPageHeadline::before,
.single-post .btPageHeadline::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
}
.single-post .btPageHeadline::before {
	background: url("../../../../uploads/2019/10/background_02.jpg") center / cover no-repeat;
	filter: grayscale(1);
}
.single-post .btPageHeadline::after {
	background: rgba(12, 16, 26, 0.6);
}
.single-post .btPageHeadline .port {
	position: relative;
	z-index: 1;
}
/* Light text over the dark banner. */
.single-post .btPageHeadline,
.single-post .btPageHeadline .bt_bb_headline_tag,
.single-post .btPageHeadline a {
	color: #fff;
}
.single-post .btPageHeadline .bt_bb_headline_superheadline,
.single-post .btPageHeadline .bt_bb_headline_subheadline {
	color: rgba(255, 255, 255, 0.85);
}
/* The theme caps the banner title at 740px; give it room to breathe. */
.single-post .btPageHeadline header {
	max-width: 1100px;
	padding-left: 1em;
	padding-right: 1em;
}

/* Page banner on small screens: goldenblatt/style.css sets a flat 9.375em
   top+bottom port padding on .btPageHeadline for every singular page/post
   (13em top instead, under the transparent menu — body.btBelowMenu, which
   this site runs everywhere), with no narrower-viewport reduction of its
   own. That's ~150-210px of banner padding alone on a phone. Scoped to
   .btPageHeadline generally (not .single-post) so every page and post type
   gets it, not just the blog; the .single-post rule below stays scoped —
   it's the blog banner's own grayscale-photo treatment, not a general
   layout concern. The breadcrumb/title text inside shrinks alongside it:
   the generic h1 / .bt_bb_size_large step-down further down this file
   already covers the title itself, but the superheadline (breadcrumbs)
   needs its own reduction here since .btPageHeadline is the only place a
   0.82rem superheadline (style.css) reads as too large next to a now-
   shorter banner. */
@media (max-width: 992px) {
	.btBelowMenu .btPageHeadline .bt_bb_port { padding-top: 8em; padding-bottom: 5em; }
	.btPageHeadline .bt_bb_port { padding-top: 5em; padding-bottom: 5em; }
	.btPageHeadline .bt_bb_headline_superheadline { font-size: 0.7rem; }
}
@media (max-width: 768px) {
	.btBelowMenu .btPageHeadline .bt_bb_port { padding-top: 6em; padding-bottom: 3.5em; }
	.btPageHeadline .bt_bb_port { padding-top: 3.5em; padding-bottom: 3.5em; }
	.btPageHeadline .bt_bb_headline_superheadline { font-size: 0.65rem; }
}
@media (max-width: 480px) {
	.btBelowMenu .btPageHeadline .bt_bb_port { padding-top: 4.75em; padding-bottom: 2.5em; }
	.btPageHeadline .bt_bb_port { padding-top: 2.5em; padding-bottom: 2.5em; }
	.btPageHeadline .bt_bb_headline_superheadline { font-size: 0.6rem; }
}

@media (max-width: 992px) {
	.single-post .btPageHeadline { padding: 1.5em 0 2em; }
}
@media (max-width: 768px) {
	.single-post .btPageHeadline { padding: 1em 0 1.5em; }
}

/* The section after the hero pulls itself up by 7.5em (negative_margin_large),
   which swallows the hero's own bottom spacing (3.75em port + 2em separator)
   and leaves the headline touching the photo panel. Compensate so the banner
   visible below the headline (3.75 + 2 + 6.75 - 7.5 = 5em) matches the gap
   above it, centering the text in the visible band. */
.conmy-hero.bt_bb_section { padding-bottom: 6.75em; }

@media (max-width: 992px) {
	.conmy-hero.bt_bb_section { padding-top: 5.5em; padding-bottom: 0; }
	.conmy-band.bt_bb_section { min-height: 210px; }
}

@media (max-width: 768px) {
	.conmy-hero.bt_bb_section { padding-top: 4.5em; }
	.conmy-band.bt_bb_section { min-height: 180px; }
}

/* ==========================================================================
   Home page "Trust, Integrity..." band (el_class="conmyTrust")
   --------------------------------------------------------------------------
   Desktop pairs a text column (DOM first) with a photo column (DOM second)
   in an overlap-left layout. Once columns stack below 992px (grid.css forces
   data-width="6" to flex-basis:100%), they stack in DOM order — text on top,
   photo underneath. The two sibling bands (conmyServing, conmyConsult) put
   the photo column first in the markup, so they already show photo-then-text
   once stacked; this band is the odd one out. Reordered on mobile to match.
   ========================================================================== */
@media (max-width: 992px) {
	.conmyTrust .bt_bb_row_holder > .bt_bb_column:first-child {
		order: 2;
	}
	.conmyTrust .bt_bb_row_holder > .bt_bb_column:last-child {
		order: 1;
	}
}

/* ==========================================================================
   Site-wide typography — smaller, app-like scale on narrow viewports
   --------------------------------------------------------------------------
   Every heading on the site renders through the Bold Builder headline
   element, whose visible font-size comes from a `.bt_bb_size_X.bt_bb_headline`
   class paired with the h1-h6 tag selector — not from the bare h1-h6 rule.
   The rendered heading always carries `.bt_bb_headline_tag` regardless of
   which tag was chosen, so targeting that class one level inside
   `.bt_bb_headline.bt_bb_size_X` reaches every size in a single rule instead
   of repeating six tag selectors per size, and its extra class already
   outweighs the vendor rule's specificity — no !important needed. Bare h1-h6
   are also covered, for the rare heading rendered outside the builder.
   Three breakpoints step the scale down further as the viewport narrows;
   later (narrower) rules win by source order at equal specificity.
   ========================================================================== */
@media (max-width: 992px) {
	h1 { font-size: 2.25rem; }
	h2 { font-size: 2.125rem; }
	h3 { font-size: 2rem; }
	h4 { font-size: 1.75rem; }
	h5 { font-size: 1.3125rem; }
	h6 { font-size: 1.25rem; }

	.bt_bb_headline.bt_bb_size_extrasmall .bt_bb_headline_tag     { font-size: 1.25rem; }
	.bt_bb_headline.bt_bb_size_small .bt_bb_headline_tag          { font-size: 1.3125rem; }
	.bt_bb_headline.bt_bb_size_medium .bt_bb_headline_tag         { font-size: 1.75rem; }
	.bt_bb_headline.bt_bb_size_normal .bt_bb_headline_tag         { font-size: 2rem; }
	.bt_bb_headline.bt_bb_size_large .bt_bb_headline_tag          { font-size: 2.125rem; }
	.bt_bb_headline.bt_bb_size_extralarge .bt_bb_headline_tag     { font-size: 2.25rem; }
	.bt_bb_headline.bt_bb_size_huge .bt_bb_headline_tag           { font-size: 2.375rem; }
	.bt_bb_headline.bt_bb_size_extrahuge .bt_bb_headline_tag      { font-size: 2.75rem; }
	.bt_bb_headline.bt_bb_size_extraextrahuge .bt_bb_headline_tag { font-size: 3rem; }

	body { font-size: 15px; }
}

@media (max-width: 768px) {
	h1 { font-size: 1.875rem; }
	h2 { font-size: 1.75rem; }
	h3 { font-size: 1.625rem; }
	h4 { font-size: 1.5rem; }
	h5 { font-size: 1.1875rem; }
	h6 { font-size: 1.125rem; }

	.bt_bb_headline.bt_bb_size_extrasmall .bt_bb_headline_tag     { font-size: 1.125rem; }
	.bt_bb_headline.bt_bb_size_small .bt_bb_headline_tag          { font-size: 1.1875rem; }
	.bt_bb_headline.bt_bb_size_medium .bt_bb_headline_tag         { font-size: 1.5rem; }
	.bt_bb_headline.bt_bb_size_normal .bt_bb_headline_tag         { font-size: 1.625rem; }
	.bt_bb_headline.bt_bb_size_large .bt_bb_headline_tag          { font-size: 1.75rem; }
	.bt_bb_headline.bt_bb_size_extralarge .bt_bb_headline_tag     { font-size: 1.875rem; }
	.bt_bb_headline.bt_bb_size_huge .bt_bb_headline_tag           { font-size: 2rem; }
	.bt_bb_headline.bt_bb_size_extrahuge .bt_bb_headline_tag      { font-size: 2.25rem; }
	.bt_bb_headline.bt_bb_size_extraextrahuge .bt_bb_headline_tag { font-size: 2.5rem; }

	body { font-size: 14.5px; }
	.btWithSidebar .btContentHolder { padding: 3.5em 30px 2.5em; }
}

@media (max-width: 480px) {
	h1 { font-size: 1.5rem; }
	h2 { font-size: 1.4375rem; }
	h3 { font-size: 1.375rem; }
	h4 { font-size: 1.25rem; }
	h5 { font-size: 1.0625rem; }
	h6 { font-size: 1rem; }

	.bt_bb_headline.bt_bb_size_extrasmall .bt_bb_headline_tag     { font-size: 1rem; }
	.bt_bb_headline.bt_bb_size_small .bt_bb_headline_tag          { font-size: 1.0625rem; }
	.bt_bb_headline.bt_bb_size_medium .bt_bb_headline_tag         { font-size: 1.25rem; }
	.bt_bb_headline.bt_bb_size_normal .bt_bb_headline_tag         { font-size: 1.375rem; }
	.bt_bb_headline.bt_bb_size_large .bt_bb_headline_tag          { font-size: 1.4375rem; }
	.bt_bb_headline.bt_bb_size_extralarge .bt_bb_headline_tag     { font-size: 1.5rem; }
	.bt_bb_headline.bt_bb_size_huge .bt_bb_headline_tag           { font-size: 1.625rem; }
	.bt_bb_headline.bt_bb_size_extrahuge .bt_bb_headline_tag      { font-size: 1.75rem; }
	.bt_bb_headline.bt_bb_size_extraextrahuge .bt_bb_headline_tag { font-size: 1.875rem; }

	body { font-size: 14px; }
}

/* ==========================================================================
   Mobile hamburger trigger — move to the right of the header
   --------------------------------------------------------------------------
   Which side the trigger floats to is theme-controlled via a JS-toggled body
   class (.btMenuVerticalLeft -> float:left, .btMenuVerticalRight -> float:
   right), independent of which side the drawer itself opens from. Forced
   right here regardless of that toggle; the margin flips from trailing to
   leading space to match (mirrors the theme's own .rtl override of the same
   rule).
   ========================================================================== */
.btMenuVertical .btVerticalHeaderTop .btVerticalMenuTrigger {
	float: right;
	margin: 0 0 0 .5em;
}

/* ==========================================================================
   Vertical menu — dedicated close button while the drawer is open
   --------------------------------------------------------------------------
   Opening the drawer (body.btMenuVerticalOn) shifts the whole
   .btVerticalHeaderTop bar right by the drawer's own width (goldenblatt/
   style.css), so the bar — and the trigger inside it, now floated right by
   the rule above — ends up positioned mostly or entirely off-screen. With
   nothing left on-screen to tap, there was no way to close the menu.
   .btVerticalHeaderTop also carries a transform while open, which makes it
   the containing block for any fixed-position descendant — so pinning the
   *existing* trigger via CSS can't escape that shift. Instead, conmy.js
   appends a standalone close button directly to <body> (outside that
   transformed subtree) and this shows it only while the drawer is open. */
.conmyMenuClose {
	display: none;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 6px;
	right: 8px;
	z-index: 10010;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(20, 27, 38, 0.65);
	color: #ffffff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

body.btMenuVerticalOn .conmyMenuClose {
	display: flex;
}

/* ==========================================================================
   Practice-area cards (el_class="conmyPractice", row class conmyCards) —
   home page grid and the [practice_categories] shortcode (conmyPc: home
   page + /practice-area/) alike.
   --------------------------------------------------------------------------
   Required layout: phone = 1 column, tablet (portrait through landscape,
   ~768-1199px) = 2 columns, desktop (>=1200px, untouched) = 3 columns.

   grid.css's own breakpoints don't match that: col-sm-6 already switches to
   2-up at 481px (too early — phones up to 767px need to stay single-column)
   and col-lg-4 reverts to 3-up from 992-1199px (too late — cramped on an
   iPad Pro-class landscape tablet, which should still read as 2-up). Both
   ranges below are pinned to override that regardless of which col-* class
   grid.css put on the column at a given width.

   Cards render three (or however many are left) to a `.bt_bb_row_holder`;
   .conmyCardsSpaced (style.css) already gaps *between* those row groups.
   Within a group, the columns only ever gap horizontally — the margin-
   bottom below adds the missing vertical gap once they wrap or stack.
   ========================================================================== */
@media (max-width: 767px) {
	.conmyPc .conmyCards .bt_bb_row_holder > .bt_bb_column {
		flex-basis: 100%;
		max-width: 100%;
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	.conmyPc .conmyCards .bt_bb_row_holder > .bt_bb_column {
		flex-basis: 50%;
		max-width: 50%;
	}

	/* An odd-sized group (three cards is the norm) leaves its last card
	   alone on the wrapped line with the other half of the row empty
	   beside it — spanned full width instead so every line is filled. */
	.conmyPc .conmyCards .bt_bb_row_holder > .bt_bb_column:last-child:nth-child(odd) {
		flex-basis: 100%;
		max-width: 100%;
	}
}

@media (max-width: 1199px) {
	.conmyPractice .conmyCards .bt_bb_row_holder > .bt_bb_column {
		margin-bottom: 40px;
	}
	.conmyPractice .conmyCards .bt_bb_row_holder > .bt_bb_column:last-child {
		margin-bottom: 0;
	}
}