/* ============================================================
   MarecBau — "Blueprint & Steel"
   Industrial / architectural theme for a construction company.
   Distinct visual identity: sharp corners, blueprint navy,
   construction-safety amber, oversized display type, numbered
   structural elements. Keeps framework structure (template.tpl)
   so header/menu/flags/dark mode continue to work.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
    /* Core palette */
    --mb-blueprint:      #0b1e34;   /* deep blueprint navy */
    --mb-blueprint-2:    #102a43;
    --mb-steel:          #1f2937;
    --mb-concrete:       #e6e8ec;
    --mb-concrete-2:     #f3f4f6;
    --mb-paper:          #ffffff;
    --mb-amber:          #fcbf49;   /* safety / construction amber */
    --mb-amber-deep:     #f59e0b;
    --mb-amber-soft:     #fff4d6;
    --mb-text:           #111827;
    --mb-text-muted:     #4b5563;
    --mb-text-faint:     #6b7280;
    --mb-rule:           #d1d5db;
    --mb-rule-soft:      #e5e7eb;

    /* Aliases used by base framework (alerts, forms, blog) */
    --cl-bg: var(--mb-concrete-2);
    --cl-surface: var(--mb-paper);
    --cl-surface-alt: var(--mb-concrete);
    --cl-text: var(--mb-text);
    --cl-text-muted: var(--mb-text-muted);
    --cl-heading: var(--mb-blueprint);
    --cl-accent: var(--mb-amber-deep);
    --cl-accent-hover: var(--mb-amber);
    --cl-accent-light: var(--mb-amber-soft);
    --cl-border: var(--mb-rule);
    --cl-border-light: var(--mb-rule-soft);
    --cl-nav-bg: rgba(11, 30, 52, 0.96);
    --cl-hero-overlay: linear-gradient(180deg, rgba(11,30,52,0.55) 0%, rgba(11,30,52,0.92) 100%);
    --cl-radius: 0px;
    --cl-radius-lg: 0px;
    --cl-shadow: 0 1px 0 rgba(11,30,52,0.06), 0 8px 24px rgba(11,30,52,0.06);
    --cl-shadow-md: 0 18px 40px rgba(11,30,52,0.18);

    /* Typography */
    --mb-font-display: 'Archivo Black', 'Inter', Impact, sans-serif;
    --mb-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --mb-font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --cl-font-body: var(--mb-font-body);
    --cl-font-heading: var(--mb-font-display);
    --cl-transition: all .2s ease;

    /* Decorative */
    --mb-blueprint-grid:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 32px 32px;
    --mb-hazard:
        repeating-linear-gradient(135deg,
            var(--mb-amber) 0 18px,
            var(--mb-blueprint) 18px 36px);
}

[data-theme="dark"] {
    --mb-paper: #0d1421;
    --mb-concrete: #131c2c;
    --mb-concrete-2: #0a111c;
    --mb-text: #e6ecf3;
    --mb-text-muted: #98a4b3;
    --mb-text-faint: #6b7785;
    --mb-rule: #1f2a3d;
    --mb-rule-soft: #16213208;

    --cl-bg: var(--mb-concrete-2);
    --cl-surface: var(--mb-paper);
    --cl-surface-alt: var(--mb-concrete);
    --cl-text: var(--mb-text);
    --cl-text-muted: var(--mb-text-muted);
    --cl-heading: #ffffff;
    --cl-border: var(--mb-rule);
    --cl-border-light: var(--mb-rule);
    --cl-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 14px 30px rgba(0,0,0,0.45);
    --cl-shadow-md: 0 24px 50px rgba(0,0,0,0.55);
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--mb-font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--mb-text);
    background: var(--mb-concrete-2);
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--mb-amber-deep); text-decoration: none; transition: var(--cl-transition); }
a:hover, a:focus { color: var(--mb-blueprint); }
[data-theme="dark"] a:hover, [data-theme="dark"] a:focus { color: var(--mb-amber); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mb-font-display);
    color: var(--cl-heading);
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

/* Utility echoed from bootstrap conventions */
.tracking-wide { letter-spacing: .14em; }
.mb-eyebrow {
    font-family: var(--mb-font-mono);
    font-size: .78rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mb-amber-deep);
    font-weight: 500;
}
.mb-eyebrow .dot { display:inline-block; width:8px; height:8px; background: var(--mb-amber); margin-right:.6rem; vertical-align: middle; }

/* ============================================================
   Hero Banner (wraps header/nav/hero)
   ============================================================ */
.hero-banner {
    position: relative;
    background: var(--mb-blueprint);
    display: flex;
    flex-direction: column;
    color: #fff;
    overflow: hidden;
}
/* On the homepage, hero-banner gets the photo background and runs tall */
body:has(.mb-hero) .hero-banner {
    min-height: 720px;
    background-image: url('hero_bg.jpg');
    background-size: cover;
    background-position: center;
}
/* On inner pages, hero-banner is a slim dark band */
body:not(:has(.mb-hero)) .hero-banner { min-height: auto; }
body:not(:has(.mb-hero)) .hero-banner::after { opacity: .2; }
.hero-banner::before {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(115deg, rgba(11,30,52,0.92) 0%, rgba(11,30,52,0.55) 55%, rgba(11,30,52,0.85) 100%);
    z-index: 1;
}
.hero-banner::after {
    content: '';
    position: absolute; inset: 0;
    background-image: var(--mb-blueprint-grid);
    opacity: .35;
    pointer-events: none;
    z-index: 1;
}
.hero-banner > * { position: relative; z-index: 2; }
.hero-banner { border-bottom: 12px solid; border-image: var(--mb-hazard) 1; }

/* ============================================================
   Site header (logo, theme toggle, language)
   ============================================================ */
.site-header {
    background: transparent;
    padding: 1.1rem 0;
    position: relative;
    z-index: 10;
}
.site-header > .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.site-header .logo {
    display: inline-flex;
    align-items: center;
    padding: .25rem .5rem;
    border-left: 3px solid var(--mb-amber);
    transition: var(--cl-transition);
}
.site-header .logo:hover { transform: translateX(2px); }
.site-header .logo img { max-height: 38px; width: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }

/* Inside the dark hero banner, force the light/moon variant always */
.hero-banner .logo-dark { display: inline; }
.hero-banner .logo-light { display: none; }
/* Outside hero (inner pages) — default classic behaviour */
.logo-dark { display: none; }
.logo-light { display: inline; }
[data-theme="dark"] .logo-dark { display: inline; }
[data-theme="dark"] .logo-light { display: none; }

.header-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
    position: relative;
    z-index: 1050;
}

.theme-toggle {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    width: 40px; height: 40px;
    cursor: pointer;
    transition: var(--cl-transition);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.theme-toggle:hover { background: var(--mb-amber); color: var(--mb-blueprint); border-color: var(--mb-amber); }

.lang-switcher { position: relative; z-index: 1100; }
.lang-switcher .lang-current {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0;
    border: 1px solid rgba(255,255,255,0.18);
    cursor: pointer;
    background: rgba(255,255,255,0.08);
    transition: var(--cl-transition);
}
.lang-switcher .lang-current:hover { background: var(--mb-amber); border-color: var(--mb-amber); }
.lang-switcher .lang-current img {
    width: 22px !important; height: 22px !important;
    max-width: 22px !important; max-height: 22px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.35);
}
.lang-switcher .lang-current i { display: none; }
.lang-dropdown {
    position: absolute;
    top: calc(100% + 6px); right: 0;
    min-width: 170px;
    background: var(--mb-paper);
    border: 1px solid var(--mb-rule);
    box-shadow: var(--cl-shadow-md);
    display: none;
    overflow: hidden;
    z-index: 9999;
}
.lang-dropdown.active { display: block; }
.lang-dropdown .lang-option {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background .15s;
    color: var(--mb-text);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
}
.lang-dropdown .lang-option:hover { background: var(--mb-concrete); color: var(--mb-amber-deep); }
.lang-dropdown .lang-option img {
    width: 22px !important; height: 22px !important;
    max-width: 22px !important; max-height: 22px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--mb-rule);
}

/* ============================================================
   Navigation (inside hero-banner)
   ============================================================ */
.hero-banner .navbar {
    background-color: rgba(11,30,52,0.55);
    border: 0;
    border-top: 1px solid rgba(255,255,255,0.07);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 0;
    backdrop-filter: blur(6px);
    min-height: auto;
}
.hero-banner .navbar .container { padding-block: .1rem; }
.hero-banner .navbar .navbar-nav { margin: 0; display: flex; flex-wrap: wrap; }
.hero-banner .navbar .navbar-nav > li > a {
    color: rgba(255,255,255,0.85);
    font-family: var(--mb-font-mono);
    font-size: .78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .18em;
    padding: 1rem 1.15rem;
    transition: var(--cl-transition);
    position: relative;
}
.hero-banner .navbar .navbar-nav > li > a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 3px;
    background: var(--mb-amber);
    transition: width .25s ease;
}
.hero-banner .navbar .navbar-nav > li > a:hover { color: #fff; background-color: rgba(255,255,255,0.03); }
.hero-banner .navbar .navbar-nav > li > a:hover::after,
.hero-banner .navbar .navbar-nav > .active > a::after { width: 100%; }
.hero-banner .navbar .navbar-nav > .active > a { color: #fff; }
.hero-banner .navbar .navbar-toggler { border: 1px solid rgba(255,255,255,.2); border-radius: 0; }
.hero-banner .navbar .navbar-collapse { border: 0; padding: 0; box-shadow: none; }

/* ============================================================
   HOMEPAGE
   ============================================================ */

/* Hero content */
.mb-hero {
    flex: 1;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 3rem;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    padding: 4rem 2rem 5rem;
    width: 100%;
}
.mb-hero__copy { color: #fff; }
.mb-hero__est {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    background: var(--mb-amber);
    color: var(--mb-blueprint);
    font-family: var(--mb-font-mono);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .22em;
    padding: .5rem .9rem;
    margin-bottom: 1.6rem;
}
.mb-hero__title {
    font-family: var(--mb-font-display);
    color: #fff;
    font-size: clamp(2.6rem, 5.6vw, 5rem);
    line-height: .95;
    letter-spacing: -0.02em;
    margin: 0 0 1.5rem;
    text-transform: uppercase;
}
.mb-hero__title .accent { color: var(--mb-amber); }
.mb-hero__title .stroke {
    -webkit-text-stroke: 2px #fff;
    color: transparent;
}
.mb-hero__lead {
    font-size: 1.1rem;
    line-height: 1.65;
    color: rgba(255,255,255,.85);
    max-width: 560px;
    margin: 0 0 2rem;
}
.mb-hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.mb-btn {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: 1rem 1.6rem;
    font-family: var(--mb-font-mono);
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--cl-transition);
}
.mb-btn--primary { background: var(--mb-amber); color: var(--mb-blueprint); border-color: var(--mb-amber); }
.mb-btn--primary:hover { background: #fff; color: var(--mb-blueprint); border-color: #fff; transform: translateY(-2px); }
.mb-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.mb-btn--ghost:hover { background: #fff; color: var(--mb-blueprint); border-color: #fff; }
.mb-btn--dark { background: var(--mb-blueprint); color: #fff; border-color: var(--mb-blueprint); }
.mb-btn--dark:hover { background: var(--mb-amber); color: var(--mb-blueprint); border-color: var(--mb-amber); }

/* Hero side card */
.mb-hero__card {
    position: relative;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(11,30,52,0.55);
    backdrop-filter: blur(10px);
    padding: 2rem 2rem 1.6rem;
    color: #fff;
}
.mb-hero__card::before {
    content: '';
    position: absolute;
    top: -12px; left: -12px;
    width: 56px; height: 56px;
    background: var(--mb-amber);
    z-index: -1;
}
.mb-hero__card h3 {
    font-size: 1rem;
    margin: 0 0 1.25rem;
    color: var(--mb-amber);
    font-family: var(--mb-font-mono);
    letter-spacing: .2em;
    font-weight: 500;
}
.mb-hero__card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.mb-hero__card li {
    display: flex; align-items: flex-start; gap: .8rem;
    font-size: .96rem;
    line-height: 1.45;
    border-bottom: 1px dashed rgba(255,255,255,.12);
    padding-bottom: .8rem;
}
.mb-hero__card li:last-child { border-bottom: 0; padding-bottom: 0; }
.mb-hero__card li i { color: var(--mb-amber); padding-top: 3px; min-width: 18px; }

/* Stats strip */
.mb-stats {
    background: var(--mb-blueprint);
    color: #fff;
    border-top: 14px solid;
    border-image: var(--mb-hazard) 1;
    padding: 3.5rem 0;
    position: relative;
}
.mb-stats::after {
    content: '';
    position: absolute; inset: 0;
    background-image: var(--mb-blueprint-grid);
    opacity: .25;
    pointer-events: none;
}
.mb-stats__grid {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    position: relative;
    z-index: 1;
}
.mb-stat { border-left: 3px solid var(--mb-amber); padding: .25rem 0 .25rem 1.25rem; }
.mb-stat__num { font-family: var(--mb-font-display); font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; color: #fff; margin: 0; }
.mb-stat__num small { font-size: .55em; color: var(--mb-amber); font-family: var(--mb-font-display); margin-left: .15em; }
.mb-stat__label { font-family: var(--mb-font-mono); font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: .6rem; }

/* Section frame */
.mb-section { padding: 6rem 0; position: relative; }
.mb-section--alt { background: var(--mb-concrete-2); }
/* Homepage page-content injection slot — sits between the hero banner and
   the stats grid. Two-column editorial layout: heading on the left flanked
   by an amber accent rule, paragraphs stack on the right with uniform gaps. */
.mb-page-intro {
    padding: 6rem 0 5rem;
    position: relative;
}
.mb-page-intro .mb-container {
    position: relative;
    max-width: 1280px;
}

/* Heading is absolutely positioned in the left visual column. Pulling it
   out of normal flow means a tall translated heading (e.g. the 3-line
   Dutch "GEBOUWD OP VIJFENTWINTIG JAAR PRECISIE.") doesn't push the lead
   paragraph down within a shared grid row — paragraphs on the right keep
   their natural block-flow rhythm with uniform vertical gaps. */
.mb-page-intro > .mb-container > h1:first-of-type,
.mb-page-intro > .mb-container > h2:first-of-type {
    position: absolute;
    top: 1.75rem;
    left: 2rem;
    width: calc(42% - 4rem);
    margin: 0;
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    line-height: 1.05;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: var(--cl-heading);
}

/* Amber accent rule above the heading — the design "hook". */
.mb-page-intro > .mb-container > h1:first-of-type::before,
.mb-page-intro > .mb-container > h2:first-of-type::before {
    content: '';
    position: absolute;
    top: -1.75rem;
    left: 0;
    width: 56px;
    height: 3px;
    background: var(--mb-amber);
}

/* Paragraphs and inline H3 section breaks live in the right visual column.
   Pure block flow with margin-bottom for uniform gaps. */
.mb-page-intro > .mb-container > p,
.mb-page-intro > .mb-container > h3 {
    margin: 0 0 1.25rem calc(42% + 1.5rem);
    max-width: 64ch;
}

.mb-page-intro > .mb-container > p {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--mb-text);
}
.mb-page-intro > .mb-container > p:last-child {
    margin-bottom: 0;
}

/* Lead paragraph (first one after the heading) — larger and in heading
   color so it carries the section's voice. */
.mb-page-intro > .mb-container > h1:first-of-type + p,
.mb-page-intro > .mb-container > h2:first-of-type + p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--cl-heading);
    font-weight: 400;
}

.mb-page-intro > .mb-container > h3 {
    font-size: 1.35rem;
    text-transform: uppercase;
    color: var(--cl-heading);
    letter-spacing: -.01em;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Narrow screens: heading drops back into block flow above the prose. */
@media (max-width: 900px) {
    .mb-page-intro { padding: 4rem 0 3rem; }
    .mb-page-intro > .mb-container > h1:first-of-type,
    .mb-page-intro > .mb-container > h2:first-of-type {
        position: static;
        width: auto;
        margin: 0 0 1.5rem;
        font-size: 2rem;
    }
    .mb-page-intro > .mb-container > h1:first-of-type::before,
    .mb-page-intro > .mb-container > h2:first-of-type::before {
        position: relative;
        top: auto;
        left: auto;
        display: block;
        margin-bottom: 1.25rem;
    }
    .mb-page-intro > .mb-container > p,
    .mb-page-intro > .mb-container > h3 {
        margin-left: 0;
        max-width: 100%;
    }
    .mb-page-intro > .mb-container > h1:first-of-type + p,
    .mb-page-intro > .mb-container > h2:first-of-type + p {
        font-size: 1.1rem;
    }
}
.mb-section--dark { background: var(--mb-blueprint); color: #fff; }
.mb-section--dark h2, .mb-section--dark h3, .mb-section--dark h4 { color: #fff; }
.mb-container { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }

.mb-section__head { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; margin-bottom: 3.5rem; }
.mb-section__head .mb-eyebrow { margin-bottom: 1rem; }
.mb-section__head h2 { font-size: clamp(2rem, 4vw, 3.3rem); margin: 0; line-height: 1; letter-spacing: -0.02em; }
.mb-section__head p { color: var(--mb-text-muted); margin: 0; font-size: 1.05rem; line-height: 1.7; }
.mb-section--dark .mb-section__head p { color: rgba(255,255,255,.75); }

/* Services — numbered cards */
.mb-services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--mb-rule); border-left: 1px solid var(--mb-rule); }
.mb-service {
    position: relative;
    background: var(--mb-paper);
    border-right: 1px solid var(--mb-rule);
    border-bottom: 1px solid var(--mb-rule);
    padding: 2.5rem 1.8rem 2.5rem;
    transition: var(--cl-transition);
    overflow: hidden;
}
.mb-service::before {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--mb-amber);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
.mb-service:hover { background: var(--mb-concrete-2); transform: translateY(-4px); box-shadow: var(--cl-shadow-md); }
.mb-service:hover::before { transform: scaleX(1); }
.mb-service__num {
    font-family: var(--mb-font-display);
    font-size: 3.5rem;
    line-height: 1;
    color: var(--mb-amber);
    opacity: .85;
    margin: 0 0 1.25rem;
}
.mb-service__num::after { content: '/'; color: var(--mb-rule); margin: 0 .25rem 0 .35rem; font-size: .7em; }
.mb-service__icon {
    position: absolute;
    top: 2rem; right: 1.8rem;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--mb-rule);
    color: var(--mb-blueprint);
    font-size: 1.1rem;
    transition: var(--cl-transition);
}
.mb-service:hover .mb-service__icon { background: var(--mb-blueprint); color: var(--mb-amber); border-color: var(--mb-blueprint); }
.mb-service__title { font-size: 1.2rem; margin: 0 0 .9rem; color: var(--mb-blueprint); letter-spacing: -.01em; }
.mb-service__text { color: var(--mb-text-muted); font-size: .95rem; line-height: 1.6; margin: 0; }
[data-theme="dark"] .mb-service { background: var(--mb-paper); }
[data-theme="dark"] .mb-service__title { color: #fff; }
[data-theme="dark"] .mb-service__icon { border-color: var(--mb-rule); color: #fff; }

/* Why us — checklist with hazard divider */
.mb-why { display: grid; grid-template-columns: .85fr 1.15fr; gap: 4rem; align-items: start; }
.mb-why__intro h2 { font-size: clamp(2rem, 4vw, 3.3rem); margin: 1rem 0 1.5rem; line-height: 1; }
.mb-why__intro p { color: rgba(255,255,255,.78); line-height: 1.75; margin-bottom: 1.5rem; }
.mb-why__hazard { height: 8px; width: 80px; background: var(--mb-hazard); margin-top: 1rem; }
.mb-why__list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); }
.mb-why__item {
    background: var(--mb-blueprint);
    padding: 2rem 1.8rem;
    position: relative;
    transition: var(--cl-transition);
}
.mb-why__item:hover { background: var(--mb-blueprint-2); }
.mb-why__item-num {
    font-family: var(--mb-font-mono);
    color: var(--mb-amber);
    font-size: .78rem;
    letter-spacing: .2em;
    margin-bottom: 1rem;
}
.mb-why__item h4 { font-size: 1.1rem; margin: 0 0 .65rem; color: #fff; }
.mb-why__item p { color: rgba(255,255,255,.7); font-size: .92rem; line-height: 1.55; margin: 0; }
.mb-why__item i { color: var(--mb-amber); font-size: 1.4rem; margin-bottom: 1rem; display: block; }

/* Tools / brands strip */
.mb-tools {
    padding: 2.6rem 0;
    background: var(--mb-paper);
    border-top: 1px solid var(--mb-rule);
    border-bottom: 1px solid var(--mb-rule);
}
.mb-tools__inner {
    max-width: 1280px; margin: 0 auto; padding: 0 2rem;
    display: flex; align-items: center; gap: 3rem; flex-wrap: wrap;
}
.mb-tools__label {
    font-family: var(--mb-font-mono);
    font-size: .78rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mb-text-faint);
    border-right: 1px solid var(--mb-rule);
    padding-right: 3rem;
}
.mb-tools__list { display: flex; gap: 2.5rem; flex-wrap: wrap; }
.mb-tools__list span {
    font-family: var(--mb-font-display);
    font-size: 1.15rem;
    letter-spacing: .05em;
    color: var(--mb-blueprint);
    text-transform: uppercase;
    opacity: .85;
    transition: var(--cl-transition);
}
.mb-tools__list span:hover { color: var(--mb-amber-deep); opacity: 1; transform: translateY(-2px); }
[data-theme="dark"] .mb-tools__list span { color: #fff; }
[data-theme="dark"] .mb-tools__list span:hover { color: var(--mb-amber); }
[data-theme="dark"] .mb-tools__label { color: var(--mb-text-muted); }

/* Coverage map */
.mb-coverage { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.mb-coverage__cities { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--mb-rule); border-collapse: collapse; }
.mb-coverage__city {
    padding: 1.5rem 1.3rem;
    border-right: 1px solid var(--mb-rule);
    border-bottom: 1px solid var(--mb-rule);
    background: var(--mb-paper);
    display: flex; align-items: center; gap: 1rem;
    transition: var(--cl-transition);
}
.mb-coverage__city:nth-child(2n) { border-right: 0; }
.mb-coverage__city:nth-last-child(-n+2) { border-bottom: 0; }
.mb-coverage__city:hover { background: var(--mb-amber); color: var(--mb-blueprint); }
.mb-coverage__city i { color: var(--mb-amber-deep); font-size: 1.2rem; }
.mb-coverage__city:hover i { color: var(--mb-blueprint); }
.mb-coverage__city span {
    font-family: var(--mb-font-display);
    font-size: 1.05rem;
    color: var(--mb-blueprint);
    letter-spacing: 0;
    text-transform: uppercase;
}
.mb-coverage__city:hover span { color: var(--mb-blueprint); }
[data-theme="dark"] .mb-coverage__city { background: var(--mb-paper); }
[data-theme="dark"] .mb-coverage__city span { color: #fff; }
[data-theme="dark"] .mb-coverage__city:hover { background: var(--mb-amber); }
[data-theme="dark"] .mb-coverage__city:hover span { color: var(--mb-blueprint); }
[data-theme="dark"] .mb-coverage__city:hover i { color: var(--mb-blueprint); }
.mb-coverage__note {
    margin-top: 1.2rem;
    font-size: .85rem;
    color: var(--mb-text-faint);
    font-style: italic;
}

/* Contact CTA */
.mb-contact {
    background: var(--mb-blueprint);
    color: #fff;
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}
.mb-contact::before {
    content: '';
    position: absolute; inset: 0;
    background-image: var(--mb-blueprint-grid);
    opacity: .3;
    pointer-events: none;
}
.mb-contact__inner {
    max-width: 1280px; margin: 0 auto; padding: 0 2rem;
    display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;
    align-items: center;
    position: relative; z-index: 1;
}
.mb-contact h2 { font-size: clamp(2rem, 4vw, 3.4rem); margin: 1rem 0 1.5rem; line-height: 1; }
.mb-contact__lead { color: rgba(255,255,255,.78); line-height: 1.7; margin-bottom: 2rem; font-size: 1.05rem; }
.mb-contact__channels { display: grid; gap: .75rem; }
.mb-contact__channel {
    display: flex; align-items: center; gap: 1.2rem;
    padding: 1.2rem 1.5rem;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    text-decoration: none;
    transition: var(--cl-transition);
}
.mb-contact__channel:hover { background: var(--mb-amber); color: var(--mb-blueprint); border-color: var(--mb-amber); transform: translateX(6px); }
.mb-contact__channel i { font-size: 1.3rem; color: var(--mb-amber); width: 32px; }
.mb-contact__channel:hover i { color: var(--mb-blueprint); }
.mb-contact__channel-label { font-family: var(--mb-font-mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; opacity: .7; display: block; margin-bottom: .15rem; }
.mb-contact__channel-value { font-family: var(--mb-font-display); font-size: 1.05rem; letter-spacing: .02em; }
.mb-contact__channel-meta { margin-left: auto; font-family: var(--mb-font-mono); font-size: .72rem; letter-spacing: .15em; opacity: .55; }
.mb-contact__channel:hover .mb-contact__channel-meta { opacity: .8; }

.mb-sign {
    border-left: 3px solid var(--mb-amber);
    padding: .5rem 0 .5rem 1.25rem;
    margin-top: 2.5rem;
}
.mb-sign small { color: rgba(255,255,255,.55); font-family: var(--mb-font-mono); letter-spacing: .2em; text-transform: uppercase; font-size: .72rem; }
.mb-sign div { font-family: var(--mb-font-display); font-size: 1.05rem; margin-top: .25rem; }

/* Latest posts */
.mb-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.mb-post {
    background: var(--mb-paper);
    border: 1px solid var(--mb-rule);
    padding: 1.8rem;
    transition: var(--cl-transition);
    position: relative;
}
.mb-post::after {
    content: '';
    position: absolute; left: 0; top: 0;
    width: 3px; height: 0;
    background: var(--mb-amber);
    transition: height .3s ease;
}
.mb-post:hover { transform: translateY(-3px); box-shadow: var(--cl-shadow-md); }
.mb-post:hover::after { height: 100%; }
.mb-post time {
    font-family: var(--mb-font-mono);
    font-size: .75rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mb-amber-deep);
    margin-bottom: 1rem;
    display: block;
}
.mb-post h3 { font-size: 1.15rem; margin: 0 0 .85rem; line-height: 1.25; }
.mb-post h3 a { color: var(--mb-blueprint); text-decoration: none; }
[data-theme="dark"] .mb-post h3 a { color: #fff; }
.mb-post h3 a:hover { color: var(--mb-amber-deep); }
.mb-post p { color: var(--mb-text-muted); font-size: .92rem; line-height: 1.6; margin: 0 0 1.2rem; }
.mb-post__link {
    font-family: var(--mb-font-mono);
    font-size: .78rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mb-amber-deep);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: .5rem;
}
.mb-post__link:hover { color: var(--mb-blueprint); }
.mb-post__link i { transition: transform .2s; }
.mb-post__link:hover i { transform: translateX(4px); }

/* ============================================================
   Homepage: neutralize container constraints so full-bleed sections work
   ============================================================ */
body:has(.mb-home) main.site-main { padding: 0; }
body:has(.mb-home) main.site-main > .container { max-width: none; padding: 0; width: 100%; }
body:has(.mb-home) main.site-main > .container > .page-body { padding: 0; }

/* ============================================================
   Inner pages (page-body)
   ============================================================ */
.site-main { flex: 1 0 auto; padding: 4rem 0; }
.page-body { padding: 0; }
.page-body > .page-content,
.page-body > .blog-listing,
.page-body > .blog-post-single,
.page-body > .contact-page,
.page-body > .error-page {
    background: var(--mb-paper);
    border: 1px solid var(--mb-rule);
    border-top: 3px solid var(--mb-amber);
    padding: 2.5rem 2.75rem;
    width: 100%;
    max-width: 920px;
    margin: 0 auto 1.5rem;
}

/* Typography rules below ONLY apply to inner-page wrappers
   (.page-content / .blog-* / .contact-page / .error-page) so that the
   homepage components inside .mb-home keep full control of their typography. */
.page-content, .blog-listing, .blog-post-single, .contact-page, .error-page { font-family: var(--mb-font-body); }
.page-content h1, .blog-listing h1, .blog-post-single h1, .contact-page h1, .error-page h1 { font-size: 2.2rem; font-weight: normal; margin: 0 0 1.25rem; color: var(--cl-heading); text-transform: uppercase; letter-spacing: -.01em; }
.page-content h2, .blog-listing h2, .blog-post-single h2, .contact-page h2, .error-page h2 { font-size: 1.55rem; margin: 1.75rem 0 .75rem; color: var(--cl-heading); text-transform: uppercase; }
.page-content h3, .blog-listing h3, .blog-post-single h3, .contact-page h3, .error-page h3 { font-size: 1.2rem; margin: 1.5rem 0 .6rem; text-transform: uppercase; }
.page-content p, .blog-listing p, .blog-post-single p, .contact-page p, .error-page p { font-family: var(--mb-font-body); color: var(--mb-text); font-size: 1rem; line-height: 1.8; margin-bottom: 1rem; }
.page-content p.lead, .page-content .lead, .blog-listing .lead, .blog-post-single .lead, .contact-page .lead, .error-page .lead { font-size: 1.1rem; color: var(--mb-text-muted); font-weight: 400; }
.page-content a:not(.btn):not(.mb-btn), .blog-listing a:not(.btn):not(.mb-btn), .blog-post-single a:not(.btn):not(.mb-btn), .contact-page a:not(.btn):not(.mb-btn), .error-page a:not(.btn):not(.mb-btn) {
    color: var(--mb-amber-deep);
    text-decoration: underline;
    text-decoration-color: var(--mb-amber-soft);
    text-underline-offset: 3px;
}
/* Dark mode: pale-cream underline reads as a bright wash against dark navy.
   Drop it to a muted amber tone so the underline stays subtle. */
[data-theme="dark"] .page-content a:not(.btn):not(.mb-btn),
[data-theme="dark"] .blog-listing a:not(.btn):not(.mb-btn),
[data-theme="dark"] .blog-post-single a:not(.btn):not(.mb-btn),
[data-theme="dark"] .contact-page a:not(.btn):not(.mb-btn),
[data-theme="dark"] .error-page a:not(.btn):not(.mb-btn) {
    text-decoration-color: rgba(245, 158, 11, 0.35);
}
/* Heading-class anchors (post titles, gallery card titles, etc.) shouldn't carry
   body-text underlines — they're styled as headings already. Match the broad
   inner-page link rule's specificity by also using :not() on the same classes. */
.blog-listing h1 a:not(.btn):not(.mb-btn),
.blog-listing h2 a:not(.btn):not(.mb-btn),
.blog-listing h3 a:not(.btn):not(.mb-btn),
.blog-post-single h1 a:not(.btn):not(.mb-btn),
.blog-post-single h2 a:not(.btn):not(.mb-btn),
.page-content h1 a:not(.btn):not(.mb-btn),
.page-content h2 a:not(.btn):not(.mb-btn),
.page-content h3 a:not(.btn):not(.mb-btn) {
    text-decoration: none;
}
.blog-listing h1 a:not(.btn):not(.mb-btn):hover,
.blog-listing h2 a:not(.btn):not(.mb-btn):hover,
.blog-listing h3 a:not(.btn):not(.mb-btn):hover,
.blog-post-single h1 a:not(.btn):not(.mb-btn):hover,
.blog-post-single h2 a:not(.btn):not(.mb-btn):hover,
.page-content h1 a:not(.btn):not(.mb-btn):hover,
.page-content h2 a:not(.btn):not(.mb-btn):hover,
.page-content h3 a:not(.btn):not(.mb-btn):hover {
    text-decoration: underline;
    text-decoration-color: var(--mb-amber);
    text-underline-offset: 4px;
}
.page-content blockquote, .blog-post-single blockquote {
    border-left: 4px solid var(--mb-amber);
    padding: 1rem 1.5rem;
    margin: 1.25rem 0;
    background: var(--mb-concrete-2);
    color: var(--mb-text-muted);
    font-style: italic;
}
.page-content code, .blog-post-single code { background: var(--mb-concrete); padding: .125rem .375rem; font-family: var(--mb-font-mono); font-size: .875em; }
.page-content pre, .blog-post-single pre { background: var(--mb-blueprint); color: #fff; padding: 1rem; overflow-x: auto; margin: 1rem 0; font-family: var(--mb-font-mono); }
.page-content pre code, .blog-post-single pre code { background: none; padding: 0; color: #fff; }

/* Blog */
.blog-card { padding: 1.5rem 0; border-bottom: 1px solid var(--mb-rule); }
.blog-card:last-child { border-bottom: none; }
.blog-card-header { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.blog-date { font-family: var(--mb-font-mono); font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; color: var(--mb-text-faint); }
.blog-tags { font-family: var(--mb-font-mono); font-size: .72rem; font-weight: 600; color: var(--mb-blueprint); background: var(--mb-amber); padding: .2rem .55rem; text-transform: uppercase; letter-spacing: .12em; }
.blog-title { font-size: 1.35rem; margin: 0 0 .5rem; text-transform: uppercase; }
.blog-title a { color: var(--cl-heading); text-decoration: none; }
.blog-title a:hover { color: var(--mb-amber-deep); }
.blog-excerpt { color: var(--mb-text-muted); line-height: 1.65; margin-bottom: .6rem; }
.blog-read-more { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--mb-font-mono); font-weight: 600; font-size: .8rem; color: var(--mb-amber-deep); text-decoration: none; letter-spacing: .15em; text-transform: uppercase; }
.blog-read-more:hover { color: var(--cl-heading); }
.blog-read-more i { transition: transform .2s; }
.blog-read-more:hover i { transform: translateX(3px); }

.blog-post-single h1 { font-size: 2.25rem; line-height: 1.1; margin-bottom: .75rem; }
.blog-post-single .post-meta { color: var(--mb-text-muted); margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--mb-rule); display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-family: var(--mb-font-mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.blog-post-single .post-meta .post-tags { color: var(--mb-amber-deep); }
.blog-post-single .post-content { font-size: 1rem; line-height: 1.85; }

/* Comments */
.comments-section { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--mb-rule); }
.comments-section h3 { font-size: 1.2rem; margin-bottom: 1.25rem; display: flex; align-items: center; gap: .5rem; }
.comment { background: var(--mb-concrete-2); padding: 1.25rem; margin-bottom: .75rem; border-left: 3px solid var(--mb-amber); }
.comment-header { display: flex; justify-content: space-between; margin-bottom: .4rem; flex-wrap: wrap; gap: .5rem; }
.comment-author { font-weight: 700; color: var(--cl-heading); font-size: .9rem; }
.comment-date { font-family: var(--mb-font-mono); font-size: .72rem; color: var(--mb-text-faint); letter-spacing: .1em; text-transform: uppercase; }
.comment-text { color: var(--mb-text-muted); margin: 0; line-height: 1.6; font-size: .95rem; }

/* Contact page */
.contact-page { max-width: 760px; }
.contact-page h1 { text-align: center; position: relative; padding-bottom: 1rem; }
.contact-page h1::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: var(--mb-amber); }
.contact-page .lead { text-align: center; max-width: 560px; margin: 0 auto 2rem; }
.contact-page .form-label { font-family: var(--mb-font-mono); font-weight: 600; color: var(--mb-text-muted); margin-bottom: .4rem; font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; }

/* 404 */
.error-page { text-align: center; padding: 3rem 1rem; max-width: 600px; margin: 0 auto; }
.error-code { font-family: var(--mb-font-display); font-size: 8rem; color: var(--mb-amber); line-height: 1; margin-bottom: .5rem; }
.error-page h1 { font-size: 1.75rem; }
.error-page .lead { color: var(--mb-text-muted); margin-bottom: 2rem; }

/* Form controls */
.form-control {
    background-color: var(--mb-paper);
    border: 1px solid var(--mb-rule);
    color: var(--mb-text);
    border-radius: 0;
    padding: .8rem 1rem;
    transition: var(--cl-transition);
    font-family: var(--mb-font-body);
    font-size: .95rem;
}
.form-control:focus { border-color: var(--mb-amber); box-shadow: 0 0 0 3px var(--mb-amber-soft); outline: none; }
.form-control::placeholder { color: var(--mb-text-faint); opacity: .8; }
.btn-primary {
    background-color: var(--mb-blueprint);
    border: 2px solid var(--mb-blueprint);
    color: #fff;
    border-radius: 0;
    padding: .85rem 1.75rem;
    font-family: var(--mb-font-mono);
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    transition: var(--cl-transition);
}
.btn-primary:hover, .btn-primary:focus { background-color: var(--mb-amber); border-color: var(--mb-amber); color: var(--mb-blueprint); transform: translateY(-1px); }
.btn:focus { outline: none; box-shadow: 0 0 0 3px var(--mb-amber-soft); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
    background: var(--mb-blueprint);
    color: rgba(255,255,255,.75);
    padding: 3.5rem 0 1.5rem;
    margin-top: auto;
    border-top: 14px solid;
    border-image: var(--mb-hazard) 1;
    position: relative;
}
.site-footer::before {
    content: '';
    position: absolute; inset: 0;
    background-image: var(--mb-blueprint-grid);
    opacity: .2;
    pointer-events: none;
}
.site-footer > .container { position: relative; z-index: 1; }
.footer-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.75rem; border-bottom: 1px solid rgba(255,255,255,.08); flex-wrap: wrap; gap: 1.5rem; }
.footer-brand img { max-height: 36px; opacity: .95; }
/* Inside the dark footer, force the moon variant always */
.site-footer .logo-dark { display: inline; }
.site-footer .logo-light { display: none; }
.footer-nav-inline .footer-nav { list-style: none; padding: 0; margin: 0; display: flex; gap: 1.75rem; flex-wrap: wrap; }
.footer-nav li a {
    color: rgba(255,255,255,.7);
    font-family: var(--mb-font-mono);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: var(--cl-transition);
}
.footer-nav li a:hover { color: var(--mb-amber); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 1.25rem; gap: 1rem; flex-wrap: wrap; }
.footer-tagline { color: rgba(255,255,255,.55); font-family: var(--mb-font-mono); font-size: .76rem; letter-spacing: .15em; text-transform: uppercase; }
.footer-copyright-wrap { margin-left: auto; }
.footer-copyright { list-style: none; padding: 0; margin: 0; display: inline; }
.footer-copyright li, .footer-copyright li a { display: inline; color: rgba(255,255,255,.55); font-family: var(--mb-font-mono); font-size: .76rem; letter-spacing: .12em; text-decoration: none; }
.footer-copyright li a:hover { color: var(--mb-amber); }

/* hide d-none.d-sm-inline framework labels (consistent w/ classic) */
.hero-banner .navbar .navbar-nav > li > a .d-none.d-sm-inline,
.footer-nav li a .d-none.d-sm-inline,
.footer-copyright li .d-none.d-sm-inline { display: none !important; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 991px) {
    .mb-hero { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.5rem 4rem; }
    .mb-hero__card { max-width: 460px; }
    .mb-stats__grid { grid-template-columns: repeat(2, 1fr); }
    .mb-section { padding: 4rem 0; }
    .mb-section__head { grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 2.5rem; }
    .mb-services { grid-template-columns: repeat(2, 1fr); }
    .mb-why { grid-template-columns: 1fr; gap: 2.5rem; }
    .mb-coverage { grid-template-columns: 1fr; gap: 2rem; }
    .mb-posts { grid-template-columns: 1fr; }
    .mb-contact__inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .mb-tools__inner { gap: 1.5rem; }
    .mb-tools__label { border-right: none; padding-right: 0; padding-bottom: .5rem; }
}

@media (max-width: 767px) {
    .hero-banner { min-height: 560px; }
    .mb-services { grid-template-columns: 1fr; }
    .mb-why__list { grid-template-columns: 1fr; }
    .mb-stats__grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; padding: 0 1.25rem; }
    .mb-container { padding: 0 1.25rem; }
    .mb-hero { padding: 2.5rem 1.25rem 3.5rem; }
    .mb-hero__title { font-size: 2.4rem; }
    .mb-coverage__cities { grid-template-columns: 1fr; }
    .mb-coverage__city, .mb-coverage__city:nth-child(2n) { border-right: 0; }
    .site-header > .container { padding: .5rem 15px; }
    .site-header .logo img { max-height: 34px; }
    .theme-toggle, .lang-switcher .lang-current { width: 38px; height: 38px; }
    .hero-banner .navbar .navbar-collapse { background: var(--cl-nav-bg); }
    .hero-banner .navbar .navbar-nav > li > a { padding: .8rem 1rem; }
    .page-body > .page-content,
    .page-body > .blog-listing,
    .page-body > .blog-post-single,
    .page-body > .contact-page,
    .page-body > .error-page { padding: 1.5rem 1.25rem; }
    .footer-top { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .footer-copyright-wrap { margin-left: 0; }
}

@media (max-width: 480px) {
    .mb-hero__title { font-size: 2rem; }
    .mb-hero__actions { flex-direction: column; align-items: stretch; }
    .mb-btn { justify-content: center; }
    .error-code { font-size: 5rem; }
}

/* Utility */
.text-center { text-align: center; }

/* ============================================================
   Gallery — marecbau-styled overrides on top of the shared CSS.
   The shared gallery-frontend.css renders the modal + lightbox
   structure; here we restyle the listing/view to match the
   blueprint-and-steel aesthetic.
   ============================================================ */

.mb-gallery-back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--mb-font-mono);
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mb-amber-deep);
    text-decoration: none;
    margin-bottom: 1.5rem;
}
.mb-gallery-back:hover { color: var(--mb-blueprint); }
[data-theme="dark"] .mb-gallery-back:hover { color: var(--mb-amber); }

.mb-gallery-count {
    font-family: var(--mb-font-mono);
    font-size: .82rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mb-text-faint);
    margin: -1.5rem 0 2rem;
}

.mb-gallery-section-title {
    margin: 2.5rem 0 1.25rem;
    font-family: var(--mb-font-display);
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: -.01em;
    color: var(--mb-blueprint);
    border-left: 3px solid var(--mb-amber);
    padding-left: .9rem;
}
[data-theme="dark"] .mb-gallery-section-title { color: #fff; }

/* ============================================================
   Homepage Featured Projects section
   Adapts layout to count: 1 = wide hero, 2-3 = equal columns, 4+ = auto-fill
   ============================================================ */
.mb-featured-projects {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--mb-rule);
    border-left: 1px solid var(--mb-rule);
    margin-bottom: 0;
}
.mb-featured-projects[data-count="1"] { grid-template-columns: 1fr; }
.mb-featured-projects[data-count="2"] { grid-template-columns: 1fr 1fr; }
.mb-featured-projects[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.mb-featured-projects[data-count="4"] { grid-template-columns: repeat(4, 1fr); }

.mb-featured-card {
    position: relative;
    background: var(--mb-paper);
    border-right: 1px solid var(--mb-rule);
    border-bottom: 1px solid var(--mb-rule);
    text-decoration: none;
    color: inherit;
    transition: var(--cl-transition);
    overflow: hidden;
    display: block;
}
.mb-featured-card::before {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--mb-amber);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.mb-featured-card:hover { background: var(--mb-paper); transform: translateY(-4px); box-shadow: var(--cl-shadow-md); color: inherit; }
.mb-featured-card:hover::before { transform: scaleX(1); }
/* Amber frame is drawn OUTSIDE the card (outline-offset: 0) so the image can
   never visually overlap it — even on hover when the image scales or the card
   translates. Also suppress the ::before bottom-strip animation for featured
   cards since the outline already provides the visual affordance and the
   strip would overlap the bottom outline ("edge grows on hover"). */
.mb-featured-card--featured { outline: 2px solid var(--mb-amber); outline-offset: 0; z-index: 1; }
.mb-featured-card--featured::before { display: none; }

.mb-featured-card__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--mb-blueprint);
    position: relative;
}
/* Single featured card — image fills the FULL card width.
   Using aspect-ratio + max-height together makes the browser shrink width to
   maintain ratio (creating a visible gap on the right of the amber frame).
   Instead, override aspect-ratio so width can fill the card, with a fixed
   height controlling the visual proportions. */
.mb-featured-projects[data-count="1"] .mb-featured-card__media {
    aspect-ratio: auto;
    height: clamp(320px, 38vw, 520px);
    max-height: none;
}
.mb-featured-card__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .45s ease;
}
.mb-featured-card:hover .mb-featured-card__media img { transform: scale(1.04); }
.mb-featured-card__badge {
    position: absolute;
    top: 1rem; left: 1rem;
    background: var(--mb-amber);
    color: var(--mb-blueprint);
    font-family: var(--mb-font-mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    padding: .4rem .65rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.mb-featured-card__body {
    padding: 1.5rem 1.8rem 1.6rem;
}
.mb-featured-card__title {
    font-family: var(--mb-font-display);
    font-size: 1.25rem;
    line-height: 1.15;
    color: var(--mb-blueprint);
    margin: 0 0 .65rem;
    letter-spacing: -.005em;
    text-transform: uppercase;
}
.mb-featured-projects[data-count="1"] .mb-featured-card__title { font-size: 2rem; margin-bottom: 1rem; }
.mb-featured-projects[data-count="2"] .mb-featured-card__title { font-size: 1.55rem; }
[data-theme="dark"] .mb-featured-card__title { color: #fff; }
.mb-featured-card__desc {
    color: var(--mb-text-muted);
    font-size: .95rem;
    line-height: 1.55;
    margin: 0 0 1rem;
}
.mb-featured-projects[data-count="1"] .mb-featured-card__desc { font-size: 1.05rem; line-height: 1.7; max-width: 720px; }
.mb-featured-card__cta {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--mb-font-mono);
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mb-amber-deep);
    padding-top: .9rem;
    border-top: 1px dashed var(--mb-rule);
}
.mb-featured-card__cta i:last-child {
    transition: transform .2s ease;
}
.mb-featured-card:hover .mb-featured-card__cta i:last-child { transform: translateX(4px); }

.mb-featured-actions { margin-top: 2rem; }

@media (max-width: 991px) {
    .mb-featured-projects,
    .mb-featured-projects[data-count="3"],
    .mb-featured-projects[data-count="4"] { grid-template-columns: 1fr 1fr; }
    .mb-featured-projects[data-count="1"] .mb-featured-card__media { aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
    .mb-featured-projects,
    .mb-featured-projects[data-count="2"],
    .mb-featured-projects[data-count="3"],
    .mb-featured-projects[data-count="4"] { grid-template-columns: 1fr; }
    .mb-featured-projects[data-count="1"] .mb-featured-card__title { font-size: 1.5rem; }
}

/* Listing grid */
.mb-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0;
    border-top: 1px solid var(--mb-rule);
    border-left: 1px solid var(--mb-rule);
}
.mb-gallery-card {
    position: relative;
    background: var(--mb-paper);
    border-right: 1px solid var(--mb-rule);
    border-bottom: 1px solid var(--mb-rule);
    text-decoration: none;
    color: inherit;
    transition: var(--cl-transition);
    overflow: hidden;
}
.mb-gallery-card::before {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--mb-amber);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.mb-gallery-card:hover { background: var(--mb-concrete-2); transform: translateY(-3px); box-shadow: var(--cl-shadow-md); }
.mb-gallery-card:hover::before { transform: scaleX(1); }
.mb-gallery-card--featured { outline: 2px solid var(--mb-amber); outline-offset: -2px; z-index: 1; }
.mb-gallery-card__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--mb-blueprint);
    position: relative;
}
.mb-gallery-card__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .35s ease;
}
.mb-gallery-card:hover .mb-gallery-card__media img { transform: scale(1.05); }
.mb-gallery-card__badge {
    position: absolute; top: .75rem; left: .75rem;
    background: var(--mb-amber);
    color: var(--mb-blueprint);
    font-family: var(--mb-font-mono);
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: .25rem .55rem;
}
.mb-gallery-card__body { padding: 1.5rem 1.5rem 1.4rem; }
.mb-gallery-card__title {
    font-size: 1.05rem;
    margin: 0 0 .5rem;
    color: var(--mb-blueprint);
    letter-spacing: -.01em;
}
[data-theme="dark"] .mb-gallery-card__title { color: #fff; }
.mb-gallery-card__desc {
    color: var(--mb-text-muted);
    font-size: .9rem;
    line-height: 1.5;
    margin: 0 0 .85rem;
}
.mb-gallery-card__meta {
    font-family: var(--mb-font-mono);
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mb-amber-deep);
    margin: 0;
}
.mb-gallery-card__meta i { margin-right: .35rem; }

/* Group tiles */
.mb-gallery-group-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0;
    border-top: 1px solid var(--mb-rule);
    border-left: 1px solid var(--mb-rule);
}
.mb-gallery-group-tile {
    background: var(--mb-paper);
    border-right: 1px solid var(--mb-rule);
    border-bottom: 1px solid var(--mb-rule);
    text-align: left;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    transition: var(--cl-transition);
    position: relative;
}
.mb-gallery-group-tile::before {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--mb-amber);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.mb-gallery-group-tile:hover { background: var(--mb-concrete-2); transform: translateY(-3px); }
.mb-gallery-group-tile:hover::before { transform: scaleX(1); }
.mb-gallery-group-tile__cover {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--mb-blueprint);
}
.mb-gallery-group-tile__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-gallery-group-tile__count {
    position: absolute; bottom: 8px; right: 8px;
    background: var(--mb-amber);
    color: var(--mb-blueprint);
    padding: .25rem .55rem;
    font-family: var(--mb-font-mono);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.mb-gallery-group-tile__body { padding: 1.25rem 1.4rem 1.3rem; }
.mb-gallery-group-tile__body h4 {
    margin: 0 0 .4rem;
    font-size: 1rem;
    color: var(--mb-blueprint);
    text-transform: uppercase;
    letter-spacing: -.005em;
}
[data-theme="dark"] .mb-gallery-group-tile__body h4 { color: #fff; }
.mb-gallery-group-tile__body p {
    color: var(--mb-text-muted);
    font-size: .85rem;
    line-height: 1.5;
    margin: 0;
}

/* Ungrouped picture grid — adapts to picture count so few-pic galleries fill the row */
.mb-gallery-picture-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .65rem;
    margin-bottom: 2rem;
}
.mb-gallery-picture-grid[data-count="1"] { grid-template-columns: 1fr; }
.mb-gallery-picture-grid[data-count="1"] .mb-gallery-pic { aspect-ratio: 16 / 9; max-height: 70vh; }
.mb-gallery-picture-grid[data-count="1"] .mb-gallery-pic img { object-fit: contain; background: var(--mb-blueprint); }
.mb-gallery-picture-grid[data-count="2"] { grid-template-columns: 1fr 1fr; }
.mb-gallery-picture-grid[data-count="2"] .mb-gallery-pic { aspect-ratio: 4 / 3; }
.mb-gallery-picture-grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.mb-gallery-picture-grid[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) {
    .mb-gallery-picture-grid[data-count="2"],
    .mb-gallery-picture-grid[data-count="3"],
    .mb-gallery-picture-grid[data-count="4"] { grid-template-columns: 1fr 1fr; }
    .mb-gallery-picture-grid[data-count="2"] .mb-gallery-pic { aspect-ratio: 1 / 1; }
}
.mb-gallery-pic {
    position: relative;
    margin: 0;
    cursor: zoom-in;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--mb-concrete);
}
.mb-gallery-pic img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .35s ease;
}
.mb-gallery-pic:hover img { transform: scale(1.07); }
.mb-gallery-pic figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(11,30,52,0) 0%, rgba(11,30,52,0.9) 100%);
    color: #fff;
    padding: 1rem .85rem .65rem;
    font-family: var(--mb-font-mono);
    font-size: .76rem;
    letter-spacing: .08em;
    opacity: 0;
    transition: opacity .2s ease;
}
.mb-gallery-pic:hover figcaption { opacity: 1; }

/* Comments — marecbau-skinned */
.mb-gallery-comments { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--mb-rule); }
.mb-gallery-comment {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--mb-rule);
}
.mb-gallery-comment:last-of-type { border-bottom: none; }
.mb-gallery-comment__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .4rem;
}
.mb-gallery-comment__head strong {
    font-family: var(--mb-font-display);
    color: var(--mb-blueprint);
    text-transform: uppercase;
    letter-spacing: -.005em;
    font-size: 1rem;
}
[data-theme="dark"] .mb-gallery-comment__head strong { color: #fff; }
.mb-gallery-comment__head time {
    font-family: var(--mb-font-mono);
    font-size: .72rem;
    letter-spacing: .12em;
    color: var(--mb-text-faint);
    text-transform: uppercase;
}
.mb-gallery-comment p { color: var(--mb-text-muted); margin: 0; line-height: 1.55; }

.mb-gallery-comment-form { margin-top: 2rem; max-width: 640px; }
.mb-gallery-comment-form h4 {
    margin: 0 0 1rem;
    font-family: var(--mb-font-display);
    font-size: 1.1rem;
    text-transform: uppercase;
    border-left: 3px solid var(--mb-amber);
    padding-left: .9rem;
}
.mb-gallery-comment-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
    margin-bottom: .65rem;
}
.mb-gallery-comment-form input,
.mb-gallery-comment-form textarea {
    width: 100%;
    padding: .8rem .95rem;
    background: var(--mb-paper);
    color: var(--mb-text);
    border: 1px solid var(--mb-rule);
    border-radius: 0;
    font-family: var(--mb-font-body);
}
.mb-gallery-comment-form textarea { margin-bottom: .65rem; }
.mb-gallery-comment-form input:focus,
.mb-gallery-comment-form textarea:focus { outline: none; border-color: var(--mb-amber); box-shadow: 0 0 0 3px var(--mb-amber-soft); }

/* Print */
@media print {
    .site-header, .site-footer, .theme-toggle, .lang-switcher,
    .hero-banner, .mb-hero, .mb-stats, .mb-contact { display: none !important; }
    body { background: white; color: black; }
    .page-body { padding: 0; box-shadow: none; }
}