/**
 * BSPC shared layout controls — spacing utilities.
 * Applied by the unified layouts from the shared control fields
 * (padding_top / padding_bottom / margin_top / margin_bottom).
 * Scale: sm 2.5rem · md 3.75rem · lg 5.5rem · xl 8.5rem.
 * Loaded after main-style.css so these values win over legacy section CSS.
 */

.bspc-pt-none { padding-top: 0; }
.bspc-pt-sm   { padding-top: 2.5rem; }
.bspc-pt-md   { padding-top: 3.75rem; }
.bspc-pt-lg   { padding-top: 5.5rem; }
.bspc-pt-xl   { padding-top: 8.5rem; }

.bspc-pb-none { padding-bottom: 0; }
.bspc-pb-sm   { padding-bottom: 2.5rem; }
.bspc-pb-md   { padding-bottom: 3.75rem; }
.bspc-pb-lg   { padding-bottom: 5.5rem; }
.bspc-pb-xl   { padding-bottom: 8.5rem; }

.bspc-mt-none { margin-top: 0; }
.bspc-mt-sm   { margin-top: 2.5rem; }
.bspc-mt-md   { margin-top: 3.75rem; }
.bspc-mt-lg   { margin-top: 5.5rem; }
.bspc-mt-xl   { margin-top: 8.5rem; }

.bspc-mb-none { margin-bottom: 0; }
.bspc-mb-sm   { margin-bottom: 2.5rem; }
.bspc-mb-md   { margin-bottom: 3.75rem; }
.bspc-mb-lg   { margin-bottom: 5.5rem; }
.bspc-mb-xl   { margin-bottom: 8.5rem; }

/*
 * Mobile spacing parity: the theme's .default_py collapses to 55/60px under
 * 768px. LG (the system default, 5.5rem = .default_py's desktop value)
 * mirrors that so migrated sections keep their exact mobile spacing.
 */
@media only screen and (max-width: 767.9px) {
    .bspc-pt-lg { padding-top: 55px; }
    .bspc-pb-lg { padding-bottom: 60px; }
}

/*
 * Backgrounds — shared background control (white / light blue / dark blue).
 * Color values match the existing bsky_three_col_bg_* section palette.
 * In Two Columns the class sits on the INNER container: a rounded, padded
 * panel (the retired bg_section look), never a full-width band.
 */
.bspc-bg-white      { background-color: transparent; }
.bspc-bg-light_blue { background-color: #f2f8f8; }
.bspc-bg-dark_blue  { background-color: #0b3a7c; }










/* ============================================================
   BSPC — GLOBAL BACKGROUND / SURFACE COLOUR SYSTEM
   ============================================================ */

/* ---------- 1. palette ---------- */
:root{
  --bspc-navy:#0B3A7C;
  --bspc-navy-deep:#0A2F5C; 
  --bspc-ink:#0E2648;
  --bspc-sky:#7CC7E7;
  --bspc-mist:#F2F8F8;
}

/* ---------- 2. LIGHT surfaces ---------- */
.bspc-bg-white,.bspc-bg-light_blue,
.bluebg_card,.bluebg_card_small,.blue_card_inner,.bsky_blog_card,
.bsky_filter_inner,.bg_white,.clickable_card.white_bg{
  --bspc-fg:#0E2648; --bspc-fg-strong:#0B3A7C; --bspc-fg-muted:#0B3A7C;
  --bspc-link:#0B3A7C; --bspc-link-hover:#0A2F5C; --bspc-accent:#1A7FC4;
  --bspc-hairline:#D2D2D2; --bspc-card-edge:rgba(11,58,124,.14);
  --bspc-card-hover:rgba(210,210,210,.15);
}

/* ---------- 3. DARK surfaces ---------- */
.bspc-bg-dark_blue,
.bsky_cta_outter,.bsky_offer_card_container,.serving_tag,
.bluebg_count,.clickable_card.blue_bg{
  --bspc-fg:#FFFFFF; --bspc-fg-strong:#FFFFFF; --bspc-fg-muted:rgba(255,255,255,.85);
  --bspc-link:#7CC7E7; --bspc-link-hover:#FFFFFF; --bspc-accent:#7CC7E7;
  --bspc-hairline:rgba(255,255,255,.30); --bspc-card-edge:rgba(255,255,255,.30);
  --bspc-card-hover:rgba(255,255,255,.08);
}

/* ---------- 4. make the option actually apply ----------
   These two variants pin their own background at higher
   specificity, so the picker did nothing on them.        */
.bspc-cards-overlay .bsky_serving_inner.bspc-bg-white,
.bspc_panel_border  .bsky_serving_inner.bspc-bg-white{background-color:#FFFFFF}
.bspc-cards-overlay .bsky_serving_inner.bspc-bg-light_blue,
.bspc_panel_border  .bsky_serving_inner.bspc-bg-light_blue{background-color:#F2F8F8}
.bspc-cards-overlay .bsky_serving_inner.bspc-bg-dark_blue,
.bspc_panel_border  .bsky_serving_inner.bspc-bg-dark_blue{background-color:#0A2F5C}

/* ---------- 5. headings ---------- */
.bspc-bg-dark_blue{color:var(--bspc-fg)}
.bspc-bg-dark_blue .heading_1:not(.text-white),
.bspc-bg-dark_blue .heading_2:not(.text-white),
.bspc-bg-dark_blue .heading_3:not(.text-white),
.bspc-bg-dark_blue .heading_4:not(.text-white),
.bspc-bg-dark_blue .heading_5:not(.text-white),
.bspc-bg-dark_blue .huge_text:not(.text-white),
.bspc-bg-dark_blue .bluebg_card_title:not(.text-white),
.bspc-bg-dark_blue .default_caption_caps:not(.text-white){color:var(--bspc-fg-strong)}

/* ---------- 6. body copy ---------- */
.bspc-bg-dark_blue p:not(.text-white),
.bspc-bg-dark_blue li:not(.text-white),
.bspc-bg-dark_blue td:not(.text-white),
.bspc-bg-dark_blue th:not(.text-white),
.bspc-bg-dark_blue i:not(.text-white),
.bspc-bg-dark_blue em:not(.text-white),
.bspc-bg-dark_blue strong:not(.text-white),
.bspc-bg-dark_blue b:not(.text-white),
.bspc-bg-dark_blue dd:not(.text-white),
.bspc-bg-dark_blue dt:not(.text-white),
.bspc-bg-dark_blue span:not(.text-white):not(.bluebg_count):not(.serving_tag):not(.bspc_tile_role),
.bspc-bg-dark_blue .default_body:not(.text-white),
.bspc-bg-dark_blue .default_body_small:not(.text-white),
.bspc-bg-dark_blue .default_caption_title:not(.text-white),
.bspc-bg-dark_blue .pera_des:not(.text-white),
.bspc-bg-dark_blue .accordion-body:not(.text-white){color:var(--bspc-fg)}

/* these two theme rules are !important, so they must be matched */
.bspc-bg-dark_blue .color_dark_blue,
.bspc-bg-dark_blue .color_blue{color:var(--bspc-fg)!important}
.bspc-bg-dark_blue .bspc_subheading{color:var(--bspc-fg-muted)!important}
.bspc-bg-dark_blue .default_caption_super_small{color:var(--bspc-fg-muted)}
.bspc_tile_role,
.blue_card_inner .bspc_tile_role{color:var(--bspc-accent,#1A7FC4)}

/* ---------- 7. links (also clears Bootstrap's #0D6EFD) ---------- */
.bspc-bg-dark_blue a:not(.text-white):not(.get_btn):not(.btn):not(.serving_tag),
.bspc-bg-dark_blue .learn_more,
.bspc-bg-dark_blue .list_anchor,
.bspc-bg-dark_blue .bspc_link_btn .get_btn,
.bspc-bg-white a:not(.text-white):not(.get_btn):not(.btn):not(.serving_tag),
.bspc-bg-light_blue a:not(.text-white):not(.get_btn):not(.btn):not(.serving_tag){color:var(--bspc-link)}
.bspc-bg-dark_blue a:not(.text-white):not(.get_btn):not(.btn):not(.serving_tag):hover,
.bspc-bg-dark_blue .learn_more:hover,
.bspc-bg-dark_blue .list_anchor:hover,
.bspc-bg-dark_blue .bspc_link_btn .get_btn:hover,
.bspc-bg-white a:not(.text-white):not(.get_btn):not(.btn):not(.serving_tag):hover,
.bspc-bg-light_blue a:not(.text-white):not(.get_btn):not(.btn):not(.serving_tag):hover{color:var(--bspc-link-hover)}

/* ---------- 8. FAQ accordion follows the section ---------- */
.bspc-bg-dark_blue .faqs_accordion_side .accordion-item{border-bottom-color:rgba(255,255,255,.5)}
.bspc-bg-dark_blue .faqs_accordion_side .accordion-item .accordion-button{color:var(--bspc-fg)}
.bspc-bg-dark_blue .faqs_accordion_side .accordion-item .accordion-button > span{color:#0B3A7C !important;background-color:#FFFFFF !important;}
.bspc-bg-dark_blue .faqs_accordion_side .accordion-item .accordion-body{color:var(--bspc-fg)}
.bspc-bg-white .faqs_accordion_side .accordion-item,
.bspc-bg-light_blue .faqs_accordion_side .accordion-item{border-bottom-color:rgba(11,58,124,.35)}
.bspc-bg-white .faqs_accordion_side .accordion-item .accordion-button,
.bspc-bg-light_blue .faqs_accordion_side .accordion-item .accordion-button{color:var(--bspc-fg)}
.bspc-bg-white .faqs_accordion_side .accordion-item .accordion-button > span,
.bspc-bg-light_blue .faqs_accordion_side .accordion-item .accordion-button > span{color:#FFFFFF;background-color:#0B3A7C}
.bspc-bg-white .faqs_accordion_side .accordion-item .accordion-body,
.bspc-bg-light_blue .faqs_accordion_side .accordion-item .accordion-body{color:var(--bspc-fg)}

/* ---------- 9. surfaces stay visible on every option ---------- */
.bspc-bg-white .bluebg_card,      .bspc-bg-white .bsky_blog_card,
.bspc-bg-light_blue .bluebg_card, .bspc-bg-light_blue .bsky_blog_card,
.bspc-bg-white .blue_card_inner,  .bspc-bg-light_blue .blue_card_inner{
  box-shadow:0 0 0 1px var(--bspc-card-edge);
}
.bspc-bg-light_blue .blue_card_inner{background-color:#FFFFFF}
.bspc-bg-dark_blue .bsky_offer_card_container,
.bspc-bg-dark_blue .bsky_cta_outter,
.bspc-bg-dark_blue .serving_tag{box-shadow:0 0 0 1px var(--bspc-card-edge)}
.bspc-bg-dark_blue .clickable_card{border-color:var(--bspc-hairline)}
.bspc-bg-dark_blue .clickable_card:hover{background-color:var(--bspc-card-hover)}












.bsky_zig_zag_inner.bspc-bg-light_blue,
.bsky_zig_zag_inner.bspc-bg-dark_blue {
    border-radius: .9375rem;
    padding: 3.75rem;
}
@media only screen and (max-width: 1199.9px) {
    .bsky_zig_zag_inner.bspc-bg-light_blue,
    .bsky_zig_zag_inner.bspc-bg-dark_blue { padding: 3.75rem 2.85rem; }
}
@media only screen and (max-width: 767.9px) {
    .bsky_zig_zag_inner.bspc-bg-light_blue,
    .bsky_zig_zag_inner.bspc-bg-dark_blue { padding: 35px 25px; }
}
.bspc-bg-dark_blue .heading_1, .bspc-bg-dark_blue .heading_2, .bspc-bg-dark_blue .heading_3,
.bspc-bg-dark_blue .heading_4, .bspc-bg-dark_blue .heading_5,
.bspc-bg-dark_blue .default_body, .bspc-bg-dark_blue .default_body_small,
.bspc-bg-dark_blue .default_caption_caps { color: #ffffff; }

/*
 * Column ratio — 40/60 splits that the 12-column grid can't express.
 * Applied on top of col-lg-5 / col-lg-7 fallbacks at the lg breakpoint.
 */
@media (min-width: 992px) {
    .bspc-collg-40 { flex: 0 0 40%; max-width: 40%; }
    .bspc-collg-60 { flex: 0 0 60%; max-width: 60%; }
}

/*
 * Buttons — "link" style (button_style = link in the shared buttons repeater).
 * Text-only variant sitting on the same baseline as the pill buttons
 * (orange_btn / outline_btn). Color inherits from context so it reads white
 * on dark banners and dark on light sections; hover matches the theme's
 * pill-button hover accent.
 */
.bspc_link_btn { display: inline-flex; margin-left: .875rem; }
.bspc_link_btn .get_btn {
    display: inline-flex;
    align-items: center;
    min-height: 3.4375rem;      /* baseline-match the pill buttons */
    padding: 1rem 0;
    background: none;
    border: 0;
    color: inherit;
    font-family: 'TT Norms Pro Demi Bold';
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 100%;
    letter-spacing: -.009375rem;
    text-decoration: none;
    text-underline-offset: .25rem;
    transition: .3s;
    white-space: nowrap;
}
.bspc_link_btn .get_btn:hover { color: #7cc7e7; }

/*
 * Two Columns layout — buttons row and light-context button variants.
 * The theme's outline_btn/link styles were built for dark banners (white
 * text, margin-left:auto); on white sections they need the dark variant.
 */
.bspc_buttons_row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .875rem 1.25rem;
    margin-top: 1.9375rem;
}
.bspc_buttons_row .orange_btn,
.bspc_buttons_row .outline_btn,
.bspc_buttons_row .bspc_link_btn { margin: 0; }
.bspc_buttons_row .customer_follow {
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.bspc_two_columns .outline_btn .get_btn {
    color: #0b3a7c;
    border-color: #0b3a7c;
    display: inline-flex;
    margin-left: 0;
    font-weight: 600;
    font-size: 1.0625rem;
}
.bspc_two_columns .outline_btn .get_btn:hover { 
    color: #7cc7e7;
    background: none;
    border-color: #7cc7e7;
}
.bspc_two_columns .bspc_link_btn .get_btn { color: #0b3a7c; }
.bspc_two_columns .bspc_link_btn .get_btn:hover { color: #0b3a7c; }

/*
 * Two Columns carrying the legacy common_banner class (migrated page
 * openers): reproduce the old template's `row g-0 align-items-center`.
 */

.bspc_two_columns .bsky_zig_zag_inner {
    padding: 0;
}
.bspc_two_columns .bsky_zig_zag_inner.bspc-bg-dark_blue, 
.bspc_two_columns .bsky_zig_zag_inner.bspc-bg-light_blue {
    padding: 3.75rem !important;
}
.bspc_two_columns.common_banner .bsky_zig_zag_inner > .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    align-items: center;
}
.bspc_two_columns.common_banner.bspc-media-video .bsky_zig_zag_inner > .row {
    align-items: normal;
}
.bspc_two_columns .bsky_zig_zag_inner > .row,
.bspc_two_columns.common_banner .bsky_zig_zag_inner > .row,
.bspc_two_columns.inner_hero_banner .bsky_zig_zag_inner > .row {
    gap: 3.75rem;
    flex-wrap: nowrap;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}
.bspc_two_columns .bsky_zig_zag_inner > .row > [class^="col-lg"],
.bspc_two_columns.common_banner .bsky_zig_zag_inner > .row > [class^="col-lg"],
.bspc_two_columns.inner_hero_banner .bsky_zig_zag_inner > .row > [class^="col-lg"] {
    flex: 1 1 auto;
}
.bspc_two_columns .bsky_zig_zag_inner .img_side_text,
.bspc_two_columns.common_banner .bsky_zig_zag_inner .img_side_text, 
.bspc_two_columns.inner_hero_banner .bsky_zig_zag_inner .img_side_text {
    padding: 3.75rem 0 3.75rem 0;
}

.bspc_two_columns .bsky_zig_zag_inner.bspc-bg-dark_blue .img_side_text, 
.bspc_two_columns .bsky_zig_zag_inner.bspc-bg-light_blue .img_side_text {
    padding: 0 !important;
}



.bspc_multi_column_grid .bsky_serving_inner.bspc-bg-dark_blue,
.bspc_multi_column_grid .bsky_serving_inner.bspc-bg-light_blue {
    padding: 3.75rem;
    border-radius: .9375rem;
}
.bspc_two_columns .zig_zag_border .bsky_zig_zag_inner {
    margin-left: 3.75rem;
    margin-right: 3.75rem;
}

/*
 * Two Columns carrying the legacy custom_service_banner / custom__banner
 * classes (location/industry page openers from _main_section):
 * gutterless row, the original stacking fix, and the always-on bottom
 * gradient their image carried (the old template rendered .overlay_img
 * unconditionally; the new one only with logos).
 */
.bspc_two_columns.custom_service_banner { position: relative; z-index: 0; }
.bspc_two_columns.custom_service_banner .bsky_zig_zag_inner > .row,
.bspc_two_columns.custom__banner .bsky_zig_zag_inner > .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}
.bspc_two_columns.custom_service_banner .img_side::after,
.bspc_two_columns.custom__banner .img_side::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 71.5%, rgba(0,0,0,.44) 100%);
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
}

/*
 * Logos overlay placement (logos_placement control). Base .arizona_logos is
 * absolute bottom-left with the gradient; these reposition the strip.
 * Center variants suit single badges (the old logo_365 look).
 */
.arizona_logos.bspc-logos-top_left      { top: 2.25rem; bottom: auto; }
.arizona_logos.bspc-logos-top_right     { top: 2.25rem; bottom: auto; }
.arizona_logos.bspc-logos-top_right ul  { justify-content: flex-end; }
.arizona_logos.bspc-logos-bottom_right ul { justify-content: flex-end; }
.arizona_logos.bspc-logos-left_center   { top: 50%; bottom: auto; transform: translateY(-50%); }
.arizona_logos.bspc-logos-center        { top: 50%; bottom: auto; transform: translateY(-50%); }
.arizona_logos.bspc-logos-center ul     { justify-content: center; }
.arizona_logos.bspc-logos-center_right  { top: 50%; bottom: auto; transform: translateY(-50%); }
.arizona_logos.bspc-logos-center_right ul { justify-content: flex-end; }

/* Logos with no base image: the badge itself is the media (old logo_365-only
   rows). Static flow instead of absolute so it isn't clipped to zero height. */
.img_side.bspc-logos-only { overflow: visible; }
.img_side.bspc-logos-only .arizona_logos { position: static; transform: none; }

/*
 * Multi-Column Grid card rows: the old bsky_blog_inner wrapper carried the
 * card grid-gap; reproduce it for the blog_cards row in the new wrapper.
 */
.bspc_multi_column_grid .row.blog_cards { grid-gap: 20px 0 !important; }
.bspc_multi_column_grid .bspc-cards-clickable .common_title {
    margin-bottom: 3.75rem;
}
.bspc_multi_column_grid .common_cards.default_pt{
    padding-top: 2.75rem;
}


.bspc_multi_column_grid.bspc-mode-numbered .bsky_serving_inner {
    padding: 3.75rem;
    border-radius: 0.9375rem;
    border: 1px solid #edeeee;
}
.bspc_multi_column_grid.bspc-mode-icons-boxed .bsky_serving_inner {
    padding: 3.75rem;
    border-radius: 0.9375rem;
}

@media only screen and (max-width: 1199.9px) {
    .bspc_multi_column_grid .row.blog_cards { grid-gap: 20px 10px; justify-content: flex-start; }
}

/*
 * Multi-Column Grid — clickable card style (legacy choose_industry).
 * Card chrome (.clickable_card etc.) lives in main-style.css and is reused
 * as-is; these rules replace what the old .bsky_clickable_card_inner /
 * .center_title wrappers provided: centered heading area with a 5.5rem gap
 * (center_title default_pb), the centered narrow intro paragraph, and the
 * .625rem card gutters. The row keeps the choose_industry_slider class so
 * the existing mobile-only slick init and width rules still apply.
 */
.bspc-cards-clickable .common_title { text-align: left; margin-bottom: 3.75rem; }
.bspc-cards-clickable .default_caption_caps {margin: 0 0 0.75rem;}
.bspc-cards-clickable .common_title .default_body {
    font-size: 1.25rem;
    line-height: 137%;
    margin: 2.125rem auto 0;
}
.bspc-cards-clickable .row.choose_industry_slider { margin: -.625rem; }
.bspc-cards-clickable .row.choose_industry_slider > div { padding: .625rem; }

/* Carried class for headings that had the thick light-blue underline
   (legacy .blue_line on the choose_industry title). */
.bspc_title_blue_line h2 {
    display: inline-block;
    text-decoration: underline;
    text-decoration-color: #7CC7E7;
    text-decoration-thickness: .1875rem;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

/*
 * Multi-Column Grid — bordered white panel (carried bspc_panel_border
 * class; legacy bsky_three_col_bg_white credential-stack look): white
 * radius-16 box around the section content, tighter tile sizing, and
 * circle-list styling inside tiles.
 */
.bspc_multi_column_grid.bspc_panel_border .bsky_serving_inner {
    border: 1px solid #e6ebeb;
    padding: 50px 40px;
    border-radius: .9375rem;
}
.bspc_panel_border .blue_card_inner { padding: 28px 24px; border-radius: .9375rem; }
.blue_card_inner .default_body_small ul {
    margin: 10px 0 0;
    padding-left: 20px;
    list-style: circle;
}
.blue_card_inner .default_body_small ul li { margin-bottom: 6px; }
.bspc_multi_column_grid .serving_img {margin-top: 2.5rem;}


.section_border_top { border-top: 1px solid #e6ebeb; }
/*
 * Multi-Column Grid
 */

.bspc-mode-grid-tile .blue_card_inner {
    padding: 28px 24px;
    gap: 18px;
    box-shadow: 0 0 0 1px var(--bspc-card-edge);
}
.blue_card_inner .bspc_tile_img {
    background: #e9eef0;
    border-radius: 10px;
    overflow: hidden;
    min-height: 200px;
    width: 100%;
}
.blue_card_inner .bspc_tile_img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blue_card_inner .bspc_tile_role {
    display: block;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 13px;
    font-weight: 700;
    color: #1a7fc4;
    line-height: 1.3;
    margin-top: -10px;   /* sit tight under the name despite the card gap */
}

/*
 * Two Columns carrying the legacy mobile_reverse class: the theme's mobile
 * padding rule targets .img_side_text_new, which Two Columns only adds
 * with a border — reproduce it for the plain wrapper.
 */
@media only screen and (max-width: 767.9px) {
    .bspc_two_columns.mobile_reverse .img_side_text { padding: 0 0 30px; }
}

/*
 * Reviews module — star row (was an inline <style> block in the retired
 * heading_with_content_and_review_ratings template).
 */
.star_rating { display: flex; }
.star_rating img { padding: 0 1px; }

/* Two Columns — subheading style */
.bspc_subheading {
    font-family: 'TT Norms Pro Bold';
    font-weight: 700;
    color: #0b3a7c;
    font-size: 22px;
    margin-top: 1rem;
}

/*
 * Two Columns — icon list optional links (migration 078). Linked rows keep
 * the list's 15px sizing instead of a.list_anchor's 1.0625rem default.
 */
.list_style.ft-15 a.list_anchor { font-size: inherit; line-height: inherit; }

/*
 * Heading module — centered stacked variant (migration 080). Bootstrap's
 * text-center handles the text; the flex button row needs its own rule.
 */
.bspc_heading.text-center .bspc_buttons_row { justify-content: center; }

/*
 * Multi-Column Grid — Overlay Cards (migrations 084/085, legacy
 * speciality_posts family). The rounded light panel the old bg_section
 * wrapper provided, plus the classic white-pill button variant.
 */
.bspc-cards-overlay .bsky_serving_inner {
    background: #f2f8f8;
    border-radius: .9375rem;
    padding: 3.75rem;
}
@media only screen and (max-width: 1199.9px) {
    .bspc-cards-overlay .bsky_serving_inner { padding: 3.75rem 2.85rem; }
}
@media only screen and (max-width: 991px) {
    .bspc_two_columns .bsky_zig_zag_inner > .row,
    .bspc_two_columns.common_banner .bsky_zig_zag_inner > .row,
    .bspc_two_columns.inner_hero_banner .bsky_zig_zag_inner > .row {
        gap: 2.75rem;
        flex-wrap: wrap;
    }
    .bspc_two_columns .bsky_zig_zag_inner .img_side_text,
    .bspc_two_columns.common_banner .bsky_zig_zag_inner .img_side_text, 
    .bspc_two_columns.inner_hero_banner .bsky_zig_zag_inner .img_side_text {
        padding: 0;
    }
    .bspc_two_columns .bsky_zig_zag_inner {
        padding: 0;
    }
    .bspc_two_columns .bsky_zig_zag_inner.bspc-bg-dark_blue, 
    .bspc_two_columns .bsky_zig_zag_inner.bspc-bg-light_blue {
        padding: 2.75rem !important;
    }

    .bspc_multi_column_grid .bsky_serving_inner.bspc-bg-dark_blue,
    .bspc_multi_column_grid .bsky_serving_inner.bspc-bg-light_blue {
        padding: 2.75rem;
    }
    .bspc_two_columns .zig_zag_border .bsky_zig_zag_inner {
        margin-left: 2.75rem;
        margin-right: 2.75rem;
    }
}
@media only screen and (max-width: 767.9px) {
    .bspc-cards-overlay .bsky_serving_inner { padding: 35px 25px; }
}
.bspc-cards-overlay.bspc_overlay_classic .specialty_card .orange_btn .get_btn {
    border: 1px solid #fff;
    background: transparent;
    color: #fff;
}

/*
 * Post Type Cards — text-only "See all" trailing card (migration 086).
 * Replaces the body-class hack that scoped this look to /commercial/.
 */
.bspc_see_all_text .bsky_pets_categ_in { justify-content: center; padding-top: .875rem; }
.bspc_see_all_text p.default_caption_title { text-decoration: underline; }

/*
 * Contact Form image mode + say_hi (migration 088, refer-friend panel).
 * The baked lets_chat class and carried say_hi set panel padding at equal
 * specificity in main-style.css — re-declared here so say_hi (the narrow
 * centered panel) wins by load order.
 */
.say_hi .bsky_profesn_inner {
    padding: 2.875rem 5.875rem 4.375rem;
    max-width: 54.625rem;
    width: 100%;
    margin: 0 auto;
}
@media only screen and (max-width: 767.9px) {
    .say_hi .bsky_profesn_inner { padding: 2.85rem; }
}

/*
 * Two Columns — make Vertical Align "Top" real (migration 097).
 * main-style.css flex-centers .img_side_text unconditionally; this loads
 * later and un-centers it when the section opts for top alignment.
 */
.bspc_two_columns.bspc-valign-top .img_side_text { justify-content: flex-start; }