/* BECCO PUB-03 - APPROVED PUBLIC SHELL CSS */
/* ==========================================================
   BECCO HOME BOARD — PDF STYLE FINAL
   Always two cards side-by-side.
   Image above biography.
   ========================================================== */

.home-board-section {
    width:min(1180px, calc(100% - 32px)) !important;
}

.home-board-grid {
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:22px !important;
}

/*
 * Override the previous split image/text card.
 * Each Director is now a vertical profile card.
 */
.home-board-card {
    display:flex !important;
    flex-direction:column !important;

    min-width:0 !important;
    min-height:0 !important;

    background:#ffffff !important;
    overflow:hidden !important;
}

/*
 * PDF-style portrait window.
 * Wider than it is tall, therefore Manraj's long source
 * photograph cannot show his legs.
 */
.home-board-photo {
    position:relative !important;

    width:100% !important;
    height:auto !important;
    min-height:0 !important;

    aspect-ratio:4 / 3 !important;

    overflow:hidden !important;
    background:#eeeeee !important;

    flex:0 0 auto !important;
}

.home-board-photo img {
    display:block !important;

    width:100% !important;
    height:100% !important;
    min-height:0 !important;

    max-width:none !important;

    object-fit:cover !important;

    transform:none !important;
}

/* Rohit — retain the office portrait naturally */
.home-board-card:nth-child(1) .home-board-photo img {
    object-position:center 30% !important;
}

/*
 * Manraj — frame around head, torso and desk.
 * The lower-body portion of the tall source image is
 * deliberately outside the portrait window.
 */
.home-board-card:nth-child(2) .home-board-photo img {
    object-position:center 21% !important;
}

.home-board-content {
    display:block !important;
    flex:1 1 auto !important;

    padding:30px 30px 34px !important;
}

.home-board-role {
    margin:0 !important;

    color:#b48628 !important;

    font-size:11px !important;
    font-weight:950 !important;
    letter-spacing:.14em !important;
    text-transform:uppercase !important;
}

.home-board-content h3 {
    margin:9px 0 0 !important;

    font-size:25px !important;
    line-height:1.08 !important;
}

.home-board-content p {
    margin:17px 0 0 !important;

    font-size:14px !important;
    line-height:1.72 !important;
}

/*
 * IMPORTANT:
 * Even tablet/phone stays two columns.
 */
@media (max-width: 800px) {

    .home-board-grid {
        grid-template-columns:repeat(2, minmax(0,1fr)) !important;
        gap:12px !important;
    }

    .home-board-card {
        display:flex !important;
        flex-direction:column !important;
    }

    .home-board-photo {
        width:100% !important;
        height:auto !important;
        min-height:0 !important;

        aspect-ratio:4 / 3 !important;
    }

    .home-board-photo img {
        width:100% !important;
        height:100% !important;
        min-height:0 !important;
    }

    .home-board-content {
        padding:22px 20px 26px !important;
    }
}

/*
 * Real phone width:
 * still two columns, but typography becomes compact.
 */
@media (max-width: 560px) {

    .home-board-section {
        width:calc(100% - 20px) !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .home-board-heading {
        margin-bottom:20px !important;
    }

    .home-board-heading h2 {
        font-size:34px !important;
    }

    .home-board-heading p {
        font-size:13px !important;
        line-height:1.55 !important;
    }

    .home-board-grid {
        grid-template-columns:repeat(2, minmax(0,1fr)) !important;
        gap:8px !important;
    }

    .home-board-photo {
        aspect-ratio:4 / 3 !important;
    }

    .home-board-content {
        padding:16px 12px 19px !important;
    }

    .home-board-role {
        font-size:8px !important;
        letter-spacing:.08em !important;
        line-height:1.3 !important;
    }

    .home-board-content h3 {
        margin-top:6px !important;

        font-size:15px !important;
        line-height:1.1 !important;
        letter-spacing:-.025em !important;
    }

    .home-board-content p {
        margin-top:11px !important;

        font-size:10px !important;
        line-height:1.5 !important;
    }
}

/* CEO BOARD IMAGE — SYMMETRICAL FINAL */
.home-board-card:nth-child(1) .home-board-photo img {
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    transform:none !important;
}

/* =========================================================
   BECCO HOME PRECIOUS METALS CORE — 2026 FINAL
   ========================================================= */

/*
 * Hero buttons:
 * View Projects and Contact BECCO use the SAME gold treatment.
 */
.hero-actions .btn-primary,
.hero-actions .btn-ghost {
    background:#d5ad4f !important;
    border-color:#d5ad4f !important;
    color:#111111 !important;

    box-shadow:none !important;
}

.hero-actions .btn-primary:hover,
.hero-actions .btn-ghost:hover {
    background:#e2c268 !important;
    border-color:#e2c268 !important;
    color:#111111 !important;
}


/*
 * The old Project Ecosystem / moving logo carousel
 * is intentionally removed from the Home presentation.
 */
.partner-band {
    display:none !important;
}


/*
 * The 01 / 02 / 03 numbering no longer appears.
 */
.service-card .num {
    display:none !important;
}


/*
 * Without the number, remove unnecessary space before headings.
 */
.service-card h3 {
    margin-top:0 !important;
}


/*
 * Manraj:
 * use the new clean 4:3 source directly.
 * No wall-frame composition and no artificial zoom.
 */
.home-board-card:nth-child(2) .home-board-photo img {
    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
    object-position:center center !important;

    transform:none !important;
}

/* =========================================================
   BECCO HERO NEWS PANEL — FINAL
   ========================================================= */

.hero-news-panel {
    display:block !important;

    padding:0 !important;

    overflow:hidden !important;

    background:rgba(10,10,10,.55) !important;

    border:1px solid rgba(213,173,79,.30) !important;

    border-radius:0 !important;

    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
}

.hero-news-heading {
    padding:17px 20px !important;

    border-bottom:1px solid rgba(255,255,255,.10) !important;
}

.hero-news-heading span {
    display:block !important;

    color:#d5ad4f !important;

    font-size:11px !important;
    font-weight:900 !important;

    letter-spacing:.16em !important;
    text-transform:uppercase !important;
}

.hero-news-item {
    display:block !important;

    position:relative !important;

    padding:20px !important;

    text-decoration:none !important;

    color:#ffffff !important;

    border-bottom:1px solid rgba(255,255,255,.10) !important;

    transition:
        background .25s ease,
        padding-left .25s ease !important;
}

.hero-news-item:last-child {
    border-bottom:0 !important;
}

.hero-news-item:hover {
    background:rgba(213,173,79,.07) !important;
    padding-left:25px !important;
}

.hero-news-kicker {
    display:block !important;

    margin-bottom:7px !important;

    color:#d5ad4f !important;

    font-size:10px !important;
    font-weight:900 !important;

    line-height:1.2 !important;

    letter-spacing:.14em !important;
    text-transform:uppercase !important;
}

.hero-news-item strong {
    display:block !important;

    margin:0 0 7px !important;

    color:#ffffff !important;

    font-size:20px !important;
    font-weight:850 !important;

    line-height:1.2 !important;
}

.hero-news-copy {
    display:block !important;

    max-width:420px !important;

    color:rgba(255,255,255,.66) !important;

    font-size:12px !important;
    font-weight:400 !important;

    line-height:1.55 !important;

    text-align:left !important;
}

.hero-news-link {
    display:inline-block !important;

    margin-top:11px !important;

    color:#d5ad4f !important;

    font-size:11px !important;
    font-weight:800 !important;

    text-align:left !important;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width:980px) {

    .hero-news-panel {
        display:block !important;

        grid-template-columns:none !important;

        gap:0 !important;

        padding:0 !important;

        margin-top:28px !important;
    }

    .hero-news-item {
        padding:17px !important;

        border-right:0 !important;
        border-bottom:1px solid rgba(255,255,255,.10) !important;
    }

    .hero-news-item strong {
        font-size:18px !important;
    }

    .hero-news-item:hover {
        padding-left:21px !important;
    }
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width:560px) {

    .hero-news-panel {
        border-radius:0 !important;
    }

    .hero-news-heading {
        padding:14px 16px !important;
    }

    .hero-news-item {
        padding:16px !important;
    }

    .hero-news-item strong {
        font-size:17px !important;
    }

    .hero-news-copy {
        font-size:11px !important;
    }
}

:root {
        --bg: #f7f4ee;
        --surface: #ffffff;
        --text: #151515;
        --muted: rgba(21,21,21,.62);
        --line: rgba(21,21,21,.1);
        --accent: #c99a34;
        --accent-2: #e41f1f;
        --dark: #0a0c10;
        --footer: #0a0c10;
    }

    [data-theme="dark"] {
        --bg: #07090d;
        --surface: #10141b;
        --text: #ffffff;
        --muted: rgba(255,255,255,.62);
        --line: rgba(255,255,255,.1);
        --accent: #d4a84a;
        --accent-2: #ff3030;
        --footer: #050609;
    }

    [data-theme="red"] {
        --bg: #fff8f5;
        --surface: #ffffff;
        --text: #171111;
        --muted: rgba(23,17,17,.62);
        --line: rgba(228,31,31,.12);
        --accent: #e41f1f;
        --accent-2: #c99a34;
        --footer: #150606;
    }

    * { box-sizing: border-box; }

    body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
        background: var(--bg);
        color: var(--text);
    }

    a { color: inherit; }

    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding: 14px 34px;
        border: 0;
        border-bottom: 1px solid rgba(255,255,255,.18);
        border-radius: 0;
        background: transparent;
        color: #fff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
    }

    [data-theme="gold"] .site-header,
    [data-theme="red"] .site-header {
        color: #121212;
        border-bottom: 1px solid rgba(0,0,0,.10);
    }

    [data-theme="dark"] .site-header {
        color: #fff;
        border-bottom: 1px solid rgba(255,255,255,.14);
    }

    .brand {
        display: flex;
        align-items: center;
        text-decoration: none;
        min-width: 180px;
        height: 52px;
    }

    .brand-logo {
        display: block;
        width: 126px;
        height: auto;
        object-fit: contain;
        filter: none;
    }

    .site-nav {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .site-nav a {
        text-decoration: none;
        color: rgba(255,255,255,.82);
        font-size: 14px;
        font-weight: 800;
        padding: 10px 12px;
        border-radius: 0;
    }

    [data-theme="gold"] .site-nav a,
    [data-theme="red"] .site-nav a {
        color: rgba(18,18,18,.78);
    }

    .site-nav a:hover,
    .site-nav a.active {
        color: #fff;
    }

    [data-theme="gold"] .site-nav a:hover,
    [data-theme="gold"] .site-nav a.active,
    [data-theme="red"] .site-nav a:hover,
    [data-theme="red"] .site-nav a.active {
        color: #111;
    }

    .header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .language-switcher,
    .theme-toggle {
        border: 0;
        background: transparent;
        color: inherit;
        border-radius: 0;
        padding: 8px 10px;
        outline: none;
        font-weight: 900;
        box-shadow: none;
    }

    [data-theme="gold"] .language-switcher,
    [data-theme="gold"] .theme-toggle,
    [data-theme="red"] .language-switcher,
    [data-theme="red"] .theme-toggle {
        color: #111;
    }

    .theme-toggle {
        width: 44px;
        height: 40px;
        display: inline-grid;
        place-items: center;
        font-size: 18px;
        line-height: 1;
    }

    .language-switcher option {
        color: #111;
    }

    .theme-toggle {
        cursor: pointer;
    }

    .nav-toggle {
        display: none;
        background: transparent;
        border: 0;
        width: 42px;
    }

    .nav-toggle span {
        display: block;
        height: 2px;
        background: currentColor;
        margin: 7px 0;
    }

    .hero {
        position: relative;
        min-height: 100vh;
        display: grid;
        align-items: end;
        overflow: hidden;
        background:
            linear-gradient(90deg, rgba(4,5,7,.94) 0%, rgba(4,5,7,.75) 42%, rgba(4,5,7,.22) 100%),
            radial-gradient(circle at 80% 30%, rgba(212,168,74,.28), transparent 30%),
            linear-gradient(135deg, #101217, #2b1b12);
        color: #fff;
        padding: 130px 24px 70px;
    }

    .hero video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: .34;
        z-index: 0;
    }

    .hero::after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        height: 190px;
        background: linear-gradient(to top, var(--bg), transparent);
        z-index: 1;
    }

    .hero-inner {
        position: relative;
        z-index: 2;
        width: min(1180px, 100%);
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1.1fr .9fr;
        gap: 50px;
        align-items: end;
    }

    .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: #f3d17b;
        font-weight: 900;
        letter-spacing: .14em;
        text-transform: uppercase;
        font-size: 12px;
        margin-bottom: 18px;
    }

    .eyebrow::before {
        content: "";
        width: 42px;
        height: 2px;
        background: #e41f1f;
    }

    .hero h1 {
        margin: 0;
        font-size: clamp(44px, 7vw, 96px);
        line-height: .92;
        letter-spacing: -0.07em;
        max-width: 880px;
    }

    .hero p {
        max-width: 620px;
        margin: 24px 0 0;
        color: rgba(255,255,255,.72);
        font-size: 18px;
        line-height: 1.7;
    }

    .hero-actions {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        margin-top: 34px;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 52px;
        padding: 0 22px;
        border-radius: 16px;
        text-decoration: none;
        font-weight: 900;
    }

    .btn-primary {
        background: linear-gradient(135deg, #d4a84a, #f4d47a);
        color: #161007;
    }

    .btn-ghost {
        border: 1px solid rgba(255,255,255,.22);
        color: #fff;
        background: rgba(255,255,255,.06);
    }

    .hero-panel {
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 28px;
        padding: 22px;
        backdrop-filter: blur(16px);
    }

    .panel-row {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        padding: 18px 0;
        border-bottom: 1px solid rgba(255,255,255,.1);
    }

    .panel-row:last-child { border-bottom: 0; }

    .panel-row strong {
        font-size: 28px;
        color: #f3d17b;
    }

    .panel-row span {
        color: rgba(255,255,255,.62);
        font-size: 13px;
        text-align: right;
    }

    .section {
        width: min(1180px, calc(100% - 32px));
        margin: 0 auto;
        padding: 86px 0;
    }

    .section-head {
        display: flex;
        justify-content: space-between;
        gap: 24px;
        align-items: end;
        margin-bottom: 30px;
    }

    .section-kicker {
        color: var(--accent);
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .12em;
        font-size: 12px;
        margin-bottom: 10px;
    }

    .section h2 {
        margin: 0;
        font-size: clamp(32px, 4vw, 56px);
        line-height: 1;
        letter-spacing: -0.05em;
    }

    .section-intro {
        max-width: 480px;
        color: var(--muted);
        line-height: 1.7;
    }

    .service-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    .service-card {
        min-height: 320px;
        background:
            linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.07)),
            var(--surface);
        border: 1px solid var(--line);
        border-radius: 28px;
        padding: 28px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-shadow: 0 20px 70px rgba(0,0,0,.06);
    }

    .service-card .num {
        color: var(--accent);
        font-weight: 900;
    }

    .service-card h3 {
        font-size: 27px;
        letter-spacing: -0.04em;
        margin: 18px 0 12px;
    }

    .service-card p {
        color: var(--muted);
        line-height: 1.7;
    }

    .project-strip {
        display: grid;
        grid-template-columns: 1.15fr .85fr;
        gap: 18px;
    }

    .project-card {
        min-height: 390px;
        border-radius: 32px;
        overflow: hidden;
        position: relative;
        background:
            linear-gradient(135deg, rgba(0,0,0,.78), rgba(0,0,0,.2)),
            radial-gradient(circle at 80% 20%, rgba(212,168,74,.28), transparent 32%),
            #20242b;
        color: #fff;
        padding: 28px;
        display: flex;
        flex-direction: column;
        justify-content: end;
    }

    .project-card.red {
        background:
            linear-gradient(135deg, rgba(0,0,0,.72), rgba(228,31,31,.18)),
            radial-gradient(circle at 85% 25%, rgba(228,31,31,.42), transparent 32%),
            #211010;
    }

    .project-card h3 {
        margin: 0 0 12px;
        font-size: 36px;
        letter-spacing: -0.05em;
    }

    .project-card p {
        color: rgba(255,255,255,.68);
        line-height: 1.7;
        max-width: 620px;
    }

    .contact-band {
        border-radius: 34px;
        background:
            linear-gradient(135deg, rgba(10,12,16,.96), rgba(28,22,13,.94)),
            radial-gradient(circle at 80% 20%, rgba(212,168,74,.32), transparent 30%);
        color: #fff;
        padding: 46px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 28px;
    }

    .contact-band h2 {
        font-size: clamp(32px, 4vw, 54px);
    }

    .site-footer {
        background: var(--footer);
        color: #fff;
        padding: 60px 24px 26px;
    }

    .footer-grid {
        width: min(1180px, 100%);
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1.4fr .7fr .9fr;
        gap: 36px;
    }

    .footer-brand {
        font-size: 32px;
        font-weight: 900;
        color: #f3d17b;
    }

    .site-footer p,
    .site-footer a {
        color: rgba(255,255,255,.6);
        line-height: 1.7;
    }

    .site-footer a {
        display: block;
        text-decoration: none;
        margin-bottom: 8px;
    }

    .footer-bottom {
        width: min(1180px, 100%);
        margin: 36px auto 0;
        padding-top: 22px;
        border-top: 1px solid rgba(255,255,255,.1);
        display: flex;
        justify-content: space-between;
        gap: 18px;
        color: rgba(255,255,255,.46);
        font-size: 13px;
    }

    @media (max-width: 980px) {
        .site-nav { display: none; }
        .nav-toggle { display: block; }
        .brand { min-width: auto; }
        .brand span { display: none; }
        .hero-inner,
        .project-strip,
        .footer-grid {
            grid-template-columns: 1fr;
        }
        .hero-panel { display: none; }
        .section-head {
            display: block;
        }
        .service-grid {
            grid-template-columns: 1fr;
        }
        .contact-band {
            display: block;
        }
        .footer-bottom {
            flex-direction: column;
        }
    }

    @media (max-width: 560px) {
        .site-header {
            top: 0;
            padding: 12px 16px;
        }
        .header-actions {
            gap: 5px;
        }
        .language-switcher,
        .theme-toggle {
            padding: 9px 8px;
            font-size: 12px;
        }
        .hero {
            padding: 118px 18px 56px;
        }
        .brand {
            min-width: 132px;
            height: 48px;
        }

        .brand-logo {
            width: 112px;
        }
    }

/* FINAL TOP NAV OVERRIDE - clean BECCO corporate bar */
.site-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
    z-index: 100 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 28px !important;

    padding: 18px 52px !important;
    margin: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    color: #ffffff !important;
}

.brand {
    min-width: 190px !important;
    height: 58px !important;
}

.brand-logo {
    width: 138px !important;
    height: auto !important;
    filter: none !important;
}

.site-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 34px !important;
    flex: 1 !important;
}

.site-nav a {
    color: rgba(255,255,255,.78) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 8px 0 !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
}

.site-nav a:hover,
.site-nav a.active {
    color: #ffffff !important;
    background: transparent !important;
}

.site-nav a.active::after,
.site-nav a:hover::after {
    content: "";
    display: block;
    height: 2px;
    width: 100%;
    margin-top: 7px;
    background: #d4a84a;
}

.header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.language-switcher,
.theme-toggle {
    color: #ffffff !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 8px 0 !important;
    font-weight: 900 !important;
    outline: none !important;
}

.language-switcher option {
    color: #111111 !important;
}

.theme-toggle {
    width: auto !important;
    height: auto !important;
    font-size: 17px !important;
}

.hero {
    padding-top: 150px !important;
}

.page-hero {
    padding-top: 150px !important;
}

@media (max-width: 980px) {
    .site-header {
        padding: 14px 18px !important;
    }

    .site-nav {
        position: absolute !important;
        top: 82px !important;
        left: 0 !important;
        right: 0 !important;
        display: none !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0 !important;
        padding: 18px !important;
        background: rgba(5,7,10,.94) !important;
        border-bottom: 1px solid rgba(255,255,255,.14) !important;
    }

    .site-nav.open {
        display: flex !important;
    }

    .nav-toggle {
        display: block !important;
        color: #ffffff !important;
    }

    .nav-toggle span {
        background: #ffffff !important;
    }

    .brand {
        min-width: 142px !important;
        height: 50px !important;
    }

    .brand-logo {
        width: 120px !important;
    }
}

@media (max-width: 560px) {
    .site-header {
        padding: 12px 14px !important;
    }

    .hero,
    .page-hero {
        padding-top: 125px !important;
    }

    .language-switcher {
        max-width: 58px !important;
    }
}


/* MOBILE NAV FINAL FIX - hamburger far right + smooth reveal */
@media (max-width: 980px) {
    .site-header {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 14px !important;
        position: absolute !important;
    }

    .brand {
        order: 1 !important;
        margin-right: auto !important;
    }

    .header-actions {
        order: 2 !important;
        margin-left: 0 !important;
        gap: 12px !important;
    }

    .nav-toggle {
        order: 3 !important;
        display: grid !important;
        place-items: center !important;
        width: 44px !important;
        height: 44px !important;
        margin-left: 4px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: #ffffff !important;
        cursor: pointer !important;
        position: relative !important;
    }

    .nav-toggle span {
        display: block !important;
        position: absolute !important;
        width: 28px !important;
        height: 2px !important;
        background: #ffffff !important;
        margin: 0 !important;
        border-radius: 999px !important;
        transition: transform .35s ease, opacity .25s ease, top .35s ease !important;
    }

    .nav-toggle span:nth-child(1) {
        top: 13px !important;
    }

    .nav-toggle span:nth-child(2) {
        top: 21px !important;
    }

    .nav-toggle span:nth-child(3) {
        top: 29px !important;
    }

    .nav-toggle.is-open span:nth-child(1) {
        top: 21px !important;
        transform: rotate(45deg) !important;
    }

    .nav-toggle.is-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .nav-toggle.is-open span:nth-child(3) {
        top: 21px !important;
        transform: rotate(-45deg) !important;
    }

    .site-nav {
        order: 4 !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0 !important;

        padding: 14px 18px 18px !important;
        background: linear-gradient(180deg, rgba(5,7,10,.96), rgba(5,7,10,.88)) !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.14) !important;
        box-shadow: 0 28px 60px rgba(0,0,0,.34) !important;

        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(-12px) !important;
        clip-path: inset(0 0 100% 0) !important;
        transition:
            opacity .28s ease,
            transform .35s ease,
            clip-path .42s cubic-bezier(.16, 1, .3, 1) !important;
    }

    .site-nav.open {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
        clip-path: inset(0 0 0 0) !important;
    }

    .site-nav a {
        width: 100% !important;
        color: rgba(255,255,255,.78) !important;
        padding: 15px 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
        font-size: 15px !important;
        transform: translateY(-8px) !important;
        opacity: .2 !important;
        transition: opacity .3s ease, transform .35s ease, color .25s ease !important;
    }

    .site-nav.open a {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }

    .site-nav.open a:nth-child(1) { transition-delay: .04s !important; }
    .site-nav.open a:nth-child(2) { transition-delay: .08s !important; }
    .site-nav.open a:nth-child(3) { transition-delay: .12s !important; }
    .site-nav.open a:nth-child(4) { transition-delay: .16s !important; }
    .site-nav.open a:nth-child(5) { transition-delay: .20s !important; }

    .site-nav a:last-child {
        border-bottom: 0 !important;
    }

    .site-nav a:hover,
    .site-nav a.active {
        color: #f3d17b !important;
    }

    .site-nav a::after,
    .site-nav a.active::after,
    .site-nav a:hover::after {
        display: none !important;
        content: none !important;
    }
}

@media (max-width: 560px) {
    .site-header {
        padding: 12px 14px !important;
        gap: 10px !important;
    }

    .brand {
        min-width: 118px !important;
        height: 46px !important;
    }

    .brand-logo {
        width: 108px !important;
    }

    .header-actions {
        gap: 8px !important;
    }

    .language-switcher {
        max-width: 58px !important;
        font-size: 14px !important;
    }

    .theme-toggle {
        font-size: 16px !important;
    }

    .nav-toggle {
        width: 40px !important;
        height: 40px !important;
    }
}


/* HOME MEDIA + MOBILE STATS UPGRADE */
.hero {
    background:
        linear-gradient(90deg, rgba(4,5,7,.94) 0%, rgba(4,5,7,.75) 42%, rgba(4,5,7,.25) 100%),
        radial-gradient(circle at 80% 30%, rgba(212,168,74,.28), transparent 30%),
        linear-gradient(135deg, #101217, #2b1b12) !important;
}

.hero video {
    opacity: .38 !important;
}

.hero-panel {
    box-shadow: 0 24px 80px rgba(0,0,0,.28);
}

.service-card {
    position: relative;
    overflow: hidden;
    padding-top: 178px !important;
}

.service-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 158px;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--line);
    filter: saturate(1.05) contrast(1.04);
}

.service-card:nth-child(1)::before {
    background-image:
        linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.20)),
        url('https://becco.co.tz/assets/becco/mining-2026/becco-mining-hero-exploration.png') !important;
}

.service-card:nth-child(2)::before {
    background-image:
        linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.20)),
        url('https://becco.co.tz/assets/becco/mining-2026/becco-mining-coal-terminal.png') !important;
}

.service-card:nth-child(3)::before {
    background-image:
        linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.20)),
        url('https://becco.co.tz/assets/becco/civil-2026/becco-civil-hero-highway.png') !important;
}

.project-card {
    background-size: cover !important;
    background-position: center !important;
}

.project-card:nth-child(1) {
    background-image:
        linear-gradient(135deg, rgba(0,0,0,.82), rgba(0,0,0,.32)),
        url('https://becco.co.tz/assets/becco/project-extraction.jpg') !important;
}

.project-card:nth-child(2) {
    background-image:
        linear-gradient(135deg, rgba(0,0,0,.78), rgba(228,31,31,.18)),
        url('https://becco.co.tz/assets/becco/project-drilling.jpg') !important;
}

/* Keep legacy stats visible on smaller screens */
@media (max-width: 980px) {
    .hero-inner {
        gap: 28px !important;
    }

    .hero-panel {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        padding: 10px !important;
        border-radius: 22px !important;
        background: rgba(255,255,255,.08) !important;
        border: 1px solid rgba(255,255,255,.13) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
    }

    .panel-row {
        display: block !important;
        padding: 14px 12px !important;
        border-bottom: 0 !important;
        border-right: 1px solid rgba(255,255,255,.10) !important;
    }

    .panel-row:last-child {
        border-right: 0 !important;
    }

    .panel-row strong {
        display: block !important;
        font-size: 23px !important;
        margin-bottom: 7px !important;
        color: #f3d17b !important;
    }

    .panel-row span {
        display: block !important;
        text-align: left !important;
        font-size: 11px !important;
        line-height: 1.45 !important;
        color: rgba(255,255,255,.64) !important;
    }

    .service-card {
        padding-top: 190px !important;
    }

    .service-card::before {
        height: 168px !important;
    }
}

@media (max-width: 560px) {
    .hero-panel {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .panel-row {
        padding: 16px !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.10) !important;
    }

    .panel-row:last-child {
        border-bottom: 0 !important;
    }

    .panel-row strong {
        font-size: 26px !important;
    }

    .panel-row span {
        font-size: 12px !important;
    }
}


/* HERO VIDEO MOBILE POSITION FIX */
.hero video {
    object-position: center center !important;
}

@media (max-width: 980px) {
    .hero video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
}

@media (max-width: 560px) {
    .hero {
        min-height: 100svh !important;
    }

    .hero video {
        object-position: 50% center !important;
        transform: scale(1.02) !important;
    }
}


/* PARTNER LOGO CAROUSEL + OSHA COMPLIANCE */
.partner-band {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 74px 0 44px;
    overflow: hidden;
}

.partner-head {
    display: grid;
    grid-template-columns: 1fr .85fr;
    gap: 34px;
    align-items: end;
    margin-bottom: 28px;
}

.partner-head h2 {
    margin: 0;
    font-size: clamp(30px, 4vw, 50px);
    line-height: 1;
    letter-spacing: -0.05em;
}

.partner-head p {
    margin: 0;
    color: var(--muted);
    line-height: 1.8;
    font-size: 16px;
}

.logo-marquee {
    position: relative;
    overflow: hidden;
    padding: 8px 0;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.logo-track {
    display: flex;
    width: max-content;
    gap: 18px;
    animation: beccoLogoScroll 34s linear infinite;
}

.logo-marquee:hover .logo-track {
    animation-play-state: paused;
}

.logo-card {
    width: 190px;
    height: 104px;
    flex: 0 0 190px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.74);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 18px;
    box-shadow: 0 18px 60px rgba(0,0,0,.055);
}

.logo-card img {
    display: block;
    max-width: 145px;
    max-height: 68px;
    object-fit: contain;
    filter: grayscale(.08);
}

@keyframes beccoLogoScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.compliance-section {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 38px 0 28px;
}

.compliance-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: .55fr 1.45fr;
    gap: 36px;
    align-items: center;
    min-height: 310px;
    padding: 42px;
    border-radius: 34px;
    background:
        radial-gradient(circle at 12% 20%, rgba(228,31,31,.13), transparent 30%),
        radial-gradient(circle at 84% 26%, rgba(212,168,74,.16), transparent 34%),
        var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 24px 80px rgba(0,0,0,.07);
}

.compliance-badge {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    justify-self: center;
    background:
        linear-gradient(145deg, rgba(212,168,74,.94), rgba(244,212,122,.88));
    color: #1a1307;
    box-shadow: 0 28px 80px rgba(212,168,74,.24);
}

.compliance-badge span {
    display: block;
    font-size: 48px;
    font-weight: 900;
    line-height: 1;
}

.compliance-badge strong {
    display: block;
    margin-top: -30px;
    font-size: 30px;
    letter-spacing: .08em;
}

.compliance-card h2 {
    margin: 0;
    font-size: clamp(36px, 5vw, 68px);
    line-height: .95;
    letter-spacing: -0.06em;
}

.compliance-card p {
    max-width: 780px;
    color: var(--muted);
    line-height: 1.85;
    font-size: 17px;
    margin: 22px 0 0;
}

.compliance-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.compliance-points span {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(228,31,31,.08);
    color: var(--text);
    border: 1px solid rgba(228,31,31,.14);
    font-weight: 800;
    font-size: 13px;
}

@media (max-width: 980px) {
    .partner-head,
    .compliance-card {
        grid-template-columns: 1fr;
    }

    .partner-band {
        padding-top: 58px;
    }

    .logo-card {
        width: 160px;
        flex-basis: 160px;
        height: 92px;
    }

    .logo-card img {
        max-width: 125px;
        max-height: 58px;
    }

    .compliance-card {
        padding: 30px;
        min-height: auto;
    }

    .compliance-badge {
        justify-self: start;
        width: 132px;
        height: 132px;
    }

    .compliance-badge span {
        font-size: 36px;
    }

    .compliance-badge strong {
        font-size: 22px;
        margin-top: -22px;
    }
}

@media (max-width: 560px) {
    .partner-band,
    .compliance-section {
        width: min(100% - 24px, 1180px);
    }

    .logo-track {
        gap: 12px;
        animation-duration: 26s;
    }

    .logo-card {
        width: 140px;
        flex-basis: 140px;
        height: 82px;
        border-radius: 18px;
        padding: 14px;
    }

    .logo-card img {
        max-width: 112px;
        max-height: 50px;
    }

    .compliance-card {
        border-radius: 26px;
        padding: 24px;
    }
}


/* FORCE SERVICE CARDS TO USE WORK PHOTOS ONLY */
.service-card:nth-child(1)::before {
    background-image:
        linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.20)),
        url('https://becco.co.tz/assets/becco/mining-2026/becco-mining-hero-exploration.png') !important;
}

.service-card:nth-child(2)::before {
    background-image:
        linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.20)),
        url('https://becco.co.tz/assets/becco/mining-2026/becco-mining-coal-terminal.png') !important;
}

.service-card:nth-child(3)::before {
    background-image:
        linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.20)),
        url('https://becco.co.tz/assets/becco/civil-2026/becco-civil-hero-highway.png') !important;
}


/* PARTNER LOGO CAROUSEL CLEANER SPACING */
.logo-track {
    gap: 34px !important;
    animation-duration: 46s !important;
}

.logo-card {
    width: 210px !important;
    height: 112px !important;
    flex: 0 0 210px !important;
}

.logo-card img {
    max-width: 150px !important;
    max-height: 72px !important;
}

@media (max-width: 560px) {
    .logo-track {
        gap: 18px !important;
        animation-duration: 36s !important;
    }

    .logo-card {
        width: 150px !important;
        height: 86px !important;
        flex-basis: 150px !important;
    }

    .logo-card img {
        max-width: 118px !important;
        max-height: 54px !important;
    }
}



/* PARTNER CAROUSEL FINAL CARD SIZE */
.logo-marquee {
    padding: 10px 0 18px !important;
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent) !important;
}

.logo-track {
    gap: 14px !important;
    animation-duration: 42s !important;
}

.logo-card {
    width: 250px !important;
    height: 132px !important;
    flex: 0 0 250px !important;
    border-radius: 0 !important;
    padding: 22px 24px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: 0 12px 34px rgba(0,0,0,.055) !important;
}

.logo-card img {
    max-width: 205px !important;
    max-height: 88px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: none !important;
    opacity: 1 !important;
}

@media (max-width: 980px) {
    .logo-track {
        gap: 12px !important;
        animation-duration: 36s !important;
    }

    .logo-card {
        width: 210px !important;
        height: 118px !important;
        flex: 0 0 210px !important;
        padding: 18px 20px !important;
    }

    .logo-card img {
        max-width: 170px !important;
        max-height: 78px !important;
    }
}

@media (max-width: 560px) {
    .logo-track {
        gap: 10px !important;
        animation-duration: 32s !important;
    }

    .logo-card {
        width: 180px !important;
        height: 104px !important;
        flex: 0 0 180px !important;
        padding: 16px !important;
    }

    .logo-card img {
        max-width: 148px !important;
        max-height: 68px !important;
    }
}


/* REAL OSHA BADGE IMAGE */
.compliance-image {
    background: #ffffff !important;
    border-radius: 0 !important;
    padding: 20px !important;
    display: grid !important;
    place-items: center !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.10) !important;
}

.compliance-image img {
    display: block !important;
    max-width: 150px !important;
    max-height: 150px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

@media (max-width: 980px) {
    .compliance-image img {
        max-width: 98px !important;
        max-height: 98px !important;
    }
}


/* LOGO BACKGROUND CLEANUP */
.logo-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.logo-card img {
    background: transparent !important;
    filter: none !important;
}

.compliance-image {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.compliance-image img {
    background: transparent !important;
}


/* FINAL PREMIUM BECCO FOOTER */
.becco-footer {
    background:
        radial-gradient(circle at 14% 0%, rgba(228,31,31,.12), transparent 26%),
        radial-gradient(circle at 86% 10%, rgba(212,168,74,.10), transparent 28%),
        #000000 !important;
    color: #ffffff !important;
    padding: 0 !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
}

.footer-shell {
    width: min(1180px, calc(100% - 32px)) !important;
    margin: 0 auto !important;
    padding: 72px 0 28px !important;
}

.footer-main {
    display: grid !important;
    grid-template-columns: 1.35fr .65fr .9fr !important;
    gap: 54px !important;
    align-items: start !important;
    padding-bottom: 42px !important;
}

.footer-brand-block {
    max-width: 520px !important;
}

.footer-logo-text {
    display: inline-flex !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 42px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: -.04em !important;
}

.footer-logo-text::after {
    content: "" !important;
    display: block !important;
    width: 46px !important;
    height: 4px !important;
    background: #e41f1f !important;
    margin-left: 14px !important;
    align-self: end !important;
    margin-bottom: 7px !important;
}

.footer-brand-block p {
    margin: 22px 0 0 !important;
    color: rgba(255,255,255,.62) !important;
    line-height: 1.85 !important;
    font-size: 16px !important;
    max-width: 470px !important;
}

.footer-column h4 {
    margin: 0 0 18px !important;
    color: #d4a84a !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: .18em !important;
}

.footer-column a {
    display: table !important;
    color: rgba(255,255,255,.68) !important;
    text-decoration: none !important;
    line-height: 1.35 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    margin: 0 0 13px !important;
    transition: color .25s ease, transform .25s ease !important;
}

.footer-column a:hover {
    color: #ffffff !important;
    transform: translateX(4px) !important;
}

.footer-contact a {
    display: block !important;
    margin-bottom: 18px !important;
}

.footer-contact a span {
    display: block !important;
    color: rgba(255,255,255,.42) !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: .12em !important;
    margin-bottom: 7px !important;
}

.footer-bottom {
    width: 100% !important;
    margin: 0 !important;
    padding: 24px 0 0 !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
    display: block !important;
    text-align: center !important;
    color: rgba(255,255,255,.48) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

@media (max-width: 980px) {
    .footer-shell {
        padding: 56px 0 26px !important;
    }

    .footer-main {
        grid-template-columns: 1fr !important;
        gap: 34px !important;
    }

    .footer-logo-text {
        font-size: 36px !important;
    }
}

@media (max-width: 560px) {
    .footer-shell {
        width: min(100% - 24px, 1180px) !important;
    }

    .footer-brand-block p {
        font-size: 15px !important;
    }
}


/* HOME PAGE LINK FINALIZATION */
.service-card .card-link {
    display: inline-flex !important;
    align-items: center !important;
    color: var(--text) !important;
    text-decoration: none !important;
    font-weight: 950 !important;
    margin-top: 18px !important;
}

.service-card .card-link:hover {
    color: var(--accent-2) !important;
}

.project-card {
    text-decoration: none !important;
}

.project-card .read-link {
    display: inline-flex !important;
    margin-top: 20px !important;
    color: #f3d17b !important;
    font-weight: 950 !important;
    border-bottom: 2px solid #f3d17b !important;
    padding-bottom: 6px !important;
}

.contact-band .btn-primary {
    text-decoration: none !important;
}


/* ==========================================================
   BECCO 2026 — CHAIRMAN MESSAGE
   ========================================================== */

.chairman-message-section {
    width: min(1180px, calc(100% - 32px));
    margin: 92px auto;
    display: grid;
    grid-template-columns: .78fr 1.22fr;
    min-height: 640px;
    background: #ffffff;
    border: 1px solid rgba(20,20,20,.10);
    box-shadow: 0 34px 110px rgba(0,0,0,.10);
    overflow: hidden;
}

.chairman-message-image {
    position: relative;
    min-height: 640px;
    background: #111111;
    overflow: hidden;
}

.chairman-message-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 640px;
    object-fit: cover;
    object-position: center top;
}

.chairman-message-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            transparent 52%,
            rgba(0,0,0,.88) 100%
        );
    pointer-events: none;
}

.chairman-photo-caption {
    position: absolute;
    z-index: 2;
    left: 30px;
    right: 30px;
    bottom: 28px;
    color: #ffffff;
}

.chairman-photo-caption strong {
    display: block;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 900;
}

.chairman-photo-caption span {
    display: block;
    margin-top: 8px;
    color: #e3bc58;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.chairman-message-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px 62px;
    background:
        radial-gradient(
            circle at 94% 7%,
            rgba(201,154,52,.18),
            transparent 28%
        ),
        #ffffff;
}

.chairman-message-content::before {
    content: "“";
    position: absolute;
    top: 4px;
    right: 34px;
    font-family: Georgia, serif;
    font-size: 180px;
    line-height: 1;
    color: rgba(201,154,52,.13);
    pointer-events: none;
}

.chairman-message-kicker {
    position: relative;
    z-index: 1;
    margin-bottom: 19px;
    color: #b48628;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.chairman-message-content h2 {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0;
    color: #151515;
    font-size: clamp(42px, 5.2vw, 70px);
    line-height: .94;
    letter-spacing: -.067em;
}

.chairman-message-text {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin-top: 30px;
    color: rgba(21,21,21,.68);
    font-size: 16px;
    line-height: 1.85;
}

.chairman-signature {
    position: relative;
    z-index: 1;
    margin-top: 32px;
    padding-top: 25px;
    border-top: 1px solid rgba(21,21,21,.10);
}

.chairman-signature strong {
    display: block;
    color: #151515;
    font-size: 18px;
    font-weight: 950;
}

.chairman-signature span {
    display: block;
    margin-top: 6px;
    color: #b48628;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

[data-theme="dark"] .chairman-message-section {
    background: #0d0d0d;
    border-color: rgba(255,255,255,.10);
}

[data-theme="dark"] .chairman-message-content {
    background:
        radial-gradient(
            circle at 94% 7%,
            rgba(201,154,52,.17),
            transparent 28%
        ),
        #101010;
}

[data-theme="dark"] .chairman-message-content h2,
[data-theme="dark"] .chairman-signature strong {
    color: #ffffff;
}

[data-theme="dark"] .chairman-message-text {
    color: rgba(255,255,255,.66);
}

[data-theme="dark"] .chairman-signature {
    border-color: rgba(255,255,255,.10);
}

@media (max-width: 980px) {
    .chairman-message-section {
        grid-template-columns: 1fr;
        min-height: 0;
        margin: 68px auto;
    }

    .chairman-message-image,
    .chairman-message-image img {
        min-height: 560px;
        height: 560px;
    }

    .chairman-message-content {
        padding: 52px 38px;
    }
}

@media (max-width: 560px) {
    .chairman-message-section {
        width: min(100% - 24px, 1180px);
        margin: 52px auto;
    }

    .chairman-message-image,
    .chairman-message-image img {
        min-height: 420px;
        height: 420px;
    }

    .chairman-photo-caption {
        left: 22px;
        right: 22px;
        bottom: 22px;
        text-align: center;
    }

    .chairman-message-content {
        padding: 40px 22px;
        text-align: center;
    }

    .chairman-message-content::before {
        right: 12px;
        font-size: 110px;
    }

    .chairman-message-text {
        font-size: 15px;
        line-height: 1.8;
    }
}


/* ==========================================================
   BECCO HOME — BOARD FOLLOWING CHAIRMAN
   ========================================================== */

.home-board-section {
    width: min(1180px, calc(100% - 32px));
    margin: -34px auto 92px;
    padding: 58px 0 0;
}

.home-board-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 32px;
}

.home-board-kicker {
    color: #b48628;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.home-board-heading h2 {
    margin: 0;
    color: var(--text);
    font-size: clamp(38px,5vw,66px);
    line-height: .95;
    letter-spacing: -.06em;
}

.home-board-heading p {
    width: min(440px,100%);
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.home-board-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 22px;
}

.home-board-card {
    display: grid;
    grid-template-columns: .88fr 1.12fr;
    min-height: 420px;
    background: #ffffff;
    border: 1px solid rgba(20,20,20,.10);
    overflow: hidden;
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.home-board-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 70px rgba(0,0,0,.10);
}

.home-board-photo {
    min-height: 420px;
    overflow: hidden;
    background: #111;
}

.home-board-photo img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
    object-position: center 25%;
    transition: transform .45s ease;
}

.home-board-card:hover .home-board-photo img {
    transform: scale(1.025);
}

/* Rohit */
.home-board-card:nth-child(1) .home-board-photo img {
    object-position: center 23%;
}

/* Manraj — preserve natural portrait framing */
.home-board-card:nth-child(2) .home-board-photo img {
    object-position: center 38%;
}

.home-board-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 34px;
}

.home-board-role {
    color: #b48628;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.home-board-content h3 {
    margin: 10px 0 0;
    color: #151515;
    font-size: 27px;
    line-height: 1.05;
    letter-spacing: -.045em;
}

.home-board-content p {
    margin: 19px 0 0;
    color: rgba(21,21,21,.66);
    font-size: 14px;
    line-height: 1.72;
}

[data-theme="dark"] .home-board-card {
    background: #101010;
    border-color: rgba(255,255,255,.10);
}

[data-theme="dark"] .home-board-content h3 {
    color: #ffffff;
}

[data-theme="dark"] .home-board-content p {
    color: rgba(255,255,255,.62);
}

@media (max-width: 1050px) {
    .home-board-card {
        grid-template-columns: 1fr;
    }

    .home-board-photo,
    .home-board-photo img {
        min-height: 480px;
        height: 480px;
    }
}

@media (max-width: 800px) {
    .home-board-section {
        margin-top: -10px;
    }

    .home-board-heading {
        display: block;
    }

    .home-board-heading p {
        margin-top: 18px;
    }

    .home-board-grid {
        grid-template-columns: 1fr;
    }

    .home-board-card {
        grid-template-columns: .9fr 1.1fr;
    }

    .home-board-photo,
    .home-board-photo img {
        min-height: 420px;
        height: auto;
    }
}

@media (max-width: 560px) {
    .home-board-section {
        width: min(100% - 24px,1180px);
        margin-bottom: 60px;
    }

    .home-board-card {
        grid-template-columns: 1fr;
    }

    .home-board-photo,
    .home-board-photo img {
        height: 420px;
        min-height: 420px;
    }

    .home-board-content {
        padding: 28px 24px;
    }
}

/* =========================================================
   BECCO_HOME_DARK_BOARD_CONTRAST_V1

   The final vertical board-card layout forces white cards with
   !important. This final dark-theme override restores the dark
   card surface and readable leadership copy.
   ========================================================= */

[data-theme="dark"] .home-board-card {
    background:#101010 !important;
    border-color:rgba(255,255,255,.12) !important;
}

[data-theme="dark"] .home-board-content {
    background:#101010 !important;
}

[data-theme="dark"] .home-board-content h3 {
    color:#ffffff !important;
}

[data-theme="dark"] .home-board-content p {
    color:rgba(255,255,255,.68) !important;
}

/*
 * Role stays BECCO gold in either theme.
 */
[data-theme="dark"] .home-board-role {
    color:#d5ad4f !important;
}

/* BECCO_PUBLIC_CAREERS_P01_FIX: hide both homepage Careers panels */
.hero-careers-live,
.hero-careers-empty {
    display:none !important;
}

/* =========================================================
   BECCO 2026 OFFICIAL PUBLIC HEADER LOGO
   ========================================================= */

.site-header .brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 190px !important;
    min-width: 190px !important;
    height: 62px !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    overflow: hidden !important;
}

.site-header .brand-logo.becco-official-logo {
    display: block !important;

    width: 178px !important;
    height: 58px !important;

    max-width: none !important;

    object-fit: contain !important;
    object-position: center center !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
}

@media (max-width: 980px) {
    .site-header .brand {
        width: 154px !important;
        min-width: 154px !important;
        height: 54px !important;
    }

    .site-header .brand-logo.becco-official-logo {
        width: 146px !important;
        height: 48px !important;
    }
}

@media (max-width: 560px) {
    .site-header .brand {
        width: 132px !important;
        min-width: 132px !important;
        height: 48px !important;
    }

    .site-header .brand-logo.becco-official-logo {
        width: 126px !important;
        height: 42px !important;
    }
}

/* ==========================================================
   BECCO HEADER CONTROL ALIGNMENT
   Language -> Theme -> Menu
   ========================================================== */

.site-header .header-actions {
    margin-left: auto !important;
    margin-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    width: auto !important;
    gap: 14px !important;
}

.site-header .language-switcher {
    order: 1 !important;
}

.site-header .theme-toggle {
    order: 2 !important;
}

.site-header .nav-toggle {
    order: 3 !important;
}

.site-header .language-switcher,
.site-header .theme-toggle,
.site-header .nav-toggle {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
}

@media (max-width: 980px) {
    .site-header {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .site-header .brand {
        flex: 0 0 auto !important;
        margin-right: auto !important;
    }

    .site-header .header-actions {
        flex: 0 0 auto !important;
        margin-left: auto !important;
        justify-content: flex-end !important;
    }

    .site-header .nav-toggle {
        display: block !important;
        flex: 0 0 auto !important;
    }
}

@media (max-width: 560px) {
    .site-header .header-actions {
        gap: 11px !important;
    }

    .site-header .language-switcher {
        max-width: 82px !important;
    }
}

/* ==========================================================
   BECCO HEADER MOBILE CONTROLS — FINAL ALIGNMENT
   Language | Theme | Menu
   ========================================================== */

@media (max-width: 980px) {

    .site-header {
        display:flex !important;
        align-items:center !important;
    }

    .site-header .brand {
        order:1 !important;
        flex:0 0 auto !important;
        margin-right:auto !important;
    }

    .site-header .header-actions {
        order:2 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:flex-end !important;

        height:44px !important;

        margin-left:auto !important;
        margin-right:0 !important;

        gap:12px !important;
    }

    .site-header .language-switcher {
        order:1 !important;

        height:44px !important;
        min-height:44px !important;

        display:flex !important;
        align-items:center !important;

        padding:0 2px !important;
        margin:0 !important;

        line-height:44px !important;
    }

    .site-header .theme-toggle {
        order:2 !important;

        width:36px !important;
        height:44px !important;
        min-height:44px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        padding:0 !important;
        margin:0 !important;

        line-height:1 !important;
    }

    .site-header .nav-toggle {
        order:3 !important;

        position:static !important;

        width:44px !important;
        height:44px !important;
        min-width:44px !important;
        min-height:44px !important;

        padding:0 !important;
        margin:0 0 0 2px !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;

        gap:6px !important;

        transform:none !important;
        line-height:1 !important;
    }

    .site-header .nav-toggle span {
        display:block !important;

        width:32px !important;
        height:3px !important;

        margin:0 !important;
        padding:0 !important;

        flex:0 0 3px !important;

        border-radius:3px !important;
        background:#ffffff !important;
    }
}

@media (max-width: 560px) {

    .site-header .header-actions {
        gap:9px !important;
    }

    .site-header .nav-toggle {
        margin-left:1px !important;
    }

    .site-header .nav-toggle span {
        width:30px !important;
    }
}

/* ==========================================================
   BECCO HEADER CONTROLS — SAME FLEX ROW FINAL
   ========================================================== */

@media (max-width:980px) {

    .site-header .header-actions {
        margin-left:auto !important;
        display:flex !important;
        align-items:center !important;
        justify-content:flex-end !important;
        gap:12px !important;
        height:46px !important;
    }

    .site-header .language-switcher,
    .site-header .theme-toggle,
    .site-header .nav-toggle {
        position:static !important;
        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        transform:none !important;

        margin:0 !important;
        vertical-align:middle !important;
        align-self:center !important;
    }

    .site-header .language-switcher {
        order:1 !important;
        height:46px !important;
        line-height:46px !important;
    }

    .site-header .theme-toggle {
        order:2 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        width:38px !important;
        height:46px !important;
        padding:0 !important;
        line-height:1 !important;
    }

    .site-header .nav-toggle {
        order:3 !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;

        width:44px !important;
        height:46px !important;
        min-width:44px !important;

        padding:0 !important;

        gap:6px !important;
        line-height:1 !important;
    }

    .site-header .nav-toggle span {
        display:block !important;

        width:32px !important;
        height:3px !important;

        margin:0 !important;
        padding:0 !important;

        background:#fff !important;
        border-radius:10px !important;
    }
}

/* ==========================================================
   BECCO HAMBURGER LINES — TRUE CENTER FIX
   Overrides legacy per-page absolute positioning.
   ========================================================== */

@media (max-width:980px) {

    .site-header .nav-toggle {
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;

        width:44px !important;
        height:44px !important;
        min-width:44px !important;
        min-height:44px !important;

        padding:0 !important;
        margin:0 !important;

        gap:6px !important;

        position:static !important;
        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        transform:none !important;
    }

    .site-header .nav-toggle span,
    .site-header .nav-toggle span:nth-child(1),
    .site-header .nav-toggle span:nth-child(2),
    .site-header .nav-toggle span:nth-child(3) {
        position:static !important;

        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        display:block !important;

        width:30px !important;
        height:3px !important;
        min-height:3px !important;

        flex:0 0 3px !important;

        padding:0 !important;
        margin:0 !important;

        background:#ffffff !important;
        border-radius:999px !important;

        transform:none !important;
    }

    /*
     * Open state remains centered but forms an X.
     */
    .site-header .nav-toggle.is-open {
        gap:0 !important;
    }

    .site-header .nav-toggle.is-open span:nth-child(1) {
        position:absolute !important;
        top:50% !important;
        left:50% !important;
        transform:translate(-50%,-50%) rotate(45deg) !important;
    }

    .site-header .nav-toggle.is-open span:nth-child(2) {
        opacity:0 !important;
    }

    .site-header .nav-toggle.is-open span:nth-child(3) {
        position:absolute !important;
        top:50% !important;
        left:50% !important;
        transform:translate(-50%,-50%) rotate(-45deg) !important;
    }

    .site-header .nav-toggle.is-open {
        position:relative !important;
    }
}

/* =========================================================
   BECCO GLOBAL STICKY HEADER
   ========================================================= */

.site-header {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    z-index: 9990 !important;

    transform: none !important;

    transition:
        background .28s ease,
        border-color .28s ease,
        box-shadow .28s ease,
        backdrop-filter .28s ease !important;
}


/*
 * Once the visitor scrolls, give the transparent nav enough
 * contrast to remain readable above white/light page sections.
 */
.site-header.becco-header-scrolled {
    background: rgba(10,10,10,.91) !important;

    border-bottom:
        1px solid rgba(213,173,79,.22) !important;

    box-shadow:
        0 10px 35px rgba(0,0,0,.15) !important;

    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;

    color: #ffffff !important;
}

.site-header.becco-header-scrolled .site-nav a {
    color: rgba(255,255,255,.78) !important;
}

.site-header.becco-header-scrolled .site-nav a:hover,
.site-header.becco-header-scrolled .site-nav a.active {
    color: #ffffff !important;
}

.site-header.becco-header-scrolled .language-switcher,
.site-header.becco-header-scrolled .theme-toggle,
.site-header.becco-header-scrolled .nav-toggle {
    color: #ffffff !important;
}

/*
 * Retire the entire homepage Careers widget.
 * The public Careers page remains accessible
 * through its own navigation link.
 */
[class*="hero-career"] {
    display:none !important;
}

/* =========================================================
   BECCO_HOME_CAREER_APPLY_STYLE_V1
   ========================================================= */

.hero-career-apply {
    width: fit-content;

    min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-top: 15px;
    padding: 0 15px;

    border: 1px solid #d5ad4f;
    border-radius: 0;

    background: #d5ad4f;

    color: #111111 !important;

    text-decoration: none !important;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: .05em;
    text-transform: uppercase;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.hero-career-apply:hover {
    background: #e5c66d;

    border-color: #e5c66d;

    transform: translateY(-1px);
}

.hero-career-apply span {
    font-size: 15px;
    line-height: 1;
}

/* =========================================================
   BECCO_HOME_CAREERS_LIVE_STYLE_V1
   ========================================================= */

.hero-careers-live {
    position: relative;
}

.hero-careers-live::before {
    content: '';

    position: absolute;

    top: 0;
    left: 0;

    width: 3px;
    height: 100%;

    background: #d5ad4f;
}

.hero-careers-live strong {
    display: block;
}

.hero-career-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 7px 14px;

    margin-top: 12px;
}

.hero-career-meta span {
    position: relative;

    color: rgba(255,255,255,.66);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .045em;
    text-transform: uppercase;
}

.hero-career-meta span + span::before {
    content: '';

    position: absolute;

    left: -8px;
    top: 50%;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #d5ad4f;

    transform: translateY(-50%);
}

[data-theme="light"] .hero-career-meta span {
    color: rgba(17,17,17,.58);
}

@media (max-width: 600px) {

    .hero-career-meta {
        display: grid;

        gap: 5px;
    }

    .hero-career-meta span + span::before {
        display: none;
    }

}

/* FOOTER QUICKLINKS MOBILE CENTER FIX */
    .becco-footer .footer-main {
        grid-template-columns: 1.25fr .65fr .9fr !important;
        gap: 54px !important;
        align-items: start !important;
    }

    .becco-footer .footer-brand-block {
        max-width: 520px !important;
    }

    .becco-footer .footer-company,
    .becco-footer .footer-contact {
        display: block !important;
    }

    @media (max-width: 980px) {
        .becco-footer .footer-shell {
            width: min(100% - 28px, 1180px) !important;
            padding: 56px 0 26px !important;
        }

        .becco-footer .footer-main {
            grid-template-columns: 1fr !important;
            gap: 38px !important;
            text-align: center !important;
            justify-items: center !important;
        }

        .becco-footer .footer-brand-block {
            max-width: 620px !important;
            margin: 0 auto !important;
            text-align: center !important;
        }

        .becco-footer .footer-logo-text {
            display: inline-flex !important;
            justify-content: center !important;
            align-items: end !important;
            margin: 0 auto !important;
        }

        .becco-footer .footer-logo-text::after {
            margin-left: 12px !important;
            margin-bottom: 7px !important;
        }

        .becco-footer .footer-brand-block p {
            margin-left: auto !important;
            margin-right: auto !important;
            max-width: 560px !important;
            text-align: center !important;
        }

        .becco-footer .footer-column {
            text-align: center !important;
            width: 100% !important;
        }

        .becco-footer .footer-column h4 {
            text-align: center !important;
        }

        .becco-footer .footer-column a {
            display: table !important;
            margin-left: auto !important;
            margin-right: auto !important;
            text-align: center !important;
        }

        .becco-footer .footer-contact a span {
            text-align: center !important;
        }

        .becco-footer .footer-bottom {
            text-align: center !important;
        }
    }

    @media (max-width: 560px) {
        .becco-footer .footer-shell {
            width: min(100% - 22px, 1180px) !important;
            padding-top: 48px !important;
        }

        .becco-footer .footer-logo-text {
            font-size: 38px !important;
        }

        .becco-footer .footer-main {
            gap: 34px !important;
        }

        .becco-footer .footer-brand-block p {
            font-size: 15px !important;
            line-height: 1.8 !important;
        }

        .becco-footer .footer-column a {
            font-size: 15px !important;
        }
    }

/* =========================================================
   BECCO GLOBAL CONTACT ENVELOPE
   ========================================================= */

.becco-contact-fab {
    position: fixed !important;
    right: 26px !important;
    bottom: 26px !important;

    z-index: 9997 !important;

    width: 58px !important;
    height: 58px !important;

    display: grid !important;
    place-items: center !important;

    padding: 0 !important;

    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 50% !important;

    background: #d5ad4f !important;
    color: #111111 !important;

    box-shadow: 0 16px 45px rgba(0,0,0,.28) !important;

    cursor: pointer !important;

    transition:
        transform .22s ease,
        background .22s ease,
        box-shadow .22s ease !important;
}

.becco-contact-fab:hover {
    transform: translateY(-3px) scale(1.04) !important;
    background: #e5c66d !important;

    box-shadow: 0 20px 55px rgba(0,0,0,.34) !important;
}

.becco-contact-fab svg {
    width: 25px !important;
    height: 25px !important;
}


/* =========================================================
   BACKDROP
   ========================================================= */

.becco-contact-overlay {
    position: fixed !important;
    inset: 0 !important;

    z-index: 9998 !important;

    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-end !important;

    background: rgba(0,0,0,.58) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transition:
        opacity .28s ease,
        visibility .28s ease !important;
}

.becco-contact-overlay.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}


/* =========================================================
   PANEL
   ========================================================= */

.becco-contact-panel {
    width: min(470px, 100%) !important;
    height: 100% !important;

    overflow-y: auto !important;

    padding: 34px 32px 36px !important;

    background: #101010 !important;
    color: #ffffff !important;

    border-left: 1px solid rgba(213,173,79,.26) !important;

    box-shadow: -30px 0 80px rgba(0,0,0,.34) !important;

    transform: translateX(100%) !important;

    transition: transform .32s ease !important;
}

.becco-contact-overlay.is-open .becco-contact-panel {
    transform: translateX(0) !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.becco-contact-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;

    gap: 20px !important;

    margin-bottom: 30px !important;
}

.becco-contact-kicker {
    display: block !important;

    margin-bottom: 9px !important;

    color: #d5ad4f !important;

    font-size: 11px !important;
    font-weight: 900 !important;

    letter-spacing: .15em !important;
    text-transform: uppercase !important;
}

.becco-contact-top h2 {
    margin: 0 !important;

    color: #ffffff !important;

    font-size: clamp(28px, 4vw, 40px) !important;
    line-height: 1 !important;

    letter-spacing: -.045em !important;
}

.becco-contact-intro {
    margin: 14px 0 0 !important;

    max-width: 360px !important;

    color: rgba(255,255,255,.62) !important;

    font-size: 14px !important;
    line-height: 1.65 !important;
}

.becco-contact-close {
    flex: 0 0 auto !important;

    width: 42px !important;
    height: 42px !important;

    display: grid !important;
    place-items: center !important;

    padding: 0 !important;

    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 0 !important;

    background: transparent !important;
    color: #ffffff !important;

    font-size: 25px !important;
    line-height: 1 !important;

    cursor: pointer !important;
}


/* =========================================================
   FORM
   ========================================================= */

.becco-contact-form {
    display: grid !important;
    gap: 18px !important;
}

.becco-contact-field {
    display: grid !important;
    gap: 8px !important;
}

.becco-contact-field label {
    color: rgba(255,255,255,.82) !important;

    font-size: 12px !important;
    font-weight: 800 !important;

    letter-spacing: .02em !important;
}

.becco-contact-field input,
.becco-contact-field select,
.becco-contact-field textarea {
    width: 100% !important;

    border: 1px solid rgba(255,255,255,.15) !important;
    border-radius: 0 !important;

    outline: none !important;

    background: rgba(255,255,255,.055) !important;
    color: #ffffff !important;

    font: inherit !important;

    transition:
        border-color .2s ease,
        background .2s ease !important;
}

.becco-contact-field input,
.becco-contact-field select {
    min-height: 50px !important;
    padding: 0 14px !important;
}

.becco-contact-field textarea {
    min-height: 150px !important;

    padding: 14px !important;

    resize: vertical !important;
}

.becco-contact-field input:focus,
.becco-contact-field select:focus,
.becco-contact-field textarea:focus {
    border-color: #d5ad4f !important;

    background: rgba(213,173,79,.055) !important;
}

.becco-contact-field select option {
    background: #161616 !important;
    color: #ffffff !important;
}

.becco-contact-department-note {
    margin: -3px 0 0 !important;

    color: rgba(255,255,255,.46) !important;

    font-size: 11px !important;
    line-height: 1.5 !important;
}

.becco-contact-submit {
    min-height: 52px !important;

    margin-top: 4px !important;

    border: 1px solid #d5ad4f !important;
    border-radius: 0 !important;

    background: #d5ad4f !important;
    color: #111111 !important;

    font-size: 13px !important;
    font-weight: 900 !important;

    cursor: pointer !important;
}

.becco-contact-submit:hover {
    background: #e5c66d !important;
    border-color: #e5c66d !important;
}

.becco-contact-status {
    display: none !important;

    margin: 0 !important;
    padding: 12px 14px !important;

    border: 1px solid rgba(213,173,79,.28) !important;

    color: rgba(255,255,255,.72) !important;
    background: rgba(213,173,79,.06) !important;

    font-size: 12px !important;
    line-height: 1.55 !important;
}

.becco-contact-status.is-visible {
    display: block !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 560px) {

    .becco-contact-fab {
        right: 17px !important;
        bottom: 17px !important;

        width: 54px !important;
        height: 54px !important;
    }

    .becco-contact-panel {
        width: 100% !important;

        padding: 26px 20px 30px !important;

        border-left: 0 !important;
    }

    .becco-contact-top {
        margin-bottom: 24px !important;
    }

    .becco-contact-top h2 {
        font-size: 31px !important;
    }
}

/* BECCO_CONTACT_CINEMATIC_START */

/* =========================================================
   CINEMATIC CONTACT OPENING
   ========================================================= */

.becco-contact-overlay {
    display:grid !important;
    place-items:center !important;

    padding:24px !important;

    background:
        radial-gradient(
            circle at calc(100% - 54px) calc(100% - 54px),
            rgba(213,173,79,.20) 0,
            rgba(213,173,79,.08) 18%,
            rgba(0,0,0,.82) 58%
        ) !important;

    backdrop-filter:blur(0px) !important;
    -webkit-backdrop-filter:blur(0px) !important;

    transition:
        opacity .36s ease,
        visibility .36s ease,
        backdrop-filter .5s ease !important;

    perspective:1400px !important;
}

.becco-contact-overlay.is-open {
    backdrop-filter:blur(9px) !important;
    -webkit-backdrop-filter:blur(9px) !important;
}


/* GOLD SHOCKWAVE */

.becco-contact-overlay::before {
    content:"" !important;

    position:absolute !important;
    right:54px !important;
    bottom:54px !important;

    width:24px !important;
    height:24px !important;

    border:2px solid rgba(213,173,79,.85) !important;
    border-radius:50% !important;

    opacity:0 !important;

    pointer-events:none !important;
}

.becco-contact-overlay.is-open::before {
    animation:
        beccoContactShockwave .72s cubic-bezier(.19,1,.22,1)
        forwards !important;
}


/* =========================================================
   CENTRED FORM CARD
   ========================================================= */

.becco-contact-panel {
    position:relative !important;

    width:min(680px, calc(100vw - 48px)) !important;
    height:auto !important;

    max-height:calc(100vh - 48px) !important;

    overflow-y:auto !important;

    padding:38px 38px 40px !important;

    background:
        linear-gradient(
            145deg,
            rgba(23,23,23,.98),
            rgba(8,8,8,.99)
        ) !important;

    border:
        1px solid rgba(213,173,79,.34) !important;

    border-radius:0 !important;

    box-shadow:
        0 45px 110px rgba(0,0,0,.58),
        0 0 0 1px rgba(255,255,255,.035) inset !important;

    opacity:0 !important;

    transform-origin:100% 100% !important;

    transform:
        translate(36vw, 34vh)
        scale(.12)
        rotate(-8deg)
        rotateX(18deg) !important;

    filter:blur(12px) !important;

    transition:none !important;
}


/* GOLD TOP FLASH */

.becco-contact-panel::before {
    content:"" !important;

    position:absolute !important;
    top:0 !important;
    left:0 !important;

    width:0 !important;
    height:2px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d5ad4f,
            #f2d881,
            transparent
        ) !important;

    opacity:0 !important;
}

.becco-contact-overlay.is-open
.becco-contact-panel::before {
    animation:
        beccoGoldSweep .9s .28s ease forwards !important;
}


/* FORM REVEAL */

.becco-contact-overlay.is-open
.becco-contact-panel {
    animation:
        beccoContactArrival
        .72s
        cubic-bezier(.16,1,.3,1)
        forwards !important;
}


/* CLOSE BUTTON */

.becco-contact-close {
    transition:
        transform .25s ease,
        border-color .25s ease,
        color .25s ease !important;
}

.becco-contact-close:hover {
    transform:rotate(90deg) !important;

    border-color:#d5ad4f !important;
    color:#d5ad4f !important;
}


/* ENVELOPE REACTION */

.becco-contact-fab {
    overflow:visible !important;
}

.becco-contact-fab::before {
    content:"" !important;

    position:absolute !important;
    inset:-7px !important;

    border:1px solid rgba(213,173,79,.52) !important;
    border-radius:50% !important;

    animation:
        beccoEnvelopePulse 2.4s ease-out infinite !important;

    pointer-events:none !important;
}

html.becco-contact-is-open .becco-contact-fab {
    opacity:.12 !important;

    transform:
        scale(.75)
        rotate(-12deg) !important;

    pointer-events:none !important;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes beccoContactArrival {

    0% {
        opacity:0;

        transform:
            translate(36vw,34vh)
            scale(.12)
            rotate(-8deg)
            rotateX(18deg);

        filter:blur(12px);
    }

    55% {
        opacity:1;

        transform:
            translate(-8px,-6px)
            scale(1.035)
            rotate(.6deg)
            rotateX(0);

        filter:blur(0);
    }

    78% {
        transform:
            translate(3px,2px)
            scale(.992)
            rotate(-.2deg);
    }

    100% {
        opacity:1;

        transform:
            translate(0,0)
            scale(1)
            rotate(0)
            rotateX(0);

        filter:blur(0);
    }
}


@keyframes beccoContactShockwave {

    0% {
        opacity:.95;
        transform:scale(.5);
    }

    65% {
        opacity:.28;
    }

    100% {
        opacity:0;
        transform:scale(75);
    }
}


@keyframes beccoGoldSweep {

    0% {
        width:0;
        opacity:0;
    }

    20% {
        opacity:1;
    }

    100% {
        width:100%;
        opacity:.8;
    }
}


@keyframes beccoEnvelopePulse {

    0% {
        opacity:.65;
        transform:scale(.86);
    }

    70% {
        opacity:0;
        transform:scale(1.32);
    }

    100% {
        opacity:0;
        transform:scale(1.32);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:560px) {

    .becco-contact-overlay {
        padding:14px !important;
    }

    .becco-contact-panel {
        width:100% !important;

        max-height:calc(100svh - 28px) !important;

        padding:28px 20px 30px !important;

        transform-origin:
            calc(100% - 20px)
            calc(100% - 20px) !important;
    }

    @keyframes beccoContactArrival {

        0% {
            opacity:0;

            transform:
                translate(42vw,38vh)
                scale(.08)
                rotate(-7deg);

            filter:blur(10px);
        }

        60% {
            opacity:1;

            transform:
                translateY(-8px)
                scale(1.025);

            filter:blur(0);
        }

        100% {
            opacity:1;

            transform:
                translate(0,0)
                scale(1);

            filter:blur(0);
        }
    }
}


/* Respect reduced-motion preference */

@media (prefers-reduced-motion:reduce) {

    .becco-contact-panel,
    .becco-contact-overlay,
    .becco-contact-overlay::before,
    .becco-contact-panel::before,
    .becco-contact-fab::before {
        animation:none !important;
        transition:none !important;
    }

    .becco-contact-overlay.is-open
    .becco-contact-panel {
        opacity:1 !important;
        transform:none !important;
        filter:none !important;
    }
}

/* BECCO_CONTACT_CINEMATIC_END */

/* =========================================================
   BECCO CINEMATIC CONTACT — VISIBILITY REPAIR
   ========================================================= */

/*
 * The original cinematic keyframe was fighting !important
 * transform / opacity declarations.
 *
 * We now animate the panel using CSS transitions instead.
 */

.becco-contact-panel {
    animation: none !important;

    opacity: 0 !important;

    transform:
        translate(32vw, 30vh)
        scale(.14)
        rotate(-7deg)
        rotateX(16deg) !important;

    filter: blur(10px) !important;

    transition:
        transform .68s cubic-bezier(.16,1,.3,1),
        opacity .24s ease,
        filter .46s ease !important;

    will-change:
        transform,
        opacity,
        filter !important;
}


/* OPEN STATE */

.becco-contact-overlay.is-open .becco-contact-panel {
    animation: none !important;

    opacity: 1 !important;

    transform:
        translate(0,0)
        scale(1)
        rotate(0deg)
        rotateX(0deg) !important;

    filter: blur(0) !important;
}


/* Slight delayed content reveal */

.becco-contact-panel .becco-contact-top,
.becco-contact-panel .becco-contact-form {
    opacity: 0 !important;
    transform: translateY(18px) !important;

    transition:
        opacity .35s ease .28s,
        transform .45s cubic-bezier(.16,1,.3,1) .28s !important;
}

.becco-contact-overlay.is-open .becco-contact-panel .becco-contact-top,
.becco-contact-overlay.is-open .becco-contact-panel .becco-contact-form {
    opacity: 1 !important;
    transform: translateY(0) !important;
}


/* Keep the gold top-line sweep */

.becco-contact-overlay.is-open .becco-contact-panel::before {
    animation:
        beccoGoldSweep .85s .30s ease forwards !important;
}


/* MOBILE: travel less distance */

@media (max-width:560px) {

    .becco-contact-panel {
        transform:
            translate(34vw, 28vh)
            scale(.10)
            rotate(-6deg) !important;
    }

    .becco-contact-overlay.is-open .becco-contact-panel {
        transform:
            translate(0,0)
            scale(1)
            rotate(0deg) !important;
    }
}


/* Reduced motion */

@media (prefers-reduced-motion:reduce) {

    .becco-contact-panel,
    .becco-contact-panel .becco-contact-top,
    .becco-contact-panel .becco-contact-form {
        transition:none !important;
    }

    .becco-contact-overlay.is-open .becco-contact-panel {
        opacity:1 !important;
        transform:none !important;
        filter:none !important;
    }
}

/* BECCO_REAL_ENQUIRY_STATUS_V1 */

.becco-contact-status.is-success {
    border-color:
        rgba(65, 180, 120, .38) !important;

    background:
        rgba(65, 180, 120, .09) !important;

    color:
        #b9e8cf !important;
}

.becco-contact-status.is-error {
    border-color:
        rgba(220, 80, 80, .38) !important;

    background:
        rgba(220, 80, 80, .09) !important;

    color:
        #f0b6b6 !important;
}

.becco-contact-submit:disabled {
    opacity: .62 !important;
    cursor: wait !important;
}

/* BECCO BOARD PORTRAIT FIT FINAL */
.board2026-image {
    width: 100% !important;
    height: 430px !important;
    overflow: hidden !important;
    background: #111 !important;
}

.board2026-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center 24% !important;
}

/* Chairman */
.board2026-card:nth-child(1) .board2026-image img {
    object-position: center 22% !important;
}

/* CEO */
.board2026-card:nth-child(2) .board2026-image img {
    object-position: center 18% !important;
}

/* Managing Director - tall portrait needs lower framing */
.board2026-card:nth-child(3) .board2026-image img {
    object-position: center 34% !important;
}

@media (max-width: 980px) {
    .board2026-image {
        height: 520px !important;
    }
}

@media (max-width: 560px) {
    .board2026-image {
        height: 440px !important;
    }

    .board2026-card:nth-child(3) .board2026-image img {
        object-position: center 30% !important;
    }
}

/* MANRAJ PORTRAIT — NATURAL FRAMING */
.board2026-card:nth-child(3) .board2026-image img {
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center 38% !important;
    transform:none !important;
}

/* CEO BOARD IMAGE — SYMMETRICAL FINAL */
.board2026-card:nth-child(2) .board2026-image img {
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    transform:none !important;
}

.board2026-card:nth-child(2):hover .board2026-image img {
    transform:scale(1.035) !important;
}

:root {
        --bg: #f7f4ee;
        --surface: #ffffff;
        --text: #151515;
        --muted: rgba(21,21,21,.64);
        --line: rgba(21,21,21,.1);
        --accent: #c99a34;
        --accent-2: #e41f1f;
        --footer: #0a0c10;
    }

    [data-theme="dark"] {
        --bg: #07090d;
        --surface: #10141b;
        --text: #ffffff;
        --muted: rgba(255,255,255,.66);
        --line: rgba(255,255,255,.1);
        --accent: #d4a84a;
        --accent-2: #ff3030;
        --footer: #050609;
    }

    [data-theme="red"] {
        --bg: #fff8f5;
        --surface: #ffffff;
        --text: #171111;
        --muted: rgba(23,17,17,.64);
        --line: rgba(228,31,31,.12);
        --accent: #e41f1f;
        --accent-2: #c99a34;
        --footer: #150606;
    }

    * { box-sizing: border-box; }

    body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
        background: var(--bg);
        color: var(--text);
    }

    a { color: inherit; }

    .site-header {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        transform: none !important;
        z-index: 100 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 28px !important;
        padding: 18px 52px !important;
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.16) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        color: #ffffff !important;
    }

    .brand {
        display: flex;
        align-items: center;
        text-decoration: none;
        min-width: 190px !important;
        height: 58px !important;
    }

    .brand-logo {
        display: block;
        width: 138px !important;
        height: auto;
        object-fit: contain;
        filter: none !important;
    }

    .site-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 34px !important;
        flex: 1 !important;
    }

    .site-nav a {
        color: rgba(255,255,255,.78) !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 8px 0 !important;
        text-decoration: none !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        letter-spacing: -.02em !important;
    }

    .site-nav a:hover,
    .site-nav a.active {
        color: #ffffff !important;
    }

    .site-nav a.active::after,
    .site-nav a:hover::after {
        content: "";
        display: block;
        height: 2px;
        width: 100%;
        margin-top: 7px;
        background: #d4a84a;
    }

    .header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
    }

    .language-switcher,
    .theme-toggle {
        color: #ffffff !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 8px 0 !important;
        font-weight: 900 !important;
        outline: none !important;
    }

    .language-switcher option {
        color: #111111 !important;
    }

    .theme-toggle {
        width: auto !important;
        height: auto !important;
        font-size: 17px !important;
    }

    .nav-toggle {
        display: none;
        background: transparent;
        border: 0;
    }

    .nav-toggle span {
        display: block;
        height: 2px;
        background: #fff;
        margin: 7px 0;
    }

    .about-hero {
        min-height: 70vh;
        display: grid;
        align-items: end;
        padding: 150px 24px 78px;
        color: #fff;
        background:
            linear-gradient(90deg, rgba(4,5,7,.96), rgba(4,5,7,.70), rgba(4,5,7,.32)),
            radial-gradient(circle at 78% 22%, rgba(212,168,74,.30), transparent 32%),
            linear-gradient(135deg, #0b0d11, #2a1a10);
    }

    .about-hero-inner {
        width: min(1180px, 100%);
        margin: 0 auto;
    }

    .kicker {
        color: #f3d17b;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .16em;
        font-size: 12px;
        margin-bottom: 18px;
    }

    .about-hero h1 {
        margin: 0;
        max-width: 920px;
        font-size: clamp(46px, 7vw, 92px);
        line-height: .92;
        letter-spacing: -0.075em;
    }

    .about-hero p {
        max-width: 780px;
        margin: 26px 0 0;
        color: rgba(255,255,255,.72);
        font-size: 18px;
        line-height: 1.75;
    }

    .about-wrap {
        width: min(1180px, calc(100% - 32px));
        margin: 0 auto;
        padding: 84px 0;
    }

    .intro-grid {
        display: grid;
        grid-template-columns: .9fr 1.1fr;
        gap: 42px;
        align-items: start;
        margin-bottom: 26px;
    }

    .section-label {
        color: var(--accent-2);
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .14em;
        font-size: 12px;
        margin-bottom: 14px;
    }

    .intro-grid h2,
    .content-card h2,
    .compliance-block h2 {
        margin: 0;
        font-size: clamp(34px, 4.4vw, 64px);
        line-height: .96;
        letter-spacing: -0.06em;
    }

    .lead-card {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 32px;
        padding: 34px;
        box-shadow: 0 24px 80px rgba(0,0,0,.06);
    }

    .lead-card p,
    .content-card p,
    .compliance-block p {
        color: var(--muted);
        line-height: 1.85;
        font-size: 17px;
        margin: 0;
    }

    .facts-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        margin: 30px 0;
    }

    .fact-card {
        background: var(--surface);
        border: 1px solid var(--line);
        padding: 24px;
        border-radius: 0;
        min-height: 160px;
    }

    .fact-card strong {
        display: block;
        color: var(--accent-2);
        font-size: 30px;
        letter-spacing: -0.05em;
        margin-bottom: 10px;
    }

    .fact-card span {
        color: var(--muted);
        line-height: 1.65;
        font-weight: 700;
    }

    .content-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        margin-top: 18px;
    }

    .content-card {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 30px;
        padding: 34px;
        box-shadow: 0 18px 70px rgba(0,0,0,.045);
    }

    .content-card h3 {
        margin: 0 0 18px;
        color: var(--accent-2);
        font-size: 15px;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .bullet-list {
        display: grid;
        gap: 12px;
        margin: 22px 0 0;
        padding: 0;
        list-style: none;
    }

    .bullet-list li {
        display: grid;
        grid-template-columns: 22px 1fr;
        gap: 10px;
        color: var(--muted);
        line-height: 1.7;
        font-size: 16px;
    }

    .bullet-list li::before {
        content: "✓";
        color: var(--accent-2);
        font-weight: 900;
    }

    .compliance-block {
        margin-top: 22px;
        display: grid;
        grid-template-columns: .6fr 1.4fr;
        gap: 34px;
        align-items: center;
        padding: 42px;
        border-radius: 34px;
        background:
            radial-gradient(circle at 12% 20%, rgba(228,31,31,.12), transparent 30%),
            radial-gradient(circle at 84% 24%, rgba(212,168,74,.18), transparent 34%),
            var(--surface);
        border: 1px solid var(--line);
        box-shadow: 0 24px 80px rgba(0,0,0,.065);
    }

    .osha-badge {
        justify-self: center;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: linear-gradient(145deg, rgba(212,168,74,.96), rgba(244,212,122,.88));
        color: #1a1307;
        box-shadow: 0 28px 80px rgba(212,168,74,.24);
        text-align: center;
    }

    .osha-badge span {
        display: block;
        font-size: 48px;
        font-weight: 900;
        line-height: 1;
    }

    .osha-badge strong {
        display: block;
        margin-top: -28px;
        font-size: 30px;
        letter-spacing: .08em;
    }

    .contact-strip {
        margin-top: 24px;
        padding: 38px;
        border-radius: 0;
        background: #0b0d11;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
    }

    .contact-strip h3 {
        margin: 0;
        font-size: clamp(28px, 4vw, 48px);
        line-height: 1;
        letter-spacing: -0.05em;
    }

    .contact-strip a {
        display: inline-flex;
        min-height: 52px;
        align-items: center;
        justify-content: center;
        padding: 0 20px;
        border-radius: 0;
        background: linear-gradient(135deg, #d4a84a, #f3d17b);
        color: #161007;
        font-weight: 900;
        text-decoration: none;
        white-space: nowrap;
    }

    .site-footer {
        background: var(--footer);
        color: #fff;
        padding: 60px 24px 26px;
    }

    .footer-grid {
        width: min(1180px, 100%);
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1.4fr .7fr .9fr;
        gap: 36px;
    }

    .footer-brand {
        font-size: 32px;
        font-weight: 900;
        color: #f3d17b;
    }

    .site-footer p,
    .site-footer a {
        color: rgba(255,255,255,.6);
        line-height: 1.7;
    }

    .site-footer a {
        display: block;
        text-decoration: none;
        margin-bottom: 8px;
    }

    .footer-bottom {
        width: min(1180px, 100%);
        margin: 36px auto 0;
        padding-top: 22px;
        border-top: 1px solid rgba(255,255,255,.1);
        display: flex;
        justify-content: space-between;
        gap: 18px;
        color: rgba(255,255,255,.46);
        font-size: 13px;
    }

    @media (max-width: 980px) {
        .site-header {
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: 14px !important;
            padding: 14px 18px !important;
        }

        .brand {
            order: 1 !important;
            margin-right: auto !important;
            min-width: 142px !important;
            height: 50px !important;
        }

        .brand-logo {
            width: 120px !important;
        }

        .header-actions {
            order: 2 !important;
            gap: 12px !important;
        }

        .nav-toggle {
            order: 3 !important;
            display: grid !important;
            place-items: center !important;
            width: 44px !important;
            height: 44px !important;
            margin-left: 4px !important;
            padding: 0 !important;
            border: 0 !important;
            background: transparent !important;
            color: #ffffff !important;
            cursor: pointer !important;
            position: relative !important;
        }

        .nav-toggle span {
            display: block !important;
            position: absolute !important;
            width: 28px !important;
            height: 2px !important;
            background: #ffffff !important;
            margin: 0 !important;
            border-radius: 999px !important;
            transition: transform .35s ease, opacity .25s ease, top .35s ease !important;
        }

        .nav-toggle span:nth-child(1) { top: 13px !important; }
        .nav-toggle span:nth-child(2) { top: 21px !important; }
        .nav-toggle span:nth-child(3) { top: 29px !important; }

        .nav-toggle.is-open span:nth-child(1) {
            top: 21px !important;
            transform: rotate(45deg) !important;
        }

        .nav-toggle.is-open span:nth-child(2) {
            opacity: 0 !important;
        }

        .nav-toggle.is-open span:nth-child(3) {
            top: 21px !important;
            transform: rotate(-45deg) !important;
        }

        .site-nav {
            order: 4 !important;
            position: absolute !important;
            top: 100% !important;
            left: 0 !important;
            right: 0 !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            justify-content: flex-start !important;
            gap: 0 !important;
            padding: 14px 18px 18px !important;
            background: linear-gradient(180deg, rgba(5,7,10,.96), rgba(5,7,10,.88)) !important;
            border: 0 !important;
            border-bottom: 1px solid rgba(255,255,255,.14) !important;
            box-shadow: 0 28px 60px rgba(0,0,0,.34) !important;
            opacity: 0 !important;
            pointer-events: none !important;
            transform: translateY(-12px) !important;
            clip-path: inset(0 0 100% 0) !important;
            transition: opacity .28s ease, transform .35s ease, clip-path .42s cubic-bezier(.16, 1, .3, 1) !important;
        }

        .site-nav.open {
            opacity: 1 !important;
            pointer-events: auto !important;
            transform: translateY(0) !important;
            clip-path: inset(0 0 0 0) !important;
        }

        .site-nav a {
            width: 100% !important;
            color: rgba(255,255,255,.78) !important;
            padding: 15px 0 !important;
            border-bottom: 1px solid rgba(255,255,255,.08) !important;
            font-size: 15px !important;
        }

        .site-nav a::after {
            display: none !important;
            content: none !important;
        }

        .intro-grid,
        .content-grid,
        .compliance-block,
        .footer-grid {
            grid-template-columns: 1fr;
        }

        .facts-grid {
            grid-template-columns: 1fr;
        }

        .osha-badge {
            justify-self: start;
            width: 132px;
            height: 132px;
        }

        .osha-badge span {
            font-size: 36px;
        }

        .osha-badge strong {
            font-size: 22px;
            margin-top: -22px;
        }

        .contact-strip {
            display: block;
        }

        .contact-strip a {
            margin-top: 22px;
        }

        .footer-bottom {
            flex-direction: column;
        }
    }

    @media (max-width: 560px) {
        .site-header {
            padding: 12px 14px !important;
            gap: 10px !important;
        }

        .brand {
            min-width: 118px !important;
            height: 46px !important;
        }

        .brand-logo {
            width: 108px !important;
        }

        .about-hero {
            padding: 125px 18px 60px;
        }

        .about-wrap {
            width: min(100% - 24px, 1180px);
            padding: 60px 0;
        }

        .lead-card,
        .content-card,
        .compliance-block {
            padding: 24px;
            border-radius: 24px;
        }

        .contact-strip {
            padding: 26px;
        }
    }

/* REAL OSHA BADGE IMAGE */
.compliance-image {
    background: #ffffff !important;
    border-radius: 0 !important;
    padding: 20px !important;
    display: grid !important;
    place-items: center !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.10) !important;
}

.compliance-image img {
    display: block !important;
    max-width: 150px !important;
    max-height: 150px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

@media (max-width: 980px) {
    .compliance-image img {
        max-width: 98px !important;
        max-height: 98px !important;
    }
}


/* LOGO BACKGROUND CLEANUP */
.logo-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.logo-card img {
    background: transparent !important;
    filter: none !important;
}

.compliance-image {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.compliance-image img {
    background: transparent !important;
}


/* FINAL PREMIUM BECCO FOOTER */
.becco-footer {
    background:
        radial-gradient(circle at 14% 0%, rgba(228,31,31,.12), transparent 26%),
        radial-gradient(circle at 86% 10%, rgba(212,168,74,.10), transparent 28%),
        #000000 !important;
    color: #ffffff !important;
    padding: 0 !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
}

.footer-shell {
    width: min(1180px, calc(100% - 32px)) !important;
    margin: 0 auto !important;
    padding: 72px 0 28px !important;
}

.footer-main {
    display: grid !important;
    grid-template-columns: 1.35fr .65fr .9fr !important;
    gap: 54px !important;
    align-items: start !important;
    padding-bottom: 42px !important;
}

.footer-brand-block {
    max-width: 520px !important;
}

.footer-logo-text {
    display: inline-flex !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 42px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: -.04em !important;
}

.footer-logo-text::after {
    content: "" !important;
    display: block !important;
    width: 46px !important;
    height: 4px !important;
    background: #e41f1f !important;
    margin-left: 14px !important;
    align-self: end !important;
    margin-bottom: 7px !important;
}

.footer-brand-block p {
    margin: 22px 0 0 !important;
    color: rgba(255,255,255,.62) !important;
    line-height: 1.85 !important;
    font-size: 16px !important;
    max-width: 470px !important;
}

.footer-column h4 {
    margin: 0 0 18px !important;
    color: #d4a84a !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: .18em !important;
}

.footer-column a {
    display: table !important;
    color: rgba(255,255,255,.68) !important;
    text-decoration: none !important;
    line-height: 1.35 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    margin: 0 0 13px !important;
    transition: color .25s ease, transform .25s ease !important;
}

.footer-column a:hover {
    color: #ffffff !important;
    transform: translateX(4px) !important;
}

.footer-contact a {
    display: block !important;
    margin-bottom: 18px !important;
}

.footer-contact a span {
    display: block !important;
    color: rgba(255,255,255,.42) !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: .12em !important;
    margin-bottom: 7px !important;
}

.footer-bottom {
    width: 100% !important;
    margin: 0 !important;
    padding: 24px 0 0 !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
    display: block !important;
    text-align: center !important;
    color: rgba(255,255,255,.48) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

@media (max-width: 980px) {
    .footer-shell {
        padding: 56px 0 26px !important;
    }

    .footer-main {
        grid-template-columns: 1fr !important;
        gap: 34px !important;
    }

    .footer-logo-text {
        font-size: 36px !important;
    }
}

@media (max-width: 560px) {
    .footer-shell {
        width: min(100% - 24px, 1180px) !important;
    }

    .footer-brand-block p {
        font-size: 15px !important;
    }
}


/* =========================================================
   BECCO 2026 ABOUT PROFILE
   ========================================================= */

.profile2026 {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 86px 0;
}

.profile2026-label {
    color: #b48628;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.profile2026-title {
    margin: 0;
    max-width: 900px;
    font-size: clamp(40px,5.6vw,74px);
    line-height: .95;
    letter-spacing: -.066em;
}

.profile2026-copy {
    max-width: 900px;
    margin: 25px 0 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.85;
}

.profile2026-facts {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
    margin-top: 42px;
}

.profile2026-fact {
    padding: 30px;
    background: var(--surface);
    border: 1px solid var(--line);
}

.profile2026-fact strong {
    display: block;
    color: #b48628;
    font-size: clamp(42px,5vw,66px);
    letter-spacing: -.065em;
    line-height: 1;
}

.profile2026-fact span {
    display: block;
    margin-top: 14px;
    color: var(--muted);
    line-height: 1.6;
    font-weight: 800;
}

/* Board */
.board2026-section {
    background: #090909;
    color: #fff;
}

.board2026-inner {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 88px 0;
}

.board2026-inner .profile2026-copy {
    color: rgba(255,255,255,.64);
}

.board2026-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px;
    margin-top: 42px;
}

.board2026-card {
    overflow: hidden;
    background: #121212;
    border: 1px solid rgba(255,255,255,.10);
}

.board2026-image {
    height: 390px;
    overflow: hidden;
    background: #171717;
}

.board2026-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform .5s ease;
}

.board2026-card:hover .board2026-image img {
    transform: scale(1.035);
}

.board2026-content {
    padding: 26px;
}

.board2026-role {
    color: #d5ad4f;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.board2026-content h3 {
    margin: 10px 0 0;
    color: #fff;
    font-size: 25px;
    line-height: 1.05;
    letter-spacing: -.04em;
}

.board2026-content p {
    margin: 16px 0 0;
    color: rgba(255,255,255,.62);
    line-height: 1.7;
    font-size: 14px;
}

/* Mission / Vision */
.profile2026-mv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.profile2026-mv article {
    min-height: 350px;
    padding: 42px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.profile2026-mission {
    background: linear-gradient(145deg,#9b7222,#e0bc61);
    color: #111;
}

.profile2026-vision {
    background: #0a0a0a;
    color: #fff;
}

.profile2026-mv h3 {
    margin: 0;
    font-size: clamp(31px,4vw,52px);
    line-height: 1;
    letter-spacing: -.055em;
}

/* Strategy / values */
.profile2026-dark {
    background: #090909;
    color: #fff;
}

.profile2026-dark-inner {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 88px 0;
}

.profile2026-grid4 {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px;
    margin-top: 36px;
}

.profile2026-values {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
    margin-top: 36px;
}

.profile2026-card {
    padding: 26px;
    border: 1px solid var(--line);
    background: var(--surface);
}

.profile2026-dark .profile2026-card {
    background: #111;
    border-color: rgba(255,255,255,.10);
}

.profile2026-card strong {
    display: block;
    font-size: 18px;
    line-height: 1.3;
}

.profile2026-card p {
    margin: 13px 0 0;
    color: var(--muted);
    line-height: 1.7;
    font-size: 14px;
}

.profile2026-dark .profile2026-card p {
    color: rgba(255,255,255,.60);
}

.profile2026-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.profile2026-feature {
    padding: 38px;
    background: var(--surface);
    border: 1px solid var(--line);
}

.profile2026-feature h3 {
    margin: 0;
    font-size: clamp(30px,4vw,50px);
    line-height: 1;
    letter-spacing: -.055em;
}

.profile2026-feature p {
    margin: 20px 0 0;
    color: var(--muted);
    line-height: 1.8;
}

@media(max-width:980px) {
    .profile2026-facts,
    .board2026-grid,
    .profile2026-mv,
    .profile2026-grid4,
    .profile2026-values,
    .profile2026-split {
        grid-template-columns:1fr;
    }

    .board2026-image {
        height: 520px;
    }
}

@media(max-width:560px) {
    .profile2026,
    .board2026-inner,
    .profile2026-dark-inner {
        width:min(100% - 24px,1180px);
        padding:60px 0;
    }

    .board2026-image {
        height:420px;
    }

    .profile2026-mv article {
        min-height:280px;
        padding:28px;
    }
}



/* ============================================================
   BECCO_AWARD_2023_CSS_START
   Tanzania Civil Engineering Brand of the Year — EBAC 2023
   Web-native certificate treatment
   ============================================================ */

.becco-award2023 {
    position:relative;
    width:min(1180px, calc(100% - 32px));
    margin:22px auto 84px;
}

.becco-award2023-shell {
    position:relative;
    isolation:isolate;

    display:grid;
    grid-template-columns:290px minmax(0,1fr);

    min-height:520px;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 70% 35%,
            rgba(197,151,54,.10),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #f4f0dd 0%,
            #ebe5ce 55%,
            #f7f3e4 100%
        );

    border:1px solid rgba(104,82,32,.28);

    box-shadow:
        0 28px 70px rgba(0,0,0,.12),
        inset 0 0 0 7px rgba(255,255,255,.22);
}

/*
 * Architectural corner forms inspired by the certificate,
 * without reproducing its seal/signature artwork.
 */

.becco-award2023-shell::before,
.becco-award2023-shell::after {
    content:"";
    position:absolute;
    z-index:-1;
    pointer-events:none;
}

.becco-award2023-shell::before {
    width:390px;
    height:250px;

    left:-150px;
    bottom:-105px;

    background:
        linear-gradient(
            135deg,
            #222326 0 58%,
            #b18a36 58% 62%,
            #3a3a3d 62% 100%
        );

    transform:rotate(7deg);
}

.becco-award2023-shell::after {
    width:420px;
    height:250px;

    right:-180px;
    top:-120px;

    background:
        linear-gradient(
            135deg,
            #2c2d30 0 46%,
            #b89443 46% 50%,
            #45464a 50% 100%
        );

    transform:rotate(-7deg);
}


/* LEFT AWARD COLUMN */

.becco-award2023-year-column {
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    padding:54px 36px;

    border-right:
        1px solid rgba(94,72,25,.22);
}

.becco-award2023-kicker {
    margin-bottom:31px;

    color:#6e5723;

    font-size:11px;
    line-height:1;
    font-weight:900;

    letter-spacing:.22em;
    text-transform:uppercase;
}

.becco-award2023-medallion {
    position:relative;

    width:184px;
    height:184px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:
        radial-gradient(
            circle at 35% 28%,
            #f4d988 0%,
            #c6a04d 32%,
            #9b752a 70%,
            #73541c 100%
        );

    border:1px solid rgba(77,54,8,.34);

    box-shadow:
        inset 0 0 0 8px rgba(255,255,255,.18),
        inset 0 0 0 10px rgba(82,59,12,.18),
        0 18px 35px rgba(70,49,10,.18);
}

.becco-award2023-medallion::before {
    content:"";

    position:absolute;
    inset:14px;

    border:1px solid rgba(72,50,10,.38);
    border-radius:50%;
}

.becco-award2023-medallion span {
    position:relative;
    z-index:2;

    color:#29230f;

    font-family:Georgia, "Times New Roman", serif;
    font-size:49px;
    line-height:.9;
    font-weight:700;

    letter-spacing:-.045em;
}

.becco-award2023-medallion small {
    position:relative;
    z-index:2;

    margin-top:13px;

    color:#3d3217;

    font-size:9px;
    font-weight:900;

    letter-spacing:.16em;
}

.becco-award2023-winner {
    margin-top:28px;

    color:#26221a;

    font-family:Georgia, "Times New Roman", serif;
    font-size:19px;
    font-style:italic;
}


/* MAIN CERTIFICATE CONTENT */

.becco-award2023-content {
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:66px 76px 64px 68px;
}

.becco-award2023-overline {
    margin-bottom:23px;

    color:#8b6a27;

    font-size:11px;
    font-weight:900;

    letter-spacing:.22em;
    text-transform:uppercase;
}

.becco-award2023-content h2 {
    max-width:720px;

    margin:0;

    color:#25262a;

    font-family:Georgia, "Times New Roman", serif;

    font-size:clamp(38px,5.3vw,72px);
    line-height:.97;
    font-weight:500;

    letter-spacing:-.047em;
}

.becco-award2023-content h2 span {
    display:block;

    margin-top:9px;

    color:#8d6c2c;
}

.becco-award2023-rule {
    width:104px;
    height:2px;

    margin:32px 0 26px;

    background:#b38b37;
}

.becco-award2023-lead {
    max-width:690px;

    margin:0;

    color:#4c4b45;

    font-size:17px;
    line-height:1.75;
}

.becco-award2023-lead strong {
    color:#212121;
    font-weight:900;
}

.becco-award2023-meta {
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:0;

    margin-top:42px;

    border-top:
        1px solid rgba(89,69,25,.20);

    border-bottom:
        1px solid rgba(89,69,25,.20);
}

.becco-award2023-meta > div {
    padding:20px 20px 20px 0;
}

.becco-award2023-meta > div + div {
    padding-left:20px;

    border-left:
        1px solid rgba(89,69,25,.18);
}

.becco-award2023-meta small,
.becco-award2023-meta strong {
    display:block;
}

.becco-award2023-meta small {
    margin-bottom:7px;

    color:#8a7341;

    font-size:9px;
    font-weight:900;

    letter-spacing:.15em;
    text-transform:uppercase;
}

.becco-award2023-meta strong {
    color:#292923;

    font-size:13px;
    line-height:1.45;
}

.becco-award2023-corner-text {
    position:absolute;

    right:28px;
    bottom:18px;

    z-index:1;

    color:rgba(35,35,35,.12);

    font-size:12px;
    font-weight:900;

    letter-spacing:.32em;
}


/* TABLET */

@media (max-width:900px) {

    .becco-award2023-shell {
        grid-template-columns:220px minmax(0,1fr);
    }

    .becco-award2023-year-column {
        padding:44px 24px;
    }

    .becco-award2023-medallion {
        width:150px;
        height:150px;
    }

    .becco-award2023-medallion span {
        font-size:40px;
    }

    .becco-award2023-content {
        padding:54px 42px;
    }

    .becco-award2023-meta {
        grid-template-columns:1fr;
    }

    .becco-award2023-meta > div {
        padding:14px 0;
    }

    .becco-award2023-meta > div + div {
        padding-left:0;

        border-left:0;

        border-top:
            1px solid rgba(89,69,25,.16);
    }
}


/* MOBILE */

@media (max-width:640px) {

    .becco-award2023 {
        width:min(100% - 24px,1180px);
        margin:10px auto 62px;
    }

    .becco-award2023-shell {
        display:block;
        min-height:0;
    }

    .becco-award2023-shell::before {
        width:270px;
        height:160px;

        left:-150px;
        bottom:-85px;
    }

    .becco-award2023-shell::after {
        width:280px;
        height:170px;

        right:-155px;
        top:-95px;
    }

    .becco-award2023-year-column {
        align-items:flex-start;

        padding:34px 28px 28px;

        border-right:0;

        border-bottom:
            1px solid rgba(94,72,25,.20);
    }

    .becco-award2023-kicker {
        margin-bottom:20px;
    }

    .becco-award2023-medallion {
        width:126px;
        height:126px;
    }

    .becco-award2023-medallion span {
        font-size:35px;
    }

    .becco-award2023-winner {
        margin-top:18px;
        font-size:17px;
    }

    .becco-award2023-content {
        padding:38px 28px 52px;
    }

    .becco-award2023-content h2 {
        font-size:clamp(36px,11vw,52px);
    }

    .becco-award2023-lead {
        font-size:15px;
    }

    .becco-award2023-meta {
        margin-top:32px;
    }

    .becco-award2023-corner-text {
        display:none;
    }
}



/* BECCO_PUBLIC_CAREERS_P01_FIX: remove certificate corner decorations only */
.becco-award2023-shell::before,
.becco-award2023-shell::after {
    content:none !important;
    display:none !important;
}
/* BECCO_AWARD_2023_CSS_END */