/* ==========================================================================
   BizHub Feni — Public site stylesheet
   Token-driven, accessible, mobile-friendly.
   ========================================================================== */

/* ===== Design Tokens ===== */
:root {
    /* Brand */
    /* Sampled from BizHub Logo.png — the logo is the authority, not BizHub Feni's
       #17439B. Feni's navy is markedly deeper; that is what makes this project read as
       its own brand while staying obviously in the family (PP-WORKFLOW §12.9). */
    --bh-primary: #02297E;       /* 12.95:1 on white — AAA */
    --bh-primary-rgb: 2, 41, 126;
    --bh-secondary: #64748b;     /* aligned with slate palette */

    /* Neutral palette (slate) */
    --bh-dark: #1A1A1A;          /* the logo's "Hub" wordmark ink — body copy + headings */
    --bh-muted: #64748b;
    --bh-light: #f8fafc;
    --bh-surface: #ffffff;
    --bh-surface-alt: #f1f5f9;
    --bh-border: #e2e8f0;
    --bh-border-strong: #cbd5e1;

    /* Status colors */
    --bh-success: #10b981;
    --bh-warning: #f59e0b;
    --bh-danger: #ef4444;
    --bh-info: #06b6d4;
    --bh-whatsapp: #25d366;

    /* Spacing scale (4px base) */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;

    /* Radius scale */
    --radius-sm: .375rem;
    --radius-md: .5rem;
    --radius-lg: .75rem;
    --radius-xl: 1rem;
    --radius-pill: 2rem;

    /* Elevation */
    --shadow-xs: 0 1px 2px rgba(11, 31, 69, .05);
    --shadow-sm: 0 1px 3px rgba(11, 31, 69, .06), 0 1px 2px rgba(11, 31, 69, .04);
    --shadow-md: 0 6px 16px rgba(11, 31, 69, .08), 0 2px 4px rgba(11, 31, 69, .04);
    --shadow-lg: 0 14px 28px rgba(11, 31, 69, .10), 0 4px 8px rgba(11, 31, 69, .05);
    --shadow-xl: 0 24px 48px rgba(11, 31, 69, .14), 0 8px 16px rgba(11, 31, 69, .06);

    /* Motion */
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --t-fast: 150ms;
    --t-base: 220ms;
    --t-slow: 320ms;
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    color: var(--bh-dark);
    font-family: 'Segoe UI', 'Hind Siliguri', 'Noto Sans Bengali', system-ui, -apple-system, Tahoma, Roboto, Arial, sans-serif;
    line-height: 1.6;
    background: var(--bh-surface);
    overflow-x: clip;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgba(var(--bh-primary-rgb), .18); color: var(--bh-dark); }
/* The rule above assumes a light page background — a faint navy tint under dark
   text. On the dark ("ink") bands the page itself flips to white text, so that
   same faint tint sits on an already-dark surface and the forced dark text goes
   near-black-on-near-black: selecting a word makes it disappear. Restate the
   pair wherever the page already commits to white text, with the contrast the
   other way round (a near-opaque light chip under dark text) so a selection is
   always legible regardless of what it is sitting on. */
.band--ink ::selection,
.bhf-hero ::selection,
.main-footer ::selection,
.topbar ::selection,
.page-hero ::selection {
    background: rgba(255, 255, 255, .85);
    color: var(--bh-dark);
}

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

/* Accessible focus rings */
:focus-visible {
    outline: 3px solid rgba(var(--bh-primary-rgb), .35);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(var(--bh-primary-rgb), .25) !important;
    outline: none;
}

/* Honor reduced-motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== Theme primary override ===== */
.btn-primary {
    --bs-btn-bg: var(--bh-primary);
    --bs-btn-border-color: var(--bh-primary);
    --bs-btn-hover-bg: var(--bh-primary);
    --bs-btn-hover-border-color: var(--bh-primary);
    --bs-btn-active-bg: var(--bh-primary);
    --bs-btn-active-border-color: var(--bh-primary);
}
.btn { transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-base) var(--ease-out), background-color var(--t-fast), color var(--t-fast); }
.btn-primary { box-shadow: 0 4px 12px rgba(var(--bh-primary-rgb), .25); }
/* A 2px gold seam appears along the base on hover — the brand's marker, small. */
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(var(--bh-primary-rgb), .32), inset 0 -2px 0 var(--bh-accent, #D68F13);
    filter: brightness(1.05);
}
.btn-primary:active { transform: translateY(0); }
.btn-outline-primary { color: var(--bh-primary); border-color: var(--bh-primary); }
.btn-outline-primary:hover { background: var(--bh-primary); border-color: var(--bh-primary); }
.text-primary { color: var(--bh-primary) !important; }
.bg-primary { background-color: var(--bh-primary) !important; }
.border-primary { border-color: var(--bh-primary) !important; }
a { color: var(--bh-primary); transition: color var(--t-fast); }
a:hover { color: var(--bh-primary); filter: brightness(.85); }

/* ===== Notice Bar ===== */
.notice-bar {
    padding: 8px 16px;
    text-align: center;
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: .01em;
}
.notice-bar a { text-decoration: none; }
.notice-bar a:hover { text-decoration: underline; }

/* ===== Topbar (above main header) ===== */
.topbar {
    background: var(--bh-dark);
    color: #cbd5e1;
    padding: 8px 0;
    font-size: .85rem;
}
.topbar a { color: #cbd5e1; text-decoration: none; transition: color var(--t-fast); }
.topbar a:hover { color: #fff; }
.topbar .topbar-info { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.topbar .topbar-info > span { display: inline-flex; align-items: center; gap: .35rem; }
.topbar .topbar-social a {
    margin-left: .5rem;
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    transition: background var(--t-fast), transform var(--t-fast);
}
.topbar .topbar-social a:hover { background: rgba(var(--bh-primary-rgb), .8); color: #fff; transform: translateY(-1px); }

/* ===== Main Header / Navbar ===== */
.main-header {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--bh-border);
    position: sticky;
    top: 0;
    z-index: 1020;
    box-shadow: var(--shadow-sm);
}
.main-header .navbar-brand { gap: .65rem !important; }
.main-header .navbar-brand img { max-height: 50px; }
a.navbar-brand { white-space: normal; text-align: left; }

/* Scroll-to-top floating button */
.scroll-top-btn {
    position: fixed;
    bottom: 90px; left: 20px;
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1040;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), visibility var(--t-base);
}
.scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.main-header .navbar-brand .brand-text {
    font-weight: 700;
    color: var(--bh-dark);
    font-size: 1.15rem;
    letter-spacing: -.01em;
}
.main-header .navbar-nav { gap: .12rem; }
.main-header .navbar-nav .nav-link {
    color: var(--bh-dark);
    font-weight: 500;
    font-size: .95rem;
    padding: .5rem .95rem !important;
    border-radius: 999px;
    position: relative;
    transition: color var(--t-fast), background-color var(--t-fast);
}
.main-header .navbar-nav .nav-link:hover {
    color: var(--bh-primary);
    background-color: rgba(var(--bh-primary-rgb), .08);
}
.main-header .navbar-nav .nav-link.active {
    color: var(--bh-primary);
    background-color: rgba(var(--bh-primary-rgb), .12);
    font-weight: 600;
}
/* Gold underbar on the active item — the same "you are here" mark the mobile
   bottom bar uses, so the signature reads across breakpoints. */
.main-header .navbar-nav .nav-link.active::after {
    content: "";
    position: absolute;
    left: .95rem; right: .95rem; bottom: .18rem;
    height: 2px;
    background: var(--bh-accent);
    border-radius: 2px;
}
@media (max-width: 991.98px) {
    .main-header .navbar-nav .nav-link.active::after { left: .95rem; right: auto; width: 1.4rem; }
}
.main-header .header-actions { display: flex; gap: .4rem; align-items: center; flex-wrap: nowrap; }
.main-header .header-actions .btn { white-space: nowrap; }

/* The account menu was cutting its own labels off on the left.

   Inside a navbar Bootstrap skips Popper (it stamps data-bs-popper="none") and
   positions the menu with plain CSS: `right: 0; left: auto`. For an absolutely
   positioned box that makes the available width the containing block MINUS the
   right offset — and the containing block is the .dropdown, which is only as
   wide as the icon button. Shrink-to-fit then collapsed the menu to Bootstrap's
   10rem floor while the right edge stayed pinned to the button, so "My
   dashboard" ran off the left side.

   `width: max-content` takes the menu out of shrink-to-fit entirely: it sizes to
   its longest item and grows leftward from the pinned right edge. The max-width
   keeps it on screen on a narrow phone. */
.main-header .header-actions .dropdown-menu {
    width: max-content;
    min-width: 12rem;
    max-width: min(20rem, calc(100vw - 2rem));
}

/* Below the navbar breakpoint the actions stop being a strip at the top right
   and become a left-aligned block inside the expanded menu panel — so the
   button sits about 65px from the left edge. `dropdown-menu-end` still pinned
   the menu's RIGHT edge to it and grew leftward, which put 80px of the menu off
   the side of a 412px screen. Right-alignment is only correct while the button
   is at the right of the screen; here it is not, so anchor to the left instead
   and let it open rightward into the space that is actually there. */
@media (max-width: 991.98px) {
    .main-header .header-actions .dropdown-menu,
    .main-header .header-actions .dropdown-menu-end[data-bs-popper] {
        right: auto;
        left: 0;
    }
}
/* keep the centered menu from crowding the action buttons */
@media (min-width: 992px) {
    .main-header .navbar-nav { column-gap: .05rem; }
    .main-header .navbar-nav .nav-link { padding: .5rem .75rem !important; }
}
/* never let the desktop menu wrap onto a second line */
@media (min-width: 1200px) {
    .main-header .navbar-nav { flex-wrap: nowrap; }
}
/* The hamburger.

   This ships Bootstrap 5.1, where .navbar-toggler-icon has NO background image
   of its own — the three bars come only from `.navbar-light .navbar-toggler-icon`
   or the -dark variant. Our <nav> carries neither class, so the button was
   rendering as an empty white box: nothing to see and nothing to press, on the
   one control every phone visitor needs.

   Painting the bars here rather than adding `navbar-light` to the markup keeps
   it independent of the Bootstrap theme class — the icon cannot go invisible
   again if that class is ever added, removed, or changed by an upgrade — and it
   puts the mark in the brand navy instead of Bootstrap's grey. */
.main-header .navbar-toggler {
    border: 1px solid var(--bh-border);
    border-radius: var(--radius-md);
    padding: .4rem .6rem;
    line-height: 1;
    transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.main-header .navbar-toggler:hover { background: var(--bh-surface-alt); border-color: var(--bh-border-strong); }
.main-header .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(var(--bh-primary-rgb), .18); }
.main-header .navbar-toggler .navbar-toggler-icon {
    width: 1.4em; height: 1.4em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2302297E' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* Open: the bars become a cross, so the button says what pressing it does.
   Keyed on aria-expanded, NOT on :not(.collapsed) — Bootstrap only adds the
   `collapsed` class after the first toggle, so a fresh page load would start on
   the cross and read as "already open". aria-expanded ships in the markup as
   false and is correct from the first paint. */
.main-header .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2302297E' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M7 7l16 16M23 7L7 23'/%3e%3c/svg%3e");
}

@media (prefers-reduced-motion: reduce) {
    .main-header .navbar-toggler { transition: none; }
}

/* Stack actions below nav on smaller screens for breathing room */
@media (max-width: 991.98px) {
    .main-header .navbar-nav { padding-top: .5rem; gap: .15rem; }
    .main-header .navbar-nav .nav-link {
        border-radius: .5rem;
        padding: .65rem .85rem !important;
        border-left: 3px solid transparent;
    }
    .main-header .navbar-nav .nav-link.active {
        border-left-color: var(--bh-primary);
    }
    .main-header .header-actions {
        padding-top: .75rem;
        margin-top: .5rem;
        border-top: 1px solid var(--bh-border);
    }
}

/* ===== Hero / Slider ===== */
.hero-slider .carousel-item {
    height: clamp(420px, 56vh, 640px);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
.hero-slider .carousel-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(11, 31, 69,.75) 0%, rgba(11, 31, 69,.45) 55%, rgba(11, 31, 69,.15) 100%);
}
.hero-slider .hero-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    color: #fff;
    z-index: 2;
}
.hero-slider .hero-content h1 {
    font-size: clamp(1.65rem, 2.5vw + 1rem, 2.75rem);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.2;
}
.hero-slider .hero-content .lead {
    font-size: clamp(.95rem, .6vw + .85rem, 1.2rem);
    opacity: .95;
}
.hero-slider .carousel-indicators [data-bs-target] {
    width: 28px; height: 4px; border-radius: 2px;
    background: rgba(255, 255, 255, .55);
    border: none;
}
.hero-slider .carousel-indicators .active { background: #fff; }
.hero-slider .carousel-control-prev,
.hero-slider .carousel-control-next { width: 7%; opacity: .8; }

@media (max-width: 768px) {
    .hero-slider .carousel-item { height: clamp(380px, 70vh, 520px); }
}

/* When the quick-appointment widget is rendered without the hero slider above it,
   skip the negative margin overlap so it doesn't crash into the header. */
.quick-appointment.no-hero-overlap { margin-top: 2rem !important; }

/* ===== Section ===== */
.section { padding: 70px 0; }
.section-title {
    text-align: center;
    margin-bottom: 2.5rem;
}
.section-title h2 {
    font-size: clamp(1.5rem, 1vw + 1.25rem, 2.15rem);
    font-weight: 700;
    color: var(--bh-dark);
    margin: 0;
    letter-spacing: -.01em;
}
.section-title .small-title {
    color: var(--bh-primary);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .8rem;
    font-weight: 700;
    margin-bottom: .35rem;
    display: inline-block;
}
.section-title .small-title::before,
.section-title .small-title::after {
    content: '';
    display: inline-block;
    width: 18px; height: 2px; vertical-align: middle;
    background: currentColor;
    opacity: .5;
}
.section-title .small-title::before { margin-right: .5rem; }
.section-title .small-title::after { margin-left: .5rem; }
.section-title .subtitle { color: var(--bh-muted); margin-top: .5rem; max-width: 640px; margin-left: auto; margin-right: auto; }
.bg-light-gray { background: var(--bh-light); }

/* ===== Cards (departments, services, doctors, packages) ===== */
.card-soft {
    border: 1px solid var(--bh-border);
    border-radius: var(--radius-lg);
    background: var(--bh-surface);
    box-shadow: var(--shadow-xs);
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base);
    overflow: hidden;
}
.card-soft:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(var(--bh-primary-rgb), .25);
}

.dept-card { padding: 1.75rem 1.5rem; text-align: center; }
.dept-card .dept-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--bh-primary-rgb), .18), rgba(var(--bh-primary-rgb), .06));
    color: var(--bh-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: 1rem;
    transition: transform var(--t-base) var(--ease-out);
}
.dept-card:hover .dept-icon { transform: scale(1.08) rotate(-3deg); }
.dept-card h5 { font-weight: 600; margin-bottom: .5rem; }
.dept-card p { color: var(--bh-muted); margin-bottom: 1rem; }

.service-card { display: flex; gap: 1rem; padding: 1.25rem; }
.service-card .service-icon {
    width: 50px; height: 50px; flex-shrink: 0;
    border-radius: var(--radius-md);
    background: rgba(var(--bh-primary-rgb), .1);
    color: var(--bh-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
}

.person-card .person-photo {
    aspect-ratio: 1; overflow: hidden;
    background: var(--bh-surface-alt);
}
.person-card .person-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease-out);
}
.person-card:hover .person-photo img { transform: scale(1.07); }
.person-card .person-body { padding: 1rem 1.25rem 1.25rem; text-align: center; }
.person-card h5 { margin-bottom: .25rem; font-weight: 600; }
.person-card .designation { color: var(--bh-muted); font-size: .9rem; margin-bottom: .5rem; }
.person-card .dept {
    display: inline-block;
    padding: .2rem .65rem;
    background: rgba(var(--bh-primary-rgb), .1);
    color: var(--bh-primary);
    border-radius: var(--radius-pill);
    font-size: .75rem;
    font-weight: 500;
}

.package-card .package-image { aspect-ratio: 16/10; background: var(--bh-surface-alt); overflow: hidden; }
.package-card .package-image img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--t-slow) var(--ease-out);
}
.package-card:hover .package-image img { transform: scale(1.05); }
.package-card .package-body { padding: 1.25rem; }
.package-card .price { font-size: 1.5rem; font-weight: 700; color: var(--bh-primary); }
.package-card .price-old { text-decoration: line-through; color: var(--bh-muted); margin-left: .5rem; font-size: .9rem; font-weight: 400; }

.blog-card .blog-image { aspect-ratio: 16/9; background: var(--bh-surface-alt); overflow: hidden; }
.blog-card .blog-image img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--t-slow) var(--ease-out);
}
.blog-card:hover .blog-image img { transform: scale(1.06); }
.blog-card .blog-body { padding: 1.25rem; }
.blog-card .blog-meta { color: var(--bh-muted); font-size: .8rem; margin-bottom: .5rem; display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.blog-card h5 { font-weight: 600; line-height: 1.35; }
.blog-card h5 a { color: var(--bh-dark); text-decoration: none; }
.blog-card h5 a:hover { color: var(--bh-primary); }

/* ===== Stats / Counters ===== */
.stats-section {
    background: linear-gradient(135deg, var(--bh-primary) 0%, color-mix(in srgb, var(--bh-primary) 70%, #000) 100%);
    color: #fff;
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}
.stats-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 10%, rgba(255,255,255,.15) 0%, transparent 45%),
                      radial-gradient(circle at 80% 90%, rgba(255,255,255,.10) 0%, transparent 50%);
    pointer-events: none;
}
.stats-section .container { position: relative; z-index: 1; }
.stats-section .stat-item { text-align: center; }
.stats-section .stat-icon { font-size: 2.5rem; opacity: .9; margin-bottom: .5rem; }
.stats-section .stat-value { font-size: 2.5rem; font-weight: 700; line-height: 1; }
.stats-section .stat-label { opacity: .9; font-size: 1rem; }

/* ===== Testimonial ===== */
.testimonial-card {
    background: var(--bh-surface);
    border-radius: var(--radius-lg);
    padding: 2rem;
    border: 1px solid var(--bh-border);
    text-align: center;
    box-shadow: var(--shadow-xs);
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.testimonial-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.testimonial-card .quote {
    color: var(--bh-muted);
    font-style: italic;
    margin-bottom: 1rem;
    position: relative;
    padding-top: 1rem;
}
.testimonial-card .quote::before {
    content: '\201C';
    position: absolute; top: -.5rem; left: 50%; transform: translateX(-50%);
    font-size: 3rem; line-height: 1;
    color: rgba(var(--bh-primary-rgb), .25);
    font-family: Georgia, serif;
}
.testimonial-card img.t-photo {
    width: 64px; height: 64px; border-radius: 50%;
    object-fit: cover; margin-bottom: .5rem;
    border: 3px solid var(--bh-surface);
    box-shadow: 0 0 0 2px rgba(var(--bh-primary-rgb), .25);
}
.testimonial-card .t-rating { color: var(--bh-warning); margin-bottom: .35rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   Footer

   Four columns that each have a job, sized so none of them runs out of content
   while its neighbour keeps going. The previous version put ten links in one
   tall stack beside two columns that finished after four lines, so most of the
   footer was empty space — and it ranked "Privacy Policy" level with "Advertise
   with us". Legal moved to the bottom rule; the fourth column now carries the
   one action this whole site exists to get.
   ═══════════════════════════════════════════════════════════════════════════ */
.main-footer {
    background:
        radial-gradient(ellipse 80% 340px at 50% 0%, rgba(var(--bh-primary-rgb), .30) 0%, transparent 72%),
        linear-gradient(180deg, #14161c 0%, var(--bh-dark) 100%);
    color: #cbd5e1;
    padding: 0 0 1.5rem;
    position: relative;
}
.main-footer > .container { position: relative; z-index: 1; }

/* The seam between page and footer: a clean rule with the logo's pixel grid
   DISSOLVING downward out of it. The logo's own motif is a B breaking into
   squares, so the pixels have to fade — a full-width row of hard gold dashes
   reads as warning tape, not as a brand mark. */
.footer-seam { height: 3px; position: relative; background: linear-gradient(90deg, var(--bh-primary), var(--bh-accent) 52%, var(--bh-primary)); }
.footer-seam::after {
    content: '';
    position: absolute; left: 0; right: 0; top: 100%; height: 14px;
    background: repeating-linear-gradient(90deg,
        rgba(var(--bh-accent-rgb), .5) 0 4px, transparent 4px 26px);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
    pointer-events: none;
}

.main-footer h6 {
    color: #fff; font-weight: 700; font-size: .82rem;
    letter-spacing: .09em; text-transform: uppercase;
    margin: 0 0 1.15rem;
}
.main-footer a { color: #cbd5e1; text-decoration: none; transition: color var(--t-fast) var(--ease-out); }
.main-footer a:hover { color: #fff; }

.footer-main {
    display: grid;
    grid-template-columns: 1.55fr 1.35fr 1.15fr 1.2fr;
    gap: 2.5rem 2rem;
    padding: 3.5rem 0 2.5rem;
}

/* ── Brand column ─────────────────────────────────────────────────────────── */
.footer-logo { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.footer-logo__plate {
    width: 52px; height: 52px; flex: 0 0 auto;
    display: grid; place-content: center;
    background: #fff; border-radius: var(--radius-md);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.footer-logo__plate img { max-width: 40px; max-height: 40px; object-fit: contain; }
.footer-logo__plate i { font-size: 1.6rem; color: var(--bh-primary); }
.footer-logo__name { color: #fff; font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; }

.footer-blurb { font-size: .875rem; line-height: 1.75; color: #a8b3c4; margin: 0 0 1.15rem; max-width: 34ch; }

.footer-parent {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .45rem .85rem .45rem .6rem;
    border-radius: var(--radius-pill);
    background: rgba(var(--bh-primary-rgb), .38);
    border: 1px solid rgba(255, 255, 255, .10);
    font-size: .74rem; font-weight: 600; line-height: 1.35;
    color: #e6ecf7 !important;
    transition: background var(--t-fast) var(--ease-out);
}
.footer-parent:hover { background: rgba(var(--bh-primary-rgb), .58); }
.footer-parent i { color: var(--bh-accent); font-size: .95rem; flex: 0 0 auto; }

.footer-social { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.35rem; }
.footer-social a {
    width: 38px; height: 38px; border-radius: var(--radius-md);
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .09);
    font-size: 1rem;
    transition: background var(--t-fast) var(--ease-out),
                transform var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out);
}
.footer-social a:hover, .footer-social a:focus-visible { transform: translateY(-3px); color: #fff; border-color: transparent; }
/* Each network in its own colour on hover — cheap, and it makes the row read as
   real links rather than decoration. */
.footer-social a[data-net="facebook"]:hover  { background: #1877F2; }
.footer-social a[data-net="instagram"]:hover { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); }
.footer-social a[data-net="youtube"]:hover   { background: #FF0000; }
.footer-social a[data-net="tiktok"]:hover    { background: #000; }
.footer-social a[data-net="linkedin"]:hover  { background: #0A66C2; }
.footer-social a[data-net="twitter-x"]:hover { background: #000; }

/* ── Quick links ──────────────────────────────────────────────────────────── */
.footer-nav__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
.main-footer .footer-links { margin: 0; }
.main-footer .footer-links li { padding: 0; }
.main-footer .footer-links a {
    display: inline-block; padding: .34rem 0;
    font-size: .875rem; position: relative;
}
/* A gold rule that draws in from the left, instead of the text jumping 4px. */
.main-footer .footer-links a::after {
    content: ''; position: absolute; left: 0; bottom: .18rem;
    height: 1px; width: 0; background: var(--bh-accent);
    transition: width var(--t-base) var(--ease-out);
}
.main-footer .footer-links a:hover::after { width: 100%; }

/* ── Contact + search ─────────────────────────────────────────────────────── */
.footer-contact { margin: 0; display: grid; gap: .7rem; }
.footer-contact li { display: flex; align-items: flex-start; gap: .65rem; font-size: .86rem; line-height: 1.55; }
.footer-contact__ico {
    width: 30px; height: 30px; flex: 0 0 auto; border-radius: var(--radius-sm);
    display: grid; place-content: center;
    background: rgba(var(--bh-primary-rgb), .42);
    color: #cfd9ec; font-size: .8rem;
}
.footer-contact__ico--wa { background: rgba(37, 211, 102, .20); color: var(--bh-whatsapp); }

.footer-search { position: relative; }
.footer-search > i {
    position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
    color: rgba(255, 255, 255, .45); font-size: .85rem; pointer-events: none;
}
.footer-search .form-control {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff; font-size: .85rem;
    padding: .5rem .8rem .5rem 2.15rem;
    border-radius: var(--radius-pill);
}
.footer-search .form-control::placeholder { color: rgba(255, 255, 255, .45); }
.footer-search .form-control:focus {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(var(--bh-accent-rgb), .55);
    color: #fff; box-shadow: 0 0 0 .2rem rgba(var(--bh-accent-rgb), .18);
}

/* ── The listing call to action ───────────────────────────────────────────── */
.footer-cta__line { font-size: .84rem; line-height: 1.7; color: #a8b3c4; margin: 0 0 1rem; }
.footer-cta__btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; padding: .7rem 1rem;
    background: var(--bh-accent); color: #241703 !important;
    border-radius: var(--radius-md); font-weight: 700; font-size: .88rem;
    box-shadow: 0 6px 18px rgba(var(--bh-accent-rgb), .28);
    transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.footer-cta__btn:hover {
    color: #241703 !important; transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(var(--bh-accent-rgb), .38);
}
.footer-cta__alt { display: inline-block; margin-top: .7rem; font-size: .8rem; color: #a8b3c4; }
.footer-cta__alt i { font-size: .72rem; transition: transform var(--t-fast) var(--ease-out); display: inline-block; }
.footer-cta__alt:hover i { transform: translateX(3px); }

.footer-news { margin-top: 1.6rem; padding-top: 1.35rem; border-top: 1px solid rgba(255, 255, 255, .10); }
.footer-news__label {
    font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #fff; margin-bottom: .6rem;
}
.footer-news__field { display: flex; align-items: stretch; gap: .4rem; }
.footer-news__field .form-control {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff; font-size: .82rem; border-radius: var(--radius-md);
}
.footer-news__field .form-control::placeholder { color: rgba(255, 255, 255, .45); }
.footer-news__field .form-control:focus {
    background: rgba(255, 255, 255, .10); color: #fff;
    border-color: rgba(var(--bh-accent-rgb), .55);
    box-shadow: 0 0 0 .2rem rgba(var(--bh-accent-rgb), .18);
}
.footer-news__field button {
    flex: 0 0 auto; width: 42px; border: 0; border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
    transition: background var(--t-fast) var(--ease-out);
}
.footer-news__field button:hover { background: var(--bh-primary); }
.footer-news__note { font-size: .72rem; color: #7e8b9e; margin-top: .5rem; }

/* ── Bottom rule ──────────────────────────────────────────────────────────── */
.main-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .10);
    padding: 1.25rem 0 .25rem;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem 1.5rem; flex-wrap: wrap;
    font-size: .8rem; color: #8e9aad;
}
/* min-width:0 so this can shrink below its content width as a flex item —
   without it the row runs off the right edge on a phone instead of wrapping. */
.footer-bottom__legal {
    display: flex; align-items: center; gap: .5rem 1.15rem; flex-wrap: wrap;
    min-width: 0; max-width: 100%;
}
.footer-bottom__legal a { font-size: .8rem; }
.footer-bottom__legal a:hover { color: #fff; text-decoration: underline; }
.main-footer .dev-credit-line { justify-content: flex-end; font-size: .78rem; }

@media (max-width: 1199.98px) {
    .footer-main { grid-template-columns: 1.4fr 1fr; gap: 2.5rem; }
}
@media (max-width: 767.98px) {
    .footer-main { grid-template-columns: 1fr; gap: 2.25rem; padding: 2.75rem 0 2rem; }
    .footer-blurb { max-width: none; }
    .main-footer .footer-bottom { justify-content: center; text-align: center; }
    .footer-bottom__legal { justify-content: center; width: 100%; }
    /* The copyright sentence is long enough that sharing a line with the legal
       links pushes the last one off the right edge on a phone. Give it its own. */
    .footer-bottom__copy { width: 100%; }
    .main-footer .dev-credit-line { justify-content: center; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .footer-social a, .footer-cta__btn, .footer-cta__alt i,
    .main-footer .footer-links a::after { transition: none; }
    .footer-social a:hover, .footer-cta__btn:hover { transform: none; }
}

/* ===== "Developed by iSoft" credit (footer + admin sidebar) ===== */
.dev-credit-line { display: flex; align-items: center; justify-content: center; gap: .4rem; flex-wrap: wrap; }
.dev-credit {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .15rem .7rem;
    border-radius: 999px;
    background: rgba(var(--bh-primary-rgb), .14);
    color: #fff !important;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--t-fast), transform var(--t-fast);
}
.dev-credit:hover { background: rgba(var(--bh-primary-rgb), .28); color: #fff !important; transform: translateY(-1px); }
.dev-credit-heart { color: #ef4444; animation: dev-heartbeat 1.4s ease-in-out infinite; }
@keyframes dev-heartbeat {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.28); }
    30% { transform: scale(1); }
    45% { transform: scale(1.18); }
    60% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .dev-credit-heart { animation: none; } }

/* ===== Share buttons (detail pages, #22) ===== */
.share-buttons { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin: 1rem 0; }
.share-buttons .share-label { font-weight: 600; color: var(--bh-muted); font-size: .9rem; }
.share-buttons a, .share-buttons button {
    width: 38px; height: 38px; border: 1px solid var(--bh-border); background: var(--bh-surface);
    border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    color: var(--bh-dark); font-size: 1.05rem; cursor: pointer;
    transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.share-buttons a:hover, .share-buttons button:hover { transform: translateY(-2px); color: #fff; }
.share-buttons .s-fb:hover { background: #1877f2; border-color: #1877f2; }
.share-buttons .s-x:hover { background: #000; border-color: #000; }
.share-buttons .s-wa:hover { background: #25d366; border-color: #25d366; }
.share-buttons .s-in:hover { background: #0a66c2; border-color: #0a66c2; }
.share-buttons .s-copy:hover { background: var(--bh-primary); border-color: var(--bh-primary); }

/* ===== Floating Buttons ===== */
.floating-buttons {
    position: fixed;
    bottom: 20px; right: 20px;
    z-index: 1040;
    display: flex; flex-direction: column; gap: 10px;
}
.floating-buttons a {
    width: 52px; height: 52px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 1.25rem;
    box-shadow: var(--shadow-md);
    transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-base);
    position: relative;
}
.floating-buttons a:hover { transform: scale(1.08); color: #fff; box-shadow: var(--shadow-lg); }
.fab-whatsapp { background: var(--bh-whatsapp); }
.fab-call { background: var(--bh-primary); }
/* Subtle pulse ring on the call button to nudge attention */
.fab-call::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(var(--bh-primary-rgb), .5);
    animation: fab-pulse 2.6s infinite;
}
@keyframes fab-pulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--bh-primary-rgb), .5); }
    70% { box-shadow: 0 0 0 14px rgba(var(--bh-primary-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--bh-primary-rgb), 0); }
}

/* ===== Chat Widget (BizHub Assistant) =====
   Stacked above .floating-buttons's own bottom-right corner, sized for its worst case
   (call + WhatsApp both showing: 2 * 52px + 10px gap = 114px tall from its bottom:20px
   origin, so its top edge sits at bottom:134px) so the two never collide regardless of how
   many of those 0-2 buttons render. Same math repeated for the mobile override below. */
.chat-widget__fab {
    position: fixed; right: 20px; bottom: 150px;
    z-index: 1045;
    width: 56px; height: 56px; border-radius: 50%; border: 0;
    background: var(--bh-primary); color: #fff; font-size: 1.4rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-lg); cursor: pointer; padding: 0;
    transition: transform var(--t-fast) var(--ease-out), background var(--t-base);
}
.chat-widget__fab:hover { transform: scale(1.06); }
.chat-widget__dot {
    position: absolute; top: 4px; right: 4px;
    width: 12px; height: 12px; background: var(--bh-success);
    border: 2px solid #fff; border-radius: 50%;
}

.chat-widget__panel {
    position: fixed; right: 20px; bottom: 220px;   /* fab bottom(150) + fab height(56) + 14px gap */
    z-index: 1085;
    width: 370px; max-width: calc(100vw - 32px);
    height: 520px; max-height: calc(100vh - 260px);
    background: #fff; border: 1px solid var(--bh-border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl); display: flex; flex-direction: column; overflow: hidden;
}
.chat-widget__panel[hidden] { display: none; }
/* Host-style-bleed guard: an ambient heading rule or a Bootstrap utility class
   (fst-italic, text-uppercase) must not tip Bangla text into a slanted or letter-spaced
   render inside a chat bubble. Bangla has no italic. */
.chat-widget__panel * { box-sizing: border-box; font-style: normal; letter-spacing: normal; text-transform: none; }

.chat-widget__head { background: var(--bh-primary); color: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 10px; }
.chat-widget__name { font-size: .95rem; font-weight: 700; }
.chat-widget__sub { font-size: .75rem; opacity: .85; }
.chat-widget__close { margin-left: auto; background: none; border: 0; color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }

.chat-widget__body { flex: 1 1 auto; overflow-y: auto; padding: 14px; background: var(--bh-light); font-size: .9rem; line-height: 1.7; }
.chat-widget__msg { display: flex; margin: 0 0 10px; }
.chat-widget__bubble { max-width: 86%; padding: 10px 13px; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--bh-border); word-wrap: break-word; }
.chat-widget__msg--me { justify-content: flex-end; }
.chat-widget__msg--me .chat-widget__bubble { background: var(--bh-primary); color: #fff; border-color: var(--bh-primary); }
.chat-widget__bubble p { margin: 0 0 8px; }
.chat-widget__bubble p:last-child { margin-bottom: 0; }
.chat-widget__bubble a { color: var(--bh-primary); text-decoration: underline; }
.chat-widget__msg--me .chat-widget__bubble a { color: #fff; }

.chat-widget__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.chat-widget__chip { border: 1px solid var(--bh-border-strong); background: #fff; color: var(--bh-primary); border-radius: var(--radius-pill); padding: 7px 12px; font-size: .85rem; cursor: pointer; }
.chat-widget__chip:hover { background: var(--bh-surface-alt); border-color: var(--bh-primary); }

.chat-widget__cta { display: inline-flex; align-items: center; margin-top: 4px; background: var(--bh-primary); color: #fff; border-radius: var(--radius-sm); padding: 9px 14px; font-size: .85rem; font-weight: 600; text-decoration: none; }
.chat-widget__cta:hover { background: color-mix(in srgb, var(--bh-primary) 85%, #000); color: #fff; }

.chat-widget__foot { border-top: 1px solid var(--bh-border); padding: 10px; background: #fff; }
.chat-widget__form { display: flex; gap: 8px; margin: 0; }
.chat-widget__form input[type=text] { flex: 1 1 auto; min-width: 0; height: 42px; border: 1px solid var(--bh-border); border-radius: var(--radius-sm); padding: 0 12px; font-size: 1rem; font-family: inherit; }
.chat-widget__form input[type=text]:focus { outline: 2px solid var(--bh-primary); outline-offset: 1px; }
.chat-widget__form button { flex: 0 0 42px; width: 42px; height: 42px; border: 0; border-radius: var(--radius-sm); background: var(--bh-primary); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.chat-widget__hint { font-size: .7rem; color: var(--bh-muted); margin: 6px 2px 0; }

.chat-widget__wa { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; background: var(--bh-whatsapp); color: #fff; border-radius: var(--radius-sm); padding: 9px 14px; font-size: .85rem; font-weight: 600; text-decoration: none; }
.chat-widget__wa:hover { color: #fff; opacity: .92; }
.chat-widget__lead { background: #fff; border: 1px solid var(--bh-border); border-radius: var(--radius-md); padding: 12px; margin-top: 4px; }
.chat-widget__lead-hint { font-size: .8rem; color: var(--bh-muted); margin: 10px 0 8px; line-height: 1.6; }
.chat-widget__lead input { width: 100%; height: 40px; border: 1px solid var(--bh-border); border-radius: var(--radius-sm); padding: 0 10px; margin: 0 0 8px; font-size: 1rem; font-family: inherit; }
.chat-widget__lead button { width: 100%; height: 42px; border: 0; border-radius: var(--radius-sm); background: var(--bh-primary); color: #fff; font-weight: 600; cursor: pointer; }
.chat-widget__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.chat-widget__lead-note { font-size: .75rem; margin: 8px 0 0; }
.chat-widget__lead-note.is-error { color: var(--bh-danger); }

.chat-widget__hello {
    position: fixed; right: 84px; bottom: 158px; z-index: 1044;
    width: max-content; max-width: 300px;
    display: flex; align-items: flex-start; gap: 4px;
    background: #fff; border: 1px solid var(--bh-border); border-radius: 14px 14px 4px 14px;
    box-shadow: var(--shadow-lg); padding: 4px;
    opacity: 0; transform: translateY(10px) scale(.97);
    transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
.chat-widget__hello[hidden] { display: none; }
.chat-widget__hello.is-in { opacity: 1; transform: none; }
.chat-widget__hello-body { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; gap: 10px; background: none; border: 0; border-radius: 11px; cursor: pointer; padding: 9px 4px 10px 10px; text-align: left; font-family: inherit; color: inherit; }
.chat-widget__hello-body:hover { background: var(--bh-surface-alt); }
.chat-widget__hello-avatar { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--bh-primary); color: #fff; display: flex; align-items: center; justify-content: center; }
.chat-widget__hello-text { min-width: 0; }
.chat-widget__hello-name { display: block; font-size: .75rem; font-weight: 700; color: var(--bh-primary); }
.chat-widget__hello-msg { display: block; margin-top: 2px; font-size: .85rem; color: var(--bh-dark); }
.chat-widget__hello-x { flex: 0 0 26px; width: 26px; height: 26px; margin: 4px 4px 0 0; background: none; border: 0; border-radius: 50%; cursor: pointer; color: var(--bh-muted); font-size: 1rem; line-height: 1; }
.chat-widget__hello-x:hover { background: var(--bh-surface-alt); }

@media (max-width: 575.98px) {
    .chat-widget__panel { right: 10px; left: 10px; width: auto; bottom: 84px; height: calc(100vh - 150px); }
    .chat-widget__hello { right: 84px; max-width: calc(100vw - 96px); }
}

/* ===== Activity Ticker (live social-proof cards) =====
   Deliberately top-left, not a bottom corner: .floating-buttons, .chat-widget, the mobile
   CTA bar and the cookie-consent bar already crowd every bottom edge. top:88px clears the
   sticky .main-header (z-index 1020); this widget sits just above it at 1050. */
.activity-ticker {
    position: fixed;
    top: 88px; left: 16px;
    z-index: 1050;
    width: 320px; max-width: calc(100vw - 32px);
    pointer-events: none;
}
.activity-ticker__card {
    position: relative;
    display: flex; align-items: flex-start; gap: .65rem;
    background: #fff; border: 1px solid var(--bh-border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: .7rem 1.9rem .7rem .7rem;
    opacity: 0; transform: translateY(-10px) scale(.97);
    transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
    pointer-events: auto;
    overflow: hidden;
}
.activity-ticker__card.is-in { opacity: 1; transform: none; }
.activity-ticker__icon {
    flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--bh-primary-rgb), .1); color: var(--bh-primary);
    font-size: 1rem;
}
.activity-ticker__card--stat .activity-ticker__icon { background: rgba(var(--bh-accent-rgb), .18); color: var(--bh-accent-ink, var(--bh-accent)); }
.activity-ticker__text { min-width: 0; }
.activity-ticker__title { display: block; font-size: .87rem; font-weight: 700; color: var(--bh-dark); line-height: 1.35; }
.activity-ticker__sub { display: block; font-size: .74rem; color: var(--bh-muted); margin-top: 1px; }
.activity-ticker__close {
    position: absolute; top: 6px; right: 8px;
    background: none; border: 0; color: var(--bh-muted); font-size: 1.1rem; line-height: 1; cursor: pointer;
    padding: 2px 4px; border-radius: 4px;
}
.activity-ticker__close:hover { background: var(--bh-surface-alt); color: var(--bh-dark); }
.activity-ticker__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.activity-ticker__bar > i { display: block; height: 100%; width: 0; background: var(--bh-primary); }

/* Phones and small tablets have no room to spare below the header — the desktop card was
   near-full-width there and sat right on top of the hero/title, the thing a visitor
   actually came to read. Shrink it to a small corner badge instead of hiding it outright:
   narrow enough to never cover the page's own content, wherever that content sits. */
@media (max-width: 991.98px) {
    .activity-ticker { top: 70px; left: 8px; width: 200px; max-width: 58vw; }
    .activity-ticker__card { gap: .45rem; padding: .5rem 1.4rem .5rem .5rem; border-radius: var(--radius-md); }
    .activity-ticker__icon { flex-basis: 24px; width: 24px; height: 24px; font-size: .78rem; }
    .activity-ticker__title { font-size: .72rem; line-height: 1.3; }
    .activity-ticker__sub { font-size: .62rem; }
    .activity-ticker__close { top: 3px; right: 5px; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
    .activity-ticker__card { transition: opacity .2s ease; transform: none; }
    .activity-ticker__bar > i { transition: none !important; }
}

/* ===== Page hero (sub-pages) ===== */
.page-hero {
    background: linear-gradient(135deg, var(--bh-primary) 0%, color-mix(in srgb, var(--bh-primary) 60%, #000) 100%);
    color: #fff;
    padding: 70px 0 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle at 15% 20%, rgba(255,255,255,.18) 0%, transparent 45%),
                      radial-gradient(circle at 85% 80%, rgba(255,255,255,.12) 0%, transparent 50%);
    pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 {
    font-size: clamp(1.6rem, 1.5vw + 1.1rem, 2.5rem);
    font-weight: 700;
    margin-bottom: .5rem;
    letter-spacing: -.01em;
}
.page-hero .breadcrumb { background: transparent; justify-content: center; padding: 0; margin: 0; }
.page-hero .breadcrumb a { color: rgba(255,255,255,.85); text-decoration: none; }
.page-hero .breadcrumb a:hover { color: #fff; text-decoration: underline; }
.page-hero .breadcrumb-item.active { color: #fff; }
.page-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.6); }

/* ===== Doctor profile, Department detail, etc. ===== */
.profile-photo {
    width: 100%; max-width: 280px;
    aspect-ratio: 1;
    margin: 0 auto;
    background: var(--bh-surface-alt);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.profile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-info dl { margin-bottom: 0; }
.profile-info dt { color: var(--bh-muted); font-weight: 500; font-size: .85rem; }
.profile-info dd { font-weight: 500; margin-bottom: .65rem; }

/* ===== Appointment & contact form ===== */
.contact-info-card {
    background: var(--bh-surface);
    border: 1px solid var(--bh-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-xs);
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.contact-info-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.contact-info-card .icon-wrap {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(var(--bh-primary-rgb), .1);
    color: var(--bh-primary);
    display: flex; align-items: center; justify-content: center;
}

/* Form polish */
.form-control, .form-select {
    border-color: var(--bh-border);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-control:focus, .form-select:focus {
    border-color: var(--bh-primary);
}
.form-label { font-weight: 500; margin-bottom: .35rem; }

/* ===== Star rating display ===== */
.star-rating { color: var(--bh-warning); }
.star-rating .star-empty { color: var(--bh-border-strong); }

/* ===== Pagination ===== */
.pagination { gap: .25rem; }
.page-link {
    color: var(--bh-primary);
    border-color: var(--bh-border);
    border-radius: var(--radius-md) !important;
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.page-link:hover { background: rgba(var(--bh-primary-rgb), .08); transform: translateY(-1px); }
.page-item.active .page-link {
    background: var(--bh-primary);
    border-color: var(--bh-primary);
    color: #fff;
    box-shadow: 0 4px 10px rgba(var(--bh-primary-rgb), .25), inset 0 -3px 0 var(--bh-accent, #D68F13);
}

/* ===== Gallery grid ===== */
.gallery-item {
    aspect-ratio: 1;
    background: var(--bh-surface-alt);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    position: relative;
}
.gallery-item img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--t-slow) var(--ease-out);
}
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item::after {
    content: '\F4F1'; /* bi-zoom-in */
    font-family: 'bootstrap-icons';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.5rem;
    background: linear-gradient(135deg, rgba(11, 31, 69,.45), rgba(11, 31, 69,.15));
    opacity: 0;
    transition: opacity var(--t-base);
}
.gallery-item:hover::after { opacity: 1; }

/* ===== TinyMCE rendered content ===== */
.rich-content h1, .rich-content h2, .rich-content h3, .rich-content h4 { color: var(--bh-dark); margin-top: 1.5rem; line-height: 1.3; }
.rich-content img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.rich-content table { width: 100%; margin-bottom: 1rem; overflow-x: auto; display: block; }
.rich-content p { margin-bottom: 1rem; }
.rich-content blockquote {
    border-left: 4px solid var(--bh-primary);
    background: var(--bh-light);
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--bh-dark);
}
.rich-content ul, .rich-content ol { padding-left: 1.5rem; }

/* ===== Responsive (desktop-first refinements) ===== */
@media (max-width: 991.98px) {
    .section { padding: 50px 0; }
    .page-hero { padding: 50px 0 40px; }
    /* The mobile bottom bar is two rows (contact strip + app tabs), ~104px tall
       + safe-area; the raised gold "Add" pokes ~12px above that. Everything that
       lived at a bottom corner is lifted clear of it. */
    body.has-mobile-cta { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
    /* Call & WhatsApp already live in the bottom bar's contact strip, so the
       floating pair is redundant on a phone — leave only the chat FAB. */
    .floating-buttons { display: none; }
    .chat-widget__fab { bottom: calc(126px + env(safe-area-inset-bottom)); right: 14px; width: 50px; height: 50px; font-size: 1.25rem; }
    .chat-widget__hello { bottom: calc(134px + env(safe-area-inset-bottom)); right: 70px; }
    .topbar .topbar-info { justify-content: center; gap: .9rem; }
    /* Keep the scroll-to-top button and the one-time cookie bar clear of the dock. */
    body.has-mobile-cta .scroll-top-btn { bottom: calc(124px + env(safe-area-inset-bottom)); }
    body.has-mobile-cta #cookieConsent { bottom: calc(110px + env(safe-area-inset-bottom)) !important; }
}

@media (max-width: 575.98px) {
    .section { padding: 38px 0; }
    .hero-slider .carousel-item { height: 320px; }
    .hero-slider .btn-lg { padding: .5rem 1rem; font-size: .9rem; }
    .stats-section { padding: 40px 0; }
    .stats-section .stat-value { font-size: 1.75rem; }
    .stats-section .stat-icon { font-size: 2rem; }
    .testimonial-card { padding: 1.25rem; }
    .person-card .person-body { padding: .75rem 1rem 1rem; }
    .dept-card { padding: 1.25rem; }
    .topbar { padding: 6px 0; font-size: .75rem; }
    .package-card .price { font-size: 1.25rem; }
    .section-title { margin-bottom: 1.75rem; }
    .main-header .navbar-brand .brand-text { font-size: 1rem; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .main-header .navbar-brand img { max-height: 40px; }
}

/* Mobile table polish */
.table-responsive { -webkit-overflow-scrolling: touch; }
@media (max-width: 575.98px) {
    .table thead th, .table tbody td { font-size: .85rem; padding: .5rem; }
    .card-soft .card-body { padding: 1rem; }
    .card-soft .card-header { padding: .75rem 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Mobile bottom bar — an app-style two-row dock (phones/tablets only).
   Row 1: a thin Call / WhatsApp / Proposal contact strip.
   Row 2: Home · Explore · Categories · [+ Add] · More — "Add" is the raised
   gold CTA, the one action this whole platform is trying to drive.
   ═══════════════════════════════════════════════════════════════════════════ */
.mobile-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1035;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-top: 1px solid var(--bh-border);
    box-shadow: 0 -2px 14px rgba(11, 31, 69, .08);
    padding-bottom: env(safe-area-inset-bottom);
}
@media (max-width: 991.98px) { .mobile-nav { display: block; } }

/* Row 1 — contact strip */
.mobile-nav__contact {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--bh-border);
}
.mobile-nav__contact a {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
    padding: .38rem .25rem;
    font-size: .76rem; font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    color: var(--bh-dark);
}
.mobile-nav__contact a + a { border-left: 1px solid var(--bh-border); }
.mobile-nav__contact a:active { background: var(--bh-surface-alt); }
.mobile-nav__contact .mn-call { color: #dc2626; }
.mobile-nav__contact .mn-wa { color: #128c4f; }
.mobile-nav__contact .mn-prop { color: var(--bh-primary); }

/* Row 2 — app tabs */
.mobile-nav__tabs {
    display: flex;
    align-items: flex-end;
    padding: 4px 4px 6px;
}
.mobile-nav__tab {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 4px 2px;
    border: 0; background: transparent;
    font-size: 10px; font-weight: 600; line-height: 1.1;
    color: var(--bh-muted);
    text-decoration: none;
    text-align: center;
}
.mobile-nav__tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-nav__tab i { font-size: 1.1rem; }
.mobile-nav__tab.is-on { color: var(--bh-primary); }
.mobile-nav__tab.is-on i { color: var(--bh-primary); }
.mobile-nav__tab.is-on::before {
    content: "";
    position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
    width: 22px; height: 3px; border-radius: 3px;
    background: var(--bh-accent);
}
.mobile-nav__tab:active { transform: scale(.94); }

/* The centre CTA — a raised gold pill that reads as the primary action */
.mobile-nav__add {
    flex: 0 0 auto;
    margin: 0 .35rem;
    transform: translateY(-12px);
}
.mobile-nav__add i {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--bh-accent);
    color: var(--bh-ink);
    font-size: 1.3rem;
    box-shadow: 0 6px 16px rgba(var(--bh-accent-rgb), .4);
}
.mobile-nav__add span { color: var(--bh-accent-ink); }

/* The "More" sheet */
.mobile-more__list { list-style: none; margin: 0; padding: 0; }
.mobile-more__list a,
.mobile-more__list button {
    display: flex; align-items: center; gap: .8rem; width: 100%;
    padding: .8rem .25rem;
    border: 0; background: transparent;
    border-bottom: 1px solid var(--bh-border);
    color: var(--bh-dark); font-size: .95rem; font-weight: 500;
    text-align: left; text-decoration: none;
}
.mobile-more__list a i,
.mobile-more__list button i { color: var(--bh-primary); font-size: 1.05rem; width: 1.2rem; text-align: center; }
.mobile-more__list a.is-on { color: var(--bh-primary); font-weight: 600; }
.mobile-more__section {
    font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--bh-muted); font-weight: 700;
    padding: 1rem .25rem .35rem;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-nav__tab:active, .mobile-nav__contact a:active { transform: none; }
}

/* ===== Trust Signals (Smart Landing) ===== */
.trust-signal-card {
    text-align: center;
    padding: 1.5rem 1rem;
    border-radius: var(--radius-lg);
    background: var(--bh-surface);
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.trust-signal-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.trust-signal-card .ts-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--bh-primary-rgb), .18), rgba(var(--bh-primary-rgb), .06));
    color: var(--bh-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.75rem; margin-bottom: 1rem;
}
.trust-signal-card h6 { font-weight: 600; margin-bottom: .35rem; }
.trust-signal-card p { color: var(--bh-muted); font-size: .85rem; margin: 0; }

/* ===== Inline appointment widget (Smart Landing) ===== */
.quick-appointment {
    background: linear-gradient(135deg, var(--bh-primary) 0%, color-mix(in srgb, var(--bh-primary) 65%, #000) 100%);
    color: #fff;
    border-radius: var(--radius-xl);
    padding: 2rem;
    margin: -3rem auto 0;
    max-width: 1100px;
    position: relative;
    z-index: 5;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}
.quick-appointment::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle at 90% 10%, rgba(255,255,255,.15) 0%, transparent 45%);
    pointer-events: none;
}
.quick-appointment > * { position: relative; z-index: 1; }
.quick-appointment h3 { font-weight: 700; margin-bottom: .25rem; }
.quick-appointment p { opacity: .9; margin-bottom: 1rem; }
.quick-appointment .form-control,
.quick-appointment .form-select {
    background: rgba(255,255,255,.95);
    border: 1px solid rgba(255,255,255,.3);
    color: var(--bh-dark);
}
.quick-appointment .form-control:focus,
.quick-appointment .form-select:focus {
    background: #fff;
    border-color: #fff;
    box-shadow: 0 0 0 .2rem rgba(255,255,255,.25);
}
.quick-appointment .btn-light { color: var(--bh-primary); font-weight: 600; }

@media (max-width: 991.98px) {
    .quick-appointment { padding: 1.5rem; margin-top: -2rem; border-radius: var(--radius-lg); }
    .quick-appointment h3 { font-size: 1.25rem; }
}

/* ===== OPD timing + map block ===== */
.opd-card {
    background: linear-gradient(135deg, #fff 0%, var(--bh-light) 100%);
    border: 1px solid var(--bh-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    height: 100%;
    box-shadow: var(--shadow-xs);
}
.opd-card h5 { color: var(--bh-primary); margin-bottom: 1rem; }
.opd-card .opd-row {
    display: flex; justify-content: space-between;
    padding: .5rem 0;
    border-bottom: 1px dashed var(--bh-border);
}
.opd-card .opd-row:last-child { border-bottom: none; }
.opd-card .day { font-weight: 500; color: var(--bh-dark); }
.opd-card .time { color: var(--bh-muted); font-size: .9rem; }
.opd-card .closed { color: var(--bh-danger); }

/* ===== Service grid (improved) ===== */
.service-grid-card {
    text-align: center;
    padding: 2rem 1rem;
    border-radius: var(--radius-lg);
    background: var(--bh-surface);
    border: 1px solid var(--bh-border);
    transition: transform var(--t-base) var(--ease-out), border-color var(--t-base), box-shadow var(--t-base);
    cursor: pointer;
    height: 100%;
}
.service-grid-card:hover {
    transform: translateY(-6px);
    border-color: var(--bh-primary);
    box-shadow: 0 14px 28px rgba(var(--bh-primary-rgb), .15);
}
.service-grid-card:hover .sg-icon { background: var(--bh-primary); color: #fff; }
.service-grid-card .sg-icon {
    width: 72px; height: 72px;
    border-radius: var(--radius-xl);
    background: rgba(var(--bh-primary-rgb), .1);
    color: var(--bh-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 2rem; margin-bottom: 1rem;
    transition: all var(--t-base) var(--ease-out);
}
.service-grid-card h6 { font-weight: 600; color: var(--bh-dark); margin-bottom: .5rem; }
.service-grid-card p { color: var(--bh-muted); font-size: .85rem; margin: 0; }

/* ===== Counter / reveal animation ===== */
.counter[data-counter] { transition: opacity var(--t-slow); }

[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
[data-reveal].revealed { opacity: 1; transform: translateY(0); }
[data-reveal-delay="100"] { transition-delay: .08s; }
[data-reveal-delay="200"] { transition-delay: .16s; }
[data-reveal-delay="300"] { transition-delay: .24s; }
[data-reveal-delay="400"] { transition-delay: .32s; }

/* ===== Hero CTA badges ===== */
.hero-slider .hero-content .hero-badges {
    display: flex; gap: .5rem; flex-wrap: wrap;
    margin-bottom: 1rem;
}
.hero-slider .hero-content .hero-badges .badge {
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    padding: .35rem .75rem;
    font-weight: 500;
    font-size: .75rem;
    border-radius: var(--radius-pill);
}

/* ===== Utility helpers ===== */
.text-balance { text-wrap: balance; }
.btn-pill { border-radius: var(--radius-pill); }
.shadow-soft { box-shadow: var(--shadow-md) !important; }

/* Empty state */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--bh-muted);
}
.empty-state .empty-icon {
    font-size: 3rem;
    color: var(--bh-border-strong);
    margin-bottom: .75rem;
}

/* Skeleton (for async loaders if needed) */
.skeleton {
    background: linear-gradient(90deg, var(--bh-surface-alt) 25%, #e2e8f0 50%, var(--bh-surface-alt) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.4s infinite;
    border-radius: var(--radius-sm);
}
@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Print */
@media print {
    .topbar, .main-header, .main-footer, .floating-buttons, .mobile-nav, .notice-bar,
    .scroll-top-btn, .share-buttons, .form-actions-bar, .chat-widget__fab, .chat-widget__panel,
    .chat-widget__hello, .activity-ticker,
    .d-print-none, [data-newsletter-form], form[data-submit-spinner] { display: none !important; }
    body { color: #000; background: #fff !important; }
    a { color: #000 !important; text-decoration: none !important; }
    .page-hero {
        background: #fff !important;
        color: #000 !important;
        border-bottom: 1px solid #000;
        padding: 1rem 0 !important;
    }
    .page-hero::before { display: none !important; }
    .page-hero h1, .page-hero .breadcrumb,
    .page-hero .breadcrumb a, .page-hero .breadcrumb-item.active { color: #000 !important; }
    .card-soft, .app-card { box-shadow: none !important; border: 1px solid #ccc !important; }
    .sticky-top { position: static !important; }

    /* Compact spacing so content fits on a single page */
    @page { margin: 12mm; }
    .section { padding: 0 !important; }
    .page-hero { padding: .5rem 0 !important; border-bottom: 1px solid #ccc; }
    .page-hero .breadcrumb { display: none !important; }
    .card-soft, .app-card { padding: 1rem !important; }
    .card-soft.p-4, .card-soft.p-md-5 { padding: 1rem !important; }

    /* Appointment confirmation: tighten the success block */
    .appt-confirm-icon { width: 52px !important; height: 52px !important; margin-bottom: .5rem !important; }
    .appt-confirm-icon i { font-size: 1.5rem !important; }
}

/* ============================================================
   Scroll-reveal & entrance animations
   ============================================================ */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s var(--ease-out, ease), transform .6s var(--ease-out, ease);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
[data-reveal].revealed { opacity: 1; transform: none; }
[data-reveal][data-reveal-from="left"]  { transform: translateX(-30px); }
[data-reveal][data-reveal-from="right"] { transform: translateX(30px); }
[data-reveal][data-reveal-from="zoom"]  { transform: scale(.93); }
[data-reveal][data-reveal-from="left"].revealed,
[data-reveal][data-reveal-from="right"].revealed,
[data-reveal][data-reveal-from="zoom"].revealed { transform: none; }

/* Hero entrance */
@keyframes cfFadeDown { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
@keyframes cfFadeUp   { from { opacity: 0; transform: translateY(18px); }  to { opacity: 1; transform: none; } }
@keyframes cfFloat     { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.page-hero h1 { animation: cfFadeDown .7s var(--ease-out, ease) both; }
.page-hero > .container > p,
.page-hero .breadcrumb { animation: cfFadeDown .7s var(--ease-out, ease) .14s both; }
.page-hero .mb-2 i { animation: cfFadeUp .7s var(--ease-out, ease) both; }

/* Carousel caption entrance */
.carousel-item.active .carousel-caption > * { animation: cfFadeUp .7s var(--ease-out, ease) both; }
.carousel-item.active .carousel-caption > *:nth-child(2) { animation-delay: .15s; }
.carousel-item.active .carousel-caption > *:nth-child(3) { animation-delay: .30s; }

/* Count-up number */
[data-counter] { display: inline-block; font-variant-numeric: tabular-nums; }

/* Gentle float for hero/CTA icons that opt in */
.bh-float { animation: cfFloat 3.5s ease-in-out infinite; }

/* Respect reduced-motion: always show content, kill entrance motion */
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .page-hero h1, .page-hero > .container > p, .page-hero .breadcrumb, .page-hero .mb-2 i,
    .carousel-item.active .carousel-caption > *, .bh-float { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BizHub identity layer
   ───────────────────────────────────────────────────────────────────────────
   BizHub is infrastructure, not a marketing agency — the page should read like
   a utility's annual report crossed with a platform site: gridded, measured,
   confident. Nothing soft, no gradients, almost no rounding.

   Gold (--bh-accent) is a MARKER, never a large fill and never body text —
   #D68F13 on white is 2.69:1 and fails WCAG AA. Use --bh-accent-ink for text.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Warm paper, never pure #fff (PP-WORKFLOW §12.7) */
    --bh-paper: #FBFAF7;
    --bh-surface-warm: #FFFFFF;
    --bh-surface-alt-warm: #EFEBE4;
    --bh-line: #E2DDD3;

    /* Gold, straight off the logo's pixel squares. 2.69:1 on white — a MARKER only.
       Anything that has to be read uses --bh-accent-ink (5.81:1). */
    --bh-accent: #D68F13;
    --bh-accent-rgb: 214, 143, 19;
    --bh-accent-ink: #8A5C0C;      /* AA-safe gold for text */
    --bh-accent-hover: #B87A0F;
    --bh-primary-ink: #02297E;     /* the brand navy already clears AAA on white */
    --bh-ink: #011C5A;             /* deep navy — dark bands, and text on gold (5.52:1) */
    --bh-ink-rgb: 1, 28, 90;

    /* A directory needs a colour that means "right now" — gold cannot carry it.
       Reserved for live states only: the Open-now pill, verified tick, Approved ribbon. */
    --bh-signal: #12B76A;
    --bh-signal-rgb: 18, 183, 106;

    --bh-font-head: 'Sora', 'Segoe UI', system-ui, sans-serif;
    --bh-font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;

    --bh-notch: 18px;
}

html[lang="bn"] {
    --bh-font-head: 'Anek Bangla', 'Hind Siliguri', 'Segoe UI', sans-serif;
    --bh-font-body: 'Hind Siliguri', 'Segoe UI', sans-serif;
}

body {
    font-family: var(--bh-font-body);
    background: var(--bh-paper);
}

h1, h2, h3, h4, h5, .bh-display {
    font-family: var(--bh-font-head);
    letter-spacing: -0.025em;
    line-height: 1.15;
}

/* Prices, stat counters and table figures must not jitter as digits change. */
.bh-num, .stat-value, .plan-price, table td, table th {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ── The mesh: the pixel-mosaic "B" of the logo, abstracted ─────────────── */
.bh-mesh {
    position: relative;
    background-image: radial-gradient(rgba(255, 255, 255, .10) 1.5px, transparent 1.6px);
    background-size: 14px 14px;
}
.bh-mesh-ink {
    background-image: radial-gradient(rgba(var(--bh-ink-rgb), .07) 1.5px, transparent 1.6px);
    background-size: 14px 14px;
}
.bh-divider-mesh {
    height: 120px;
    background-image: radial-gradient(rgba(var(--bh-ink-rgb), .06) 1.5px, transparent 1.6px);
    background-size: 14px 14px;
}

/* ── The node: a 6px gold SQUARE, never a circle ────────────────────────── */
.bh-node::before,
.bh-list li::before,
.bh-eyebrow::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--bh-accent);
    margin-right: .6rem;
    vertical-align: middle;
    flex: 0 0 auto;
}
.bh-list { list-style: none; padding-left: 0; }
.bh-list li { display: flex; align-items: flex-start; gap: .1rem; margin-bottom: .5rem; }
.bh-list li::before { margin-top: .55em; }

.bh-eyebrow {
    display: inline-flex;
    align-items: center;
    font-family: var(--bh-font-head);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bh-accent-ink);
    margin-bottom: .75rem;
}
.band--ink .bh-eyebrow { color: var(--bh-accent); }

/* Section ordinal — a gold "০৩" ahead of the eyebrow label. Numbered gap-free by
   Index.cshtml over the sections that actually render, so it stays a sequence. */
.bh-eyebrow__no {
    font-family: var(--bh-font-head);
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--bh-accent-ink);
    margin-right: .6rem;
    font-variant-numeric: tabular-nums;
}
.band--ink .bh-eyebrow__no { color: var(--bh-accent); }
.bh-eyebrow__no::after {
    content: "";
    display: inline-block;
    width: 14px; height: 1px;
    background: currentColor;
    vertical-align: middle;
    margin-left: .5rem;
    opacity: .6;
}

/* ── Pixel notch: one clipped top-right corner on every card ────────────── */
.bh-card,
.card-soft {
    position: relative;
    background: var(--bh-surface-warm);
    border: 1px solid var(--bh-line);
    border-radius: 3px;
    box-shadow: var(--shadow-sm);
    clip-path: polygon(0 0, calc(100% - var(--bh-notch)) 0, 100% var(--bh-notch), 100% 100%, 0 100%);
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), --bh-notch var(--t-base);
}
.bh-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.bh-card:hover { --bh-notch: 24px; }
/* A card resting on a dark band gets a frosted-glass treatment instead of the
   flat opaque plate below — it reads as lifted off the ink rather than pasted
   on it, echoing the same glass the header already uses. */
.band--ink .bh-card,
.band--ink .card-soft {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: rgba(255, 255, 255, .5);
}

/* Gold hairline draws in along the top edge on hover — the same marker as
   .card-soft, extended to the identity card so the whole system moves alike. */
.bh-card::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: var(--bh-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--t-base) var(--ease-out);
}
a:hover > .bh-card::after,
.bh-card:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
    .bh-card::after { transition: none; }
}

/* ── Gold underline that draws itself in on reveal ──────────────────────── */
.bh-mark {
    position: relative;
    white-space: nowrap;
}
.bh-mark::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -.12em;
    height: 3px;
    background: var(--bh-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 520ms var(--ease-out) 160ms;
}
.revealed .bh-mark::after,
.bh-mark.revealed::after { transform: scaleX(1); }
/* Headings outside the reveal system still get the underline. */
h1:not([data-reveal]) .bh-mark::after,
h2:not([data-reveal]) .bh-mark::after { transform: scaleX(1); }

/* ── Band rhythm: ink → paper → white → rule, never 3 the same in a row ── */
.band--ink { background: var(--bh-ink); color: #fff; }
.band--ink h1, .band--ink h2, .band--ink h3, .band--ink h4 { color: #fff; }
.band--paper { background: var(--bh-paper); }
.band--white { background: var(--bh-surface-warm); }
.band--rule { background: var(--bh-paper); border-top: 1px solid rgba(var(--bh-accent-rgb), .45); position: relative; }

/* Big ghosted section numerals — the single cheapest cure for the
   "three identical cards in a row" generated-template look. */
.band--rule > .container { position: relative; }
.bh-index {
    position: absolute;
    top: -.35em; left: -.06em;
    font-family: var(--bh-font-head);
    font-weight: 700;
    font-size: clamp(48px, 9vw, 96px);
    line-height: 1;
    color: rgba(var(--bh-ink-rgb), .06);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.band--rule > .container > *:not(.bh-index) { position: relative; z-index: 1; }

/* ── Act break: a hairline centred on one gold node, between the page's three
   narrative movements (Find/Proof → Offer → Company). More air than a section
   gap, so the reader feels the page change subject. ───────────────────────── */
.bh-act-break {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: clamp(1.5rem, 5vw, 3.5rem) 0;
}
.bh-act-break::before,
.bh-act-break::after {
    content: "";
    flex: 1 1 auto;
    max-width: min(38vw, 340px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--bh-line) 22%, var(--bh-line) 78%, transparent);
}
.bh-act-break > span {
    width: 7px; height: 7px;
    background: var(--bh-accent);
    margin: 0 .9rem;
    flex: 0 0 auto;
}

/* ── Progress meter (Founding 500). Gold fill only; lives on an ink band. ──── */
.bh-progress {
    height: 8px;
    background: rgba(255, 255, 255, .14);
    border-radius: 2px;
    overflow: hidden;
}
.band--paper .bh-progress,
.band--white .bh-progress { background: rgba(var(--bh-ink-rgb), .10); }
.bh-progress__bar {
    display: block;
    height: 100%;
    background: var(--bh-accent);
    border-radius: 2px;
    transition: width 900ms var(--ease-out);
}
.bh-progress__num {
    font-family: var(--bh-font-head);
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 2.9rem);
    line-height: 1;
    color: var(--bh-accent);
    font-variant-numeric: tabular-nums;
}
.band--paper .bh-progress__num,
.band--white .bh-progress__num { color: var(--bh-accent-ink); }

/* ── Gold seal — a small rotated square marker for "free / Founding 500". ──── */
.bh-seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .35rem .7rem;
    background: var(--bh-accent);
    color: var(--bh-ink);
    font-family: var(--bh-font-head);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .04em;
    transform: rotate(-2deg);
}

@media (prefers-reduced-motion: reduce) {
    .bh-progress__bar { transition: none; }
}

/* ── Buttons: squared, deliberate — a quiet lift on hover, a press on click ── */
.btn-bh-gold,
.btn-bh-ghost {
    transition: transform var(--t-fast, 150ms) var(--ease-out), box-shadow var(--t-fast, 150ms) var(--ease-out),
                background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.btn-bh-gold:hover,
.btn-bh-ghost:hover { transform: translateY(-1px); }
.btn-bh-gold:active,
.btn-bh-ghost:active { transform: translateY(0); }
.btn-bh-gold {
    background: var(--bh-accent);
    color: var(--bh-ink);
    border: 1px solid var(--bh-accent);
    border-radius: 3px;
    font-weight: 600;
}
.btn-bh-gold:hover { background: var(--bh-accent-hover); border-color: var(--bh-accent-hover); color: var(--bh-ink); box-shadow: var(--shadow-md); }
.btn-bh-ghost {
    background: transparent;
    color: var(--bh-accent);
    border: 1px solid rgba(var(--bh-accent-rgb), .7);
    border-radius: 3px;
    font-weight: 600;
}
.btn-bh-ghost:hover { background: rgba(var(--bh-accent-rgb), .12); color: var(--bh-accent); }

/* ── Status pills for ConcernStatus / CoverageStatus ────────────────────── */
.bh-status { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .25rem .55rem; border-radius: 2px; }
.bh-status--live { background: rgba(16, 185, 129, .12); color: #0a7355; }
.bh-status--upcoming { background: rgba(var(--bh-primary-rgb), .10); color: var(--bh-primary-ink); }
.bh-status--planned { background: rgba(var(--bh-ink-rgb), .08); color: var(--bh-ink); }

/* ── Motion: precise, not bouncy. 14px of travel, never 40. ─────────────────
   NOTE: site.js adds the class `revealed` (no is- prefix). Any rule here must
   use that exact name — a mismatched selector leaves every element at
   opacity:0 and ships a blank page that still returns HTTP 200 (§9.85).
   This only retunes the distance/duration of the rules defined above.
   The transition shorthand resets every sub-property it does not mention —
   including transition-delay — so the per-column stagger site.js computes
   into --reveal-delay was silently landing at 0 site-wide. Restated as its
   own longhand below so the cascade actually shows up on screen. */
[data-reveal] {
    transform: translateY(14px);
    transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
    .bh-mark::after { transform: scaleX(1) !important; }
}

/* ── Overflow safety net (PP-WORKFLOW §12.1) ────────────────────────────── */
body { overflow-x: clip; }
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
table { max-width: 100%; }
.container, .container-fluid { overflow-wrap: break-word; }
h1, h2, h3, h4, p, a, span, li { overflow-wrap: break-word; }
.navbar-brand { min-width: 0; }
.navbar-brand span { overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1199.98px) {
    .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }
}
@media (max-width: 767.98px) {
    .bh-index { font-size: 44px; opacity: .7; }
    .section, .page-hero { padding: 40px 0; }
}

/* ── Figures must never break mid-number ──────────────────────────────────
   The global `overflow-wrap: break-word` safety net (needed for long Bengali
   compounds and URLs) will happily split ৳20,00,000 into "৳20,00,00" + "0".
   Money and counters opt out and shrink instead. */
.bh-num, .ir-figure, .stat-value, .plan-price, [data-counter], [data-bn-counter] {
    overflow-wrap: normal;
    word-break: keep-all;
    white-space: nowrap;
}
.ir-figure, .plan-price {
    font-size: clamp(1.35rem, 2.4vw, 2rem);
}

/* The old .footer-actions strip is gone — the search now sits in the contact
   column and the CTA has a column of its own. Its styles lived here; the
   replacements are with the rest of the footer, above. */

/* ═══════════════════════════════════════════════════════════════════════════
   Inner-page identity — the same language as the home page, applied to the
   ~15 pages that share _PageHero and .card-soft. Written as an override block
   so the base component styles above stay intact.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page hero: flat ink + mesh, left-aligned, gold-marked last word ─────── */
.page-hero {
    background: var(--bh-ink);
    background-image: radial-gradient(rgba(255, 255, 255, .10) 1.5px, transparent 1.6px);
    background-size: 14px 14px;
    color: #fff;
    text-align: left;
    padding: 62px 0 54px;
    border-bottom: 3px solid var(--bh-accent);
}
.page-hero::before { content: none; }          /* kill the ported gradient wash */
.page-hero .page-hero-title {
    font-family: var(--bh-font-head);
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: clamp(1.75rem, 3.6vw, 2.75rem);
    color: #fff;
}
.page-hero .page-hero-sub {
    color: rgba(255, 255, 255, .72);
    max-width: 62ch;
    font-size: 1.02rem;
}
.page-hero .page-hero-icon { font-size: 3.25rem; color: rgba(255, 255, 255, .16); }
.page-hero .breadcrumb { margin: 0; font-size: .82rem; }
.page-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .35); }
.page-hero .breadcrumb a { color: var(--bh-accent); text-decoration: none; }
.page-hero .breadcrumb a:hover { text-decoration: underline; filter: none; }
.page-hero .breadcrumb-item.active { color: rgba(255, 255, 255, .6); }
/* The hero is static, so draw its underline immediately rather than on reveal. */
.page-hero .bh-mark::after { transform: scaleX(1); }

/* ── Compact hero: for pages whose content is the page ───────────────────────
   Same ink, same mesh, same gold rule — just a band instead of a billboard, so a
   stream (the feed) opens on its first item rather than on a headline announcing
   what the visitor already clicked. Roughly 240px becomes roughly 130px. */
.page-hero--compact { padding: 26px 0 24px; }
.page-hero--compact .page-hero-title { font-size: clamp(1.35rem, 2.2vw, 1.9rem); }
.page-hero--compact .page-hero-sub { font-size: .92rem; margin-top: .35rem !important; }
.page-hero--compact .breadcrumb { font-size: .78rem; margin-bottom: .25rem !important; }
.page-hero--compact .page-hero-icon { font-size: 2.25rem; }

@media (max-width: 767.98px) {
    .page-hero { padding: 40px 0 34px; }
    .page-hero .page-hero-sub { font-size: .95rem; }
    .page-hero--compact { padding: 18px 0 16px; }
    /* On a phone the subtitle is a whole extra line above the first post for a sentence
       the visitor does not need twice — the title already said it. */
    .page-hero--compact .page-hero-sub { display: none; }
}

/* ── Cards: precise hover, gold hairline on the way in ──────────────────── */
.card-soft {
    box-shadow: none;
    position: relative;
}
.card-soft::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: var(--bh-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--t-base) var(--ease-out);
}
a:hover > .card-soft::after,
.card-soft:hover::after { transform: scaleX(1); }
a:hover > .card-soft,
.card-soft:hover {
    transform: translateY(-4px);
    border-color: var(--bh-line);
    box-shadow: var(--shadow-md);
}

/* Icon tiles inside cards: a square plate, not a bare glyph */
.card-soft > .bi:first-child,
.card-soft .card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    border-radius: 3px;
    background: rgba(var(--bh-primary-rgb), .08);
    color: var(--bh-primary);
    font-size: 1.35rem !important;
    margin-bottom: .35rem;
}

/* ── Section headings get the eyebrow + rule treatment ──────────────────── */
.section > .container > .text-center > h3,
.section-title {
    font-family: var(--bh-font-head);
    letter-spacing: -0.02em;
}

/* ── Rich text from the admin editor ────────────────────────────────────── */
.rich-text > :last-child { margin-bottom: 0; }
.rich-text p { margin-bottom: .75rem; }
.rich-text ul, .rich-text ol { padding-left: 1.15rem; margin-bottom: .75rem; }
.rich-text li { margin-bottom: .3rem; }

/* ── Breathing room so short pages do not look abandoned ────────────────── */
.section { padding: clamp(3.5rem, 7.5vw, 6.75rem) 0; }
@media (max-width: 767.98px) { .section { padding: 44px 0; } }
/* First section of each narrative act gets extra headroom (set by Index.cshtml). */
.section--act-lead { padding-top: clamp(4.5rem, 9.5vw, 8.25rem); }
@media (max-width: 767.98px) { .section--act-lead { padding-top: 56px; } }

/* ══════════════════════════════════════════════════════════════════════════
   BizHub Feni — landing page
   Card-first rhythm, warm paper ground, the logo's pixel grid as the motif.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero ───────────────────────────────────────────────────────────────── */
.bhf-hero {
    position: relative;
    background: var(--bh-ink);
    color: #fff;
    padding: clamp(3rem, 7vw, 5.5rem) 0;
    overflow: hidden;
}
/* The dissolving pixel squares from the logo, at 6% so it reads as texture. */
.bhf-hero__grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(var(--bh-accent-rgb), .06) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(var(--bh-accent-rgb), .06) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: radial-gradient(120% 90% at 85% 15%, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(120% 90% at 85% 15%, #000 0%, transparent 70%);
    pointer-events: none;
}
.bhf-hero .container { position: relative; }
.bhf-hero__title {
    font-family: var(--bh-font-head);
    font-size: clamp(1.9rem, 3.9vw, 3.3rem);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -.025em;
    margin-bottom: 1rem;
    animation: cfFadeDown .7s var(--ease-out) both;
}
.bhf-hero__sub {
    font-size: clamp(.98rem, 1.2vw, 1.1rem); opacity: .88; max-width: 46ch; margin-bottom: 1.75rem;
    animation: cfFadeUp .7s var(--ease-out) .1s both;
}
.bhf-hero__cta { animation: cfFadeUp .7s var(--ease-out) .2s both; }
.bhf-hero__trust {
    display: flex; flex-wrap: wrap; gap: .6rem; font-size: .82rem;
    animation: cfFadeUp .7s var(--ease-out) .3s both;
}
.bhf-hero__trust span {
    display: inline-flex; align-items: center;
    padding: .4rem .8rem;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-pill);
}
.bhf-hero__trust i { margin-right: .35rem; color: var(--bh-accent); }
.bhf-hero__price { font-size: .82rem; opacity: .75; text-align: center; margin-top: 1rem; margin-bottom: 0; }
/* Founding-500 counter echoed in the hero — gold marker on the ink ground. */
.bhf-hero__founding {
    display: inline-flex; align-items: center; gap: .5rem;
    margin-top: 1.1rem;
    padding: .45rem .9rem .45rem .7rem;
    background: rgba(var(--bh-accent-rgb), .12);
    border: 1px solid rgba(var(--bh-accent-rgb), .35);
    border-radius: var(--radius-pill);
    font-size: .8rem; font-weight: 600; letter-spacing: .01em;
    color: var(--bh-accent);
    animation: cfFadeUp .7s var(--ease-out) .38s both;
}
.bhf-hero__founding::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bh-accent); flex: 0 0 auto;
    animation: founding-pulse 2.2s infinite;
}
@keyframes founding-pulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--bh-accent-rgb), .5); }
    70% { box-shadow: 0 0 0 8px rgba(var(--bh-accent-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--bh-accent-rgb), 0); }
}

/* The phone's stage — a soft gold glow behind it so the mockup reads as
   lifted off the ink ground rather than pasted flat onto the grid texture. */
.bhf-hero__art { position: relative; }
.bhf-hero__art::before {
    content: "";
    position: absolute;
    inset: -15% 6%;
    background: radial-gradient(closest-side, rgba(var(--bh-accent-rgb), .3), transparent 72%);
    filter: blur(36px);
    z-index: 0;
}

/* Phone frame — shows the product, not an illustration of it. */
.bhf-phone {
    position: relative;
    z-index: 1;
    width: min(260px, 78%);
    margin-inline: auto;
    border-radius: 26px;
    padding: 10px;
    background: #10131a;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    animation: cfFadeUp .8s var(--ease-out) .25s both, cfFloat 3.5s ease-in-out .8s infinite;
}
.bhf-phone__screen { border-radius: 18px; overflow: hidden; background: #fff; }
.bhf-phone__cover { height: 96px; background: linear-gradient(135deg, var(--bh-primary), var(--bh-ink)); }
.bhf-phone__body { padding: .75rem .85rem 1rem; }
.bhf-phone__name { font-weight: 700; color: var(--bh-dark); font-size: .95rem; display: flex; align-items: center; gap: .3rem; }
.bhf-phone__name i { color: var(--bh-signal); font-size: .8rem; }
.bhf-phone__meta { font-size: .72rem; color: var(--bh-muted); margin-top: .1rem; }
.bhf-phone__open {
    display: inline-flex; align-items: center; gap: .3rem; margin-top: .5rem;
    font-size: .66rem; font-weight: 700; padding: .18rem .5rem;
    border-radius: var(--radius-pill); background: var(--bh-signal); color: #fff;
}
.bhf-phone__open i { font-size: .38rem; }
.bhf-phone__actions { display: flex; gap: .4rem; margin-top: .75rem; }
.bhf-phone__actions span {
    flex: 1; display: grid; place-items: center; height: 34px;
    border-radius: var(--radius-md); background: var(--bh-surface-alt); color: var(--bh-primary);
}

/* ── Shared landing type ────────────────────────────────────────────────── */
.bhf-statement {
    font-family: var(--bh-font-head);
    font-size: clamp(1.45rem, 2.6vw, 2.25rem);
    font-weight: 700; line-height: 1.2; letter-spacing: -.02em;
    color: var(--bh-dark); margin-bottom: 1rem;
}
/* An irregular, hand-drawn-feeling underline under exactly one word per heading. */
.bhf-mark { position: relative; white-space: nowrap; }
.bhf-mark::after {
    content: ""; position: absolute; left: -2%; right: -2%; bottom: .04em; height: .38em;
    background: rgba(var(--bh-accent-rgb), .38);
    border-radius: .3em .5em .35em .45em;
    transform: rotate(-.6deg);
    z-index: -1;
}

/* ── Problem facts ──────────────────────────────────────────────────────── */
.bhf-facts { display: grid; gap: .75rem; }
.bhf-fact { background: #fff; border: 1px solid var(--bh-border); border-radius: var(--radius-lg); padding: 1rem 1.15rem; }
.bhf-fact--accent { border-color: rgba(var(--bh-accent-rgb), .5); background: rgba(var(--bh-accent-rgb), .05); }
.bhf-fact__num { font-family: var(--bh-font-head); font-size: 1.35rem; font-weight: 700; color: var(--bh-primary); }
.bhf-fact--accent .bhf-fact__num { color: var(--bh-accent-ink); }
.bhf-fact__label { font-size: .84rem; color: var(--bh-muted); }

/* ── Free-setup checklist ───────────────────────────────────────────────── */
.bhf-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.bhf-checklist li {
    display: flex; align-items: center; gap: .75rem;
    background: #fff; border: 1px solid var(--bh-border);
    border-radius: var(--radius-md); padding: .7rem .95rem; font-weight: 500;
}
.bhf-checklist__tick { color: var(--bh-signal); font-size: 1.1rem; }
.bhf-checklist__icon { color: var(--bh-muted); }
@media (min-width: 576px) { .bhf-checklist { grid-template-columns: 1fr 1fr; } }

.bhf-slots { display: flex; align-items: baseline; gap: .5rem; margin-top: 1.25rem; }
.bhf-slots__num { font-family: var(--bh-font-head); font-size: 2.4rem; font-weight: 800; color: var(--bh-accent-ink); line-height: 1; }
.bhf-slots__label { font-size: .85rem; color: var(--bh-muted); }

/* ── Score quiz + dial ──────────────────────────────────────────────────── */
.bhf-quiz { display: grid; gap: .5rem; }
.bhf-quiz__row { display: flex; align-items: center; gap: .75rem; cursor: pointer;
                 background: #fff; border: 1px solid var(--bh-border);
                 border-radius: var(--radius-md); padding: .7rem .95rem; }
.bhf-quiz__input { position: absolute; opacity: 0; width: 0; height: 0; }
.bhf-quiz__box { width: 24px; height: 24px; flex-shrink: 0; display: grid; place-items: center;
                 border: 2px solid var(--bh-border-strong); border-radius: var(--radius-sm);
                 color: transparent; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.bhf-quiz__input:checked + .bhf-quiz__box { background: var(--bh-signal); border-color: var(--bh-signal); color: #fff; }
.bhf-quiz__input:focus-visible + .bhf-quiz__box { outline: 3px solid rgba(var(--bh-primary-rgb), .35); outline-offset: 2px; }
.bhf-quiz__text { font-size: .9rem; }

.bhf-dial-wrap { position: relative; width: min(240px, 70%); margin-inline: auto; }
.bhf-dial { width: 100%; transform: rotate(-90deg); }
.bhf-dial__track { fill: none; stroke: var(--bh-border); stroke-width: 14; }
.bhf-dial__value { fill: none; stroke: var(--bh-primary); stroke-width: 14; stroke-linecap: round;
                   transition: stroke-dashoffset 600ms var(--ease-out); }
.bhf-dial__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.bhf-dial__num { font-family: var(--bh-font-head); font-size: 3rem; font-weight: 800; line-height: 1; color: var(--bh-dark); }
.bhf-dial__of { font-size: .74rem; color: var(--bh-muted); }

@media (prefers-reduced-motion: reduce) {
    .bhf-dial__value { transition: none; }
    .bhf-quiz__box { transition: none; }
}

/* ── Businesses scroller + community tiles ──────────────────────────────── */
.bhf-scroller {
    display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .75rem;
    scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.bhf-scroller__item { flex: 0 0 min(268px, 74vw); scroll-snap-align: start; }

/* Business card — shared by the directory, the landing scroller, locality pages
   and the related strip on a profile, so it lives here rather than in one view. */
.biz-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--bh-border);
            border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; height: 100%;
            transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); }
.biz-card:hover, .biz-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
/* Gold hairline draws in on hover — matches .bh-card / .card-soft. */
.biz-card::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2;
    background: var(--bh-accent);
    transform: scaleX(0); transform-origin: left center;
    transition: transform var(--t-base) var(--ease-out);
}
.biz-card:hover::after, .biz-card:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .biz-card::after { transition: none; } }
.biz-card__media { position: relative; aspect-ratio: 16/10; background: var(--bh-surface-alt); overflow: hidden; }
.biz-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.biz-card:hover .biz-card__media img { transform: scale(1.03); }
.biz-card__placeholder { position: absolute; inset: 0; display: grid; place-items: center;
                         font-size: 2rem; color: var(--bh-border-strong); }
.biz-card__pill { position: absolute; top: .5rem; left: .5rem; display: inline-flex; align-items: center; gap: .3rem;
                  font-size: .68rem; font-weight: 700; padding: .2rem .5rem; border-radius: var(--radius-pill); }
.biz-card__pill--open { background: var(--bh-signal); color: #fff; }
.biz-card__pill--open i { font-size: .4rem; }
.biz-card__pill--founding { top: auto; bottom: .5rem; background: var(--bh-accent); color: var(--bh-ink); }
/* Featured — gold, top-right, so it never collides with the open-now / founding pills. */
.biz-card__pill--featured { left: auto; right: .5rem; background: var(--bh-accent); color: var(--bh-ink); }
.biz-card__pill--featured i { font-size: .62rem; }
.biz-card__body { padding: .85rem 1rem 1rem; }
.biz-card__title { font-weight: 700; color: var(--bh-dark); display: flex; align-items: center; gap: .35rem; }
.biz-card__meta { display: flex; gap: .75rem; flex-wrap: wrap; font-size: .78rem; color: var(--bh-muted); margin-top: .25rem; }
.biz-card__meta i { margin-right: .2rem; }
.biz-card__rating { font-size: .8rem; margin-top: .4rem; color: var(--bh-accent-ink); font-weight: 600; }

.bhf-cmm-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .5rem; height: 100%; min-height: 108px; text-align: center; text-decoration: none;
    background: #fff; border: 1px solid var(--bh-border); border-radius: var(--radius-lg);
    padding: 1rem .75rem; color: var(--bh-dark); font-weight: 600; font-size: .86rem;
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.bhf-cmm-tile:hover, .bhf-cmm-tile:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--bh-primary); }
.bhf-cmm-tile i { font-size: 1.5rem; color: var(--bh-primary); }

@media (prefers-reduced-motion: reduce) {
    .biz-card, .biz-card__media img { transition: none; }
    .biz-card:hover { transform: none; }
    .biz-card:hover .biz-card__media img { transform: none; }
    .bhf-cmm-tile { transition: none; }
    .bhf-cmm-tile:hover { transform: none; }
}

/* ── Lightbox ───────────────────────────────────────────────────────────────
   Photos open over the page instead of in a new tab, so the reader never loses
   the listing they were reading. See wwwroot/template/js/lightbox.js. */
.lightbox {
    position: fixed; inset: 0; z-index: 1080;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    background: rgba(1, 28, 90, .92); padding: 1rem;
    animation: lightbox-in var(--t-fast) var(--ease-out);
}
.lightbox[hidden] { display: none; }
.lightbox__figure { margin: 0; max-width: min(1100px, 100%); text-align: center; }
.lightbox__img {
    max-width: 100%; max-height: 82vh; width: auto; height: auto;
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg); background: #fff;
}
.lightbox__caption { color: rgba(255, 255, 255, .82); font-size: .84rem; margin-top: .65rem; }
.lightbox__close, .lightbox__nav {
    background: rgba(255, 255, 255, .12); color: #fff; border: 0; border-radius: 50%;
    width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; cursor: pointer;
    display: grid; place-content: center; flex: 0 0 auto;
    transition: background var(--t-fast) var(--ease-out);
}
.lightbox__close:hover, .lightbox__nav:hover,
.lightbox__close:focus-visible, .lightbox__nav:focus-visible { background: rgba(255, 255, 255, .26); }
.lightbox__close { position: absolute; top: 1rem; right: 1rem; }
.lightbox__nav[hidden] { display: none; }

@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 575.98px) {
    .lightbox__nav { position: absolute; bottom: 1rem; }
    .lightbox__nav--prev { left: 1rem; }
    .lightbox__nav--next { right: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .lightbox { animation: none; }
    .lightbox__close, .lightbox__nav { transition: none; }
}

/* ── Business profile: channels + embedded map ──────────────────────────── */
.biz-social { display: flex; flex-wrap: wrap; gap: .5rem; }
.biz-social a {
    display: grid; place-content: center; width: 42px; height: 42px;
    border-radius: var(--radius-md); border: 1px solid var(--bh-border);
    background: #fff; color: var(--bh-dark); font-size: 1.15rem; text-decoration: none;
    transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.biz-social a:hover, .biz-social a:focus-visible { transform: translateY(-2px); border-color: currentColor; }
.biz-social a[data-ch="facebook"]:hover { color: #1877F2; }
.biz-social a[data-ch="instagram"]:hover { color: #E1306C; }
.biz-social a[data-ch="youtube"]:hover { color: #FF0000; }
.biz-social a[data-ch="linkedin"]:hover { color: #0A66C2; }
.biz-social a[data-ch="tiktok"]:hover { color: #000; }
.biz-social a[data-ch="google"]:hover { color: #4285F4; }
.biz-social a[data-ch="website"]:hover { color: var(--bh-primary); }

.biz-map { position: relative; aspect-ratio: 16/10; border-radius: var(--radius-md); overflow: hidden; background: var(--bh-surface-alt); }
.biz-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (prefers-reduced-motion: reduce) {
    .biz-social a { transition: none; }
    .biz-social a:hover { transform: none; }
}

/* ── Stories ────────────────────────────────────────────────────────────────
   A rail of live stories and the viewer that plays them. Nothing renders at all
   when no story is live — see Views/Shared/_StoryRail.cshtml. */
.story-rail {
    display: flex; gap: .85rem; overflow-x: auto; padding: .25rem .25rem 1rem;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.story-rail__item {
    flex: 0 0 auto; width: 76px; background: none; border: 0; padding: 0;
    display: flex; flex-direction: column; align-items: center; gap: .35rem; cursor: pointer;
}
.story-rail__ring {
    width: 66px; height: 66px; border-radius: 50%; display: grid; place-content: center;
    background: conic-gradient(from 210deg, var(--bh-accent), var(--bh-primary), var(--bh-accent));
    padding: 3px; overflow: hidden;
    transition: transform var(--t-fast) var(--ease-out);
}
.story-rail__item:hover .story-rail__ring,
.story-rail__item:focus-visible .story-rail__ring { transform: scale(1.05); }
.story-rail__item.is-seen .story-rail__ring { background: var(--bh-border); }
.story-rail__ring > img,
.story-rail__initial {
    width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
    background: #fff; border: 2px solid #fff;
    display: grid; place-content: center;
    font-weight: 700; color: var(--bh-primary); font-size: 1.3rem;
}
.story-rail__name {
    font-size: .7rem; font-weight: 600; color: var(--bh-dark); max-width: 76px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
}

.story-view {
    position: fixed; inset: 0; z-index: 1090; background: #05070d;
    display: grid; grid-template-rows: auto auto 1fr auto; overscroll-behavior: contain;
}
.story-view[hidden] { display: none; }
.story-view__bars { display: flex; gap: 4px; padding: .75rem 1rem .25rem; }
.story-view__bar { flex: 1 1 0; height: 3px; border-radius: 2px; background: rgba(255,255,255,.28); overflow: hidden; }
.story-view__bar > i { display: block; height: 100%; width: 0; background: #fff; }
.story-view__head { display: flex; align-items: center; gap: .6rem; padding: .35rem 1rem .75rem; color: #fff; }
.story-view__avatar {
    width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
    background: rgba(255,255,255,.18); display: grid; place-content: center;
    font-weight: 700; font-size: .95rem;
}
.story-view__avatar img { width: 100%; height: 100%; object-fit: cover; }
.story-view__who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.story-view__name { color: #fff; font-weight: 600; font-size: .9rem; text-decoration: none; }
.story-view__name:hover { text-decoration: underline; color: #fff; }
.story-view__ago { color: rgba(255,255,255,.62); font-size: .72rem; }
.story-view__close {
    margin-left: auto; background: rgba(255,255,255,.12); border: 0; color: #fff;
    width: 38px; height: 38px; border-radius: 50%; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.story-view__stage {
    position: relative; display: grid; place-items: center; overflow: hidden;
    padding: 1.25rem; transition: background var(--t-fast) var(--ease-out);
}
.story-view__img { max-width: 100%; max-height: 100%; object-fit: contain; }
.story-view__text {
    color: #fff; font-size: 1.35rem; font-weight: 600; line-height: 1.65; text-align: center;
    max-width: 34rem; margin: 0; word-break: break-word;
}
/* Over a photo the words need their own ground or they vanish into a bright sky. */
.story-view__text--over {
    position: absolute; left: 1rem; right: 1rem; bottom: 1.25rem;
    font-size: 1rem; background: rgba(5,7,13,.68); padding: .75rem 1rem;
    border-radius: var(--radius-md); backdrop-filter: blur(2px);
}
.story-view__tap {
    position: absolute; top: 0; bottom: 0; width: 34%; border: 0; background: transparent;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.story-view__tap--prev { left: 0; }
.story-view__tap--next { right: 0; width: 66%; }
.story-view__visit {
    justify-self: center; margin: 0 0 1.35rem; color: #fff; font-weight: 600; font-size: .9rem;
    text-decoration: none; background: rgba(255,255,255,.14); padding: .6rem 1.35rem;
    border-radius: var(--radius-pill); position: relative; z-index: 2;
}
.story-view__visit:hover { background: rgba(255,255,255,.24); color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .story-rail__ring, .story-view__stage { transition: none; }
    .story-view__bar > i { transition: none !important; }
}

/* ===== Plan price lock / unlock (pricing cards on the home page and /plans) =====
   Gif Service and Starter hide their price behind an Unlock click; every other tier
   never shows a price at all, just a padlock. See Helpers/PlanPricingHelper.cs. */
.plan-price-lock { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.plan-unlock-btn { display: inline-flex; align-items: center; gap: .35rem; }
.plan-unlock-btn--matrix { font-size: .68rem; padding: .2rem .5rem; margin-top: .3rem; }
.plan-locked {
    display: flex; align-items: center; gap: .4rem;
    color: var(--bh-muted, #5c6478); font-size: .85rem; padding: .2rem 0;
}
.plan-locked--matrix { display: block; font-size: .68rem; font-weight: 600; opacity: .85; margin-top: .3rem; }
[data-plan-price-reveal] { animation: planPriceIn .25s var(--ease-out, ease-out); }
@keyframes planPriceIn {
    from { opacity: 0; transform: translateY(-2px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    [data-plan-price-reveal] { animation: none; }
}