/* kb-locations-claims.css — scoped stylesheet for the Location and Claim
   Story features only. Enqueued by kb_enqueue_locations_claims_styles() in
   functions.php, which restricts loading to single/archive Location and
   Claim Story pages so no other page's appearance is affected. */

/* ── Shared: Locations We Serve grid ─────────────────────────────── */
.kb-locations { padding: 50px 0; background: #fff; border-top: 1px solid #eee; }
.kb-locations__heading { font-size: clamp(24px,3vw,40px); font-weight: 700; color: #f2652c; margin-bottom: 8px; }
.kb-locations__subhead { color: #555; margin-bottom: 44px; }
.kb-locations__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: #1a1a1a;
    border-radius: 8px;
    padding: 26px 28px;
    min-height: 180px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    transition: background .25s, transform .25s;
}
.kb-locations__card:hover { background: #f2652c; color: #fff; text-decoration: none; transform: translateY(-4px); }
.kb-locations__state {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #f2652c;
    margin-bottom: 6px;
    transition: color .25s;
}
.kb-locations__card:hover .kb-locations__state { color: rgba(255,255,255,.85); }
.kb-locations__city { font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; color: #fff; }
.kb-locations__arrow { font-size: 14px; font-weight: 700; margin-top: 10px; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s; }
.kb-locations__card:hover .kb-locations__arrow { opacity: 1; transform: translateX(0); }
@media (max-width: 767px) {
    .kb-locations { padding: 50px 0; }
    .kb-locations__card { min-height: 160px; }
}


/* ── Single: Location ─────────────────────────────── */
/* ── Single Location ──────────────────────────────────────────── */

    .sloc__section { padding: 72px 0; }
    .sloc__section--dark  { background: #1a1a1a; color: #fff; }
    .sloc__section--light { background: #f8f8f8; }

    .sloc__heading {
        font-size: clamp(1.6rem, 3vw, 2.4rem);
        font-weight: 700;
        margin-bottom: 6px;
        line-height: 1.2;
    }
    .sloc__sub {
        font-size: 16px;
        line-height: 1.5;
        color: #888;
        text-transform: uppercase;
        letter-spacing: .08em;
        font-weight: 600;
        display: block;
        margin-bottom: 32px;
    }
    .sloc__section--dark .sloc__sub { color: rgba(255,255,255,.5); }

    /* Industry cards */
    .sloc__ind-card {
        display: block;
        background: #fff;
        border: 1px solid #e5e5e5;
        border-radius: 6px;
        padding: 18px 20px;
        text-decoration: none;
        color: inherit;
        height: 100%;
        transition: background .2s, transform .2s;
    }
    .sloc__ind-card:hover {
        background: #f2652c;
        color: #fff;
        transform: translateY(-3px);
        text-decoration: none;
    }
    .sloc__ind-card h3 {
        font-size: 16px;
        line-height: 1.35;
        font-weight: 700;
        color: #f2652c;
        margin: 0;
    }
    .sloc__ind-card:hover h3 { color: #fff; }

    /* Services directory (every service page, grouped by category) */
    .sloc__svc-group-title {
        font-size: 17px;
        line-height: 1.3;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .1em;
        color: #f2652c;
        margin: 36px 0 6px;
        padding-bottom: 10px;
        border-bottom: 2px solid #1a1a1a;
    }
    .sloc__svc-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 2px;
        border-bottom: 1px solid #e5e5e5;
        font-size: 16px;
        font-weight: 600;
        color: #1a1a1a;
        text-decoration: none;
        line-height: 1.4;
        transition: color .15s, padding-left .15s;
    }
    .sloc__svc-row:hover { color: #f2652c; text-decoration: none; padding-left: 8px; }
    .sloc__svc-row .arr { color: #f2652c; flex-shrink: 0; font-weight: 700; }

    /* Story / article cards */
    .sloc__story-card {
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid #e5e5e5;
        border-radius: 6px;
        overflow: hidden;
        text-decoration: none;
        color: inherit;
        height: 100%;
        transition: box-shadow .2s, transform .2s;
    }
    .sloc__story-card:hover {
        box-shadow: 0 8px 24px rgba(0,0,0,.12);
        transform: translateY(-4px);
        color: inherit;
        text-decoration: none;
    }
    .sloc__story-thumb {
        height: 180px;
        background: #2a2a2a;
        background-size: cover;
        background-position: center;
    }
    .sloc__story-body {
        padding: 20px;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .sloc__story-tag {
        font-size: 16px;
        line-height: 1.3;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: #f2652c;
    }
    .sloc__story-card h3 {
        font-size: 16px;
        font-weight: 700;
        color: #1a1a1a;
        margin: 0;
        line-height: 1.4;
    }
    .sloc__story-card:hover h3 { color: #f2652c; }
    .sloc__story-card p { font-size: 16px; line-height: 1.5; color: #666; margin: 0; flex: 1; }

    /* Nearby locations — numbered cards */
    .sloc__loc-card {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        background: #1a1a1a;
        border-radius: 8px;
        padding: 24px 26px;
        min-height: 190px;
        overflow: hidden;
        text-decoration: none;
        color: #fff;
        transition: background .25s, transform .25s;
    }
    .sloc__loc-card:hover { background: #f2652c; color: #fff; text-decoration: none; transform: translateY(-4px); }
    .sloc__loc-card-city { font-size: 21px; font-weight: 700; line-height: 1.25; margin: 0; }
    .sloc__loc-card-arrow { font-size: 16px; line-height: 1.3; font-weight: 700; margin-top: 8px; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s; }
    .sloc__loc-card:hover .sloc__loc-card-arrow { opacity: 1; transform: translateX(0); }

    /* FAQs */
    .sloc__faq { border-bottom: 1px solid #e5e5e5; padding: 18px 0; }
    .sloc__faq:first-child { border-top: 1px solid #e5e5e5; }
    .sloc__faq-q {
        font-size: 16px;
        font-weight: 700;
        color: #1a1a1a;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        user-select: none;
    }
    .sloc__faq-q .fa { color: #f2652c; flex-shrink: 0; transition: transform .2s; }
    .sloc__faq-q.is-open .fa { transform: rotate(180deg); }
    .sloc__faq-a {
        display: none;
        padding-top: 12px;
        font-size: 15px;
        color: #444;
        line-height: 1.75;
    }
    .sloc__faq-a.is-open { display: block; }

    @media (max-width: 767px) {
        .sloc__section { padding: 44px 0; }
        .sloc__story-thumb { height: 140px; }
    }


/* ── Single: Claim Story ─────────────────────────────── */
/* ── Single Claim / Case Study ──────────────────────────── */
    .single-claim__hero {
        position: relative;
        min-height: 460px;
        display: flex;
        align-items: flex-end;
        background: #111;
        background-size: cover;
        background-position: center;
    }
    .single-claim__hero::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 60%, transparent 100%);
    }
    .single-claim__hero .container { position: relative; z-index: 1; padding-bottom: 56px; }

    .single-claim__pill {
        display: inline-block;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .08em;
        padding: 4px 12px;
        border-radius: 3px;
        margin: 0 4px 6px 0;
    }
    .single-claim__pill--service  { background: #f2652c; color: #fff; }
    .single-claim__pill--industry { background: rgba(255,255,255,.15); color: #fff; backdrop-filter: blur(2px); }
    .single-claim__pill--risk     { background: rgba(0,0,0,.4); color: #fff; border: 1px solid rgba(255,255,255,.2); }

    .single-claim__body { padding: 72px 0; }

    /* Step items */
    .single-claim__steps { position: relative; }
    .single-claim__step {
        display: flex;
        gap: 24px;
        margin-bottom: 40px;
        padding-bottom: 40px;
        border-bottom: 1px solid #f0f0f0;
    }
    .single-claim__step:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    .single-claim__step-num {
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #f2652c;
        color: #fff;
        font-size: 1.1rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 2px;
    }
    .single-claim__step-body h3 {
        font-size: 20px;
        font-weight: 700;
        color: #1a1a1a;
        margin: 0 0 12px;
    }
    .single-claim__step-body .content-area { font-size: 16px; color: #444; line-height: 1.8; }

    /* Outcome box */
    .single-claim__outcome {
        background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
        color: #fff;
        border-radius: 10px;
        padding: 36px 40px;
        margin-top: 8px;
        border-left: 5px solid #f2652c;
    }
    .single-claim__outcome h3 {
        font-size: 20px;
        font-weight: 700;
        color: #f2652c;
        margin: 0 0 14px;
    }
    .single-claim__outcome .content-area { font-size: 16px; color: rgba(255,255,255,.85); line-height: 1.8; }

    /* Sidebar — flex column so the form/recent-stories order below can be
       swapped via `order` without touching the template's HTML output */
    .single-claim__sidebar { position: sticky; top: 24px; display: flex; flex-direction: column; }
    .single-claim__sidebar-section {
        background: #f8f8f8;
        border-radius: 8px;
        padding: 22px;
        margin-bottom: 20px;
    }
    .single-claim__sidebar-section h4 {
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .1em;
        color: #aaa;
        margin: 0 0 14px;
    }
    .single-claim__sidebar-link {
        display: block;
        font-size: 16px;
        font-weight: 600;
        color: #1a1a1a;
        text-decoration: none;
        padding: 8px 0;
        border-bottom: 1px solid #eee;
        line-height: 1.4;
        transition: color .15s;
    }
    .single-claim__sidebar-link:last-child { border-bottom: none; }
    .single-claim__sidebar-link:hover { color: #f2652c; text-decoration: none; }
    .single-claim__sidebar-link--orange { color: #f2652c; font-weight: 700; }
    .single-claim__sidebar-form {
        background: #fff;
        border: 1px solid #e5e5e5;
        border-top: 4px solid #f2652c;
        border-radius: 8px;
        padding: 24px;
        margin-bottom: 20px;
    }
    /* Sidebar form title — was hardcoded to 24px inline (1.5rem), too small
       per client feedback; overriding here since the theme file couldn't be
       edited directly (Wordfence WAF blocks writes containing PHP tags). */
    .single-claim__sidebar-form h3 { font-size: clamp(24px, 4vw, 32px) !important; }
    /* Submit button text was still showing white — Gravity Forms' own
       generated styles for this form apparently win on specificity over a
       plain class selector, so target the form's actual button ID (form 7
       is the single shared claim-story sidebar form, same on every page)
       plus its inner <span>, both with !important. */
    #gform_submit_button_7,
    #gform_submit_button_7 span {
        color: #1a1a1a !important;
    }
    .single-claim__sidebar-form .gform_button,
    .single-claim__sidebar-form .gform_button:hover {
        color: #1a1a1a !important;
    }
    /* Swap visual order of contact form and "More Case Studies": the form
       is always the last child in the template's markup, and the recent-
       stories block is always the child right before it (2nd-to-last) —
       so these selectors reorder them without needing the PHP template. */
    .single-claim__sidebar-form { order: 1; }
    .single-claim__sidebar-section:nth-last-child(2) { order: 2; }

    /* End-of-story CTAs — align with step text (48px num + 24px gap) */
    .single-claim__ctas { padding-left: 72px; gap: 24px !important; }

    /* Related solutions */
    .single-claim__related { padding: 72px 0; background: #f8f8f8; }
    .single-claim__svc-card {
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid #e5e5e5;
        border-left: 4px solid #f2652c;
        border-radius: 4px;
        padding: 22px;
        text-decoration: none;
        color: inherit;
        height: 100%;
        transition: box-shadow .2s, transform .2s;
    }
    .single-claim__svc-card:hover {
        box-shadow: 0 6px 20px rgba(0,0,0,.1);
        transform: translateY(-3px);
        color: inherit;
        text-decoration: none;
    }
    .single-claim__svc-card h3 { font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0 0 8px; }
    .single-claim__svc-card:hover h3 { color: #f2652c; }
    .single-claim__svc-card p { font-size: 16px; color: #666; flex: 1; margin: 0 0 12px; }
    .single-claim__svc-card span { font-size: 16px; font-weight: 700; color: #f2652c; margin-top: auto; }

    @media (max-width: 991px) {
        .single-claim__body { padding: 44px 0; }
        .single-claim__related { padding: 44px 0; }
        .single-claim__step { flex-direction: column; gap: 12px; }
        .single-claim__sidebar { position: static; }
        .single-claim__outcome { padding: 24px; }
        .single-claim__ctas { padding-left: 0; }
    }


/* ── Archive: Claim Stories ─────────────────────────────── */
/* ── Archive Claims ──────────────────────────────────────── */
    .archive-claims__filter-bar {
        background: #fff;
        border-bottom: 2px solid #f0f0f0;
        position: sticky;
        top: 0;
        z-index: 200;
    }


    .archive-claims__body { padding: 64px 0; }

    .archive-claims__count {
        font-size: 16px;
        color: #888;
        margin-bottom: 32px;
    }
    .archive-claims__count strong { color: #1a1a1a; }

    .archive-claims__card {
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid #e5e5e5;
        border-radius: 8px;
        overflow: hidden;
        text-decoration: none;
        color: inherit;
        height: 100%;
        transition: box-shadow .22s, transform .22s;
    }
    .archive-claims__card:hover {
        box-shadow: 0 10px 32px rgba(0,0,0,.1);
        transform: translateY(-4px);
        color: inherit;
        text-decoration: none;
    }
    .archive-claims__card__thumb {
        height: 200px;
        background: #1a1a1a;
        background-size: cover;
        background-position: center;
        position: relative;
    }
    .archive-claims__card__badge {
        position: absolute;
        top: 12px;
        left: 12px;
        background: #f2652c;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .1em;
        padding: 4px 10px;
        border-radius: 3px;
    }
    .archive-claims__card__body {
        padding: 22px;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .archive-claims__card__pills {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.archive-claims__card__pills::-webkit-scrollbar { display: none; }
    .archive-claims__pill {
        font-size: 16px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .03em;
        padding: 3px 8px;
    flex-shrink: 0;
    white-space: nowrap;
        border-radius: 3px;
        background: #f0f0f0;
        color: #555;
    }
    .archive-claims__pill--service  { background: #fff3ee; color: #f2652c; }
    .archive-claims__pill--industry { background: #f0f0f0; color: #555; }
    .archive-claims__pill--risk     { background: #1a1a1a; color: #fff; }
    .archive-claims__card h3 {
        font-size: 20px;
        font-weight: 700;
        color: #1a1a1a;
        margin: 0;
        line-height: 1.4;
    }
    .archive-claims__card:hover h3 { color: #f2652c; }
    .archive-claims__card p {
        font-size: 16px;
        color: #666;
        margin: 0;
        flex: 1;
        line-height: 1.6;
    }
    .archive-claims__card__cta {
        font-size: 16px;
        font-weight: 700;
        color: #f2652c;
        margin-top: auto;
    }

    @media (max-width: 767px) {
        .archive-claims__body { padding: 40px 0; }
        .archive-claims__card__thumb { height: 160px; }
    }


/* ── Archive: Claim Stories — hero search + filter fade (live-banner port) ── */
.archive-claims__hero .search-box { margin-top: 20px; position: relative; }
.archive-claims__hero .search-input {
    width: 100%;
    padding: 12px 45px 12px 15px;
    border: 2px solid #ddd;
    border-radius: 25px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.3s ease;
    background: transparent;
    color: #fff;
    backdrop-filter: blur(2px);
}
.archive-claims__hero .search-input::placeholder { color: #fff; }
.archive-claims__hero .search-input:focus { border: 2px solid #f2652c; }


.archive-claims__clear { color: #f2652c; font-size: 16px; font-weight: 600; }

/* ── Claims filter bar: arrows, drag, ajax loading ────────── */

#claims-results { transition: opacity .2s; }
#claims-results.is-loading { opacity: .35; pointer-events: none; }
.archive-claims__empty { color: #888; font-size: 18px; }

/* ── Brand focus colour ───────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #f2652c;
    outline-offset: 2px;
}
input:focus,
textarea:focus,
select:focus {
    border-color: #f2652c;
}

/* ── Card pill rows: scroll affordance ────────────────────── */
.archive-claims__card__pills { cursor: grab; touch-action: pan-x; }
.archive-claims__card__pills:active { cursor: grabbing; }
.archive-claims__card__pills.fade-right {
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
    mask-image: linear-gradient(to right, #000 88%, transparent);
}
.archive-claims__card__pills.fade-left {
    -webkit-mask-image: linear-gradient(to left, #000 88%, transparent);
    mask-image: linear-gradient(to left, #000 88%, transparent);
}
.archive-claims__card__pills.fade-left.fade-right {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

/* ── Cards: no native link drag; pills drag cleanly on macOS ── */
.archive-claims__card,
.archive-claims__card * { -webkit-user-drag: none; user-drag: none; }
.archive-claims__card__pills { user-select: none; -webkit-user-select: none; }

/* ── Claims filter bar v2: dropdown groups ────────────────── */
.archive-claims__filter-bar {
    background: #fff;
    border-bottom: 2px solid #f0f0f0;
    position: relative;
    z-index: 20;
}
.archive-claims__filter-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 0;
}
.archive-claims__filter-all {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border: 1px solid #f2652c;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: #555;
    text-decoration: none;
    transition: color .15s, background .15s;
}
.archive-claims__filter-all:hover { color: #f2652c; background: #fff3ee; text-decoration: none; }
.archive-claims__filter-all.is-active { color: #fff; background: #f2652c; border-color: #f2652c; }
.archive-claims__dd { position: relative; }
.archive-claims__dd-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: 1px solid #f2652c;
    border-radius: 6px;
    background: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: #555;
    cursor: pointer;
    transition: color .15s, background .15s;
}
.archive-claims__dd-toggle:hover { color: #f2652c; background: #fff3ee; }
.archive-claims__dd-toggle.is-active { color: #f2652c; background: #fff3ee; }
.archive-claims__dd-toggle i { font-size: 13px; color: #f2652c; transition: transform .2s; }
.archive-claims__dd.is-open .archive-claims__dd-toggle i { transform: rotate(180deg); }
.archive-claims__dd-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 280px;
    max-height: 340px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 14px 40px rgba(0,0,0,.14);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s, transform .18s, visibility .18s;
    z-index: 30;
}
.archive-claims__dd.is-open .archive-claims__dd-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.archive-claims__dd-panel .archive-claims__filter-btn {
    display: block;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s, color .12s;
}
.archive-claims__dd-panel .archive-claims__filter-btn:hover { background: #f8f8f8; color: #f2652c; text-decoration: none; }
.archive-claims__dd-panel .archive-claims__filter-btn.is-active { background: #fff3ee; color: #f2652c; font-weight: 700; }
@media (max-width: 575px) {
    .archive-claims__dd { position: static; }
    .archive-claims__dd-panel { left: 12px; right: 12px; min-width: 0; }
}

/* ── Brand hover colour (overrides Bootstrap's default blue) ── */
a:hover { color: #f2652c; }
.archive-claims__clear:hover { color: #d9541f; }
.tax-service-category__pagination a:hover,
.tax-service-category__pagination .page-numbers:hover { color: #f2652c; }

/* ── Location hero: breadcrumb-block fallback styles ──────── */
.sloc-breadcrumb { background-color: #231f20; color: #fff; }
.sloc-breadcrumb .breadcrumb-block__list { list-style: none; margin: 0; padding: 12px 0; font-size: 16px; }
.sloc-breadcrumb .breadcrumb-block__item { display: inline-flex; align-items: center; }
.sloc-breadcrumb .breadcrumb-block__link { color: #fff; text-decoration: none; }
.sloc-breadcrumb .breadcrumb-block__link:hover { color: #f2652c; }
.sloc-breadcrumb .breadcrumb-block__link svg { width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; }
.sloc-breadcrumb .breadcrumb-block__separator { color: #f2652c; }
.sloc-breadcrumb .breadcrumb-block__current { color: rgba(255,255,255,.8); }

/* Location hero: keep the breadcrumb band its own solid strip */
.sloc-breadcrumb { position: relative; z-index: 5; }
.sloc-breadcrumb .breadcrumb-block__nav { position: static; }
.sloc-breadcrumb .breadcrumb-block__list { margin: 0; padding: 14px 12px; }
.sloc-hero-block .text-background-image-block__wrapper { margin-top: 0 !important; }
/* Location hero: self-contained dark overlay (the theme's overlay pseudo is
   scoped to .entry-content, which this template output sits outside of) */
.sloc-hero-block .text-background-image-block__wrapper { position: relative; }
.sloc-hero-block .text-background-image-block__wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 0;
}
.sloc-hero-block .text-background-image-block__container { position: relative; z-index: 3; }
.sloc-breadcrumb .breadcrumb-block__nav { position: relative; z-index: 2; }

/* Location hero: kill the theme's floating-breadcrumb offset (margin-top:25px,
   margin-bottom:-60px, transparent !important bg) — that spacing exists so the
   breadcrumb can float transparently over the hero image below it, but our
   breadcrumb is a solid separate dark strip, so the offset just shows as a
   stray gap under the header. 3-class selector beats the theme's 2-class rule
   even though both use !important. */
.location-detail.eightball-block__breadcrumb-block.sloc-breadcrumb {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background-color: #231f20 !important;
    position: relative !important;
    z-index: 5 !important;
}

/* ── VerticalUSPBlock (used in location page "Getting Started with
   Knightsbridge" content) ──────────────────────────────────────────
   The theme's own approach for the sideways tab strip is
   `transform: rotate(90deg) translateY(50%)` on the button column. That
   is a paint-time trick — CSS transforms never change how an element is
   sized/positioned in the surrounding layout, they just rotate the
   already-placed box around its own center. Whenever the button stack's
   height (icon + label, times 4 tabs) doesn't closely match the content
   panel's assumed width, the rotated strip swings sideways into the
   panel and covers the text — that's what was happening.
   Fix: build the vertical tab strip with `writing-mode: vertical-rl`
   instead of a transform. That's a real CSS layout mode — each tab's
   text is rendered top-to-bottom, but the element still occupies its
   own real, non-overlapping space in the row, at any size. Same visual
   result (sideways reading labels beside the panel), no overlap risk,
   and the content panel is height:auto so nothing gets cropped either. */
.usp-vertical-block__wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
}
.usp-vertical-block__container {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 280px;
    overflow: visible !important;
    flex: 1 1 auto !important;
}
.usp-vertical-block__box {
    width: 100% !important;
    height: auto !important;
    min-height: 280px;
}
.usp-vertical-block__buttons {
    position: static !important;
    transform: none !important;
    -webkit-transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    flex-shrink: 0;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
}
.usp-vertical-block__item {
    writing-mode: vertical-rl !important;
    -webkit-writing-mode: vertical-rl !important;
    text-orientation: mixed;
    white-space: nowrap;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 12px;
    cursor: pointer;
    transition: background-color .25s ease, box-shadow .25s ease;
}
.usp-vertical-block__item-img {
    border-right: none;
    border-bottom: 1px solid #fff;
    padding-right: 0;
    padding-bottom: 10px;
}

/* Tab switching: the theme's JS (vertical-usp.js) just toggles an "active"
   class with no transition, and the theme's CSS hides the active button
   entirely (leftover that made the clicked tab vanish instead of showing
   as selected). Keep it visible with a "selected" ring, animate the panel. */
.usp-vertical-block__item.active {
    display: flex !important;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.6);
}
.usp-vertical-block__box:not(.active) { display: none; }
.usp-vertical-block__box.active {
    display: block;
    animation: uspBoxFadeIn .4s ease;
}
@keyframes uspBoxFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Below ~576px a sideways strip of narrow tabs is an unreadably small tap
   target, so fall back to a plain horizontal row with upright text. */
@media (max-width: 575.98px) {
    .usp-vertical-block__buttons {
        flex-wrap: wrap;
        width: 100%;
    }
    .usp-vertical-block__item {
        writing-mode: horizontal-tb !important;
        -webkit-writing-mode: horizontal-tb !important;
        flex-direction: row;
        white-space: normal;
    }
    .usp-vertical-block__item-img {
        border-right: 1px solid #fff;
        border-bottom: none;
        padding-right: 10px;
        padding-bottom: 0;
    }
}

/* -- styled-button--black-with-orange-arrow / --white-with-orange-arrow --
   The theme sizes the arrow via `content: url(arrow.svg)` on ::after, which
   some browsers (Safari/WebKit in particular) render at the SVG's own
   intrinsic size instead of honouring the CSS width/height -- the icon then
   shows oversized and detached from the text baseline. Swapping to a real
   sized pseudo-element with the SVG as a background-image is respected
   consistently everywhere. */
body .styled-button--black-with-orange-arrow::after,
body .styled-button--white-with-orange-arrow::after,
body .styled-form .gform_footer .gform_button::after,
body .styled-form__feedback .gform_footer .gform_button::after,
body .styled-form__contact .gform_footer .gform_button::after,
body .wpf_form_wrapper .wpf_submit_button::after {
    content: '' !important;
    display: inline-block;
    width: 1.6rem !important;
    height: 1.6rem !important;
    margin-left: 0.5rem !important;
    vertical-align: middle !important;
    background-image: url('/wp-content/themes/futurefy-genesis-child/dist/images/arrow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
body .styled-button--black-with-white-arrow::after {
    content: '' !important;
    display: inline-block;
    width: 1.6rem !important;
    height: 1.6rem !important;
    margin-left: 0.5rem !important;
    vertical-align: middle !important;
    background-image: url('/wp-content/themes/futurefy-genesis-child/dist/images/arrow-white.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}