:root {
            --mt-green: #16803c;
            --mt-green-dark: #0f3d22;
            --mt-green-soft: #edf8f0;
            --mt-ink: #101828;
            --mt-muted: #667085;
            --mt-line: #eaecf0;
            --mt-border: #e5e7eb;
            --mt-bg: #ffffff;
            --mt-soft: #f8fafc;
            --mt-radius: 18px;
            --mt-shadow: 0 22px 50px rgba(16, 24, 40, 0.10);
            --mt-header-h: 56px;
        }
        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; scroll-padding-top: 72px; overflow-x: hidden; }
        body {
            margin: 0; min-height: 100vh; overflow-x: hidden;
            padding-top: var(--mt-header-h);
            /* Inter has no Bengali glyphs at all, so any Bangla text was
               silently falling through past every named font here to
               whatever generic system Bangla font the OS happened to
               ship -- inconsistent, and often a poor weight/style match
               next to Inter. Per-character font fallback means listing
               Noto Sans Bengali right after Inter is enough: Latin text
               still renders in Inter (first font with a glyph for it),
               Bangla text renders in Noto Sans Bengali (first font with
               a glyph for *that*), automatically, character by character. */
            font-family: Inter, "Noto Sans Bengali", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            font-size: 17px; line-height: 1.6; color: var(--mt-ink); background: var(--mt-bg);
            -webkit-font-smoothing: antialiased;
        }
        a { text-decoration: none; }
        a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
            outline: 3px solid rgba(22, 128, 60, 0.45); outline-offset: 2px;
        }
        .site-shell { min-height: 100vh; display: flex; flex-direction: column; }
        .site-container { width: 100%; max-width: 1224px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

        .site-header {
            position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
            transform: translateY(0); transition: transform 0.32s ease;
            background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(234, 236, 240, 0.86);
        }
        .site-header.is-hidden { transform: translateY(-100%); }
        .site-header .site-container { max-width: 1360px; }
        .site-nav { min-height: var(--mt-header-h); display: flex; align-items: center; gap: 22px; }
        .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--mt-ink); flex: 0 0 auto; }
        .brand-symbol {
            width: 30px; height: 30px; border-radius: 50%;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--mt-green); color: #fff; font-size: 15px;
        }
        .brand-text { display: flex; flex-direction: column; line-height: 1.02; }
        .brand-name { font-size: 16px; font-weight: 900; letter-spacing: -0.04em; }
        .brand-subtitle { margin-top: 2px; color: var(--mt-muted); font-size: 10px; font-weight: 650; letter-spacing: 0.03em; text-transform: uppercase; }

        .nav-links { display: flex; align-items: center; gap: 4px; }
        .nav-link-main { color: #344054; font-size: 14px; font-weight: 700; padding: 7px 13px; border-radius: 999px; transition: 0.16s ease; }
        .nav-link-main:hover, .nav-link-main.active { color: var(--mt-green); background: var(--mt-green-soft); }

        /* display:flex on the wrapper (not the default block) so the
           inline-flex trigger button inside it gets real flexbox
           centering instead of line-box/baseline layout -- the same class
           of bug that misaligned the hamburger button against Login
           earlier; learned from that, avoided here from the start. */
        .nav-dropdown { position: relative; display: flex; align-items: center; }
        .nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; font-family: inherit; cursor: pointer; line-height: 1; }
        .nav-dropdown-caret { font-size: 10px; transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1); }
        .nav-dropdown.open .nav-dropdown-caret { transform: rotate(180deg); }

        /* The "Apple-like" part: starts 14px above its resting spot and
           fully transparent, then eases down into place. The
           cubic-bezier(0.16, 1, 0.3, 1) curve (fast start, long gentle
           settle) plus a slower-than-usual 360ms duration is what gives it
           that silky, unhurried feel instead of a snappy generic dropdown. */
        .nav-dropdown-panel {
            position: absolute; top: calc(100% + 16px); left: 50%;
            width: 300px; z-index: 1040;
            background: #fff; border: 1px solid var(--mt-line); border-radius: 18px;
            box-shadow: var(--mt-shadow); padding: 10px;
            display: flex; flex-direction: column; gap: 2px;
            opacity: 0; visibility: hidden; pointer-events: none;
            transform: translate(-50%, -14px);
            transition: opacity 0.36s cubic-bezier(0.16, 1, 0.3, 1),
                        transform 0.36s cubic-bezier(0.16, 1, 0.3, 1),
                        visibility 0.36s;
        }
        .nav-dropdown-panel.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }

        .nav-dropdown-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--mt-ink); }
        .nav-dropdown-item:hover, .nav-dropdown-item:focus-visible { background: var(--mt-green-soft); color: var(--mt-ink); }
        .nav-dropdown-item-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--mt-green-soft); color: var(--mt-green); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex: 0 0 auto; }
        .nav-dropdown-item-title { display: block; font-weight: 700; font-size: 14.5px; }
        .nav-dropdown-item-desc { display: block; font-size: 12px; color: var(--mt-muted); margin-top: 1px; }

        .nav-search { display: flex; align-items: center; gap: 8px; background: var(--mt-soft); border: 1px solid var(--mt-line); border-radius: 999px; padding: 0 14px; height: 38px; }
        .nav-search i { color: var(--mt-muted); font-size: 15px; }
        .nav-search input { border: 0; background: transparent; outline: none; font-size: 14px; width: 150px; font-family: inherit; color: var(--mt-ink); }
        .nav-search input::placeholder { color: #98a2b3; }
        .nav-search:focus-within { border-color: rgba(22,128,60,0.4); background: #fff; }

        .nav-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto; }

        /* display:flex here (not the default block) is the actual fix for
           the Login/hamburger misalignment: a block parent lays out an
           inline-flex child (.more-toggle) using line-box/baseline rules,
           which pulls in the page's ambient line-height (27.2px, from
           body's 17px * 1.6) and inflates this wrapper past the button's
           real 38px -- confirmed by measuring actual rendered boxes with
           Playwright, not just reading the CSS. Flex removes baseline
           layout entirely, so the wrapper shrinks to exactly the button's
           height and centers identically to Login, which was already a
           direct flex child of .nav-actions with no such wrapper. */
        .more-menu { position: relative; display: inline-flex; align-items: center; }
        /* Fixed 38px to match .btn-site's height:38px exactly -- see the
           comment there. padding/margin/line-height reset to 0/0/1
           because a bare <button> carries browser-default values for all
           three that would otherwise throw this off by a few px. */
        .more-toggle { width: 38px; height: 38px; padding: 0; margin: 0; border-radius: 50%; border: 1px solid var(--mt-line); background: #fff; color: var(--mt-ink); display: inline-flex; align-items: center; justify-content: center; line-height: 1; font-size: 18px; cursor: pointer; transition: 0.16s ease; flex: 0 0 auto; }
        .more-toggle:hover, .more-toggle[aria-expanded="true"] { color: var(--mt-green); border-color: rgba(22,128,60,0.28); background: var(--mt-green-soft); }
        .more-toggle-bars { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 18px; height: 18px; flex: 0 0 auto; }
        /* border-radius:999px (not a small px value) guarantees the radius
           always gets clamped to exactly half the bar's height, so the
           short ends render as true semicircles -- a small fixed px value
           (e.g. 2px against a 2.5px-tall bar) only partially rounds and
           reads as barely-softened square corners at this size. */
        .more-toggle-bars span { display: block; width: 100%; height: 2.5px; border-radius: 999px; background: currentColor; }

        .more-panel {
            position: absolute; top: calc(100% + 12px); right: 0; z-index: 1040;
            width: 280px; max-height: calc(100vh - 100px); overflow-y: auto;
            background: #fff; border: 1px solid var(--mt-line); border-radius: 16px;
            box-shadow: var(--mt-shadow); padding: 8px;
            display: flex; flex-direction: column; gap: 1px;
            opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.98);
            transform-origin: top right;
            transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
        }
        .more-panel.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
        .more-panel a { padding: 9px 14px; border-radius: 10px; color: #344054; font-weight: 700; font-size: 14.5px; }
        .more-panel a:hover, .more-panel a:focus-visible { color: var(--mt-green); background: var(--mt-green-soft); }
        .more-panel-sub { padding-left: 26px !important; font-weight: 600; font-size: 14px; color: #475467; }
        .more-panel-group { padding: 10px 14px 2px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mt-muted); }
        .more-panel-divider { height: 1px; background: var(--mt-line); margin: 6px 4px; }
        .more-panel-highlight { color: var(--mt-green) !important; display: flex; align-items: center; gap: 8px; }
        .more-panel-highlight:hover { background: var(--mt-green-soft); }

        /* height:38px (not min-height) so this is pixel-identical to
           .more-toggle's fixed 38px circle -- min-height alone left it
           ~0.4px taller in practice (14px font * inherited 1.6 line-height
           + 16px padding = 38.4px), which is exactly the kind of subpixel
           drift that reads as "not aligned" next to a hard-sized neighbor.
           btn-site-lg below still works: CSS min-height always wins over
           a smaller height when both apply, so its min-height:52px still
           forces the bigger buttons taller regardless of this height:38px. */
        .btn-site { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent; font-size: 14px; font-weight: 800; line-height: 1; transition: 0.16s ease; }
        .btn-site-lg { min-height: 52px; padding: 13px 28px; font-size: 16px; }
        .btn-site-login { color: var(--mt-ink); background: #fff; border-color: var(--mt-line); }
        .btn-site-login:hover { color: var(--mt-green); border-color: rgba(22,128,60,0.28); background: var(--mt-green-soft); }
        .btn-site-primary { color: #fff; background: var(--mt-green); border-color: var(--mt-green); }
        .btn-site-primary:hover { color: #fff; background: #126b32; border-color: #126b32; transform: translateY(-1px); }
        .btn-site-ghost { color: #fff; background: transparent; border: 1px solid rgba(255,255,255,0.5); }
        .btn-site-ghost:hover { color: #fff; background: rgba(255,255,255,0.12); }
        .btn-site-onlight { color: var(--mt-green); background: #fff; border: 0; }
        .btn-site-onlight:hover { color: var(--mt-green-dark); background: #f1f5f9; }

        /* Reuses .btn-site's height:38px (not min-height) so it lines up
           with Login and the hamburger exactly -- see the comment on
           .more-menu above for why min-height alone drifts by ~0.4px here. */
        .lang-switch { color: var(--mt-ink); background: #fff; border-color: var(--mt-line); padding: 0 14px; font-size: 13px; gap: 6px; }
        .lang-switch:hover { color: var(--mt-green); border-color: rgba(22,128,60,0.28); background: var(--mt-green-soft); }
        .lang-switch i { font-size: 14px; }

        .site-main { flex: 1; }
        .site-section { padding: 72px 0; }
        .bg-soft { background: var(--mt-soft); border-top: 1px solid var(--mt-line); border-bottom: 1px solid var(--mt-line); }
        .section-kicker { color: var(--mt-green); font-size: 12px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
        .section-title { font-weight: 900; letter-spacing: -0.045em; line-height: 1.04; }
        .text-soft { color: var(--mt-muted); }
        .lead-soft { font-size: 19px; line-height: 1.7; color: var(--mt-muted); }

        .clean-card { background: #fff; border: 1px solid var(--mt-line); border-radius: var(--mt-radius); }
        .lift { transition: transform .18s ease, box-shadow .18s ease; }
        .lift:hover { transform: translateY(-4px); box-shadow: var(--mt-shadow); }
        .feature-icon { width: 54px; height: 54px; border-radius: 16px; background: var(--mt-green-soft); color: var(--mt-green); display: inline-flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 18px; }
        .badge-soft { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--mt-green-soft); color: var(--mt-green); font-size: 12px; font-weight: 800; }
        /* Shared here (not page-scoped) because it's used on more than one
           page -- home.html originally owned this rule alone, so a second
           page reusing the same .cta-band markup rendered as plain
           unstyled text with no background, centering, or color at all. */
        .cta-band { border-radius: 26px; padding: 56px 32px; text-align: center; background: linear-gradient(135deg, var(--mt-green-dark), var(--mt-green)); color: #fff; }

        /* Shared for the same reason as .cta-band above: used on more than
           one page (home's "years of experience" strip, about-us's
           "highlights" strip). The count-up JS (home.html's extra_scripts)
           stays page-scoped, since it only targets [data-count] elements
           and does nothing where there aren't any -- harmless to omit on
           pages that just want a static bold number instead. */
        .stat-strip { padding: 30px 0; border-top: 1px solid var(--mt-line); border-bottom: 1px solid var(--mt-line); }
        .stat-num { font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -0.03em; }
        .stat-label { color: var(--mt-muted); font-weight: 600; font-size: 15px; }

        /* Shared shell for "story" pages (about-us, the three sister-
           concern pages): a centered hero and a centered section header,
           reused across pages whose content otherwise differs completely
           by page -- moved here the moment a second page needed it, same
           reasoning as every other shared-component move today. */
        .about-hero { padding: 48px 0 0; }
        .about-hero-title { font-size: clamp(30px, 4.4vw, 50px); font-weight: 800; letter-spacing: normal; line-height: 1.3; margin: 16px 0 16px; }
        .about-section-head { text-align: center; max-width: 560px; margin: 0 auto 32px; }

        /* Moved here the moment home.html needed the same "real brand
           statement" band as About Us's vision/mission section, instead of
           reinventing a second version of it -- same slogan, same visual
           treatment, on purpose. */
        .about-vision-band { border-radius: 26px; padding: 56px 40px; text-align: center; background: linear-gradient(135deg, var(--mt-green-dark), var(--mt-green)); color: #fff; }
        .about-slogan { font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: normal; line-height: 1.3; margin: 22px 0; }

        /* Long-form Bangla guide pages (fish-guide, cow-guide, ...). Shared
           here rather than page-scoped because it's already used on more
           than one page -- see the .cta-band comment above for why that
           matters (a page-scoped component silently breaks the moment a
           second page reuses its markup without also copying its CSS).
           Normal letter-spacing / no ultra-heavy weights throughout:
           negative tracking and weight-900 headings are a Latin-headline
           convention that crowds and collides Bangla matras/conjuncts
           instead of looking sharp -- see the fuller explanation in the
           2026-09-22 decisions-log entry on this. */
        .guide-hero { padding: 40px 0 8px; }
        .guide-title { font-size: clamp(28px, 3.8vw, 42px); font-weight: 800; letter-spacing: normal; line-height: 1.35; margin: 16px 0 16px; }

        .guide-quicknav { display: flex; flex-wrap: wrap; gap: 8px; }
        .guide-quicknav a { flex: 0 0 auto; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--mt-line); background: #fff; color: #344054; font-weight: 700; font-size: 13.5px; transition: 0.16s ease; }
        .guide-quicknav a:hover { color: var(--mt-green); border-color: rgba(22,128,60,0.3); background: var(--mt-green-soft); }

        .guide-section { padding: 34px 0; border-top: 1px solid var(--mt-line); scroll-margin-top: 84px; }
        .guide-section:first-of-type { border-top: 0; }
        .guide-section-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
        /* Same solid-circle, white-numeral treatment as .step-num on the
           homepage's "how it works" section, reused here for consistency
           with an already-good-looking pattern on the site. */
        .guide-section-num { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: var(--mt-green); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; }
        .guide-section h2 { font-size: 21px; font-weight: 800; letter-spacing: normal; line-height: 1.5; margin: 0; }
        .guide-body { font-size: 16px; line-height: 1.9; color: #344054; }
        .guide-body + .guide-body { margin-top: 14px; }

        .guide-check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
        .guide-check-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; line-height: 1.65; color: #344054; }
        .guide-check-list i { flex: 0 0 auto; color: var(--mt-green); font-size: 17px; margin-top: 2px; }

        .guide-callout { background: var(--mt-green-soft); border: 1px solid rgba(22,128,60,0.18); border-radius: var(--mt-radius); padding: 20px 22px; margin-top: 18px; display: flex; gap: 14px; align-items: flex-start; }
        .guide-callout i { flex: 0 0 auto; color: var(--mt-green); font-size: 22px; margin-top: 2px; }
        .guide-callout p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--mt-green-dark); }

        .guide-table-wrap { overflow-x: auto; border: 1px solid var(--mt-line); border-radius: 14px; margin-top: 4px; }
        .guide-table { width: 100%; border-collapse: collapse; min-width: 480px; font-size: 14.5px; }
        .guide-table th { background: var(--mt-green-soft); color: var(--mt-green-dark); font-weight: 800; text-align: center; padding: 11px 14px; border-bottom: 1px solid var(--mt-line); white-space: nowrap; }
        .guide-table td { text-align: center; padding: 10px 14px; border-bottom: 1px solid var(--mt-line); color: #344054; }
        .guide-table tr:last-child td { border-bottom: 0; }
        .guide-table tr:nth-child(even) td { background: #fafbfc; }

        .guide-or { text-align: center; font-weight: 800; color: var(--mt-muted); font-size: 13.5px; margin: 22px 0; position: relative; }
        .guide-or::before, .guide-or::after { content: ""; position: absolute; top: 50%; width: calc(50% - 32px); height: 1px; background: var(--mt-line); }
        .guide-or::before { left: 0; }
        .guide-or::after { right: 0; }

        /* Shown at the top of the long-form Bangla content pages when
           viewed under /en/ -- these haven't been translated yet, so this
           says so honestly instead of silently showing Bangla text on an
           English URL with no explanation. Shared (not page-scoped) since
           the same 7 pages all need it. */
        .lang-fallback-note { display: flex; align-items: flex-start; gap: 12px; background: #fff7ed; border: 1px solid #fde4b8; border-radius: 14px; padding: 14px 18px; margin-bottom: 28px; }
        .lang-fallback-note i { flex: 0 0 auto; color: #b45309; font-size: 18px; margin-top: 2px; }
        .lang-fallback-note p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #92400e; }
        .lang-fallback-note a { color: #92400e; font-weight: 800; text-decoration: underline; }

        @media (max-width: 575.98px) {
            .guide-section h2 { font-size: 18px; }
            .guide-body { font-size: 15px; }
        }
        .prod-card { display: block; color: var(--mt-ink); height: 100%; overflow: hidden; }
        .prod-card:hover { color: var(--mt-ink); }
        .prod-img { height: 200px; background: linear-gradient(135deg, #eef2f6, #f8fafc); display: flex; align-items: center; justify-content: center; color: #9aa6b2; overflow: hidden; }
        .prod-img img { width: 100%; height: 100%; object-fit: cover; }

        .ph-tile { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
        .ph-icon { width: 34%; max-width: 88px; aspect-ratio: 1; }
        .ph-label { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.72; }
        .ph-fish { background: linear-gradient(135deg, #e8f7ee, #f6fdf8); color: var(--mt-green-dark); }
        .ph-cattle { background: linear-gradient(135deg, #fbf1e3, #fefaf3); color: #92400e; }
        .ph-shrimp { background: linear-gradient(135deg, #fdeeea, #fef7f5); color: #c0432a; }

        .search-overlay { position: fixed; inset: 0; z-index: 1060; background: rgba(16, 24, 40, 0.45); opacity: 0; visibility: hidden; transition: opacity .2s ease; }
        .search-overlay.open { opacity: 1; visibility: visible; }
        .search-sheet { position: absolute; top: 0; left: 0; right: 0; background: #fff; padding: 16px; transform: translateY(-100%); transition: transform .25s ease; }
        .search-overlay.open .search-sheet { transform: translateY(0); }
        .search-sheet form { display: flex; gap: 10px; width: min(1180px, 100%); margin: 0 auto; }
        .search-sheet input { flex: 1; height: 52px; border: 1px solid var(--mt-line); border-radius: 14px; padding: 0 16px; font-size: 16px; font-family: inherit; }

        .bottom-nav { display: none; }

        .site-footer { margin-top: 72px; border-top: 1px solid var(--mt-line); background: #fff; padding: 44px 0 32px; }
        .footer-title { font-weight: 900; margin-bottom: 12px; }
        .footer-link { display: block; color: var(--mt-muted); font-size: 15px; margin-bottom: 8px; }
        .footer-link:hover { color: var(--mt-green); }
        .footer-bottom { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--mt-line); display: flex; justify-content: space-between; gap: 16px; color: var(--mt-muted); font-size: 13px; }

        @media (max-width: 991.98px) {
            :root { --mt-header-h: 52px; }
            .site-container { padding-left: 16px; padding-right: 16px; }
            .nav-links, .nav-search, .nav-actions { display: none; }
            body { padding-bottom: 74px; }
            .site-section { padding: 52px 0; }
            .site-footer { margin-top: 52px; }
            .footer-bottom { flex-direction: column; }
            .bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; background: rgba(255, 255, 255, 0.62); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid rgba(234, 236, 240, 0.7); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
            .bn-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: 0; cursor: pointer; color: var(--mt-muted); font-size: 11px; font-weight: 700; padding: 6px 0; border-radius: 14px; }
            .bn-item i { font-size: 21px; }
            .bn-item.active { color: var(--mt-green); }
        }