/*
 * Best Lift — main.css
 * Purpose: Shared layout + all public pages (header, footer, nav, page sections)
 * Phase ref: Phase 1-3
 *
 * Raw/vanilla CSS, no utility framework (Section 2: Styling Approach).
 * Mobile-first: base styles target mobile, breakpoints add tablet/desktop.
 */

/* ---------------------------------------------------------------------
 * Reset & base
 * ------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text-body);
    background: var(--color-bg-white);
}

body.lang-bn {
    font-family: var(--font-family-bn);
}

h1, h2, h3, h4 {
    color: var(--color-text-heading);
    line-height: var(--line-height-heading);
    margin: 0 0 var(--space-sm);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }

p { margin: 0 0 var(--space-sm); }

a {
    color: var(--color-primary);
    text-decoration: none;
}

img { max-width: 100%; display: block; }

ul { margin: 0; padding: 0; list-style: none; }

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--space-sm);
}

/* ---------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------- */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-align: center;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.btn:hover { transform: translateY(-2px); }

.btn--primary {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
}

.btn--accent {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    outline: none;
    box-shadow: none;
}

.btn--accent:focus,
.btn--accent:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(15, 130, 71, 0.35); /* soft green focus ring instead of browser default */
}

/* ---------------------------------------------------------------------
 * Header & nav
 * ------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--color-bg-white);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.25s ease;
}

/* main.js adds this once window.scrollY passes a small threshold —
   gives the sticky header a slightly stronger shadow once content
   is scrolling underneath it. */
.site-header.is-scrolled {
    box-shadow: var(--shadow-md);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs);
}

.site-nav__list {
    display: none; /* hidden on mobile — hamburger menu wired up in main.js */
    gap: var(--space-md);
}

.site-nav__list li a {
    color: var(--color-text-heading);
    font-weight: 500;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Mobile hamburger toggle — main.js injects this button into
   .site-header__inner (right before .site-header__actions) and
   toggles .site-nav.is-open. Only shown below the 1024px
   breakpoint where .site-nav__list is display:none by default. */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: var(--space-xs);
    background: transparent;
    border: none;
    cursor: pointer;
    order: 2;
}

.nav-toggle__bar {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-primary);
    border-radius: var(--radius-sm);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle.is-active .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-active .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-active .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Scroll lock while the mobile nav drawer is open (main.js adds this
   class to <body> alongside .site-nav.is-open). */
body.nav-open {
    overflow: hidden;
}

.lang-toggle {
    font-weight: 600;
    color: var(--color-primary);
}

/* ---------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------- */
.hero {
    position: relative;
    background: var(--color-midnight);
    color: var(--color-text-on-primary);
    overflow: hidden;
    --hero-parallax-offset: 0px; /* set by animations.js on scroll */
}

.hero__slide {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: flex-end;
}

/* When index.php renders the dynamic slider (multiple DB slides), the
   slides live inside .hero__slider and need to stack for crossfade.
   The single static fallback hero__slide (no .hero__slider wrapper) is
   untouched by this rule and keeps its normal flow layout above. */
.hero__slider {
    position: relative;
    min-height: 60vh;
}

.hero__slider .hero__slide {
    position: absolute;
    inset: 0;
    min-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease;
}

.hero__slider .hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.hero__slide-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
    transform: translateY(var(--hero-parallax-offset));
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .hero__slide-image {
        transform: none;
    }
}

.hero__slide-content {
    position: relative;
    z-index: 1;
    padding: var(--space-lg) var(--space-sm);
    max-width: 700px;
}

.hero__slide-content h1 {
    color: var(--color-text-on-primary);
}

.hero__maintenance-badge {
    position: relative;
    z-index: 1;
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    padding: var(--space-sm);
    text-align: center;
    font-size: var(--font-size-sm);
}

/* ---------------------------------------------------------------------
 * Product highlights
 * ------------------------------------------------------------------- */
.product-highlights {
    padding: var(--space-xl) 0;
    text-align: center;
}

.product-highlights__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin: var(--space-lg) 0;
    text-align: left;
}

.product-highlights__card {
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

/* ---------------------------------------------------------------------
 * Consultation banner
 * ------------------------------------------------------------------- */
.consultation-banner {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    padding: var(--space-xl) 0;
    text-align: center;
}

.consultation-banner h2 {
    color: var(--color-text-on-primary);
}

/* ---------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------- */
.site-footer {
    background: var(--color-midnight);
    color: var(--color-bg-light);
    padding-top: var(--space-xl);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    padding-bottom: var(--space-lg);
}

.site-footer h4 {
    color: var(--color-bg-white);
}

.site-footer a {
    color: var(--color-bg-light);
}

.site-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--space-sm) var(--space-sm);
    font-size: var(--font-size-sm);
    text-align: center;
}

/* ---------------------------------------------------------------------
 * WhatsApp floating widget
 * ------------------------------------------------------------------- */
.whatsapp-widget {
    position: fixed;
    right: var(--space-sm);
    bottom: var(--space-sm);
    z-index: var(--z-whatsapp-widget);
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    font-weight: 600;
}

/* ---------------------------------------------------------------------
 * Blog (task 3.3) — listing grid, cards, pagination, single post
 * ------------------------------------------------------------------- */
.blog-listing {
    padding: var(--space-xl) 0;
}

.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin: var(--space-lg) 0;
}

.blog-card {
    display: block;
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    color: inherit;
}

.blog-card__image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.blog-card__body {
    padding: var(--space-sm);
}

.blog-card__body h2 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-xs);
}

.blog-card__meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-body);
    margin: 0;
}

.blog-pagination {
    display: flex;
    gap: var(--space-xs);
    justify-content: center;
    margin-top: var(--space-lg);
}

.blog-pagination__link {
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-sm);
    background: var(--color-bg-light);
    font-weight: 600;
}

.blog-pagination__link.is-active {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
}

.blog-post,
.blog-post-not-found {
    padding: var(--space-xl) 0;
    max-width: 780px;
}

.blog-post__meta {
    color: var(--color-text-body);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-md);
}

.blog-post__image {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

.blog-post__content {
    line-height: var(--line-height-base);
}

.blog-post__content p {
    margin-bottom: var(--space-sm);
}

/* ---------------------------------------------------------------------
 * Products (task 3.7) — listing, category filter, before/after
 * comparison slider
 * ------------------------------------------------------------------- */
.product-listing {
    padding: var(--space-xl) 0;
}

.product-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin: var(--space-md) 0 var(--space-lg);
}

.product-filter__link {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--color-bg-light);
    font-weight: 600;
    font-size: var(--font-size-sm);
}

.product-filter__link.is-active {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
}

.product-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

.product-card {
    display: block;
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    color: inherit;
}

.product-card__image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.product-card__body {
    padding: var(--space-sm);
}

.product-card__body h2 {
    font-size: var(--font-size-lg);
    margin: var(--space-xs) 0;
}

.product-badge {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    border-radius: var(--radius-sm);
    padding: 2px 10px;
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.product-detail {
    padding: var(--space-xl) 0;
    max-width: 900px;
}

.product-detail__body {
    margin-top: var(--space-lg);
}

/* Before/After comparison slider — see main.js's initBeforeAfterSliders() */
.before-after {
    margin: var(--space-md) 0;
}

.before-after__frame {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.before-after__base {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.before-after__overlay {
    position: absolute;
    inset: 0;
}

.before-after__divider {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--color-bg-white);
    transform: translateX(-50%);
    pointer-events: none;
}

.before-after__label {
    position: absolute;
    top: var(--space-xs);
    background: rgba(13, 2, 26, 0.6);
    color: var(--color-bg-white);
    padding: 2px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    pointer-events: none;
}

.before-after__label--before {
    left: var(--space-xs);
}

.before-after__label--after {
    right: var(--space-xs);
}

.before-after__slider {
    width: 100%;
    margin-top: var(--space-xs);
}

/* ---------------------------------------------------------------------
 * Breakpoints
 * ------------------------------------------------------------------- */
@media (min-width: 768px) {
    .product-highlights__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .site-footer__inner {
        grid-template-columns: repeat(2, 1fr);
    }

    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .site-nav__list {
        display: flex;
    }

    .product-highlights__grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .site-footer__inner {
        grid-template-columns: repeat(5, 1fr);
    }

    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* ---------------------------------------------------------------------
 * About Us (task 3.13)
 * ------------------------------------------------------------------- */
.about-hero {
    padding: var(--space-xl) 0 var(--space-lg);
    background: var(--color-bg-light);
    text-align: center;
}

.about-hero__lede {
    max-width: 680px;
    margin: 0 auto;
}

.about-overview {
    padding: var(--space-xl) 0;
}

.about-overview__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

.about-badges {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.about-badges__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
}

.about-badges__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
}

@media (min-width: 768px) {
    .about-overview__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---------------------------------------------------------------------
 * Legal pages — Privacy Policy / Terms of Service (task 3.14)
 * ------------------------------------------------------------------- */
.legal-page {
    padding: var(--space-xl) 0;
}

.legal-page__inner {
    max-width: 780px;
}

.legal-page__updated {
    color: var(--color-text-body);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-lg);
}

.legal-page h2 {
    margin-top: var(--space-lg);
}

/* ---------------------------------------------------------------------
 * Projects (task 3.11) — hero, search filter, map + gallery layout
 * ------------------------------------------------------------------- */
.projects-hero {
    padding: var(--space-xl) 0 var(--space-lg);
    background: var(--color-bg-light);
    text-align: center;
}

.projects-listing {
    padding: var(--space-lg) 0 var(--space-xl);
}

.projects-filter {
    margin-bottom: var(--space-md);
}

.projects-filter__input {
    width: 100%;
    max-width: 420px;
    padding: 0.6rem 0.9rem;
    border: 1px solid #d9d9d9;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--font-size-base);
}

.projects-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

.projects-map {
    height: 320px;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.projects-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

.project-card {
    display: block;
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}

.project-card:hover {
    box-shadow: var(--shadow-md);
}

.project-card__image {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.project-card__body {
    padding: var(--space-sm);
}

.project-card__body h2 {
    font-size: var(--font-size-lg);
    margin-bottom: 4px;
}

.project-card__location {
    font-size: var(--font-size-sm);
    color: var(--color-text-body);
    margin-bottom: var(--space-xs);
}

.project-card__desc {
    font-size: var(--font-size-sm);
    margin-bottom: 0;
}

.projects-empty {
    text-align: center;
    padding: var(--space-lg) 0;
    color: var(--color-text-body);
}

@media (min-width: 768px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .projects-layout {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .projects-map {
        height: 560px;
        position: sticky;
        top: calc(var(--space-md) + 72px); /* clears the sticky site-header */
    }

    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        max-height: 560px;
        overflow-y: auto;
        padding-right: 4px;
    }
}

/* ---------------------------------------------------------------------
 * Floating WhatsApp & Emergency widget (task 5.5)
 * Two-button upgrade of the Phase 2 single .whatsapp-widget button.
 * Stacks vertically bottom-right, clear of the Digital Elevator Control
 * Panel (which owns the bottom bar on mobile / right-edge sidebar on
 * desktop — this widget sits further down/inset so the two never overlap).
 * ------------------------------------------------------------------- */
.emergency-widget {
    position: fixed;
    right: var(--space-sm);
    bottom: var(--space-sm);
    z-index: var(--z-whatsapp-widget);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    align-items: flex-end;
}

.emergency-widget__btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.65rem 1rem;
    border-radius: var(--radius-lg);
    font-weight: 700;
    font-size: var(--font-size-sm);
    box-shadow: var(--shadow-md);
    transition: transform 0.15s ease;
}

.emergency-widget__btn:hover {
    transform: translateY(-2px);
}

.emergency-widget__btn--whatsapp {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
}

.emergency-widget__btn--emergency {
    background: var(--color-danger);
    color: #FFFFFF;
}

.emergency-widget__icon {
    font-size: 1.1rem;
    line-height: 1;
}

/* On small screens, the Digital Elevator Control Panel takes the bottom
   bar — nudge this widget up so it floats above it instead of overlapping. */
@media (max-width: 1023px) {
    .emergency-widget {
        bottom: calc(var(--space-sm) + 56px);
    }
}
/* ---------------------------------------------------------------------
 * 404 Page (task 7.6)
 * Reuses .container / .btn / .btn--accent / .btn--outline already
 * defined above — only the page-specific layout is new here.
 * ------------------------------------------------------------------- */
.error-page__hero {
    min-height: 60vh;
    display: flex;
    align-items: center;
    padding: var(--space-xl) 0;
}

.error-page__inner {
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
}

.error-page__code {
    font-size: 5rem;
    font-weight: 800;
    line-height: 1;
    margin: 0 0 var(--space-xs);
    color: var(--color-accent);
    letter-spacing: -0.02em;
}

.error-page__lede {
    color: var(--color-text-body);
    margin-bottom: var(--space-lg);
}

.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    margin-bottom: var(--space-lg);
}

.error-page__links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    justify-content: center;
    padding: 0;
    margin: 0;
    font-size: var(--font-size-sm);
}

.error-page__links a {
    color: var(--color-primary);
    font-weight: 600;
}

/* =====================================================================
 * v37 CLASSIC — Header + Footer (replaces the bolder v36 block)
 * Flat surfaces, thin borders, serif footer headings, underline hovers.
 * NOTE: keep .site-header free of backdrop-filter / transform /
 * perspective — they would break the fixed mobile nav drawer.
 * ===================================================================== */

:root {
    --font-family-nav: 'Montserrat', 'Inter', system-ui, -apple-system, sans-serif;
}

/* Bangla pages: Montserrat has no Bengali glyphs, use the Bangla stack */
body.lang-bn .topbar,
body.lang-bn .site-nav__list li a,
body.lang-bn .lang-toggle {
    font-family: var(--font-family-bn);
}

/* ---------- Top info bar ---------- */
.topbar {
    background: var(--color-midnight);
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-family-nav);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
}

.topbar__msg {
    font-weight: 500;
}

.topbar__links {
    display: none;
}

.topbar__links a {
    color: inherit;
    transition: color 0.2s ease;
}

.topbar__links a:hover,
.topbar__links a:focus-visible {
    color: #8FE0B5;
}

.topbar__links a + a {
    margin-left: var(--space-sm);
    padding-left: var(--space-sm);
    border-left: 1px solid rgba(255, 255, 255, 0.25);
}

@media (min-width: 768px) {
    .topbar__inner { justify-content: space-between; }
    .topbar__links { display: flex; align-items: center; }
}

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: linear-gradient(180deg, #FFFFFF 0%, #FAF6FD 100%);
    border-bottom: 1px solid #E6DDEC;
    box-shadow: inset 0 1px 0 #FFFFFF, 0 6px 18px rgba(13, 2, 26, 0.10), 0 1px 3px rgba(13, 2, 26, 0.08);
    transition: box-shadow 0.3s ease;
}

.site-header.is-scrolled {
    box-shadow: inset 0 1px 0 #FFFFFF, 0 10px 26px rgba(13, 2, 26, 0.16), 0 2px 5px rgba(13, 2, 26, 0.10);
}

.site-header__progress {          /* thin scroll-progress line */
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--color-accent);
    transform-origin: left center;
    transform: scaleX(var(--scroll-progress, 0));
}

.site-header__inner {
    min-height: 78px;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    transition: min-height 0.3s ease;
}

.site-header.is-scrolled .site-header__inner {
    min-height: 64px;
}

.site-header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-header__logo img {
    height: 70px;
    width: auto;
    max-width: none;
    display: block;
    object-fit: contain;
    transition: height 0.3s ease, opacity 0.2s ease;
}

.site-header.is-scrolled .site-header__logo img {
    height: 56px;
}

.site-header__logo:hover img {
    opacity: 0.85;
}

/* ---------- Nav: underline on hover ---------- */
.site-nav__list {
    gap: var(--space-md);
}

.site-nav__list li a {
    position: relative;
    display: block;
    padding: 0.5rem 0.1rem;
    font-family: var(--font-family-nav);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-heading);
    text-shadow: 0 1px 0 #FFFFFF, 0 2px 4px rgba(75, 0, 114, 0.18);
    transition: color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
}

.site-nav__list li a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    box-shadow: 0 3px 6px rgba(75, 0, 114, 0.35);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s ease;
}

.site-nav__list li a:hover,
.site-nav__list li a:focus-visible,
.site-nav__list li a.is-current {
    color: var(--color-primary);
}

.site-nav__list li a:hover,
.site-nav__list li a:focus-visible {
    transform: translateY(-2px);
    text-shadow: 0 1px 0 #FFFFFF, 0 4px 8px rgba(75, 0, 114, 0.30);
}

.site-nav__list li a:hover::after,
.site-nav__list li a:focus-visible::after,
.site-nav__list li a.is-current::after {
    transform: scaleX(1);
}

/* ---------- Language button: simple outline ---------- */
.lang-toggle {
    display: inline-block;
    padding: 0.4rem 1rem;
    border: 1.5px solid var(--color-primary);
    border-radius: 4px;
    font-family: var(--font-family-nav);
    font-weight: 700;
    color: var(--color-primary);
    background: #FFFFFF;
    box-shadow: 0 3px 0 rgba(75, 0, 114, 0.22), 0 6px 12px rgba(75, 0, 114, 0.14);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.lang-toggle:hover,
.lang-toggle:focus-visible {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    transform: translateY(-2px);
    box-shadow: 0 5px 0 #2E0045, 0 10px 18px rgba(75, 0, 114, 0.30);
}

.lang-toggle:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #2E0045;
}

/* ---------- Mobile hamburger + drawer ---------- */
.nav-toggle {
    width: 42px;
    height: 42px;
    border: 1px solid #D9CFE0;
    border-radius: 6px;
    background: var(--color-bg-white);
}

@media (max-width: 767px) {
    .topbar { font-size: 0.72rem; }
    .site-header__inner { min-height: 64px; }
    .site-header.is-scrolled .site-header__inner { min-height: 56px; }
    .site-header__logo img { height: 52px; }
    .site-header.is-scrolled .site-header__logo img { height: 46px; }
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--color-midnight);
    color: rgba(248, 249, 250, 0.78);
    padding-top: var(--space-xl);
    border-top: 3px solid var(--color-accent);
}

.site-footer__inner {
    gap: var(--space-lg);
    padding-bottom: var(--space-lg);
}

@media (min-width: 1024px) {
    .site-footer__inner {
        grid-template-columns: 1.5fr 1fr 1fr 1fr 1.4fr;
    }
}

.site-footer a {
    color: rgba(248, 249, 250, 0.78);
    transition: color 0.2s ease;
}

.site-footer a:hover,
.site-footer a:focus-visible {
    color: #8FE0B5;
}

.site-footer h4 {
    margin-bottom: var(--space-sm);
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-bg-white);
}

.site-footer__col {
    min-width: 0;
}

/* Brand column: logo sits on a plain white panel so purple stays readable */
.site-footer__logo {
    display: inline-block;
    margin-bottom: var(--space-sm);
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--color-bg-white);
}

.site-footer__logo img {
    height: 76px;
    width: auto;
    display: block;
}

.site-footer__badges {
    margin-top: var(--space-sm);
    display: grid;
    gap: 0.35rem;
    font-size: 0.85rem;
}

.site-footer__badges li {
    color: #8FE0B5;
}

.site-footer__badges li::before {
    content: "✓";
    margin-right: 0.5rem;
    font-weight: 700;
}

/* Link lists */
.site-footer__links li a {
    display: inline-block;
    padding: 0.25rem 0;
    transition: color 0.2s ease, transform 0.2s ease;
}

.site-footer__links li a:hover,
.site-footer__links li a:focus-visible {
    transform: translateX(4px);
}

/* Contact column */
.site-footer__contact {
    font-style: normal;
    display: grid;
    gap: 0.75rem;
}

.site-footer__contact > div {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    overflow-wrap: anywhere;
}

.site-footer__contact svg {
    flex-shrink: 0;
    margin-top: 0.2rem;
    color: #8FE0B5;
}

/* Bottom bar */
.site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.85rem;
    text-align: left;
}

.site-footer__bottom p {
    margin: 0;
}

.elevator-up-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    background: transparent;
    color: rgba(248, 249, 250, 0.9);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.elevator-up-btn:hover,
.elevator-up-btn:focus-visible {
    background: var(--color-bg-white);
    border-color: var(--color-bg-white);
    color: var(--color-primary);
}

@media (max-width: 767px) {
    .site-footer__bottom { justify-content: center; text-align: center; }
    .site-footer__logo img { height: 64px; }
}

/* =====================================================================
 * v39 SIZE POLISH — final sizing pass for header + footer.
 * Kept as the LAST block on purpose: it overrides earlier values, and its
 * own mobile rules sit at the very end so they beat the desktop ones above.
 * ===================================================================== */

/* ---------- Header ---------- */
.topbar { font-size: 0.8rem; }
.topbar__inner { min-height: 36px; }

.site-header__inner { min-height: 92px; }
.site-header.is-scrolled .site-header__inner { min-height: 68px; }

.site-header__logo img { height: 84px; }
.site-header.is-scrolled .site-header__logo img { height: 62px; }

.lang-toggle {
    font-size: 0.9rem;
    padding: 0.5rem 1.15rem;
}

/* Narrow desktops (1024–1279px): tighten nav so logo + 6 links + button fit */
@media (min-width: 1024px) and (max-width: 1279px) {
    .site-nav__list { gap: 1.1rem; }
    .site-nav__list li a { font-size: 0.82rem; letter-spacing: 0.05em; }
    .site-header__logo img { height: 72px; }
    .site-header.is-scrolled .site-header__logo img { height: 58px; }
}

/* ---------- Footer ---------- */
.site-footer { padding-top: 4.5rem; }

.site-footer__logo { padding: 10px 14px; }
.site-footer__logo img { height: 96px; }

.site-footer__col p {
    font-size: 0.95rem;
    line-height: 1.75;
}

.site-footer h4 {
    margin-bottom: 1.1rem;
    font-size: 1.1rem;
}

.site-footer__links li a {
    padding: 0.32rem 0;
    font-size: 0.95rem;
}

.site-footer__contact {
    gap: 0.9rem;
    font-size: 0.95rem;
}

.site-footer__badges { font-size: 0.88rem; }

.site-footer__bottom {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
    font-size: 0.88rem;
}

.elevator-up-btn {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

/* ---------- Mobile (must stay last) ---------- */
@media (max-width: 767px) {
    .topbar { font-size: 0.72rem; }
    .site-header__inner { min-height: 68px; }
    .site-header.is-scrolled .site-header__inner { min-height: 58px; }
    .site-header__logo img { height: 58px; }
    .site-header.is-scrolled .site-header__logo img { height: 48px; }
    .site-footer { padding-top: 3rem; }
    .site-footer__logo img { height: 80px; }
}

/* =====================================================================
 * v40 HERO SLIDER POLISH
 * - Text now lines up with the header/container edge (it was hugging the
 *   far-left of the screen because .hero__slide-content had no container).
 * - Bigger headline/subtitle/button, vertically centered, with a
 *   left-to-right dark overlay so text stays readable on any image.
 * ===================================================================== */
.hero__slider,
.hero > .hero__slide {
    min-height: clamp(520px, 72vh, 740px);
}

.hero__slide {
    align-items: center;
}

/* Readability overlay between the photo and the text */
.hero__slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        90deg,
        rgba(13, 2, 26, 0.90) 0%,
        rgba(13, 2, 26, 0.68) 38%,
        rgba(13, 2, 26, 0.12) 72%,
        rgba(13, 2, 26, 0) 100%
    );
    pointer-events: none;
}

.hero__slide-content {
    z-index: 2;
    width: 100%;
    max-width: none;
    /* Same left edge as the logo / container (container max-width + gutter) */
    padding: var(--space-xl) max(var(--space-sm), calc((100% - var(--container-max-width)) / 2 + var(--space-sm)));
}

.hero__slide-content > * {
    max-width: 640px;
}

.hero__slide-content h1 {
    margin-bottom: 1rem;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

/* short green accent bar above the headline */
.hero__slide-content h1::before {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin-bottom: 1.1rem;
    border-radius: 4px;
    background: #2EE08A;
}

.hero__slide-content p {
    margin-bottom: var(--space-md);
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.hero__slide-content .btn {
    display: inline-block;
    padding: 0.95rem 2.1rem;
    border-radius: 4px;
    font-family: var(--font-family-nav);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 4px 0 #0A5C32, 0 12px 22px rgba(0, 0, 0, 0.35);
}

.hero__slide-content .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #0A5C32, 0 16px 26px rgba(0, 0, 0, 0.4);
}

body.lang-bn .hero__slide-content .btn {
    font-family: var(--font-family-bn);
}

@media (max-width: 767px) {
    .hero__slider,
    .hero > .hero__slide {
        min-height: 520px;
    }

    .hero__slide::before {
        background: linear-gradient(180deg, rgba(13, 2, 26, 0.55) 0%, rgba(13, 2, 26, 0.88) 100%);
    }

    .hero__slide-content {
        padding-top: var(--space-lg);
        padding-bottom: var(--space-lg);
    }

    .hero__slide-content .btn {
        padding: 0.85rem 1.6rem;
        font-size: 0.85rem;
    }
}

/* =====================================================================
 * v41 HERO — brighter photo, slider controls, badge polish
 * ===================================================================== */
.hero__slide-image {
    opacity: 0.88;   /* the left-to-right overlay (v40) keeps the text readable */
}

.hero__controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 28px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 0 max(var(--space-sm), calc((100% - var(--container-max-width)) / 2 + var(--space-sm)));
    pointer-events: none;
}

.hero__controls > * {
    pointer-events: auto;
}

.hero__dots {
    display: flex;
    gap: 0.5rem;
}

.hero__dot {
    position: relative;
    width: 48px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.hero__dot::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 3px;
    margin-top: -1.5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.35);
    transition: background 0.2s ease;
}

.hero__dot:hover::before,
.hero__dot:focus-visible::before {
    background: rgba(255, 255, 255, 0.65);
}

.hero__dot-fill {
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 3px;
    margin-top: -1.5px;
    border-radius: 3px;
    background: #2EE08A;
    box-shadow: 0 0 8px rgba(46, 224, 138, 0.6);
}

.hero__nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hero__counter {
    margin-right: 0.5rem;
    font-family: var(--font-family-nav);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.9);
}

.hero__arrow {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    background: rgba(13, 2, 26, 0.35);
    color: #FFFFFF;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.hero__arrow:hover,
.hero__arrow:focus-visible {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--color-primary);
    transform: translateY(-2px);
}

/* Maintenance strip under the hero */
.hero__maintenance-badge {
    padding: 0.95rem var(--space-sm);
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

@media (max-width: 767px) {
    .hero__controls {
        bottom: 16px;
        justify-content: center;
    }

    .hero__nav {
        display: none;
    }

    .hero__slider .hero__slide-content {
        padding-bottom: 5rem;
    }
}

/* =====================================================================
 * v42 RESPONSIVE FIXES — keep as the LAST block in this file.
 * - Floating WhatsApp/Emergency widget no longer covers page content on
 *   phones (the old bottom offset left room for the elevator control
 *   panel bar, which was removed from the header in v33).
 * - Language button now sits next to the hamburger instead of floating
 *   in the middle of the header on small screens.
 * - Drawer uses dynamic viewport height so it fits mobile browser bars.
 * ===================================================================== */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: clip; /* never allow sideways scroll; clip keeps sticky header working */
}

h1, h2, h3, h4 {
    overflow-wrap: break-word;
}

@media (max-width: 1023px) {
    .site-header__actions {
        margin-left: auto;
    }

    .emergency-widget {
        right: var(--space-xs);
        bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
        gap: 0.4rem;
    }

    .emergency-widget__btn {
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
    }

    /* Keep the last footer row clear of the floating buttons */
    .site-footer__bottom {
        padding-bottom: 6.5rem;
    }
}

@media (max-width: 480px) {
    /* Icon-only round buttons. The label text stays in the DOM (font-size 0)
       so screen readers still read it. */
    .emergency-widget__btn {
        width: 46px;
        height: 46px;
        padding: 0;
        gap: 0;
        justify-content: center;
        border-radius: 50%;
        font-size: 0;
    }

    .emergency-widget__icon {
        font-size: 1.25rem;
    }

    .hero__maintenance-badge {
        font-size: 0.82rem;
        padding-right: 4rem; /* leaves room so the round buttons never cover the text */
    }
}

/* =====================================================================
 * v43 MOBILE DRAWER — keep as the LAST block in this file.
 * Below 1024px .site-nav becomes an off-canvas drawer that slides in
 * from the right, with a dim backdrop, its own header (title + close
 * button) and a contact footer. Both the backdrop and the drawer live
 * inside .site-header, so they share its stacking context (z-index 50):
 * backdrop = 1, drawer = 2. That keeps the drawer above the backdrop and
 * both above the page content and the floating widget.
 * Behaviour: main.js initMobileNav().
 * ===================================================================== */
.site-nav__mobile-head,
.site-nav__mobile-foot,
.nav-backdrop {
    display: none; /* desktop: normal inline nav, none of this is used */
}

@media (max-width: 1023px) {
    /* ---------- Hamburger ---------- */
    .nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 42px;
        height: 42px;
        padding: 0 10px;
        border: 1px solid #D9CFE0;
        border-radius: 6px;
        background: var(--color-bg-white);
        cursor: pointer;
    }

    /* ---------- Backdrop ---------- */
    .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1;
        background: rgba(13, 2, 26, 0.55);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    }

    body.nav-open .nav-backdrop {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }

    /* ---------- Drawer ---------- */
    .site-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        width: min(86vw, 360px);
        background: var(--color-bg-white);
        box-shadow: -12px 0 40px rgba(13, 2, 26, 0.25);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(100%);
        visibility: hidden; /* also removes the closed drawer from the tab order */
        transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.32s;
    }

    .site-nav.is-open {
        transform: none;
        visibility: visible;
        transition-delay: 0s;
    }

    .site-nav__mobile-head {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.85rem 1.25rem;
        border-bottom: 1px solid #EEE8F2;
        background: linear-gradient(180deg, #FFFFFF 0%, #FAF6FD 100%);
    }

    .site-nav__mobile-title {
        font-family: var(--font-family-nav);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--color-primary);
    }

    .site-nav__close {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid #D9CFE0;
        border-radius: 50%;
        background: var(--color-bg-white);
        color: var(--color-primary);
        cursor: pointer;
        transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .site-nav__close:hover,
    .site-nav__close:focus-visible {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-text-on-primary);
    }

    /* ---------- Links ---------- */
    .site-nav .site-nav__list {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0.5rem 0;
    }

    .site-nav .site-nav__list li a {
        padding: 1rem 1.25rem 1rem 1.5rem;
        border-bottom: 1px solid #F0EAF4;
        font-size: 0.95rem;
        text-shadow: none;
    }

    .site-nav .site-nav__list li a::after {
        display: none; /* the hover underline is a desktop-only effect */
    }

    .site-nav .site-nav__list li a:hover,
    .site-nav .site-nav__list li a:focus-visible,
    .site-nav .site-nav__list li a.is-current {
        transform: none;
        background: #F6EEFA;
        box-shadow: inset 4px 0 0 var(--color-primary);
        color: var(--color-primary);
    }

    /* ---------- Contact footer ---------- */
    .site-nav__mobile-foot {
        display: grid;
        gap: 0.9rem;
        margin-top: auto;
        padding: 1.25rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid #EEE8F2;
        background: #FAF6FD;
    }

    .site-nav__mobile-foot a {
        font-size: 0.92rem;
        font-weight: 600;
        color: var(--color-text-heading);
        overflow-wrap: anywhere;
    }

    .site-nav__mobile-foot small {
        display: block;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--color-primary);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-nav,
    .nav-backdrop {
        transition: none;
    }
}

/* =====================================================================
 * v44 SITE-WIDE RESPONSIVE + DESIGN POLISH — keep as the LAST block.
 * Fixes found in the full audit:
 *  - .blog-listing/.product-listing/.product-detail/.blog-post/
 *    .product-highlights are ALSO .container, but their `padding: X 0`
 *    shorthand wiped the container's side gutters (text touched the
 *    screen edge on phones).
 *  - .btn--outline only existed in admin.css, so public outline buttons
 *    (404 page, Quote Builder "Back") rendered unstyled.
 *  - The global `ul { list-style: none }` reset removed bullets from the
 *    legal pages and blog/product body text.
 *  - Leaflet map panes (z-index 400+) could paint over the sticky header
 *    and the mobile drawer.
 *  - Bangla text needs its own line-height / letter-spacing.
 * ===================================================================== */
:root {
    --font-family-bn: 'Noto Sans Bengali', 'TiroBangla', 'Nirmala UI', var(--font-family-base);
}

html {
    scroll-padding-top: 96px; /* anchor jumps clear the sticky header */
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

img {
    height: auto;
}

/* ---------- Smaller spacing / type scale on phones ---------- */
@media (max-width: 767px) {
    :root {
        --space-lg: 2rem;
        --space-xl: 3rem;
        --font-size-2xl: 1.6rem;
        --font-size-3xl: 2.1rem;
    }
}

@media (max-width: 380px) {
    :root {
        --font-size-2xl: 1.45rem;
        --font-size-3xl: 1.85rem;
    }
}

/* ---------- Gutter fix (see header comment) ---------- */
.blog-listing,
.blog-post,
.blog-post-not-found,
.product-listing,
.product-detail,
.product-highlights {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px; /* comfortable touch target */
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn--outline {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn--outline:hover,
.btn--outline:focus-visible {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
}

/* ---------- Keyboard focus ---------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.site-footer a:focus-visible,
.site-footer button:focus-visible,
.topbar a:focus-visible,
.hero a:focus-visible,
.hero button:focus-visible,
.consultation-banner a:focus-visible {
    outline-color: #8FE0B5;
}

/* ---------- Lists inside content areas get their bullets back ---------- */
.legal-page ul,
.blog-post__content ul,
.product-detail__body ul {
    list-style: disc;
    padding-left: 1.4rem;
    margin-bottom: var(--space-sm);
}

.legal-page ol,
.blog-post__content ol,
.product-detail__body ol {
    list-style: decimal;
    padding-left: 1.4rem;
    margin-bottom: var(--space-sm);
}

.legal-page li,
.blog-post__content li {
    margin-bottom: 0.35rem;
}

/* ---------- Cards: responsive image ratio, hover lift, no overflow ---------- */
.product-grid > *,
.blog-grid > *,
.projects-grid > * {
    min-width: 0;
}

.product-card__image,
.blog-card__image,
.project-card__image {
    height: auto;
    aspect-ratio: 16 / 10;
}

.product-card,
.blog-card,
.project-card {
    border: 1px solid #EEE8F2;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .product-card:hover,
    .blog-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
    }
}

.product-filter__link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
}

.blog-pagination {
    flex-wrap: wrap;
}

/* ---------- Empty states + listing intro ---------- */
.listing-lede {
    max-width: 640px;
    margin-bottom: var(--space-sm);
    color: var(--color-text-body);
}

.empty-state {
    margin: var(--space-md) 0;
    padding: var(--space-lg) var(--space-md);
    text-align: center;
    background: var(--color-bg-light);
    border: 1px dashed #D9CFE0;
    border-radius: var(--radius-md);
}

.empty-state p {
    margin-bottom: var(--space-sm);
}

/* ---------- Blog post / rich content never overflows ---------- */
.blog-post__content,
.legal-page__inner,
.product-detail__body {
    overflow-wrap: break-word;
}

.blog-post__content img,
.blog-post__content video {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

.blog-post__content iframe {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
}

.blog-post__content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.blog-post__content pre {
    max-width: 100%;
    overflow-x: auto;
}

.blog-post__content h2,
.blog-post__content h3 {
    margin-top: var(--space-md);
}

/* ---------- Product Before/After slider: easier to grab on touch ---------- */
.before-after__slider {
    height: 28px;
    accent-color: var(--color-primary);
    cursor: ew-resize;
    touch-action: pan-y;
}

/* ---------- Projects map ---------- */
.projects-map {
    isolation: isolate; /* keeps Leaflet's high z-index panes under the header/drawer */
}

@media (max-width: 767px) {
    .projects-map {
        height: 280px;
    }
}

/* ---------- Footer ---------- */
@media (max-width: 1023px) {
    .site-footer__links li a {
        padding: 0.5rem 0; /* bigger tap targets */
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .site-footer__col--brand {
        grid-column: 1 / -1; /* brand row on top, the 4 link columns below in 2x2 */
    }
}

/* ---------- Bangla typography ---------- */
body.lang-bn {
    line-height: 1.75;
}

body.lang-bn h1,
body.lang-bn h2,
body.lang-bn h3,
body.lang-bn h4 {
    line-height: 1.4;
}

body.lang-bn .hero__slide-content h1 {
    line-height: 1.35;
    letter-spacing: 0;
}

body.lang-bn .site-nav__list li a,
body.lang-bn .btn,
body.lang-bn .topbar,
body.lang-bn .hero__slide-content .btn,
body.lang-bn .site-nav__mobile-title {
    letter-spacing: 0;
    text-transform: none; /* uppercase + tracking breaks Bengali conjuncts */
}


/* =====================================================================
 * v45 REDESIGN — "soft canvas" look: blush-lavender page, floating pill
 * header, rounded hero card, gradient pill buttons, big radii. Brand
 * gradient runs logo purple -> logo green. Keep as the LAST block in this
 * file: it intentionally overrides the earlier header/hero/footer rules.
 * Mobile drawer styles are untouched (nav overrides are desktop-only).
 * ===================================================================== */
:root {
    --bl-canvas: #F6F0FA;
    --bl-ink: #1A1024;
    --bl-line: #E8DCF0;
    --bl-grad: linear-gradient(100deg, #4B0072 0%, #8E3DB8 45%, #12A05A 100%);
    --bl-grad-solid: linear-gradient(100deg, #4B0072 0%, #0F8247 100%);
    --bl-radius-card: 28px;
    --bl-radius-xl: 32px;
    --bl-radius-header: 28px;
    --bl-shell: none;
    --bl-gutter: clamp(0.5rem, 1.6vw, 1.5rem);

    --font-family-base: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
    --font-family-nav: var(--font-family-base);
}

body {
    background: var(--bl-canvas);
}

/* Tight, heavy display type (Latin only — Bengali keeps its own spacing) */
body:not(.lang-bn) h1,
body:not(.lang-bn) h2 {
    letter-spacing: -0.03em;
}

h2 {
    font-weight: 800;
}

/* ---------------------------------------------------------------------
 * Top info bar — slim dark plum strip, anchors the page above the pill
 * ------------------------------------------------------------------- */
.topbar {
    background: linear-gradient(90deg, #1E0030 0%, #3A0058 60%, #4B0072 100%);
    color: rgba(255, 255, 255, 0.88);
    font-weight: 500;
}

.topbar__msg::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 0.55rem;
    border-radius: 50%;
    background: #2EE08A;
    box-shadow: 0 0 0 3px rgba(46, 224, 138, 0.25);
    vertical-align: middle;
}

.topbar__links a:hover,
.topbar__links a:focus-visible {
    color: #8FE0B5;
}

.topbar__links a + a {
    border-left-color: rgba(255, 255, 255, 0.28);
}

/* ---------------------------------------------------------------------
 * Header — floating white pill on the canvas
 * ------------------------------------------------------------------- */
.site-header,
.site-header.is-scrolled {
    background: var(--bl-canvas);
    border-bottom: 0;
    box-shadow: none;
    padding: 6px 0;
}

.site-header .site-header__inner,
.site-header.is-scrolled .site-header__inner {
    min-height: 76px;
    padding: 0 16px 0 24px;
    max-width: none;
    margin: 0 var(--bl-gutter);
    background: #FFFFFF;
    border: 1px solid #DCCBE8;
    border-radius: var(--bl-radius-header);
    box-shadow: 0 10px 30px rgba(75, 0, 114, 0.14), 0 2px 6px rgba(75, 0, 114, 0.08);
    transition: box-shadow 0.25s ease;
}

.site-header.is-scrolled .site-header__inner {
    box-shadow: 0 14px 36px rgba(75, 0, 114, 0.22), 0 2px 6px rgba(75, 0, 114, 0.10);
}

.site-header .site-header__logo img,
.site-header.is-scrolled .site-header__logo img {
    height: 60px;
}

/* Scroll progress becomes a short gradient line under the pill */
.site-header__progress {
    left: 32px;
    right: 32px;
    bottom: 1px;
    height: 3px;
    border-radius: 3px;
    background: var(--bl-grad);
}

.site-header__actions .lang-toggle {
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--bl-line);
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: none;
    font-size: 0.9rem;
}

.site-header__actions .lang-toggle:hover,
.site-header__actions .lang-toggle:focus-visible {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: none;
    transform: none;
}

/* Desktop nav only: sentence case, soft pill hover instead of underline */
@media (min-width: 1024px) {
    .site-nav__list {
        gap: 0.25rem;
    }

    .site-nav__list li a {
        padding: 0.55rem 1.05rem;
        border-radius: 999px;
        font-size: 0.95rem;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        text-shadow: none;
        transition: background 0.2s ease, color 0.2s ease;
    }

    .site-nav__list li a::after {
        display: none;
    }

    .site-nav__list li a:hover,
    .site-nav__list li a:focus-visible {
        background: #F1E6F8;
        transform: none;
        text-shadow: none;
    }

    .site-nav__list li a.is-current {
        background: var(--color-primary);
        color: var(--color-text-on-primary);
    }

    /* The quote link moves out of the list into the header CTA button */
    .site-nav__item--quote {
        display: none;
    }
}

/* ---------------------------------------------------------------------
 * Buttons — pills, gradient primary with a soft ring
 * ------------------------------------------------------------------- */
.btn {
    border-radius: 999px;
    font-weight: 700;
}

.btn--accent {
    background: var(--bl-grad-solid);
    border-color: transparent;
    box-shadow: 0 0 0 4px rgba(75, 0, 114, 0.10), 0 10px 24px rgba(75, 0, 114, 0.25);
}

.btn--accent:focus,
.btn--accent:focus-visible {
    box-shadow: 0 0 0 4px rgba(15, 130, 71, 0.30), 0 10px 24px rgba(75, 0, 114, 0.25);
}

.btn--primary {
    background: var(--bl-ink);
}

.btn--primary:hover {
    background: var(--color-primary);
}

.btn--ghost {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.55);
    color: #FFFFFF;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
    background: #FFFFFF;
    color: var(--color-primary);
}

/* ---------------------------------------------------------------------
 * Hero — one big rounded card, photo inside, trust pill floating on the
 * bottom edge (replaces the full-width green strip)
 * ------------------------------------------------------------------- */
.hero {
    max-width: var(--bl-shell);
    margin: 0 auto;
    padding: var(--space-xs) var(--bl-gutter) 0;
    background: transparent;
    overflow: visible;
}

.hero__slider,
.hero > .hero__slide {
    min-height: clamp(480px, 68vh, 680px);
    border-radius: var(--bl-radius-xl);
    overflow: hidden;
    background: var(--color-midnight);
}

/* Plum-tinted readability overlay (was near-black) */
.hero__slide::before {
    background: linear-gradient(
        90deg,
        rgba(36, 0, 56, 0.90) 0%,
        rgba(75, 0, 114, 0.58) 42%,
        rgba(13, 2, 26, 0) 100%
    );
}

.hero__slide-content,
.hero__controls {
    padding-left: clamp(1.25rem, 4.5vw, 3.75rem);
    padding-right: clamp(1.25rem, 4.5vw, 3.75rem);
}

.hero__slide-content > * {
    max-width: 600px;
}

/* Headline: white fading into mint — echoes the logo green */
.hero__slide-content h1 {
    background: linear-gradient(100deg, #FFFFFF 0%, #FFFFFF 55%, #9BF0C4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.35));
    font-weight: 800;
    letter-spacing: -0.03em;
}

body.lang-bn .hero__slide-content h1 {
    letter-spacing: 0;
}

.hero__slide-content h1::before {
    width: 52px;
    height: 5px;
    background: linear-gradient(90deg, #B66BDB, #2EE08A);
}

/* Hero buttons: pill, sentence case, no 3D shadow */
.hero__slide-content .btn {
    padding: 0.9rem 1.9rem;
    border-radius: 999px;
    font-size: 0.98rem;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.16), 0 12px 26px rgba(0, 0, 0, 0.30);
}

.hero__slide-content .btn:hover {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.24), 0 16px 30px rgba(0, 0, 0, 0.36);
}

.hero__slide-content .btn + .btn {
    margin-left: 0.6rem;
}

/* Floating trust pill */
.hero__maintenance-badge {
    position: relative;
    z-index: 6;
    display: block;
    width: fit-content;
    max-width: calc(100% - 2rem);
    margin: -26px auto 0;
    padding: 0.8rem 1.6rem;
    background: #FFFFFF;
    color: var(--color-text-body);
    border: 1px solid var(--bl-line);
    border-radius: 999px;
    box-shadow: 0 14px 34px rgba(75, 0, 114, 0.16);
    font-size: 0.9rem;
    text-align: center;
}

.hero__maintenance-badge strong {
    background: var(--bl-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

@media (max-width: 767px) {
    .hero {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .hero__slider,
    .hero > .hero__slide {
        min-height: 520px;
        border-radius: 28px;
    }

    .hero__slide::before {
        background: linear-gradient(180deg, rgba(36, 0, 56, 0.45) 0%, rgba(36, 0, 56, 0.90) 100%);
    }

    .hero__maintenance-badge {
        border-radius: 22px;
        font-size: 0.82rem;
    }

    .hero__slide-content .btn + .btn {
        margin-left: 0;
        margin-top: 0.6rem;
    }
}

/* ---------------------------------------------------------------------
 * Product highlights — white rounded cards on the canvas
 * ------------------------------------------------------------------- */
.product-highlights {
    padding-top: calc(var(--space-xl) + 1rem);
}

.product-highlights > h2 {
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    background: var(--bl-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.product-highlights__card {
    background: #FFFFFF;
    border: 1px solid var(--bl-line);
    border-radius: var(--bl-radius-card);
    padding: var(--space-md) 1.5rem 1.6rem;
    box-shadow: 0 8px 24px rgba(75, 0, 114, 0.05);
}

.product-highlights__card h3 {
    font-weight: 800;
    letter-spacing: -0.01em;
}

.product-highlights__card p {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------
 * Consultation banner — inset gradient card with a white pill button
 * ------------------------------------------------------------------- */
.consultation-banner {
    max-width: var(--bl-shell);
    margin: var(--space-lg) var(--bl-gutter) 0;
    padding: var(--space-xl) var(--space-sm);
    border-radius: var(--bl-radius-xl);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(18, 160, 90, 0.85) 0%, rgba(18, 160, 90, 0) 60%),
        linear-gradient(120deg, #3A0058 0%, #4B0072 55%, #6A1B93 100%);
}

.consultation-banner p {
    color: rgba(255, 255, 255, 0.88);
}

.consultation-banner .btn--accent {
    background: #FFFFFF;
    color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18), 0 12px 26px rgba(0, 0, 0, 0.25);
}

@media (max-width: 767px) {
    .consultation-banner {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        border-radius: 28px;
    }
}

/* ---------------------------------------------------------------------
 * Footer — rounded dark card sitting on the canvas
 * ------------------------------------------------------------------- */
.site-footer {
    max-width: var(--bl-shell);
    margin: var(--space-lg) var(--bl-gutter) 0;
    border-radius: var(--bl-radius-xl) var(--bl-radius-xl) 0 0;
}

@media (max-width: 767px) {
    .site-footer {
        border-radius: 28px 28px 0 0;
    }
}

/* ---------------------------------------------------------------------
 * Floating WhatsApp / Emergency widget — pill-shaped to match
 * ------------------------------------------------------------------- */
.emergency-widget__btn {
    border-radius: 999px;
}

/* ---------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .site-header .site-header__inner {
        transition: none;
    }
}

/* Full-width shell: topbar text lines up with the header pill's inner edge */
.topbar__inner {
    max-width: none;
    padding-left: calc(var(--bl-gutter) + 24px);
    padding-right: calc(var(--bl-gutter) + 16px);
}

@media (max-width: 767px) {
    .site-header .site-header__inner,
    .site-header.is-scrolled .site-header__inner {
        min-height: 60px;
        padding: 0 10px 0 16px;
        border-radius: 20px;
    }

    .site-header .site-header__logo img,
    .site-header.is-scrolled .site-header__logo img {
        height: 46px;
    }
}

/* Header CTA: gradient pill next to the language button */
.site-header__cta {
    display: none;
}

@media (min-width: 1024px) {
    .site-header__cta {
        display: inline-flex;
        padding: 0.6rem 1.35rem;
        font-size: 0.92rem;
        white-space: nowrap;
    }
}

/* ---------------------------------------------------------------------
 * Elevator-motion header (final) — dark, bold, animated.
 *  1. Load: two steel lift doors cover the header and slide apart.
 *  2. Nav: a glowing "cabin" pill slides between links (positioned by
 *     main.js initNavCabin), and each label rolls up on hover like a
 *     floor display.
 *  3. CTA: a green call button with a slow attention pulse.
 *  4. Scroll: a small green lift-car rides the bottom edge of the header
 *     as the page scrolls (uses --scroll-progress set by main.js).
 *  5. Background: slow drifting purple/green glow on midnight.
 * All motion is switched off under prefers-reduced-motion.
 * Mobile keeps the dark bar, logo and hamburger; the drawer is untouched.
 * ------------------------------------------------------------------- */
:root {
    --bl-edge: clamp(1.25rem, 4.5vw, 3.75rem); /* same inset the hero text uses */
    --bl-midnight: #0D021A;
    --bl-led: #38F09A;
}

/* Top info strip */
.topbar {
    background: linear-gradient(100deg, #2A0042 0%, #3A0058 100%);
    color: rgba(255, 255, 255, 0.90);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.topbar__msg::before {
    background: var(--bl-led);
    box-shadow: 0 0 0 3px rgba(46, 224, 138, 0.25);
}

.topbar__links a:hover,
.topbar__links a:focus-visible {
    color: #8FE0B5;
}

.topbar__links a + a {
    border-left-color: rgba(255, 255, 255, 0.25);
}

.topbar__inner {
    padding-left: var(--bl-edge);
    padding-right: var(--bl-edge);
}

/* Header bar: midnight with a slowly drifting glow */
.site-header,
.site-header.is-scrolled {
    padding: 0;
    background:
        radial-gradient(45% 170% at 8% 0%, rgba(176, 92, 224, 0.50) 0%, rgba(176, 92, 224, 0) 70%),
        radial-gradient(42% 170% at 94% 100%, rgba(30, 190, 110, 0.45) 0%, rgba(30, 190, 110, 0) 70%),
        linear-gradient(100deg, #3A0058 0%, #4B0072 50%, #3A0058 100%);
    background-size: 160% 100%, 160% 100%, auto;
    background-repeat: no-repeat;
    border-bottom: 0;
    border-radius: 0;
    box-shadow: 0 10px 28px rgba(58, 0, 88, 0.30);
    animation: bl-header-glow 14s ease-in-out infinite alternate;
    transition: box-shadow 0.25s ease;
}

.site-header.is-scrolled {
    box-shadow: 0 14px 34px rgba(58, 0, 88, 0.50);
}

@keyframes bl-header-glow {
    from { background-position: 0% 0, 100% 0, 0 0; }
    to   { background-position: 100% 0, 0% 0, 0 0; }
}

.site-header .site-header__inner,
.site-header.is-scrolled .site-header__inner {
    position: relative;
    overflow: hidden; /* keeps the sliding doors inside the bar */
    min-height: 82px;
    margin: 0;
    padding: 0 var(--bl-edge);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.site-header.is-scrolled .site-header__inner {
    min-height: 66px;
}

/* ----- 1. Lift doors: steel panels that slide apart once on load ----- */
.site-header__inner::before,
.site-header__inner::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 20;
    width: 50.5%;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0 1px, rgba(40, 40, 60, 0.04) 1px 3px),
        linear-gradient(180deg, #F4F4F8 0%, #CFCFD9 100%);
    animation-duration: 0.85s;
    animation-timing-function: cubic-bezier(0.77, 0, 0.18, 1);
    animation-delay: 0.45s;
    animation-fill-mode: forwards;
}

.site-header__inner::before {
    left: 0;
    box-shadow: inset -2px 0 0 rgba(13, 2, 26, 0.30);
    animation-name: bl-door-left;
}

.site-header__inner::after {
    right: 0;
    box-shadow: inset 2px 0 0 rgba(13, 2, 26, 0.30);
    animation-name: bl-door-right;
}

@keyframes bl-door-left {
    to { transform: translateX(-101%); }
}

@keyframes bl-door-right {
    to { transform: translateX(101%); }
}

/* Logo: white silhouette on the dark bar, brand glow on hover */
.site-header .site-header__logo img,
.site-header.is-scrolled .site-header__logo img {
    height: 56px;
    filter: brightness(0) invert(1);
    transition: height 0.3s ease, filter 0.3s ease;
}

.site-header.is-scrolled .site-header__logo img {
    height: 46px;
}

.site-header .site-header__logo:hover img {
    opacity: 1;
    filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(46, 224, 138, 0.65));
}

/* ----- 4. Scroll: gradient trail + a small green lift-car on the edge ----- */
.site-header__progress {
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 0;
    background: linear-gradient(90deg, #B66BDB, #2EE08A);
}

.site-header::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: calc(var(--scroll-progress, 0) * (100% - 34px));
    z-index: 3;
    width: 34px;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #12A05A, #5BE8A4);
    box-shadow: 0 0 12px rgba(46, 224, 138, 0.9);
    pointer-events: none;
}

/* Language: white outline pill */
.site-header__actions .lang-toggle {
    padding: 0.5rem 1.1rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    color: #FFFFFF;
    box-shadow: none;
    font-size: 0.88rem;
}

.site-header__actions .lang-toggle:hover,
.site-header__actions .lang-toggle:focus-visible {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--color-primary);
    transform: none;
    box-shadow: none;
}

/* Hamburger: white on the dark bar, purple again while the white drawer is open */
.nav-toggle__bar {
    background: #FFFFFF;
}

body.nav-open .nav-toggle__bar {
    background: var(--color-primary);
}

.site-nav__cabin {
    display: none;
}

/* ----- 2 + 3. Desktop only: cabin, rolling labels, call button ----- */
@media (min-width: 1024px) {
    .site-nav__list {
        position: relative;
        gap: 0.2rem;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .site-nav__list li:not(.site-nav__cabin) {
        position: relative;
        z-index: 1; /* links sit above the cabin pill */
    }

    .site-nav__list li a,
    .site-nav__list li a:hover,
    .site-nav__list li a:focus-visible,
    .site-nav__list li a.is-current {
        background: transparent;
    }

    .site-nav__list li a {
        padding: 0.7rem 1.2rem;
        border-radius: 999px;
        color: rgba(255, 255, 255, 0.90);
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        text-shadow: none;
        transform: none;
        transition: color 0.3s ease;
    }

    .site-nav__list li a::after {
        display: none;
    }

    .site-nav__list li a:hover,
    .site-nav__list li a:focus-visible,
    .site-nav__list li a.is-current,
    .site-nav__list li a.is-lit {
        color: #FFFFFF;
        transform: none;
    }

    /* The sliding cabin pill. Hidden until main.js adds .has-cabin. */
    .site-nav__cabin {
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 0;
        width: var(--cabin-w, 0px);
        transform: translateX(var(--cabin-x, 0px));
        border-radius: 999px;
        background: linear-gradient(100deg, #A05AD6 0%, #14B567 100%);
        box-shadow: 0 6px 22px rgba(46, 224, 138, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
        opacity: 0;
        pointer-events: none;
    }

    .site-nav__list.has-cabin .site-nav__cabin {
        opacity: 1;
        transition:
            transform 0.5s cubic-bezier(0.34, 1.45, 0.5, 1),
            width 0.5s cubic-bezier(0.34, 1.45, 0.5, 1),
            opacity 0.2s ease;
    }

    /* Label roll: the text slides up and an identical copy slides in below */
    .nav-label {
        position: relative;
        display: block;
        overflow: hidden;
        line-height: 1.5;
    }

    .nav-label__text,
    .nav-label::after {
        display: block;
        transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1);
    }

    .nav-label::after {
        content: attr(data-label);
        position: absolute;
        top: 100%;
        left: 0;
        white-space: nowrap;
    }

    .site-nav__list li a:hover .nav-label__text,
    .site-nav__list li a:focus-visible .nav-label__text,
    .site-nav__list li a:hover .nav-label::after,
    .site-nav__list li a:focus-visible .nav-label::after {
        transform: translateY(-100%);
    }

    /* Call button: bright green, slow attention pulse */
    .site-header__cta {
        padding: 0.75rem 1.6rem;
        border-radius: 999px;
        background: linear-gradient(100deg, #14B567 0%, #0F8247 100%);
        font-size: 0.88rem;
        font-weight: 800;
        box-shadow: 0 0 0 0 rgba(46, 224, 138, 0.55);
        animation: bl-call-pulse 2.8s ease-out infinite;
    }

    .site-header__cta:hover,
    .site-header__cta:focus-visible {
        background: linear-gradient(100deg, #1BC070 0%, #12A05A 100%);
        animation-play-state: paused;
        box-shadow: 0 0 0 5px rgba(46, 224, 138, 0.30), 0 10px 24px rgba(0, 0, 0, 0.35);
    }
}

@keyframes bl-call-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(46, 224, 138, 0.55); }
    70%  { box-shadow: 0 0 0 14px rgba(46, 224, 138, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 224, 138, 0); }
}

/* Bangla: uppercase + tracking break conjuncts */
body.lang-bn .site-header__cta,
body.lang-bn .site-header__actions .lang-toggle {
    letter-spacing: 0;
    text-transform: none;
}

/* Reduced motion: no doors, no drift, no pulse, no sliding or rolling */
@media (prefers-reduced-motion: reduce) {
    .site-header,
    .site-header.is-scrolled,
    .site-header__cta {
        animation: none;
    }

    .site-header__inner::before,
    .site-header__inner::after {
        display: none;
    }

    .site-nav__list.has-cabin .site-nav__cabin,
    .nav-label__text,
    .nav-label::after {
        transition: none;
    }
}

/* Breathing room between the header and the hero card */
.hero {
    padding-top: var(--bl-gutter);
}

@media (max-width: 767px) {
    .site-header .site-header__inner,
    .site-header.is-scrolled .site-header__inner {
        min-height: 64px;
        padding: 0 0.5rem 0 0.75rem;
    }

    .site-header .site-header__logo img,
    .site-header.is-scrolled .site-header__logo img {
        height: 42px;
    }

    .topbar__inner {
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
    }
}
/* =====================================================================
 * v-white-header — header background white, logo back to original colors
 * (overrides the dark "elevator-motion" header above; keep at END of file)
 * ===================================================================== */

/* 1. White header bar (no purple/green glow, no animation drift) */
.site-header,
.site-header.is-scrolled {
    background: #FFFFFF;
    animation: none;
    box-shadow: 0 4px 18px rgba(75, 0, 114, 0.10);
    border-bottom: 1px solid #E9DDF2;
}

.site-header.is-scrolled {
    box-shadow: 0 8px 24px rgba(75, 0, 114, 0.18);
}

/* 2. Logo: remove the white silhouette filter -> original colors */
.site-header .site-header__logo img,
.site-header.is-scrolled .site-header__logo img {
    filter: none;
}

.site-header .site-header__logo:hover img {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(75, 0, 114, 0.25));
}

/* 3. Language button + hamburger: dark on white */
.site-header__actions .lang-toggle {
    background: transparent;
    border: 1px solid rgba(75, 0, 114, 0.35);
    color: var(--color-primary);
}

.site-header__actions .lang-toggle:hover,
.site-header__actions .lang-toggle:focus-visible {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #FFFFFF;
}

.nav-toggle__bar,
body.nav-open .nav-toggle__bar {
    background: var(--color-primary);
}

/* 4. Desktop nav: dark text on white, white text on the sliding cabin pill */
@media (min-width: 1024px) {
    .site-nav__list li a {
        color: #2A0042;
    }

    .site-nav__list li a:hover,
    .site-nav__list li a:focus-visible,
    .site-nav__list li a.is-current,
    .site-nav__list li a.is-lit {
        color: #FFFFFF;
    }

    /* If the cabin pill hasn't been positioned by JS yet, still show the current page */
    .site-nav__list:not(.has-cabin) li a.is-current {
        background: var(--color-primary);
    }
}

/* =====================================================================
 * v-narrow-header — header content constrained to a centered width
 * (header keeps its original height/sizes; background stays full-width)
 * Change --header-max-width to make it narrower / wider.
 * ===================================================================== */
:root {
    --header-max-width: 1480px;
}

@media (min-width: 1024px) {
    .site-header .site-header__inner,
    .site-header.is-scrolled .site-header__inner {
        max-width: var(--header-max-width);
        margin-left: auto;
        margin-right: auto;
        padding-left: 24px;
        padding-right: 24px;
    }

    /* slightly shorter header */
    .site-header .site-header__inner {
        min-height: 72px;
    }

    .site-header.is-scrolled .site-header__inner {
        min-height: 60px;
    }

    .site-header .site-header__logo img {
        height: 50px;
    }

    .site-header.is-scrolled .site-header__logo img {
        height: 42px;
    }

    /* keep the top info strip lined up with the header content */
    .topbar__inner {
        max-width: var(--header-max-width);
        margin-left: auto;
        margin-right: auto;
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* =====================================================================
 * v-nav-current-fix — the current page link (HOME) turned white and
 * vanished on the white header whenever the cabin pill slid to another
 * link. Now a link is white ONLY while the cabin pill is under it
 * (.is-lit) or it is hovered/focused; otherwise it stays dark.
 * ===================================================================== */
@media (min-width: 1024px) {
    .site-nav__list.has-cabin li a.is-current:not(.is-lit):not(:hover):not(:focus-visible) {
        color: #2A0042;
    }
}

/* =====================================================================
 * v-header-buttons — richer look for the HOME cabin pill, the
 * "Get a quote" call button and the language button (white header)
 * ===================================================================== */

/* ----- Language button: clean white pill, soft border + hover fill ----- */
.site-header__actions .lang-toggle {
    background: #FFFFFF;
    border: 1px solid rgba(75, 0, 114, 0.22);
    color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(75, 0, 114, 0.08);
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease,
                box-shadow 0.25s ease, transform 0.25s ease;
}

.site-header__actions .lang-toggle:hover,
.site-header__actions .lang-toggle:focus-visible {
    background: linear-gradient(135deg, #6A12A0 0%, #3A0058 100%);
    border-color: transparent;
    color: #FFFFFF;
    box-shadow: 0 8px 18px rgba(75, 0, 114, 0.30);
    transform: translateY(-1px);
}

@media (min-width: 1024px) {

    /* ----- Cabin pill (active/hovered nav link): deep plum + LED ----- */
    .site-nav__cabin {
        background: linear-gradient(135deg, #6A12A0 0%, #4B0072 55%, #2E0049 100%);
        box-shadow:
            0 8px 20px rgba(75, 0, 114, 0.32),
            inset 0 1px 0 rgba(255, 255, 255, 0.22),
            inset 0 -1px 0 rgba(0, 0, 0, 0.18);
    }

    /* little green "floor indicator" LED under the label */
    .site-nav__cabin::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 5px;
        width: 16px;
        height: 3px;
        border-radius: 3px;
        transform: translateX(-50%);
        background: #38F09A;
        box-shadow: 0 0 8px rgba(56, 240, 154, 0.95);
    }

    /* ----- Get a quote: solid green gradient, gloss, clean pulse ring ----- */
    .site-header .site-header__cta {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: linear-gradient(135deg, #1ACB75 0%, #0F8247 100%);
        border: 0;
        color: #FFFFFF;
        box-shadow:
            0 8px 18px rgba(15, 130, 71, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.35);
        animation: bl-cta-pulse 3s ease-out infinite;
        transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    }

    .site-header .site-header__cta::after {
        content: "\2192";           /* → */
        display: inline-block;
        transition: transform 0.25s ease;
    }

    .site-header .site-header__cta:hover,
    .site-header .site-header__cta:focus-visible {
        background: linear-gradient(135deg, #22D982 0%, #12904F 100%);
        transform: translateY(-2px);
        animation-play-state: paused;
        box-shadow:
            0 12px 26px rgba(15, 130, 71, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.40);
    }

    .site-header .site-header__cta:hover::after,
    .site-header .site-header__cta:focus-visible::after {
        transform: translateX(4px);
    }
}

@keyframes bl-cta-pulse {
    0%   { box-shadow: 0 8px 18px rgba(15, 130, 71, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 0 rgba(26, 203, 117, 0.45); }
    70%  { box-shadow: 0 8px 18px rgba(15, 130, 71, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 12px rgba(26, 203, 117, 0); }
    100% { box-shadow: 0 8px 18px rgba(15, 130, 71, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 0 rgba(26, 203, 117, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .site-header__cta {
        animation: none;
    }
}

/* =====================================================================
 * v-header-polish — final touches on the white header
 *  - nav truly centered (logo and button group get equal width)
 *  - soft divider before Get a quote / language
 *  - subtle bottom edge, logo hover lift, breathing LED on the pill
 * ===================================================================== */
.site-header,
.site-header.is-scrolled {
    background: linear-gradient(180deg, #FFFFFF 0%, #FCFAFE 100%);
    border-bottom: 1px solid rgba(75, 0, 114, 0.08);
    box-shadow: 0 10px 28px rgba(75, 0, 114, 0.08);
}

.site-header.is-scrolled {
    box-shadow: 0 12px 30px rgba(75, 0, 114, 0.16);
}

@media (min-width: 1024px) {
    /* equal-width sides => the nav sits in the exact middle of the header */
    .site-header .site-header__logo {
        flex: 1 1 0;
        justify-content: flex-start;
    }

    .site-header .site-header__actions {
        flex: 1 1 0;
        justify-content: flex-end;
        gap: 0.75rem;
    }

    /* thin divider between the nav and the buttons */
    .site-header .site-header__actions::before {
        content: "";
        width: 1px;
        height: 28px;
        margin-right: 0.5rem;
        background: rgba(75, 0, 114, 0.15);
    }

    .site-header .site-header__logo img {
        transition: height 0.3s ease, transform 0.3s ease, filter 0.3s ease;
    }

    .site-header .site-header__logo:hover img {
        transform: scale(1.05);
    }

    /* the pill's floor-indicator LED gently breathes */
    .site-nav__cabin::after {
        animation: bl-led-breathe 2.4s ease-in-out infinite;
    }
}

@keyframes bl-led-breathe {
    0%, 100% { opacity: 0.6; box-shadow: 0 0 5px rgba(56, 240, 154, 0.6); }
    50%      { opacity: 1;   box-shadow: 0 0 11px rgba(56, 240, 154, 1); }
}

@media (prefers-reduced-motion: reduce) {
    .site-nav__cabin::after {
        animation: none;
    }
}

/* =====================================================================
 * v-lang-button — language switch redesigned: deep-plum pill with a
 * green globe icon. Pairs with the green "Get a quote" button.
 * (No HTML change: the globe is drawn with a CSS mask.)
 * ===================================================================== */
.site-header .site-header__actions .lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: linear-gradient(135deg, #6A12A0 0%, #4B0072 55%, #2E0049 100%);
    color: #FFFFFF;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow:
        0 8px 18px rgba(75, 0, 114, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

/* globe icon */
.site-header .site-header__actions .lang-toggle::before {
    content: "";
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    background: #5BE8A4;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.6s ease, background 0.25s ease;
}

.site-header .site-header__actions .lang-toggle:hover,
.site-header .site-header__actions .lang-toggle:focus-visible {
    background: linear-gradient(135deg, #7A1FB5 0%, #5A0A8A 55%, #3A0058 100%);
    border-color: rgba(91, 232, 164, 0.55);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow:
        0 12px 24px rgba(75, 0, 114, 0.40),
        0 0 0 3px rgba(91, 232, 164, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.site-header .site-header__actions .lang-toggle:hover::before,
.site-header .site-header__actions .lang-toggle:focus-visible::before {
    transform: rotate(360deg);
    background: #8FF5C6;
}

.site-header .site-header__actions .lang-toggle:active {
    transform: translateY(0);
}

@media (min-width: 1024px) {
    /* same height as the Get a quote button */
    .site-header .site-header__actions .lang-toggle {
        padding: 0.75rem 1.3rem;
    }
}

body.lang-bn .site-header .site-header__actions .lang-toggle {
    letter-spacing: 0;
    text-transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .site-header .site-header__actions .lang-toggle,
    .site-header .site-header__actions .lang-toggle::before {
        transition: none;
    }

    .site-header .site-header__actions .lang-toggle:hover::before,
    .site-header .site-header__actions .lang-toggle:focus-visible::before {
        transform: none;
    }
}

/* =====================================================================
 * v-lang-switch — language button as a two-part switch:
 *   [ EN ]  বাংলা      (current language = green chip, other = label)
 * In Bangla mode it flips to  [ বাং ]  English.
 * Replaces the plum globe button above. No HTML change needed.
 * ===================================================================== */
.site-header .site-header__actions .lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 4px 1.1rem 4px 4px;
    border: 1px solid rgba(75, 0, 114, 0.18);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--color-primary);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(75, 0, 114, 0.08);
    transition: border-color 0.25s ease, background 0.25s ease,
                box-shadow 0.25s ease, transform 0.25s ease, color 0.25s ease;
}

/* current-language chip */
.site-header .site-header__actions .lang-toggle::before {
    content: "EN";
    width: auto;
    height: auto;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    -webkit-mask: none;
            mask: none;
    background: linear-gradient(135deg, #17C46E 0%, #0F8247 100%);
    color: #FFFFFF;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    box-shadow: 0 4px 10px rgba(15, 130, 71, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transform: none;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

body.lang-bn .site-header .site-header__actions .lang-toggle::before {
    content: "\09AC\09BE\0982"; /* বাং */
}

.site-header .site-header__actions .lang-toggle:hover,
.site-header .site-header__actions .lang-toggle:focus-visible {
    background: #F7EFFC;
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(75, 0, 114, 0.16);
}

.site-header .site-header__actions .lang-toggle:hover::before,
.site-header .site-header__actions .lang-toggle:focus-visible::before {
    background: linear-gradient(135deg, #17C46E 0%, #0F8247 100%);
    transform: scale(1.04);
    box-shadow: 0 6px 14px rgba(15, 130, 71, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.site-header .site-header__actions .lang-toggle:active {
    transform: translateY(0);
}

body.lang-bn .site-header .site-header__actions .lang-toggle,
body.lang-bn .site-header .site-header__actions .lang-toggle::before {
    letter-spacing: 0;
    text-transform: none;
}

/* =====================================================================
 * v-no-header-load-animation — the header appears instantly on page load:
 *  - no steel "lift doors" sliding apart over the header
 *  - no logo fade-in / drop
 * (hover effects and the Get a quote pulse are unchanged)
 * ===================================================================== */
.site-header__inner::before,
.site-header__inner::after {
    display: none;
    animation: none;
}

.site-header .site-header__logo img,
.site-header.is-scrolled .site-header__logo img {
    animation: none;
}

/* =====================================================================
 * v-lang-slider — real switch: labels stay still, the GREEN BACKGROUND
 * (thumb) slides between  [ EN ]  and  [ বাংলা ].
 * Markup is built by main.js initLangSwitch(); these rules only apply
 * once the button has the .lang-switch class.
 * ===================================================================== */
.site-header .site-header__actions .lang-toggle.lang-switch {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    padding: 4px;
    isolation: isolate;
    border: 1px solid rgba(75, 0, 114, 0.18);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--color-primary);
    font-size: 0.82rem;
    line-height: 1;
    box-shadow: 0 2px 10px rgba(75, 0, 114, 0.08);
}

/* drop the old EN / globe chip */
.site-header .site-header__actions .lang-toggle.lang-switch::before {
    display: none;
}

/* the sliding green background */
.lang-switch__thumb {
    position: absolute;
    z-index: 0;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: 999px;
    background: linear-gradient(135deg, #17C46E 0%, #0F8247 100%);
    box-shadow: 0 4px 10px rgba(15, 130, 71, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform 0.5s cubic-bezier(0.5, 0, 0.2, 1);
}

.lang-switch.is-bn .lang-switch__thumb {
    transform: translateX(100%);
}

/* the two labels — fixed, never move */
.lang-switch__opt {
    position: relative;
    z-index: 1;
    flex: 0 0 4.5rem;
    width: 4.5rem;
    padding: 0.7rem 0;
    text-align: center;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    transition: color 0.35s ease;
}

.lang-switch__opt[data-lang="bn"] {
    font-family: var(--font-family-bn);
    font-size: 0.9rem;
    letter-spacing: 0;
}

/* active label = white (sits on the green thumb) */
.lang-switch:not(.is-bn) .lang-switch__opt[data-lang="en"],
.lang-switch.is-bn .lang-switch__opt[data-lang="bn"] {
    color: #FFFFFF;
}

/* hover / focus */
.site-header .site-header__actions .lang-toggle.lang-switch:hover,
.site-header .site-header__actions .lang-toggle.lang-switch:focus-visible {
    background: #F7EFFC;
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(75, 0, 114, 0.16);
}

.lang-switch:not(.is-bn):hover .lang-switch__opt[data-lang="bn"],
.lang-switch.is-bn:hover .lang-switch__opt[data-lang="en"] {
    color: #2A0042;
}

.site-header .site-header__actions .lang-toggle.lang-switch:active {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .lang-switch__thumb,
    .lang-switch__opt {
        transition: none;
    }
}