/* ============================================================
 * MB Architects — Modernization Layer (v2)
 * Loaded AFTER colors_and_type.css and template CSS.
 * Additive only — no rewrites.
 *
 * v2 (May 2026):
 *  - Fonts: Plus Jakarta Sans (display+body) + Inter (nav)
 *  - Restored BOLD colors and strong heading contrast
 *  - Solid white header (legibility > glass effect)
 *  - Stats centered in their boxes
 *  - Strong nav contrast on light bg
 * ============================================================ */

/* Fonts loaded via <link rel="stylesheet"> in HTML head — no @import
   waterfall. See index.html / projects.html / project.html. */

:root {
  --font-display:     "Plus Jakarta Sans", "Raleway", system-ui, sans-serif;
  --font-display-alt: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-nav:         "Inter", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:        "Plus Jakarta Sans", "Roboto", system-ui, -apple-system, sans-serif;

  /* BOLDER tokens — restore brand strength */
  --mb-accent:       #ff4a17;
  --mb-accent-hover: #fd3800;
  --mb-heading:      #1a2b38;   /* darker, more confident */
  --mb-ink:          #0f1d27;
  --mb-body:         #2f3d49;   /* punchier body (was #444) */
  --mb-muted:        #5a6a78;   /* readable muted */
  --mb-line:         #e3e8ed;
  --mb-bg-soft:      #f5f7fa;

  --radius-card: 14px;
  --radius-btn:  999px;
  --ease-out-soft: cubic-bezier(.22,.61,.36,1);
  --shadow-soft: 0 1px 2px rgba(15,29,39,.05), 0 8px 24px rgba(15,29,39,.07);
  --shadow-pop:  0 6px 16px rgba(15,29,39,.10), 0 24px 48px rgba(15,29,39,.12);
}

/* ── Body & global type ──────────────────────────────────── */
/* Guard against sideways scroll jitter on mobile. Several sections
   use full-bleed ::before overlays (`width: 100vw` + transform trick)
   that can overshoot the viewport by a few px on Android Chrome where
   `100vw` ignores the scrollbar gutter. `section { overflow: clip }`
   handles most of it; this is the root-level safety net. */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* BUG-10: Custom PNG cursor (style.css line 92) has no meaning on
   touch devices — reset to the OS default so no PNG is fetched. */
@media (hover: none), (pointer: coarse) {
  body { cursor: auto !important; }
}

body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--mb-body);
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.022em;
  text-transform: none;
  line-height: 1.12;
  color: var(--mb-heading);
}
h1, .h1 { font-weight: 800; letter-spacing: -0.028em; }
h2, .h2, h3, .h3 { font-weight: 800; }

.eyebrow, .section-title h2, .topbar nav a, .nav-toggle, .filter,
.cta-btn, .navmenu a, header nav a, .btn-getstarted {
  font-family: var(--font-nav);
  letter-spacing: 0.02em;
  font-weight: 700;
}

@media (max-width: 720px) {
  h1, .h1 { font-size: clamp(36px, 9vw, 56px); }
  h2, .h2 { font-size: clamp(26px, 6.5vw, 36px); }
}

/* ── Buttons: pill, refined hover ────────────────────────── */
.btn-getstarted, .cta-btn, .btn-primary, .btn-outline-primary {
  border-radius: var(--radius-btn);
  font-family: var(--font-nav);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 12px 24px;
  transition: transform .25s var(--ease-out-soft),
              box-shadow .25s var(--ease-out-soft),
              background .25s var(--ease-out-soft);
}
.btn-getstarted:hover, .cta-btn:hover, .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(255,74,23,.32);
}

/* MB URBAN header pill — solid orange on white header */
.header .cta-btn,
.header .cta-btn:focus {
  background: var(--mb-accent) !important;
  color: #ffffff !important;
  border: 2px solid var(--mb-accent) !important;
  padding: 9px 22px !important;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.header .cta-btn:hover,
.header .cta-btn:focus:hover {
  background: #e63d0c !important;
  border-color: #e63d0c !important;
  color: #ffffff !important;
}

/* ── Cards: hover lift + image zoom ──────────────────────── */
.service-item, .portfolio-item, .post-item, .team-member, .card,
.featured-spread .card, .grid .card {
  border-radius: var(--radius-card);
  transition: transform .35s var(--ease-out-soft),
              box-shadow .35s var(--ease-out-soft);
}
.service-item:hover, .post-item:hover, .team-member:hover,
.featured-spread .card:hover, .grid .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-pop);
}
.portfolio-item img, .grid .card img, .featured-spread .card img {
  transition: transform .6s var(--ease-out-soft), filter .35s var(--ease-out-soft);
}
.portfolio-item:hover img, .grid .card:hover img,
.featured-spread .card:hover img {
  transform: scale(1.045);
  filter: saturate(1.08);
}

/* ── Header: dark transparent overlay ─────────────────────── */
.header {
  background: rgba(15,29,39,0.72) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: none;
  backdrop-filter: saturate(140%) blur(14px) !important;
  -webkit-backdrop-filter: saturate(140%) blur(14px) !important;
}
.scrolled .header, body.scrolled .header {
  background: rgba(15,29,39,0.85) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.header .logo h1, .header .logo span, .header .logo a {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff !important;
}
.header .logo img { /* keep original logo colors */ }

/* Nav links — white on dark header */
.navmenu a, .navmenu a:focus,
.navmenu li > a, .navmenu li > a:focus,
header nav a, header nav a:focus {
  color: rgba(255,255,255,0.85) !important;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  opacity: 1;
}
.navmenu a:hover, .navmenu .active, .navmenu .active > a,
.navmenu .active:focus, header nav a:hover {
  color: #fff !important;
}

/* Custom topbar (projects/project) — dark transparent overlay */
.topbar {
  background: rgba(15,29,39,0.72) !important;
  backdrop-filter: saturate(140%) blur(14px) !important;
  -webkit-backdrop-filter: saturate(140%) blur(14px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.topbar .logo { /* keep original logo colors */ }
.topbar nav a {
  color: rgba(255,255,255,0.85) !important;
  font-weight: 600;
}
.topbar nav a.is-active, .topbar nav a:hover {
  color: #fff !important;
  border-color: var(--mb-accent);
}
.topbar .right { color: rgba(255,255,255,0.6) !important; }
.topbar .nav-toggle { color: #fff !important; }

/* ── Hero ────────────────────────────────────────────────── */
.hero, #hero { position: relative; }
/* Poster image behind the .hero-slide layers — eliminates the dark
   void during cold load and between Ken-Burns cross-fades.
   Matches the first slide in index.html so the transition is seamless. */
#hero {
  background-color: #0d141a;
  background-image: url('../images/bg/hero-8.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Cancel the permanent GPU-layer promotion on every .hero-slide
   (set in style.css). Holding 17 full-screen compositor layers
   forever caused mobile Chrome to evict & re-upload textures,
   showing brief black/blank flashes on the S24 Ultra. Letting the
   browser auto-promote only the active slide is what we want. */
.hero-slide { will-change: auto; }
.hero h1, #hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.028em;
  text-transform: none;
  line-height: 1.04;
}
.hero h2, #hero h2, .hero p, #hero p {
  font-family: var(--font-body);
  font-weight: 400;
}

/* ── Section spacing ─────────────────────────────────────── */
section { scroll-margin-top: 96px; }
@media (min-width: 1024px) {
  .services, .portfolio, .about, .team, .contact, .blog,
  #services, #portfolio, #about, #team, #contact, #blog {
    padding-top: clamp(72px, 8vw, 120px);
    padding-bottom: clamp(72px, 8vw, 120px);
  }
}

/* ── Forms ───────────────────────────────────────────────── */
.form-control, .form-select, input[type="text"], input[type="email"],
textarea {
  border-radius: 10px;
  border: 1px solid var(--mb-line);
  font-family: var(--font-body);
  transition: border-color .2s, box-shadow .2s;
}
.form-control:focus, input:focus, textarea:focus {
  border-color: var(--mb-accent);
  box-shadow: 0 0 0 4px rgba(255,74,23,.14);
  outline: none;
}

/* ── Misc polish ─────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  [data-aos] { transition-duration: .8s !important; transition-timing-function: var(--ease-out-soft) !important; }
}
::selection { background: var(--mb-accent); color: #fff; }
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: rgba(15,29,39,.20); border-radius: 999px; border: 2px solid #fff; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(15,29,39,.36); }
  ::-webkit-scrollbar-track { background: transparent; }
}

.footer { font-family: var(--font-body); }
.footer h4, .footer h5 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
}

.mobile-nav-toggle {
  border-radius: 999px;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--mb-heading) !important;
  transition: background .2s;
}
.mobile-nav-toggle:hover { background: rgba(15,29,39,.06); }
/* When nav is open the toggle becomes the × close button — it floats
   over the dark overlay so it must be white (our !important above
   would otherwise force dark navy on it). */
.mobile-nav-active .mobile-nav-toggle { color: #fff !important; }

/* ── Mobile header: transparent bar · centred logo · logo-only pill ── */
@media (max-width: 1199px) {
  /* Strip the dark veil from the header bar when not scrolled.
     (.scrolled class is added to <body> by main.js at 100px scroll) */
  body:not(.scrolled) .header {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
  }

  /* Centre the logo by absolutely positioning it — navmenu stays in
     normal flow so its full-screen open state is not disrupted */
  .header .container {
    position: relative;
  }
  .header .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    /* Neat dark pill so the logo is readable on any hero image */
    background: rgba(0, 0, 0, 0.42);
    border-radius: 8px;
    padding: 6px 14px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  /* Nav drawer links: the ul card is white (--nav-mobile-background-color),
     so force dark text — overrides the global white nav-link rule */
  .navmenu ul {
    bottom: auto !important; /* override inset: 60px 20px 20px 20px from style.css */
    height: auto !important;
  }
  .navmenu a,
  .navmenu a:focus,
  .navmenu li > a {
    color: var(--mb-heading) !important;
  }
  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active > a,
  .navmenu .active:focus {
    color: var(--mb-accent) !important;
  }
}

/* ── Section title (Bootstrap template) refinement ───────── */
.section-title h2 {
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mb-accent);
}
.section-title p, .section-title h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.022em;
  text-transform: none;
  line-height: 1.12;
  color: var(--mb-heading);
  margin-top: 8px;
}

/* ── Stats: center inside their boxes ────────────────────── */
.stats { align-items: stretch; }
.stat {
  text-align: center;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.stat .num, .stat .label { text-align: center; }

/* Bootstrap-template stats (counter widgets) */
.stats-item, .counter-box, .stats .stats-item {
  text-align: center;
}

/* Portfolio stats strip (.pf-stat) — center each cell */
.pf-stat {
  padding: 24px 16px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
.pf-stat-num, .pf-stat-label { text-align: center !important; }

/* ── Reduce motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── Preloader: logo above the wordmark ─────────────────── */
.mb-preloader__logo {
  order: 0;
  margin-bottom: -8px; /* close the gap between logo and wordmark */
}
.mb-preloader__logo img {
  height: clamp(72px, 12vw, 110px);
  width: auto;
  display: block;
}

/* ══════════════════════════════════════════════════════════
   CLIENTS - auto-scroll marquee
   ══════════════════════════════════════════════════════════ */
.mb-clients {
  padding: 64px 0;
  background: #ffffff;
  overflow: hidden;
}

/* Force white background on the projects/portfolio section (overrides template defaults) */
#portfolio,
.portfolio.section {
  background: #ffffff !important;
}
.mb-clients .section-intro {
  text-align: center;
  margin-bottom: 40px;
}
.mb-clients .section-intro h6 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mb-muted);
  margin-bottom: 4px;
}
.mb-clients .section-intro h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--mb-heading);
}
.mb-marquee-wrap {
  position: relative;
}
.mb-marquee-wrap::before,
.mb-marquee-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.mb-marquee-wrap::before {
  left: 0;
  background: linear-gradient(90deg, #eef1f5 0%, transparent 100%);
}
.mb-marquee-wrap::after {
  right: 0;
  background: linear-gradient(270deg, #eef1f5 0%, transparent 100%);
}
.mb-marquee {
  display: flex;
  width: max-content;
  animation: marqueeScroll 70s linear infinite;
}
.mb-marquee:hover {
  animation-play-state: paused;
}
.mb-marquee .logo-item {
  flex-shrink: 0;
  width: 140px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 24px;
}
.mb-marquee .logo-item img {
  max-width: 100%;
  max-height: 68px;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mb-marquee .logo-item img:hover {
  opacity: 1;
  transform: scale(1.08);
}
@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ══════════════════════════════════════════════════════════
   SERVICES - dark icon cards
   ══════════════════════════════════════════════════════════ */
.mb-services {
  padding: 80px 0;
  background: #ffffff;
}
.mb-services .section-intro {
  text-align: center;
  margin-bottom: 52px;
}
.mb-services .section-intro h2 {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--mb-heading);
  margin-bottom: 8px;
}
.mb-services .section-intro p {
  color: var(--mb-muted);
  font-size: 1rem;
}
/* Service card (Jadoo recipe) — every card: white, rounded, no
   shadow at rest; on hover the shadow fades in and the orange
   leaf pseudo-element slides out from below-left. */
.mb-svc-card {
  background: #fff;
  border-radius: 12px;
  padding: clamp(32px, 3.4vw, 44px) clamp(22px, 2.6vw, 32px);
  height: 100%;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(39,61,78,0.08),
              0 1px 3px rgba(39,61,78,0.06);
  transition: box-shadow 360ms cubic-bezier(.2,.7,.2,1),
              transform 0.12s ease;
}
.mb-svc-card::before {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 140px;
  height: 140px;
  background: var(--mb-accent, #ff4a17);
  border-radius: 50%;
  opacity: 0.25;
  transition: transform 420ms cubic-bezier(.2,.7,.2,1),
              opacity 420ms ease;
}
.mb-svc-card:hover {
  box-shadow: 0 8px 28px rgba(39,61,78,0.13),
              0 30px 68px rgba(39,61,78,0.16);
}
.mb-svc-card:hover::before {
  transform: scale(2.8);
  opacity: 0.45;
}

/* Featured: stronger shadow */
.mb-svc-card--featured {
  box-shadow: 0 6px 20px rgba(39,61,78,0.10),
              0 26px 60px rgba(39,61,78,0.14);
}
.mb-svc-card--featured::before {
  opacity: 0.35;
}
.mb-svc-card--featured:hover {
  box-shadow: 0 10px 28px rgba(39,61,78,0.14),
              0 32px 72px rgba(39,61,78,0.18);
}
.mb-svc-card--featured:hover::before {
  transform: scale(3.2);
  opacity: 0.55;
}

@media (max-width: 767.98px) {
  .mb-svc-card::before {
    width: 100px;
    height: 100px;
    right: -40px;
    bottom: -40px;
  }
}

/* Icon sits over an offset cream tile (peeks out top-right) */
.mb-svc-card .svc-icon {
  position: relative;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--mb-accent);
  margin: 0 auto 22px;
  isolation: isolate;
}
.mb-svc-card .svc-icon::before {
  content: "";
  position: absolute;
  top: -8px;
  right: -10px;
  width: 42px;
  height: 42px;
  background: #fff1e9;
  border-radius: 6px;
  z-index: -1;
  transition: background 360ms ease;
}
.mb-svc-card:hover .svc-icon::before,
.mb-svc-card--featured .svc-icon::before {
  background: #ffe2d3;
}

.mb-svc-card h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--mb-heading);
  margin-bottom: 12px;
  line-height: 1.3;
}
.mb-svc-card h4 a {
  color: inherit;
  text-decoration: none;
}
.mb-svc-card p {
  color: var(--mb-body, #444);
  font-size: 0.92rem;
  line-height: 1.7;
  margin: 0;
  max-width: 36ch;
  margin-inline: auto;
}
.mb-svc-card .svc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--mb-accent);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s, transform 0.3s;
}
.mb-svc-card:hover .svc-link,
.mb-svc-card--featured .svc-link {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════
   CONTACT SECTION - editorial layout
   ══════════════════════════════════════════════════════════ */

/* Override template default section padding (map spans edge-to-edge) */
#contact {
  padding: 0;
}

/* Map banner with overlay */
.mb-contact-hero {
  position: relative;
  min-height: 380px;
  overflow: hidden;
}
.mb-contact-hero iframe {
  width: 100%;
  height: 100%;
  min-height: 380px;
  display: block;
  filter: grayscale(0.15) contrast(1.05);
}
.mb-contact-hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,20,27,0.7) 0%, rgba(10,20,27,0.45) 50%, rgba(10,20,27,0.75) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  pointer-events: none;
}
.mb-contact-hero .hero-overlay h2 {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.mb-contact-hero .hero-overlay p {
  color: rgba(255,255,255,0.6);
  font-size: 1.05rem;
  max-width: 480px;
}

/* Info tiles strip */
.mb-contact-tiles {
  background: var(--mb-heading, #0f1d27);
  padding: 0;
}
.mb-contact-tile {
  padding: 32px 28px;
  text-align: center;
  position: relative;
}
.mb-contact-tile::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: rgba(255,255,255,0.08);
}
.mb-contact-tile:last-child::after { display: none; }
.mb-contact-tile .icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255,74,23,0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mb-accent);
  font-size: 1.2rem;
  margin-bottom: 14px;
}
.mb-contact-tile h6 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45);
  margin-bottom: 6px;
}
.mb-contact-tile p {
  color: #fff;
  font-size: 0.92rem;
  margin: 0;
  line-height: 1.6;
}
.mb-contact-tile a {
  color: #fff;
  text-decoration: none;
  transition: color 0.2s;
}
.mb-contact-tile a:hover { color: var(--mb-accent); }

/* Form area */
.mb-contact-form-area {
  background: #f7f8fa;
  padding: 64px 0;
}
.mb-contact-form-area .form-header {
  text-align: center;
  margin-bottom: 40px;
}
.mb-contact-form-area .form-header h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--mb-heading);
  margin-bottom: 6px;
}
.mb-contact-form-area .form-header p {
  color: var(--mb-muted);
  font-size: 0.92rem;
}
.mb-contact-form-inner {
  max-width: 720px;
  margin: 0 auto;
}

/* Form fields */
.mb-form-group {
  position: relative;
  margin-bottom: 18px;
}
.mb-form-control {
  width: 100%;
  padding: 15px 16px 7px;
  font-size: 0.92rem;
  font-family: inherit;
  border: none;
  border-bottom: 2px solid #ddd;
  border-radius: 0;
  background: transparent;
  outline: none;
  transition: border-color 0.25s;
  color: var(--mb-heading);
  -webkit-appearance: none;
  appearance: none;
}
.mb-form-control:focus {
  border-bottom-color: var(--mb-accent);
  box-shadow: none;
}
.mb-form-group label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.88rem;
  color: #aaa;
  pointer-events: none;
  transition: 0.2s ease all;
  background: transparent;
  padding: 0;
}
.mb-form-control:focus + label,
.mb-form-control:not(:placeholder-shown) + label {
  top: 4px;
  transform: translateY(0);
  font-size: 0.68rem;
  color: var(--mb-accent);
  letter-spacing: 0.05em;
  font-weight: 600;
  text-transform: uppercase;
}
.mb-form-group textarea + label {
  top: 14px;
  transform: none;
}
.mb-form-group textarea:focus + label,
.mb-form-group textarea:not(:placeholder-shown) + label {
  top: 2px;
  font-size: 0.68rem;
  color: var(--mb-accent);
  font-weight: 600;
  text-transform: uppercase;
}
.mb-form-group select.mb-form-control {
  padding-right: 36px;
  cursor: pointer;
}
.mb-form-group select + label {
  top: 4px;
  transform: translateY(0);
  font-size: 0.68rem;
  color: var(--mb-accent);
  letter-spacing: 0.05em;
  font-weight: 600;
  text-transform: uppercase;
}

/* Submit */
.mb-contact-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 36px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--mb-accent);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: background 0.25s, transform 0.15s, box-shadow 0.25s;
  margin-top: 8px;
}
.mb-contact-submit:hover {
  background: #e04010;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255,74,23,0.25);
}
.mb-contact-submit:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Responsive */
@media (max-width: 991px) {
  .mb-contact-hero { min-height: 300px; }
  .mb-contact-hero iframe { min-height: 300px; }
  .mb-contact-hero .hero-overlay h2 { font-size: 2.2rem; }
  .mb-contact-tile::after { display: none; }
}
@media (max-width: 575px) {
  .mb-contact-hero { min-height: 240px; }
  .mb-contact-hero iframe { min-height: 240px; }
  .mb-contact-hero .hero-overlay h2 { font-size: 1.8rem; }
  .mb-contact-form-area { padding: 40px 0; }
  .mb-contact-tile { padding: 20px 16px; }
}
/* ══════════════════════════════════════════════════════════
   TESTIMONIALS - Jadoo-exact (light theme)
   ══════════════════════════════════════════════════════════ */
.mb-testimonials {
  background: #ffffff;
  padding: 120px 0;
  overflow: hidden;
}

/* Left column intro */
.mb-testimonials__intro {
  padding-right: clamp(0px, 2vw, 24px);
  margin-bottom: 32px;
}
.mb-testimonials__eyebrow {
  font-family: "Poppins", var(--font-body, sans-serif);
  font-size: 1rem;
  font-weight: 500;
  color: #5E6282;
  margin: 0 0 16px;
}
.mb-testimonials__title {
  font-family: "Volkhov", "DM Serif Display", serif;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.2;
  color: #212832;
  margin: 0;
  text-transform: capitalize;
}

/* Right column stage */
.mb-testimonials__stage {
  position: relative;
  padding: 40px 56px 16px 40px;
}
.mb-testimonials__swiper {
  position: relative;
  overflow: visible;
  padding: 16px 24px 32px 24px;
  margin: -16px -24px -32px -24px;
  perspective: 1000px;
}
.mb-testimonials__swiper .swiper-wrapper {
  align-items: stretch;
}
/* Slide IS the card (cards effect clips slide overflow so card visuals must live here) */
.mb-testimonials__swiper .swiper-slide {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.12);
  padding: 28px 28px 26px 28px;
  min-height: 220px;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Indicators on top */
.mb-testimonials__pagination {
  position: relative;
  text-align: left;
  margin-bottom: 24px;
  padding-left: 4px;
}
.mb-testimonials__pagination .swiper-pagination-bullet {
  background: rgba(94, 98, 130, 0.25);
  opacity: 1;
  width: 8px;
  height: 8px;
  margin: 0 5px !important;
  transition: width 240ms ease, background 240ms ease;
}
.mb-testimonials__pagination .swiper-pagination-bullet-active {
  background: #5E6282;
  width: 24px;
  border-radius: 4px;
}

/* Card */
/* Card visual now lives on the slide; .mb-tcard is just a content wrapper */
.mb-tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}
.mb-tcard__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex-shrink: 0;
}
.mb-tcard__body {
  display: flex;
  flex-direction: column;
}
.mb-tcard__quote {
  font-family: "Poppins", var(--font-body, sans-serif);
  font-size: 1rem;
  line-height: 1.7;
  color: #212832;
  font-weight: 500;
  margin: 0 0 18px;
}
.mb-tcard__name {
  font-family: "Poppins", var(--font-body, sans-serif);
  font-size: 1.05rem;
  font-weight: 500;
  color: #5E6282;
  margin: 0 0 2px;
  text-transform: capitalize;
}
.mb-tcard__role {
  font-family: "Poppins", var(--font-body, sans-serif);
  font-size: 0.82rem;
  font-weight: 500;
  color: #5E6282;
  margin: 0;
}

/* Offset shadow card — hidden because Swiper cards effect renders the stack natively */
.mb-tcard__shadow {
  display: none;
}

/* Up/down arrow navigation on the right */
.mb-tnav {
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 3;
}
.mb-tnav__btn {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #5E6282;
  font-size: 1rem;
  cursor: pointer;
  padding: 0;
  transition: color 240ms ease, transform 240ms ease;
}
.mb-tnav__btn:hover {
  color: #212832;
  transform: scale(1.15);
}

@media (max-width: 991px) {
  .mb-testimonials { padding: 80px 0; }
  .mb-testimonials__intro { text-align: center; margin-bottom: 48px; padding: 0; }
  .mb-testimonials__stage { padding: 40px 48px 16px 30px; }
  .mb-testimonials__pagination { text-align: center; padding-left: 0; }
}
@media (max-width: 575px) {
  .mb-testimonials__stage { padding: 36px 40px 16px 24px; }
  .mb-tcard { padding: 20px; }
  .mb-tcard__avatar { width: 56px; height: 56px; }
  .mb-tcard__shadow { transform: translate(14px, 14px); }
  .mb-tnav { right: 4px; }
}

/* ══════════════════════════════════════════════════════════
   TEAM - photo overlay cards
   ══════════════════════════════════════════════════════════ */
.mb-team {
  padding: 80px 0;
  background: #ffffff;
}
.mb-team .section-intro {
  text-align: center;
  margin-bottom: 48px;
}
.mb-team .section-intro h2 {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--mb-heading);
  margin-bottom: 8px;
}
.mb-team .section-intro p {
  color: var(--mb-muted);
  font-size: 1rem;
}
.mb-team-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  height: 100%;
  min-height: 340px;
  cursor: default;
}
.mb-team-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.mb-team-card:hover img {
  transform: scale(1.05);
}
/* Gradient overlay */
.mb-team-card .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10,20,27,0.88) 0%, rgba(10,20,27,0.2) 50%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px 20px;
  transition: background 0.4s;
}
.mb-team-card:hover .overlay {
  background: linear-gradient(0deg, rgba(10,20,27,0.92) 0%, rgba(10,20,27,0.4) 60%, rgba(10,20,27,0.15) 100%);
}
.mb-team-card .overlay h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  margin: 0 0 2px;
}
.mb-team-card .overlay .role {
  font-size: 0.78rem;
  color: var(--mb-accent);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0;
  transition: margin-bottom 0.3s;
}
.mb-team-card:hover .overlay .role {
  margin-bottom: 12px;
}
.mb-team-card .overlay .social {
  display: flex;
  gap: 8px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s 0.05s, transform 0.3s 0.05s;
}
.mb-team-card:hover .overlay .social {
  opacity: 1;
  transform: translateY(0);
}
.mb-team-card .overlay .social a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  color: #fff;
  text-decoration: none;
  transition: background 0.2s;
}
.mb-team-card .overlay .social a:hover {
  background: var(--mb-accent);
}
/* Initials placeholder for missing portraits */
.mb-team-card--placeholder {
  background: linear-gradient(155deg, #2f4a5d 0%, #1b2c39 100%);
}
.mb-team-card__initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, "Raleway", sans-serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.18);
  user-select: none;
  transition: color 0.4s ease;
}
.mb-team-card--placeholder:hover .mb-team-card__initials {
  color: rgba(255, 255, 255, 0.32);
}
/* ══════════════════════════════════════════════════════════
   FOOTER — modern dark footer
   ══════════════════════════════════════════════════════════ */
.mb-footer {
  background: #0a141b;
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
  padding-top: 64px;
}
.mb-footer a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.2s;
}
.mb-footer a:hover {
  color: var(--mb-accent);
}
.mb-footer h5 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}
.mb-footer .footer-brand .logo-text {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
}
.mb-footer .footer-brand p {
  margin-top: 12px;
  line-height: 1.7;
  max-width: 320px;
}
.mb-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mb-footer-links li {
  margin-bottom: 10px;
}
.mb-footer-links li a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mb-footer-links li a::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mb-accent);
  flex-shrink: 0;
}
.mb-footer .footer-offices .office {
  margin-bottom: 16px;
}
.mb-footer .footer-offices .office strong {
  display: block;
  color: rgba(255,255,255,0.85);
  font-size: 0.85rem;
  margin-bottom: 2px;
}
.mb-footer .footer-offices .office span {
  font-size: 0.85rem;
  line-height: 1.5;
}

/* City tags line — BUG-11: allow wrap gracefully on narrow screens */
.mb-footer-cities {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.9);
  margin: 6px 0 0;
  line-height: 1.6;
  word-break: break-word;
}
@media (max-width: 359px) {
  .mb-footer-cities {
    font-size: 0.82rem;
    letter-spacing: 0.01em;
  }
}
.mb-footer-social {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.mb-footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: rgba(255,255,255,0.6);
  transition: background 0.2s, color 0.2s;
}
.mb-footer-social a:hover {
  background: var(--mb-accent);
  color: #fff;
}
.mb-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 20px 0;
  margin-top: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.35);
}
.mb-footer-bottom a { color: rgba(255,255,255,0.5); }
.mb-footer-bottom a:hover { color: var(--mb-accent); }
@media (max-width: 767px) {
  .mb-footer-bottom { justify-content: center; text-align: center; }
}

/* BUG-13: team cards — 1-up below 480px for better readability */
@media (max-width: 479px) {
  #team .col-6 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ══════════════════════════════════════════════════════════
   ANIMATIONS - drafting line, clip reveals
   ══════════════════════════════════════════════════════════ */

/* Drafting-line underline that draws in under section-title <p> */
.section-title p {
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
}
.section-title p::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--mb-accent, #ff4a17);
  transform: translateX(-50%);
  transition: width 1.1s cubic-bezier(0.65, 0, 0.35, 1);
}

/* ============================================================
 * Subsidiaries Section (Phase 2)
 * Group brand block — replaces standalone MB Urban nav CTA.
 * 7-card responsive grid with monogram marks.
 * ============================================================ */
.mb-subs {
  padding: 96px 0 112px;
  background: #ffffff;
}
.mb-subs .container { max-width: 1240px; }

.mb-subs__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.mb-subs__eyebrow {
  display: inline-block;
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mb-accent);
  margin-bottom: 14px;
}
.mb-subs__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1.1;
  color: var(--mb-heading);
  margin: 0 0 18px;
}
.mb-subs__lede {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--mb-body);
  margin: 0;
}

.mb-subs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.mb-subs__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 32px 26px 28px;
  background: #fff;
  border-radius: 12px;
  border: none;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(39,61,78,0.08),
              0 1px 3px rgba(39,61,78,0.06);
  transition: box-shadow 340ms ease,
              top 340ms ease,
              transform 0.12s ease;
}
.mb-subs__card::before {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 120px;
  height: 120px;
  background: var(--mb-accent, #ff4a17);
  border-radius: 50%;
  opacity: 0.25;
  transition: transform 400ms cubic-bezier(.2,.7,.2,1),
              opacity 400ms ease;
}
.mb-subs__card:hover {
  box-shadow: 0 8px 28px rgba(39,61,78,0.13),
              0 30px 68px rgba(39,61,78,0.16);
}
.mb-subs__card:hover::before {
  transform: scale(2.8);
  opacity: 0.45;
}

/* Featured: stronger shadow to stand out without breaking row height */
.mb-subs__card--featured {
  box-shadow: 0 6px 20px rgba(39,61,78,0.10),
              0 26px 60px rgba(39,61,78,0.14);
}
.mb-subs__card--featured::before {
  opacity: 0.35;
}
.mb-subs__card--featured:hover {
  box-shadow: 0 10px 28px rgba(39,61,78,0.14),
              0 32px 72px rgba(39,61,78,0.18);
}
.mb-subs__card--featured:hover::before {
  transform: scale(3.2);
  opacity: 0.55;
}

/* MB badge sits over an offset cream tile */
.mb-subs__logo {
  height: 52px;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.mb-subs__logo img {
  max-height: 52px;
  max-width: 140px;
  width: auto;
  object-fit: contain;
  filter: none;
  transition: opacity .3s ease;
}
.mb-subs__card:hover .mb-subs__logo img { opacity: 0.85; }

/* Legacy mark — no longer rendered but keep selector safe */
.mb-subs__mark { display: none; }

.mb-subs__card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--mb-heading);
  margin: 0;
}
.mb-subs__card p {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--mb-muted);
  margin: 0;
  flex: 1;
}
.mb-subs__cta {
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mb-accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.mb-subs__cta i { transition: transform .3s var(--ease-out-soft); }
.mb-subs__card:hover .mb-subs__cta i { transform: translate(3px, -3px); }

/* Responsive collapse — at narrow viewports the strict 3-up grid
   crushes the cards (logo alone is wider than the cell). Keep 3-up
   on laptops/tablets-landscape, 2-up on tablets-portrait, 1-up on
   phones. Padding tightens at the smallest size so the orange bloom
   doesn't dominate the card. */
@media (max-width: 991px) {
  .mb-subs__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .mb-subs__grid { grid-template-columns: 1fr; gap: 16px; }
  .mb-subs__card { padding: 26px 22px 24px; }
  .mb-subs__card::before { width: 96px; height: 96px; right: -48px; bottom: -48px; }
}

@media (max-width: 575px) {
  .mb-subs { padding: 72px 0 88px; }
  .mb-subs__head { margin-bottom: 40px; }
}

/* ------------------------------------------------------------
 * Phase 2 follow-up: rebalance index.html header after the
 * standalone MB URBAN / SUBSIDIARIES CTA button was removed.
 * Container uses .d-flex.justify-content-between; with only
 * [logo] + [navmenu] left, the nav was getting pushed flush
 * right. Centre the nav between logo and edge on desktop.
 * ------------------------------------------------------------ */
@media (min-width: 1200px) {
  .header .container > .navmenu { margin: 0 auto; }
}
.section-title.in-view p::after {
  width: 72px;
}

/* Clip-path image reveals — apply class .reveal-clip to img wrappers */
.reveal-clip {
  position: relative;
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s cubic-bezier(0.77, 0, 0.175, 1);
}
.reveal-clip.in-view {
  clip-path: inset(0 0 0 0);
}
.reveal-clip img,
img.reveal-clip {
  transform: scale(1.06);
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1), clip-path 1.1s cubic-bezier(0.77, 0, 0.175, 1);
}
.reveal-clip.in-view img,
img.reveal-clip.in-view {
  transform: scale(1);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero-draftline,
  .section-title p::after,
  .reveal-clip,
  .reveal-clip img,
  .reveal-clip > * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    clip-path: none !important;
    width: 72px;
  }
}
/* ============================================================
 * Phase 3 — Stats (split editorial + icon grid)
 * Inspired by enterprise "by the numbers" sections: editorial
 * intro on the left (eyebrow + headline w/ accent phrase + lede),
 * 2x2 icon-and-number grid on the right. Stacks on tablet/mobile.
 * ============================================================ */
.mb-stats {
  padding: clamp(72px, 10vw, 120px) 0;
  background: var(--mb-surface, #ffffff);
  color: var(--mb-heading, #273d4e);
  border-top: 1px solid var(--mb-line, #e5eaee);
  border-bottom: 1px solid var(--mb-line, #e5eaee);
}
.mb-stats .container { max-width: 1320px; }

.mb-stats__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (min-width: 992px) {
  .mb-stats__layout {
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(48px, 6vw, 96px);
  }
}

/* ---- Intro ---- */
.mb-stats__intro { max-width: 520px; }

.mb-stats__eyebrow {
  display: inline-block;
  font-family: var(--font-nav, "Inter", sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mb-accent, #ff4a17);
  margin-bottom: 18px;
}

.mb-stats__title {
  font-family: var(--font-display, "Raleway", sans-serif);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--mb-heading, #273d4e);
  margin: 0 0 18px;
}
.mb-stats__title em {
  font-style: normal;
  color: var(--mb-accent, #ff4a17);
  font-weight: 600;
}

.mb-stats__lede {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--mb-body, #444);
  margin: 0;
}

/* ---- Grid ---- */
.mb-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px);
}

.mb-stats__item {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 2vw, 20px);
  position: relative;
}

.mb-stats__icon {
  flex-shrink: 0;
  width: clamp(40px, 4vw, 52px);
  height: clamp(40px, 4vw, 52px);
  color: var(--mb-accent, #ff4a17);
  margin-top: 2px;
  transition: transform 360ms cubic-bezier(.2,.7,.2,1);
}
.mb-stats__item:hover .mb-stats__icon { transform: translateY(-3px); }

.mb-stats__copy { min-width: 0; }

.mb-stats__num {
  font-family: var(--font-display, "Raleway", sans-serif);
  font-weight: 600;
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--mb-heading, #273d4e);
  display: inline-flex;
  align-items: flex-start;
  gap: 2px;
}
.mb-stats__num .purecounter { display: inline-block; }

.mb-stats__suffix {
  font-family: var(--font-display, "Raleway", sans-serif);
  font-size: 0.55em;
  font-weight: 500;
  color: var(--mb-accent, #ff4a17);
  line-height: 1;
  margin-top: 0.25em;
}

.mb-stats__label {
  margin: 6px 0 0;
  font-family: var(--font-nav, "Inter", sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--mb-muted, #7f8f9d);
  line-height: 1.4;
}

@media (max-width: 575px) {
  .mb-stats { padding: 56px 0; }
  .mb-stats__grid { gap: 24px 20px; }
  .mb-stats__icon { width: 34px; height: 34px; margin-top: 2px; }
  .mb-stats__num { font-size: 2rem; }
}

#about.about { background: var(--mb-bg-soft, #f1f4fa); }

/* ============================================================
 * Phase 4 - About (3-row editorial)
 * Row 1: intro (eyebrow + headline w/ accent phrase + lead +
 *        body + meta dl) paired with a signature project image.
 * Row 2: values - 3 indexed columns (01-03), hairline rules.
 * Row 3: mission & vision - 2-up split with accent tags.
 * Background tint set by existing #about.about rule.
 * ============================================================ */
.mb-about {
  padding: clamp(80px, 11vw, 140px) 0;
}
.mb-about .container { max-width: 1320px; }

/* ---- Row 1: Intro ---- */
.mb-about__intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  margin-bottom: clamp(72px, 10vw, 120px);
}
@media (min-width: 992px) {
  .mb-about__intro {
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(48px, 6vw, 96px);
  }
}

.mb-about__eyebrow {
  display: inline-block;
  font-family: var(--font-nav, "Inter", sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mb-accent, #ff4a17);
  margin-bottom: 18px;
}

.mb-about__title {
  font-family: var(--font-display, "Raleway", sans-serif);
  font-weight: 600;
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--mb-heading, #273d4e);
  margin: 0 0 24px;
}
.mb-about__title em {
  font-style: normal;
  color: var(--mb-accent, #ff4a17);
}

.mb-about__lead {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 500;
  color: var(--mb-heading, #273d4e);
  margin: 0 0 18px;
}
.mb-about__body {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--mb-body, #444);
  margin: 0 0 32px;
}

.mb-about__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px clamp(16px, 2vw, 32px);
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid var(--mb-line, #e5eaee);
}
.mb-about__meta > div { margin: 0; }
.mb-about__meta dt {
  font-family: var(--font-nav, "Inter", sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mb-muted, #7f8f9d);
  margin: 0 0 4px;
}
.mb-about__meta dd {
  font-family: var(--font-display, "Raleway", sans-serif);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--mb-heading, #273d4e);
  margin: 0;
}

.mb-about__figure {
  margin: 0;
  position: relative;
}
.mb-about__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
}
.mb-about__figure figcaption {
  margin-top: 14px;
  font-family: var(--font-nav, "Inter", sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mb-muted, #7f8f9d);
}

/* ---- Row 2: Values ---- */
.mb-about__values {
  margin-top: 0;
}
.mb-about__values-head {
  max-width: 680px;
  margin: 0 0 clamp(24px, 3vw, 40px);
}
.mb-about__values-title {
  font-family: var(--font-display, "Raleway", sans-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.25;
  color: var(--mb-heading, #273d4e);
  margin: 0;
}

.mb-about__values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 1.8vw, 24px);
}
@media (min-width: 576px) {
  .mb-about__values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .mb-about__values-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Jadoo-style card system:
   - Non-featured: flat icon + text on section bg (no card chrome)
   - Featured:    white floating card w/ chunky orange offset shadow-leaf
   - All:         cream tile behind the index/icon                          */
/* Jadoo recipe (subtle variant for About): at rest the card is
   almost invisible (transparent, no shadow, leaf hidden). On hover
   it emerges as a full white card with shadow + the orange leaf
   slides out below-left. --featured sits slightly raised. */
.mb-about__value {
  position: relative;
  background: transparent;
  padding: clamp(28px, 3.2vw, 40px) clamp(20px, 2.2vw, 28px);
  text-align: center;
  border-radius: 24px;
  box-shadow: none;
  transition: top 360ms cubic-bezier(.2,.7,.2,1),
              background-color 360ms cubic-bezier(.2,.7,.2,1),
              box-shadow 360ms cubic-bezier(.2,.7,.2,1);
}
.mb-about__value::before {
  content: "";
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 110px;
  height: 110px;
  background: var(--mb-accent, #ff4a17);
  border-radius: 32px 0 10px 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 280ms ease,
              left 420ms cubic-bezier(.2,.7,.2,1),
              bottom 420ms cubic-bezier(.2,.7,.2,1);
}
.mb-about__value:hover {
  background: #fff;
  box-shadow: 0 6px 16px rgba(39, 61, 78, 0.06),
              0 28px 64px rgba(39, 61, 78, 0.14);
}
.mb-about__value:hover::before {
  opacity: 1;
  left: -30px;
  bottom: -35px;
}

@media (max-width: 767.98px) {
  .mb-about__value::before {
    width: 60px;
    height: 60px;
    border-radius: 20px 0 8px 0;
  }
  .mb-about__value:hover::before {
    left: -15px;
    bottom: -25px;
  }
}

.mb-about__value-index {
  display: inline-block;
  position: relative;
  isolation: isolate;
  font-family: var(--font-display, "Raleway", sans-serif);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--mb-accent, #ff4a17);
  margin: 0 0 20px;
  line-height: 1;
  padding: 4px 10px 4px 6px;
}
.mb-about__value-index::before {
  content: "";
  position: absolute;
  top: -8px;
  right: -14px;
  width: 40px;
  height: 40px;
  background: #fff1e9;
  border-radius: 6px;
  z-index: -1;
  transition: background 360ms ease;
}
.mb-about__value:hover .mb-about__value-index::before,
.mb-about__value--featured .mb-about__value-index::before {
  background: #ffe2d3;
}
.mb-about__value-title {
  font-family: var(--font-display, "Raleway", sans-serif);
  font-size: clamp(1.125rem, 1.5vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--mb-heading, #273d4e);
  margin: 0 0 14px;
}
.mb-about__value-body {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--mb-body, #444);
  margin: 0;
  max-width: 32ch;
  margin-inline: auto;
}

/* ---- Row 3: Our Scope ---- */
.mb-about__scope {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3.2vw, 56px);
  align-items: center;
  margin-top: 0;
}
@media (min-width: 992px) {
  .mb-about__scope {
    grid-template-columns: 1.05fr 1fr;
  }
}

.mb-about__scope-figure {
  position: relative;
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  background: var(--mb-bg-soft, #f1f4fa);
  box-shadow: 0 1px 2px rgba(39, 61, 78, 0.04),
              0 18px 44px rgba(39, 61, 78, 0.10);
}
.mb-about__scope-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.mb-about__scope-body { max-width: 560px; }
.mb-about__scope-title {
  font-family: var(--font-display, "Raleway", sans-serif);
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--mb-heading, #273d4e);
  margin: 14px 0 16px;
}
.mb-about__scope-lead {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--mb-body, #444);
  margin: 0 0 24px;
}
.mb-about__scope-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.mb-about__scope-list li {
  font-family: var(--font-nav, "Inter", sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mb-heading, #273d4e);
  padding: 8px 14px;
  border: 1px solid var(--mb-line, #e5eaee);
  border-radius: 999px;
  background: #fff;
  transition: border-color 240ms ease, color 240ms ease, background 240ms ease;
}
.mb-about__scope-list li:hover {
  border-color: var(--mb-accent, #ff4a17);
  color: var(--mb-accent, #ff4a17);
}

/* ---- Mission & Vision (matching floating-card vibe) ---- */
.mb-about__mv {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.4vw, 32px);
}
@media (min-width: 768px) {
  .mb-about__mv {
    grid-template-columns: repeat(2, 1fr);
  }
}

.mb-about__mv-card {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  padding: clamp(32px, 3.6vw, 44px) clamp(26px, 2.8vw, 36px);
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(39, 61, 78, 0.04),
              0 14px 36px rgba(39, 61, 78, 0.08);
  transition: transform 360ms cubic-bezier(.2,.7,.2,1),
              box-shadow 360ms cubic-bezier(.2,.7,.2,1);
}
.mb-about__mv-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 16px rgba(39, 61, 78, 0.06),
              0 30px 70px rgba(39, 61, 78, 0.16);
}

/* Watermark drifts up when card animates in */
@keyframes mv-watermark-rise {
  from { transform: translateY(18px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 0.06; }
}
/* Continuous spin-in → hold → spin-out loop every 8s */
@keyframes mv-watermark-spin-loop {
  0%   { transform: rotateY(90deg) scale(0.8); opacity: 0; }
  10%  { transform: rotateY(0deg)  scale(1);   opacity: 0.09; }
  65%  { transform: rotateY(0deg)  scale(1);   opacity: 0.09; }
  78%  { transform: rotateY(-90deg) scale(0.8); opacity: 0; }
  100% { transform: rotateY(90deg) scale(0.8); opacity: 0; }
}
/* Accent underline draws in left-to-right */
@keyframes mv-tag-line {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}
/* Statement text fades up slightly */
@keyframes mv-statement-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Card gentle float bounce loop */
@keyframes mv-card-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

.mb-about__mv-card.aos-animate .mb-about__mv-watermark {
  animation:
    mv-watermark-rise 900ms cubic-bezier(.2,.7,.2,1) 200ms both,
    mv-watermark-spin-loop 8s ease-in-out 1.2s infinite;
}
.mb-about__mv-card.aos-animate {
  animation: mv-card-float 4s ease-in-out 1.5s infinite;
}
.mb-about__mv-card.aos-animate .mb-about__mv-tag {
  border-bottom: none;
}
.mb-about__mv-card.aos-animate .mb-about__mv-tag::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--mb-accent, #ff4a17);
  margin-top: 6px;
  animation: mv-tag-line 600ms cubic-bezier(.2,.7,.2,1) 400ms both;
}
.mb-about__mv-card.aos-animate .mb-about__mv-statement {
  animation: mv-statement-in 700ms cubic-bezier(.2,.7,.2,1) 300ms both;
}

.mb-about__mv-watermark {
  position: absolute;
  bottom: -0.22em;
  right: -0.04em;
  font-family: var(--font-display, "Raleway", sans-serif);
  font-size: clamp(3.5rem, 7vw, 6rem);
  font-weight: 800;
  line-height: 1;
  color: var(--mb-heading, #273d4e);
  opacity: 0.06;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  transition: opacity 360ms ease, color 360ms ease;
}
.mb-about__mv-card:hover .mb-about__mv-watermark {
  color: var(--mb-accent, #ff4a17);
  opacity: 0.10;
}

.mb-about__mv-tag {
  position: relative;
  display: inline-block;
  font-family: var(--font-nav, "Inter", sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mb-accent, #ff4a17);
  margin: 0 0 18px;
  padding-bottom: 6px;
}

.mb-about__mv-statement {
  position: relative;
  font-family: var(--font-display, "Raleway", sans-serif);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--mb-heading, #273d4e);
  margin: 0;
  letter-spacing: -0.005em;
}

@media (max-width: 575px) {
  .mb-about { padding: 64px 0; }
  .mb-about__figure img { aspect-ratio: 4 / 3; }
}

/* ---- Values header as pillars banner ---- */
.mb-about__values-head--banner {
  position: relative;
  isolation: isolate;
  max-width: none;
  padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 56px);
  border-radius: 24px;
  overflow: hidden;
  background-image:
    linear-gradient(180deg, rgba(15,28,38,0.55) 0%, rgba(15,28,38,0.78) 100%),
    url("../images/about/pillars-core-values.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.mb-about__values-head--banner .mb-about__eyebrow {
  color: var(--mb-accent, #ff4a17);
}
.mb-about__values-head--banner .mb-about__values-title {
  color: #ffffff;
  margin-top: 14px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(1.625rem, 2.8vw, 2.25rem);
}

/* ---- Row 5: Sustainable Shelter (copy left / image right) ---- */
.mb-about__shelter {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3.2vw, 56px);
  align-items: center;
  margin-top: 0;
}
@media (min-width: 992px) {
  .mb-about__shelter {
    grid-template-columns: 1fr 1.05fr;
  }
}

.mb-about__shelter-body { max-width: 560px; }
.mb-about__shelter-title {
  font-family: var(--font-display, "Raleway", sans-serif);
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--mb-heading, #273d4e);
  margin: 14px 0 16px;
}
.mb-about__shelter-lead {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--mb-body, #444);
  margin: 0 0 28px;
}
.mb-about__shelter-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px 28px;
  margin: 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--mb-line, #e5eaee);
}
@media (min-width: 480px) {
  .mb-about__shelter-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}
.mb-about__shelter-stats div { margin: 0; }
.mb-about__shelter-stats dt {
  font-family: var(--font-nav, "Inter", sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mb-accent, #ff4a17);
  margin: 0 0 4px;
}
.mb-about__shelter-stats dd {
  font-family: var(--font-display, "Raleway", sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--mb-heading, #273d4e);
  margin: 0;
}

.mb-about__shelter-figure {
  position: relative;
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(39, 61, 78, 0.04),
              0 18px 44px rgba(39, 61, 78, 0.10);
  display: flex;
  align-items: center;
  min-height: 360px;
}
.mb-about__shelter-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}



/* Featured-card leaf trick: the pseudo at z-index:-1 escapes the card.
   Give each containing section its own stacking context so the leaf
   paints above the section's background but below the card's white bg. */
#about,
.mb-services,
.mb-subs {
  isolation: isolate;
}

/* ══════════════════════════════════════════════════════════
   GLOBAL — light theme rhythm
   - Alternate pure white / very faint tint between sections
   - Subtle backdrop on the clients marquee so logos read
   - Brand-accent rule under section eyebrows
   - Combo C: beefed-up hairline
   - Combo D: extra breathing whitespace between bands
   ══════════════════════════════════════════════════════════ */

/* base: every content section white */
#stats,
#about,
#about.about,
#services-2,
#subsidiaries,
#portfolio,
#founder,
#founder.light-background,
#mission-vision,
#team,
#testimonials,
#clients,
#contact {
  background: #ffffff !important;
}

/* alternation: every other section gets the faintest tint */
#stats,
#services-2,
#portfolio,
#mission-vision,
#testimonials {
  background: #fafbfc !important;
}

/* clients marquee needs a slightly stronger backdrop so logos don't melt */
#clients {
  background: #f6f7f9 !important;
}

/* Hairline divider between adjacent sections */
#stats,
#about,
#services-2,
#subsidiaries,
#portfolio,
#founder,
#mission-vision,
#team,
#testimonials,
#clients,
#contact {
  border-top: 1px solid #e9ecef;
}

/* Combo D: extra vertical whitespace between bands (tightened for clean rhythm)
   NOTE: #contact is intentionally excluded — it has padding:0 by design so the
   map sits edge-to-edge against the clients section above and the dark tile
   strip butts directly against the map. */
@media (min-width: 768px) {
  #stats,
  #services-2,
  #subsidiaries,
  #portfolio,
  #founder,
  #mission-vision,
  #team,
  #testimonials {
    padding-top: clamp(64px, 7vw, 96px) !important;
    padding-bottom: clamp(64px, 7vw, 96px) !important;
  }
}

/* Brand accent rule under section eyebrows */
.mb-stats__eyebrow,
.mb-about__eyebrow,
.mb-subs__eyebrow,
.mb-testimonials__eyebrow {
  position: relative;
  padding-bottom: 14px;
  display: inline-block;
}
.mb-stats__eyebrow::after,
.mb-about__eyebrow::after,
.mb-subs__eyebrow::after,
.mb-testimonials__eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: var(--mb-accent, #ff4a17);
}
/* centered intros: center the accent rule too */
.mb-subs__head .mb-subs__eyebrow::after,
.text-center .mb-about__eyebrow::after {
  left: 50%;
  transform: translateX(-50%);
}

/* ──────────────────────────────────────────────────────────
   ABOUT — break into alternating full-bleed mini-bands
   Each row (intro / values / scope / shelter) becomes its
   own visual band with its own background + top hairline.
   ────────────────────────────────────────────────────────── */
#about,
#about.about,
.mb-about {
  background: transparent !important;
  padding: 0 !important;
  border-top: none !important;
}

.mb-about__intro,
.mb-about__values,
.mb-about__scope,
.mb-about__shelter {
  position: relative;
  isolation: isolate;
  padding-top: clamp(56px, 7vw, 96px) !important;
  padding-bottom: clamp(56px, 7vw, 96px) !important;
}
.mb-about__intro::before,
.mb-about__values::before,
.mb-about__scope::before,
.mb-about__shelter::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  border-top: 1px solid #e9ecef;
}
.mb-about__intro::before   { background: #ffffff; }
.mb-about__values::before  { background: #fafbfc; }
.mb-about__scope::before   { background: #ffffff; }
.mb-about__shelter::before { background: #fafbfc; }

/* the very first band sits right under the hero — no hairline above it */
.mb-about > .container > .mb-about__intro:first-child::before {
  border-top: none;
}

/* ══════════════════════════════════════════════════════════
   ADDRESS — Floating Overlap Cards (Jadoo-style)
   ══════════════════════════════════════════════════════════ */
#contact { overflow: visible; }

.mb-addr-float {
  position: relative;
  z-index: 2;
  margin-top: -52px;
  padding-bottom: 24px;
}
.mb-addr-float__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 991px) { .mb-addr-float__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  {
  /* BUG-12: reset negative overlap so stacked card isn't clipped */
  .mb-addr-float { margin-top: 0; }
  .mb-addr-float__grid { grid-template-columns: 1fr; gap: 14px; }
}

.mb-addr-float__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 12px;
  padding: clamp(22px, 2.4vw, 30px) clamp(16px, 2vw, 24px);
  text-align: center;
  box-shadow: none;
  transition:
    top 360ms cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 360ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Orange accent leaf — slides out on hover (exact Jadoo) */
.mb-addr-float__card::before {
  content: "";
  position: absolute;
  left: -20px;
  bottom: -20px;
  width: 56px;
  height: 56px;
  background: var(--mb-accent, #ff4a17);
  border-radius: 18px 0 8px 0;
  z-index: -1;
  opacity: 0;
  transition:
    opacity 360ms cubic-bezier(0.2, 0.7, 0.2, 1),
    left 420ms cubic-bezier(0.2, 0.7, 0.2, 1),
    bottom 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mb-addr-float__card:hover {
  animation: cardBounce 480ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  box-shadow:
    0 6px 16px rgba(39, 61, 78, 0.06),
    0 28px 64px rgba(39, 61, 78, 0.14);
}
@keyframes cardBounce {
  0%   { top: 0; }
  40%  { top: -8px; }
  70%  { top: 2px; }
  100% { top: -4px; }
}
.mb-addr-float__card:first-child:hover::before {
  opacity: 1;
  left: -20px;
  bottom: -20px;
}
/* Last card: flip leaf to bottom-right */
.mb-addr-float__card:last-child::before {
  left: auto;
  right: -20px;
  border-radius: 0 18px 0 8px;
}
.mb-addr-float__card:last-child:hover::before {
  opacity: 1;
  right: -20px;
  bottom: -20px;
}
/* Remove leaf from middle card only */
.mb-addr-float__card:nth-child(2)::before { display: none; }

/* Icon with offset cream tile (exact Jadoo) */
.mb-addr-float__icon {
  position: relative;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--mb-accent, #ff4a17);
  margin: 0 auto 22px;
  isolation: isolate;
}
.mb-addr-float__icon::before {
  content: "";
  position: absolute;
  top: -8px;
  right: -10px;
  width: 42px;
  height: 42px;
  background: #fff1e9;
  border-radius: 6px;
  z-index: -1;
  transition: background 360ms ease;
}
.mb-addr-float__card:hover .mb-addr-float__icon::before {
  background: #ffe2d3;
}

/* Text */
.mb-addr-float__card h6 {
  font-family: var(--font-display, "Raleway", sans-serif);
  font-weight: 800;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5a6a78;
  margin-bottom: 8px;
}
.mb-addr-float__card p {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--mb-heading, #273d4e);
  margin: 0;
  line-height: 1.55;
}
.mb-addr-float__card a {
  color: var(--mb-heading, #273d4e);
  text-decoration: none;
  transition: color 0.2s;
}
.mb-addr-float__card a:hover { color: var(--mb-accent, #ff4a17); }

/* Social icons row inside card */
.mb-addr-float__socials {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 0;
  width: 100%;
}
.mb-addr-float__socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(39,61,78,0.07);
  font-size: 1.35rem;
  color: var(--mb-heading, #273d4e);
  transition: color 0.2s, background 0.2s, transform 0.2s;
}
.mb-addr-float__socials a:hover {
  color: #fff;
  background: var(--mb-accent, #ff4a17);
  transform: translateY(-3px);
}



/* ══════════════════════════════════════════════════════════
   CONTACT — Material Conversational Form
   ══════════════════════════════════════════════════════════ */
.mb-cf-mat {
  padding: clamp(56px, 7vw, 96px) 0;
  background: #fafbfc;
}

/* Elevated card surface */
.mb-cf-mat__card {
  max-width: 580px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 16px;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.06),
    0 8px 24px rgba(0,0,0,0.07);
  padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 56px);
  position: relative;
  overflow: hidden;
}

/* Progress indicator */
.mb-cf-mat__progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 36px;
}
.mb-cf-mat__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e0e4ea;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mb-cf-mat__dot--active {
  width: 24px;
  border-radius: 4px;
  background: var(--mb-accent, #ff4a17);
}
.mb-cf-mat__dot--done {
  background: var(--mb-accent, #ff4a17);
}

/* Steps */
.mb-cf-mat__step {
  display: none;
  animation: matStepIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.mb-cf-mat__step--active { display: block; }
@keyframes matStepIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Prompt text */
.mb-cf-mat__prompt {
  font-family: var(--font-display, "Raleway", sans-serif);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 600;
  color: var(--mb-heading, #273d4e);
  margin-bottom: 28px;
  line-height: 1.3;
}

/* Material filled text field */
.mb-cf-mat__field {
  position: relative;
  margin-bottom: 20px;
}
.mb-cf-mat__field input,
.mb-cf-mat__field textarea {
  width: 100%;
  border: none;
  border-radius: 12px 12px 0 0;
  background: #f4f5f7;
  padding: 24px 16px 8px;
  font-size: 1rem;
  color: var(--mb-heading, #273d4e);
  transition: background 0.2s;
  caret-color: var(--mb-accent, #ff4a17);
}
.mb-cf-mat__field textarea {
  border-radius: 12px;
  padding-top: 28px;
  resize: vertical;
  min-height: 100px;
}
.mb-cf-mat__field input:hover,
.mb-cf-mat__field textarea:hover {
  background: #eef0f3;
}
.mb-cf-mat__field input:focus,
.mb-cf-mat__field textarea:focus {
  outline: none;
  background: #eef0f3;
}


/* ══════════════════════════════════════════════════════════
   PREMIUM ANIMATIONS — Phase 11 polish
   ══════════════════════════════════════════════════════════ */

/* ---- Stats: numbers pop, icons gently float ---- */
@keyframes mb-stat-num-pop {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes mb-stat-icon-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.mb-stats__item.aos-animate .mb-stats__num {
  animation: mb-stat-num-pop 700ms cubic-bezier(.2,.7,.2,1) 200ms both;
}
.mb-stats__item.aos-animate .mb-stats__icon {
  animation: mb-stat-icon-float 4.5s ease-in-out 1s infinite;
  color: var(--mb-accent, #ff4a17);
}

/* ---- Services cards: same gentle float as Mission/Vision ---- */
@keyframes mb-svc-card-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.mb-svc-card.aos-animate,
[data-aos].aos-animate .mb-svc-card {
  animation: mb-svc-card-float 5s ease-in-out infinite;
  animation-delay: calc(var(--svc-delay, 0) * 1s);
}
/* Stagger float on alternating cards so they don't all bob in unison */
.col-lg-4:nth-child(2) .mb-svc-card { animation-delay: 0.6s; }
.col-lg-4:nth-child(3) .mb-svc-card { animation-delay: 1.2s; }
.col-lg-4:nth-child(4) .mb-svc-card { animation-delay: 0.3s; }
.col-lg-4:nth-child(5) .mb-svc-card { animation-delay: 0.9s; }
.col-lg-4:nth-child(6) .mb-svc-card { animation-delay: 1.5s; }
/* Icon gentle pulse on hover */
.mb-svc-card .svc-icon {
  transition: transform 400ms cubic-bezier(.2,.7,.2,1);
}
.mb-svc-card:hover .svc-icon {
  transform: rotate(-6deg) scale(1.08);
}

/* ---- Founder: cinematic Ken Burns zoom on the photo ---- */
@keyframes mb-founder-kenburns {
  0%   { transform: scale(1)    translate(0, 0); }
  50%  { transform: scale(1.09) translate(-1.5%, -1.5%); }
  100% { transform: scale(1)    translate(0, 0); }
}
.founder .founder-image {
  overflow: hidden;
  border-radius: 1rem;
}
.founder .founder-image img {
  display: block;
  width: 100%;
  height: auto;
  animation: mb-founder-kenburns 12s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}
/* Signature does a subtle handwritten-feel fade-in */
@keyframes mb-signature-in {
  0%   { opacity: 0; transform: translateX(-12px) rotate(-2deg); }
  100% { opacity: 1; transform: translateX(0)     rotate(0deg); }
}
.founder .aos-animate .signature-image img {
  animation: mb-signature-in 1.2s cubic-bezier(.2,.7,.2,1) 400ms both;
}

/* ---- Testimonials: big quote mark spins/fades in ---- */
.mb-tcard__quote {
  position: relative;
}
.mb-tcard__quote::before {
  content: "\201C"; /* opening curly quote */
  position: absolute;
  top: -38px;
  left: -10px;
  font-family: "Georgia", serif;
  font-size: 5.5rem;
  line-height: 1;
  color: var(--mb-accent, #ff4a17);
  opacity: 0;
  transform: rotate(-20deg) scale(0.5);
  transition: opacity 700ms cubic-bezier(.2,.7,.2,1),
              transform 700ms cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
/* When the active testimonial slide is in view, bloom the quote */
.swiper-slide-active .mb-tcard__quote::before {
  opacity: 0.18;
  transform: rotate(0deg) scale(1);
  transition-delay: 200ms;
}

/* ---- Honour reduced motion preferences ---- */
@media (prefers-reduced-motion: reduce) {
  .mb-stats__item.aos-animate .mb-stats__num,
  .mb-stats__item.aos-animate .mb-stats__icon,
  .mb-svc-card.aos-animate,
  [data-aos].aos-animate .mb-svc-card,
  .founder .founder-image img,
  .mb-about__mv-card.aos-animate,
  .mb-about__mv-card.aos-animate .mb-about__mv-watermark,
  .mb-about__value.aos-animate,
  .mb-about__value.aos-animate .mb-about__value-index,
  .mb-svc-card .svc-icon {
    animation: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   PILLARS — Five Commitments
   Cards rise like solid pillars being placed, then continuously
   sway with a gentle settle. Index numbers do a slow tick.
   ══════════════════════════════════════════════════════════ */
@keyframes mb-pillar-rise {
  0%   { transform: translateY(40px) scaleY(0.85); opacity: 0; transform-origin: bottom; }
  60%  { transform: translateY(-6px) scaleY(1.02); opacity: 1; transform-origin: bottom; }
  100% { transform: translateY(0)    scaleY(1);    opacity: 1; transform-origin: bottom; }
}
@keyframes mb-pillar-sway {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  25%      { transform: translateY(-4px) rotate(-0.4deg); }
  75%      { transform: translateY(-2px) rotate(0.4deg); }
}
@keyframes mb-pillar-index-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.08); opacity: 0.95; }
}
.mb-about__value.aos-animate {
  animation:
    mb-pillar-rise 900ms cubic-bezier(.2,.7,.2,1) both,
    mb-pillar-sway 6s ease-in-out 1.2s infinite;
}
/* Stagger the sway so the five pillars feel alive, not in lockstep */
.mb-about__values-grid > .mb-about__value:nth-child(1).aos-animate { animation-delay: 0ms, 1.0s; }
.mb-about__values-grid > .mb-about__value:nth-child(2).aos-animate { animation-delay: 80ms, 1.6s; }
.mb-about__values-grid > .mb-about__value:nth-child(3).aos-animate { animation-delay: 160ms, 0.4s; }
.mb-about__values-grid > .mb-about__value:nth-child(4).aos-animate { animation-delay: 240ms, 2.2s; }
.mb-about__values-grid > .mb-about__value:nth-child(5).aos-animate { animation-delay: 320ms, 1.3s; }
/* Index number does a slow heartbeat to draw the eye */
.mb-about__value.aos-animate .mb-about__value-index {
  display: inline-block;
  animation: mb-pillar-index-pulse 3.2s ease-in-out 1.5s infinite;
}

/* ══════════════════════════════════════════════════════════
   SERVICES — bubble (icon) shakes at intervals
   ══════════════════════════════════════════════════════════ */
@keyframes mb-svc-bubble-shake {
  0%, 86%, 100% { transform: rotate(0)    scale(1); }
  88%           { transform: rotate(-10deg) scale(1.08); }
  90%           { transform: rotate(8deg)  scale(1.08); }
  92%           { transform: rotate(-6deg) scale(1.06); }
  94%           { transform: rotate(4deg)  scale(1.04); }
  96%           { transform: rotate(-2deg) scale(1.02); }
  98%           { transform: rotate(0)    scale(1); }
}
.mb-svc-card.aos-animate .svc-icon,
[data-aos].aos-animate .mb-svc-card .svc-icon {
  animation: mb-svc-bubble-shake 7s ease-in-out infinite;
  animation-delay: calc(var(--svc-shake-delay, 0) * 1s);
}
/* Stagger so each card's bubble shakes at a different moment */
.col-lg-4:nth-child(1) .mb-svc-card .svc-icon { animation-delay: 0.4s; }
.col-lg-4:nth-child(2) .mb-svc-card .svc-icon { animation-delay: 1.6s; }
.col-lg-4:nth-child(3) .mb-svc-card .svc-icon { animation-delay: 2.8s; }
.col-lg-4:nth-child(4) .mb-svc-card .svc-icon { animation-delay: 4.0s; }
.col-lg-4:nth-child(5) .mb-svc-card .svc-icon { animation-delay: 5.2s; }
.col-lg-4:nth-child(6) .mb-svc-card .svc-icon { animation-delay: 6.4s; }


/* ══════════════════════════════════════════════════════════
   TOUCH-DEVICE SOFT MOTION — middle-ground for mobile
   ──────────────────────────────────────────────────────────
   Cumulative compositor pressure from ~12 simultaneous infinite
   loops caused jank on phones (S24 Ultra). Rather than disable
   them entirely, we keep all the personality but:
     • roughly double each duration → calmer perceived motion
     • halve transform amplitudes → cheaper per-frame compositing
     • simplify the priciest one (mv-watermark-spin-loop's full
       90° rotateY 3D transform) to a flat fade
   Desktop is byte-identical — these rules only fire under
   (hover: none) and (pointer: coarse).
   ══════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {

  /* Softer keyframe variants — global because @keyframes can't be
     scoped, but the animation-name swaps below only happen on touch. */
  @keyframes mb-stat-icon-float--soft {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
  }
  @keyframes mb-svc-card-float--soft {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
  }
  @keyframes mb-pillar-sway--soft {
    0%, 100% { transform: translateY(0)    rotate(0deg); }
    25%      { transform: translateY(-2px) rotate(-0.2deg); }
    75%      { transform: translateY(-1px) rotate(0.2deg); }
  }
  @keyframes mb-pillar-index-pulse--soft {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.04); opacity: 0.97; }
  }
  @keyframes mv-card-float--soft {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
  }
  /* Drop the 3D rotateY (the most GPU-expensive decorative loop on the
     page) — phones get a flat opacity pulse instead. Same intent
     (watermark fades in/out continuously) at a fraction of the cost. */
  @keyframes mv-watermark-fade-loop--soft {
    0%   { opacity: 0; }
    20%  { opacity: 0.09; }
    70%  { opacity: 0.09; }
    90%  { opacity: 0; }
    100% { opacity: 0; }
  }
  @keyframes mb-founder-kenburns--soft {
    0%   { transform: scale(1)    translate(0, 0); }
    50%  { transform: scale(1.05) translate(-1%, -1%); }
    100% { transform: scale(1)    translate(0, 0); }
  }

  /* ---- Animation-name + duration swaps ---- */
  .mb-stats__item.aos-animate .mb-stats__icon {
    animation-name: mb-stat-icon-float--soft;
    animation-duration: 8s;
  }
  .mb-svc-card.aos-animate,
  [data-aos].aos-animate .mb-svc-card {
    animation-name: mb-svc-card-float--soft;
    animation-duration: 9s;
  }
  /* Pillars carry two animations (rise + sway). Keep rise as-is, soften sway. */
  .mb-about__value.aos-animate {
    animation-name: mb-pillar-rise, mb-pillar-sway--soft;
    animation-duration: 900ms, 11s;
  }
  .mb-about__value.aos-animate .mb-about__value-index {
    animation-name: mb-pillar-index-pulse--soft;
    animation-duration: 6s;
  }
  /* Mission/Vision: keep watermark-rise on entry, swap the spin-loop for fade-loop. */
  .mb-about__mv-card.aos-animate .mb-about__mv-watermark {
    animation-name: mv-watermark-rise, mv-watermark-fade-loop--soft;
    animation-duration: 900ms, 14s;
  }
  .mb-about__mv-card.aos-animate {
    animation-name: mv-card-float--soft;
    animation-duration: 8s;
  }
  .founder .founder-image img {
    animation-name: mb-founder-kenburns--soft;
    animation-duration: 20s;
  }
  /* Hero scan-sweep — full-width line, slowest and least visible win. */
  .hero-scan { animation-duration: 28s; }
  /* Hero title drift — already gentle, just slow it down. */
  #hero h1.hero-title { animation-duration: 14s; }
  /* Service icon shake — less frequent so all 6 don't fire as often. */
  .mb-svc-card.aos-animate .svc-icon,
  [data-aos].aos-animate .mb-svc-card .svc-icon {
    animation-duration: 12s;
  }
}


/* ══════════════════════════════════════════════════════════
   MEDIUM-IMPACT POLISH — Phase 11b
   ══════════════════════════════════════════════════════════ */

/* ---- Stats icon peak-pulse (added by JS when count reaches end) ---- */
@keyframes mb-stat-peak-pulse {
  0%   { transform: scale(1)    rotate(0deg); }
  30%  { transform: scale(1.25) rotate(-6deg); }
  60%  { transform: scale(1.1)  rotate(4deg); }
  100% { transform: scale(1)    rotate(0deg); }
}
.mb-stats__icon.is-peak {
  animation: mb-stat-peak-pulse 700ms cubic-bezier(.2,.7,.2,1);
}

/* ---- Team cards: scroll-in stagger + continuous slow zoom on hover ---- */
@keyframes mb-team-card-in {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes mb-team-hover-zoom {
  0%   { transform: scale(1.05); }
  100% { transform: scale(1.15); }
}
.mb-team-card.aos-animate {
  animation: mb-team-card-in 750ms cubic-bezier(.2,.7,.2,1) both;
}
/* Subtle wave stagger so each card enters slightly after the previous */
.row > [class*="col-"]:nth-child(1) .mb-team-card.aos-animate { animation-delay: 0ms; }
.row > [class*="col-"]:nth-child(2) .mb-team-card.aos-animate { animation-delay: 60ms; }
.row > [class*="col-"]:nth-child(3) .mb-team-card.aos-animate { animation-delay: 120ms; }
.row > [class*="col-"]:nth-child(4) .mb-team-card.aos-animate { animation-delay: 180ms; }
.row > [class*="col-"]:nth-child(5) .mb-team-card.aos-animate { animation-delay: 60ms; }
.row > [class*="col-"]:nth-child(6) .mb-team-card.aos-animate { animation-delay: 120ms; }
.row > [class*="col-"]:nth-child(7) .mb-team-card.aos-animate { animation-delay: 180ms; }
.row > [class*="col-"]:nth-child(8) .mb-team-card.aos-animate { animation-delay: 240ms; }
/* While hovering, photo continues to zoom slowly (Ken Burns feel) */
.mb-team-card:hover img {
  animation: mb-team-hover-zoom 3.5s ease-out forwards;
}
/* Card itself gets a soft lift while hovered */
.mb-team-card {
  transition: transform 0.12s ease,
              box-shadow 400ms cubic-bezier(.2,.7,.2,1);
}
.mb-team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(15,29,39,0.18),
              0 30px 60px rgba(15,29,39,0.22);
}

/* ---- Portfolio tiles: cinematic hover reveal ---- */
.pf-tile .pf-meta {
  transform: translateY(8px);
  transition: transform 500ms cubic-bezier(.2,.7,.2,1),
              background 500ms ease;
}
.pf-tile .pf-tags {
  opacity: 0.85;
  transform: translateY(6px);
  transition: opacity 400ms ease 60ms, transform 400ms cubic-bezier(.2,.7,.2,1) 60ms;
}
.pf-tile .pf-title {
  transition: transform 500ms cubic-bezier(.2,.7,.2,1);
}
.pf-tile:hover .pf-meta {
  transform: translateY(0);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
}
.pf-tile:hover .pf-tags {
  opacity: 1;
  transform: translateY(0);
}
.pf-tile:hover .pf-title {
  transform: translateY(-2px);
}
/* Featured (large) tile: continuous slow Ken Burns at rest */
@keyframes mb-pf-main-kenburns {
  0%, 100% { transform: scale(1.02) translate(0, 0); }
  50%      { transform: scale(1.11) translate(-2%, -1.5%); }
}
.pf-tile--main img {
  animation: mb-pf-main-kenburns 14s ease-in-out infinite;
}
/* Pause the loop while hovering so the user-driven zoom takes over */
.pf-tile--main:hover img {
  animation-play-state: paused;
}

/* ---- Client logos in marquee: desaturate at rest, colour on hover ---- */
.mb-marquee .logo-item img {
  filter: grayscale(100%) brightness(0.85);
  opacity: 0.55;
  transition: filter 350ms ease, opacity 350ms ease, transform 350ms ease;
}
.mb-marquee .logo-item:hover img {
  filter: grayscale(0%) brightness(1);
  opacity: 1;
  transform: scale(1.08);
}

/* Section title underline — opt-in only via .mb-anim-underline on the h2 itself */
/* (No global display:inline-block rule — that breaks the default section-title layout) */

/* Update reduced-motion guard to cover new animations */
@media (prefers-reduced-motion: reduce) {
  .mb-team-card.aos-animate,
  .mb-team-card:hover img,
  .pf-tile--main img,
  .mb-marquee .logo-item img,
  .mb-stats__icon.is-peak,
  .mb-stats__title--xpass .mb-stats__title-line,
  .mb-about__title--xpass .mb-about__title-line,
  .mb-about__scope-title {
    animation: none !important;
    opacity: 1 !important;
  }
  .mb-about__meta > div,
  .mb-about__shelter-stats > div,
  .mb-about__scope-list li,
  .mb-about__values-title,
  .mb-about__scope-title {
    animation: none !important;
    transform: none !important;
    clip-path: none !important;
    opacity: 1 !important;
  }
}

/* ══════════════════════════════════════════════════════════
   CREATIVE FLICKS — Phase 12
   ══════════════════════════════════════════════════════════ */

/* 1. ABOUT INTRO TITLE — alternating prominence
   The two lines take turns being foreground/background in opacity.
   No movement — just a quiet, rhythmic conversation between the two ideas.
   ("rooted in Africa" leads, then "shaped for a global audience" leads.) */
.mb-about__title--xpass .mb-about__title-line {
  display: block;
  will-change: opacity;
}
@keyframes mb-about-prominence-lead {
  0%, 100% { opacity: 1; }
  45%, 55%  { opacity: 0.3; }
}
@keyframes mb-about-prominence-follow {
  0%, 100% { opacity: 0.3; }
  45%, 55%  { opacity: 1; }
}
.mb-about__intro-copy.aos-animate .mb-about__title-line--lr {
  animation: mb-about-prominence-lead 5s ease-in-out 400ms infinite;
}
.mb-about__intro-copy.aos-animate .mb-about__title-line--rl {
  animation: mb-about-prominence-follow 5s ease-in-out 400ms infinite;
}

/* 2. EYEBROW LABELS — ticket/board flip (rotateX drop) */
@keyframes mb-eyebrow-ticker {
  from {
    opacity: 0;
    transform: perspective(300px) rotateX(-90deg) translateY(-6px);
  }
  to {
    opacity: 1;
    transform: perspective(300px) rotateX(0deg) translateY(0);
  }
}
.aos-animate .mb-about__eyebrow,
.aos-animate .mb-subs__eyebrow,
.aos-animate .mb-stats__eyebrow {
  display: inline-block;
  transform-origin: top center;
  animation: mb-eyebrow-ticker 500ms cubic-bezier(.2,.7,.2,1) 200ms both;
}

/* 3. ABOUT META DL — cascade stagger slide-up */
@keyframes mb-dl-item-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mb-about__intro-copy.aos-animate .mb-about__meta > div {
  animation: mb-dl-item-in 450ms cubic-bezier(.2,.7,.2,1) both;
}
.mb-about__intro-copy.aos-animate .mb-about__meta > div:nth-child(1) { animation-delay: 520ms; }
.mb-about__intro-copy.aos-animate .mb-about__meta > div:nth-child(2) { animation-delay: 680ms; }
.mb-about__intro-copy.aos-animate .mb-about__meta > div:nth-child(3) { animation-delay: 840ms; }

/* 4. FIVE COMMITMENTS TITLE — ink-wipe clip-path left → right */
@keyframes mb-inkwipe-ltr {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0%   0 0); }
}
.mb-about__values-head.aos-animate .mb-about__values-title {
  animation: mb-inkwipe-ltr 1s cubic-bezier(.77, 0, .18, 1) 300ms both;
}

/* 5. SCOPE LIST — zig-zag (odd from left, even from right) */
@keyframes mb-scope-from-left {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes mb-scope-from-right {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: translateX(0); }
}
.mb-about__scope-body.aos-animate .mb-about__scope-list li {
  animation-duration: 480ms;
  animation-timing-function: cubic-bezier(.2,.7,.2,1);
  animation-fill-mode: both;
}
.mb-about__scope-body.aos-animate .mb-about__scope-list li:nth-child(odd)  { animation-name: mb-scope-from-left; }
.mb-about__scope-body.aos-animate .mb-about__scope-list li:nth-child(even) { animation-name: mb-scope-from-right; }
.mb-about__scope-body.aos-animate .mb-about__scope-list li:nth-child(1) { animation-delay: 180ms; }
.mb-about__scope-body.aos-animate .mb-about__scope-list li:nth-child(2) { animation-delay: 260ms; }
.mb-about__scope-body.aos-animate .mb-about__scope-list li:nth-child(3) { animation-delay: 340ms; }
.mb-about__scope-body.aos-animate .mb-about__scope-list li:nth-child(4) { animation-delay: 420ms; }
.mb-about__scope-body.aos-animate .mb-about__scope-list li:nth-child(5) { animation-delay: 500ms; }
.mb-about__scope-body.aos-animate .mb-about__scope-list li:nth-child(6) { animation-delay: 580ms; }
.mb-about__scope-body.aos-animate .mb-about__scope-list li:nth-child(7) { animation-delay: 660ms; }
.mb-about__scope-body.aos-animate .mb-about__scope-list li:nth-child(8) { animation-delay: 740ms; }

/* 6. SCOPE SECTION TITLE — camera blur-focus loop (filmic, not slidey) */
@keyframes mb-blur-focus-loop {
  0%   { filter: blur(10px); opacity: 0;   }
  20%  { filter: blur(0px);  opacity: 1;   }
  70%  { filter: blur(0px);  opacity: 1;   }
  88%  { filter: blur(10px); opacity: 0;   }
  100% { filter: blur(10px); opacity: 0;   }
}
.mb-about__scope-body.aos-animate .mb-about__scope-title {
  animation: mb-blur-focus-loop 8s ease-in-out 200ms infinite;
}

/* 7. SHELTER STATS DL — stagger pop */
.mb-about__shelter-body.aos-animate .mb-about__shelter-stats > div {
  animation: mb-dl-item-in 450ms cubic-bezier(.2,.7,.2,1) both;
}
.mb-about__shelter-body.aos-animate .mb-about__shelter-stats > div:nth-child(1) { animation-delay: 400ms; }
.mb-about__shelter-body.aos-animate .mb-about__shelter-stats > div:nth-child(2) { animation-delay: 560ms; }
.mb-about__shelter-body.aos-animate .mb-about__shelter-stats > div:nth-child(3) { animation-delay: 720ms; }

/* 8. SUBSIDIARIES TITLE — slow letter-spacing breathe (architectural, measured) */
@keyframes mb-subs-title-breathe {
  0%, 100% { letter-spacing: 0.01em; }
  45%, 55% { letter-spacing: 0.12em; }
}
.mb-subs__head.aos-animate .mb-subs__title {
  display: inline-block;
  animation: mb-subs-title-breathe 5s cubic-bezier(.45, 0, .55, 1) 400ms infinite;
}

/* 9. MISSION / VISION TAGS — departure-board flip (rotateX tick every 6s) */
@keyframes mb-mv-tag-tick {
  0%, 80%  { transform: perspective(220px) rotateX(0deg);   opacity: 1; }
  90%      { transform: perspective(220px) rotateX(-90deg); opacity: 0; }
  91%      { transform: perspective(220px) rotateX(90deg);  opacity: 0; }
  100%     { transform: perspective(220px) rotateX(0deg);   opacity: 1; }
}
.mb-about__mv-card.aos-animate .mb-about__mv-tag {
  display: inline-block;
  transform-origin: center center;
  animation: mb-mv-tag-tick 6s cubic-bezier(.68, -.55, .27, 1.55) 500ms infinite;
}
/* Offset so Mission and Vision don't flip in unison */
.mb-about__mv-card:nth-child(2).aos-animate .mb-about__mv-tag {
  animation-delay: 3.2s;
}

/* ══════════════════════════════════════════════════════════
   STATS TITLE — cross-pass slide animation
   Top line slides left → right; bottom line slides right → left.
   They cross each other in the middle, hold briefly, then exit
   to the opposite side and loop continuously.
   ══════════════════════════════════════════════════════════ */
.mb-stats__title--xpass {
  overflow: hidden;
  /* Reserve vertical space so passing lines don't cause layout shift */
}
.mb-stats__title--xpass .mb-stats__title-line {
  display: block;
  will-change: transform, opacity;
  /* Each line lives inside the same line-box but animates independently */
}
@keyframes mb-stats-title-pass-lr {
  0%   { transform: translateX(-115%); opacity: 0; }
  19%  { transform: translateX(0);     opacity: 1; }
  65%  { transform: translateX(0);     opacity: 1; }
  87%  { transform: translateX(115%);  opacity: 0; }
  100% { transform: translateX(115%);  opacity: 0; }
}
@keyframes mb-stats-title-pass-rl {
  0%   { transform: translateX(115%);  opacity: 0; }
  19%  { transform: translateX(0);     opacity: 1; }
  65%  { transform: translateX(0);     opacity: 1; }
  87%  { transform: translateX(-115%); opacity: 0; }
  100% { transform: translateX(-115%); opacity: 0; }
}
/* Only run once the section has scrolled into view */
.mb-stats__intro.aos-animate .mb-stats__title-line--lr {
  animation: mb-stats-title-pass-lr 8.5s cubic-bezier(.55, .05, .25, 1) 200ms infinite;
}
.mb-stats__intro.aos-animate .mb-stats__title-line--rl {
  animation: mb-stats-title-pass-rl 8.5s cubic-bezier(.55, .05, .25, 1) 200ms infinite;
}

/* ══════════════════════════════════════════════════════════
   HERO — Artistic entry (Phase 13)
   ══════════════════════════════════════════════════════════ */

/* H1 becomes a flex row so we can animate each word independently */
#hero h1.hero-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.28em;
  /* Unified fluid sizing — replaces the competing rules in style.css
     (`48px` desktop / `28px` <=768px step) and the generic h1 clamp
     in modern.css (line 67) which both targeted this title and caused
     a visible size jump around 720–768px on tablet-portrait. Specificity
     `#hero h1.hero-title` beats both. */
  font-size: clamp(2rem, 7vw, 3.75rem);   /* 32px → 60px fluid */
  line-height: 1.06;
  margin: 0 0 12px 0;
  /* Whole-title gentle float starts AFTER all words have landed */
  animation: mb-hero-title-drift 10s ease-in-out 2.2s infinite;
}
@keyframes mb-hero-title-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Per-word drop-in with spring overshoot */
@keyframes mb-hero-word-drop {
  0%   { opacity: 0; transform: translateY(-56px) skewX(4deg);  }
  65%  { opacity: 1; transform: translateY(6px)   skewX(-0.8deg); }
  82%  { opacity: 1; transform: translateY(-2px)  skewX(0.2deg); }
  100% { opacity: 1; transform: translateY(0)     skewX(0deg);  }
}
.hero-word {
  display: inline-block;
  animation: mb-hero-word-drop 800ms cubic-bezier(.2, .7, .2, 1) both;
}
#hero h1.hero-title .hero-word:nth-child(1) { animation-delay: 200ms; }
#hero h1.hero-title .hero-word:nth-child(2) { animation-delay: 390ms; }
#hero h1.hero-title .hero-word:nth-child(3) { animation-delay: 560ms; }
#hero h1.hero-title .hero-word:nth-child(4) { animation-delay: 720ms; }

/* H2 fades up after all words have settled */
#hero .hero-container h2 {
  animation: mb-hero-h2-in 900ms ease-out 1.2s both;
}
@keyframes mb-hero-h2-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Scanning sweep line ---- */
.hero-scan {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent      0%,
    rgba(255,255,255,0.16) 25%,
    rgba(255,255,255,0.22) 50%,
    rgba(255,255,255,0.16) 75%,
    transparent      100%
  );
  z-index: 2;
  pointer-events: none;
  animation: mb-hero-sweep 16s linear 2s infinite;
}
@keyframes mb-hero-sweep {
  0%   { top: -1px;  opacity: 0; }
  4%   {             opacity: 1; }
  94%  {             opacity: 0.6; }
  100% { top: 100%;  opacity: 0; }
}

/* ---- Viewfinder corner marks ---- */
.hero-viewfinder {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.hv-tl, .hv-tr, .hv-bl, .hv-br {
  position: absolute;
  width: 22px;
  height: 22px;
}
.hv-tl { top: 30px;    left: 30px; }
.hv-tr { top: 30px;    right: 30px; }
.hv-bl { bottom: 30px; left: 30px; }
.hv-br { bottom: 30px; right: 30px; }

/* Shared arm styles */
.hv-tl::before, .hv-tr::before, .hv-bl::before, .hv-br::before,
.hv-tl::after,  .hv-tr::after,  .hv-bl::after,  .hv-br::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.55);
}
/* Horizontal arms */
.hv-tl::before, .hv-bl::before { width: 22px; height: 1px; left:  0; }
.hv-tr::before, .hv-br::before { width: 22px; height: 1px; right: 0; }
/* Vertical arms */
.hv-tl::after,  .hv-tr::after  { width: 1px; height: 22px; top:    0; }
.hv-bl::after,  .hv-br::after  { width: 1px; height: 22px; bottom: 0; }
/* Left-side vertical arm anchors */
.hv-tl::after { left:  0; }
.hv-bl::after { left:  0; }
/* Right-side vertical arm anchors */
.hv-tr::after { right: 0; }
.hv-br::after { right: 0; }
/* Horizontal arm vertical anchors */
.hv-tl::before { top:    0; }
.hv-tr::before { top:    0; }
.hv-bl::before { bottom: 0; }
.hv-br::before { bottom: 0; }

/* Draw-in animations */
@keyframes mb-hv-h-from-left  { from { transform: scaleX(0); transform-origin: left;   opacity: 0; } to { transform: scaleX(1); transform-origin: left;   opacity: 1; } }
@keyframes mb-hv-h-from-right { from { transform: scaleX(0); transform-origin: right;  opacity: 0; } to { transform: scaleX(1); transform-origin: right;  opacity: 1; } }
@keyframes mb-hv-v-from-top   { from { transform: scaleY(0); transform-origin: top;    opacity: 0; } to { transform: scaleY(1); transform-origin: top;    opacity: 1; } }
@keyframes mb-hv-v-from-bot   { from { transform: scaleY(0); transform-origin: bottom; opacity: 0; } to { transform: scaleY(1); transform-origin: bottom; opacity: 1; } }

/* Stagger clockwise: TL → TR → BR → BL, each pair 120ms apart */
.hv-tl::before { animation: mb-hv-h-from-left  460ms cubic-bezier(.77,0,.18,1) 1.2s both; }
.hv-tl::after  { animation: mb-hv-v-from-top   460ms cubic-bezier(.77,0,.18,1) 1.3s both; }
.hv-tr::before { animation: mb-hv-h-from-right 460ms cubic-bezier(.77,0,.18,1) 1.4s both; }
.hv-tr::after  { animation: mb-hv-v-from-top   460ms cubic-bezier(.77,0,.18,1) 1.5s both; }
.hv-br::before { animation: mb-hv-h-from-right 460ms cubic-bezier(.77,0,.18,1) 1.6s both; }
.hv-br::after  { animation: mb-hv-v-from-bot   460ms cubic-bezier(.77,0,.18,1) 1.7s both; }
.hv-bl::before { animation: mb-hv-h-from-left  460ms cubic-bezier(.77,0,.18,1) 1.8s both; }
.hv-bl::after  { animation: mb-hv-v-from-bot   460ms cubic-bezier(.77,0,.18,1) 1.9s both; }

/* ---- Location caption (bottom right) ---- */
.hero-loc {
  position: absolute;
  bottom: 72px;
  right: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-nav, 'Inter', sans-serif);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  z-index: 4;
  transition: opacity 380ms ease;
  text-shadow:
    0 1px 4px rgba(0,0,0,0.7),
    0 0 12px rgba(0,0,0,0.5);
}
.hero-loc::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.6));
}
.hero-loc.is-fading { opacity: 0; }

/* ---- Slide counter (bottom left) ---- */
.hero-slide-num {
  position: absolute;
  bottom: 72px;
  left: 40px;
  font-family: var(--font-display, 'Raleway', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.75);
  z-index: 4;
  transition: opacity 380ms ease;
  text-shadow:
    0 1px 4px rgba(0,0,0,0.8),
    0 0 14px rgba(0,0,0,0.6);
}
.hero-slide-num.is-fading { opacity: 0; }

/* Phone-size adjustments — the H1 wraps to 2–3 lines on narrow viewports
   and the wrapped subtitle was colliding with the bottom-corner labels.
   Pull labels closer to the bottom edge, tighten in from the sides so
   they clear the viewfinder corner marks, and shrink the long location
   captions so they don't take 3 lines. */
@media (max-width: 575px) {
  .hero-loc {
    bottom: 22px;
    right: 16px;
    left: auto;
    max-width: 58%;
    font-size: 9px;
    letter-spacing: 0.16em;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hero-loc::before { width: 12px; }
  .hero-slide-num {
    bottom: 22px;
    left: 16px;
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  /* Viewfinder corner marks slightly shorter so they don't crowd the labels */
  .hv-tl, .hv-tr, .hv-bl, .hv-br { width: 16px; height: 16px; }
  .hv-tl { top: 16px;    left: 16px; }
  .hv-tr { top: 16px;    right: 16px; }
  .hv-bl { bottom: 56px; left: 16px; }
  .hv-br { bottom: 56px; right: 16px; }
  .hv-tl::before, .hv-bl::before,
  .hv-tr::before, .hv-br::before { width: 16px; }
  .hv-tl::after, .hv-tr::after,
  .hv-bl::after, .hv-br::after { height: 16px; }
}

/* Persistent dark gradient at the very bottom of the hero to ground both labels */
#hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 160px;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* Reduced motion overrides */
@media (prefers-reduced-motion: reduce) {
  .hero-word {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  #hero h1.hero-title { animation: none !important; }
  #hero .hero-container h2 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-scan { display: none; }
  .hv-tl::before, .hv-tl::after,
  .hv-tr::before, .hv-tr::after,
  .hv-bl::before, .hv-bl::after,
  .hv-br::before, .hv-br::after {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Floating label */
.mb-cf-mat__field label {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 0.95rem;
  color: #7a8a96;
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: left top;
}
.mb-cf-mat__field input:focus ~ label,
.mb-cf-mat__field input:not(:placeholder-shown) ~ label,
.mb-cf-mat__field textarea:focus ~ label,
.mb-cf-mat__field textarea:not(:placeholder-shown) ~ label {
  transform: translateY(-10px) scale(0.75);
  color: var(--mb-accent, #ff4a17);
}
/* placeholder trick — inputs need placeholder=" " */
.mb-cf-mat__field input::placeholder,
.mb-cf-mat__field textarea::placeholder {
  color: transparent;
}

/* Bottom bar (material indicator line) */
.mb-cf-mat__bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #dde1e5;
}
.mb-cf-mat__bar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--mb-accent, #ff4a17);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mb-cf-mat__field input:focus ~ .mb-cf-mat__bar::after,
.mb-cf-mat__field textarea:focus ~ .mb-cf-mat__bar::after {
  left: 0;
  width: 100%;
}

/* Material contained button */
.mb-cf-mat__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 14px 32px;
  border: none;
  border-radius: 24px;
  background: var(--mb-accent, #ff4a17);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(255,74,23,0.25);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.mb-cf-mat__btn:hover {
  background: #e03e10;
  box-shadow: 0 4px 16px rgba(255,74,23,0.35);
  transform: translateY(-1px);
}
.mb-cf-mat__btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(255,74,23,0.2);
}
.mb-cf-mat__btn--submit {
  background: var(--mb-heading, #273d4e);
  box-shadow: 0 2px 8px rgba(39,61,78,0.2);
}
.mb-cf-mat__btn--submit:hover {
  background: #1b2e3b;
  box-shadow: 0 4px 16px rgba(39,61,78,0.3);
}
.mb-cf-mat__btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
/* Inline error message shown below the submit button */
.mb-cf-mat__error {
  margin-top: 10px;
  font-size: 0.82rem;
  color: #c0392b;
  font-family: var(--font-nav, 'Inter', sans-serif);
}
/* Invalid field highlight */
.mb-cf-mat__field input.is-invalid,
.mb-cf-mat__field textarea.is-invalid {
  border-bottom-color: #c0392b !important;
}
.mb-cf-mat__field input.is-invalid ~ .mb-cf-mat__bar::before,
.mb-cf-mat__field input.is-invalid ~ .mb-cf-mat__bar::after {
  background: #c0392b !important;
  width: 50% !important;
}

/* Material chips (project type) */
.mb-cf-mat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mb-cf-mat__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: 1.5px solid #e2e6ea;
  border-radius: 20px;
  background: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--mb-heading, #273d4e);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.mb-cf-mat__chip i { font-size: 0.95rem; opacity: 0.6; }
.mb-cf-mat__chip:hover {
  border-color: var(--mb-accent, #ff4a17);
  background: rgba(255,74,23,0.04);
}
.mb-cf-mat__chip--selected {
  background: var(--mb-accent, #ff4a17);
  border-color: var(--mb-accent, #ff4a17);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255,74,23,0.2);
}
.mb-cf-mat__chip--selected i { opacity: 1; }

/* Done state */
.mb-cf-mat__done { text-align: center; }
.mb-cf-mat__done-icon {
  font-size: 3rem;
  color: #22c55e;
  margin-bottom: 16px;
  animation: matPop 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes matPop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

/* Responsive adjustments */
@media (max-width: 575px) {
  .mb-cf-mat__card { padding: 32px 20px; }
  .mb-cf-mat__chips { gap: 8px; }
  .mb-cf-mat__chip { padding: 8px 14px; font-size: 0.8rem; }
}

/* ══════════════════════════════════════════════════════════
   PREMIUM EFFECTS — scroll progress · custom cursor · view label
   ══════════════════════════════════════════════════════════ */

/* ── Scroll progress bar ─────────────────────────────────── */
#mb-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--mb-accent, #ff4a17) 0%, #ff7a50 100%);
  z-index: 99999;
  pointer-events: none;
  transition: width 60ms linear;
}

/* ── Custom cursor (desktop/hover-capable devices only) ───── */
#mb-cursor-dot,
#mb-cursor-ring {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  will-change: transform;
}
#mb-cursor-dot {
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--mb-accent, #ff4a17);
  transition: opacity 0.2s ease, transform 0.15s ease;
}
#mb-cursor-ring {
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  border: 1.5px solid var(--mb-accent, #ff4a17);
  opacity: 0.45;
  transition: opacity 0.3s ease, width 0.25s ease, height 0.25s ease, margin 0.25s ease;
}
body.mb-cursor--hover #mb-cursor-dot {
  transform: scale(2.2);
  opacity: 0.55;
}
body.mb-cursor--hover #mb-cursor-ring {
  width: 56px; height: 56px;
  margin: -28px 0 0 -28px;
  opacity: 0.18;
}
/* Hide on touch / coarse-pointer devices */
@media (hover: none), (pointer: coarse) {
  #mb-cursor-dot, #mb-cursor-ring { display: none !important; }
}

/* ── "View Project" floating label ───────────────────────── */
#mb-view-label {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 99997;
  background: var(--mb-accent, #ff4a17);
  color: #fff;
  font-family: var(--font-nav, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 100px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 16px)) scale(0.82);
  transition: opacity 0.2s ease, transform 0.2s ease;
  will-change: transform;
}
#mb-view-label.is-visible {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 16px)) scale(1);
}
@media (hover: none), (pointer: coarse) {
  #mb-view-label { display: none !important; }
}

/* ── Film grain ──────────────────────────────────────────── */
/* Desktop/mouse only — full-screen animated overlay caused
   compositor flicker on Android (S24 Ultra). Hidden on touch
   devices and when the user prefers reduced motion. */
#mb-grain { display: none; }
@media (hover: hover) and (pointer: fine) {
  #mb-grain {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 99985;
    pointer-events: none;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 220px 220px;
    animation: mb-grain 0.9s steps(9) infinite;
  }
}
@keyframes mb-grain {
  0%   { background-position:   0%   0%  }
  11%  { background-position: -11%  -9%  }
  22%  { background-position:  19%  14%  }
  33%  { background-position: -27%   4%  }
  44%  { background-position:   9% -22%  }
  55%  { background-position: -18%  27%  }
  66%  { background-position:  26%  -8%  }
  77%  { background-position:  -4%  17%  }
  88%  { background-position:  13%  -3%  }
  100% { background-position:   0%   0%  }
}

/* ── Ambient cursor glow ─────────────────────────────────── */
#mb-cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 600px; height: 600px;
  margin: -300px 0 0 -300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,74,23,0.06) 0%, transparent 62%);
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}
@media (hover: none), (pointer: coarse) {
  #mb-cursor-glow { display: none; }
}

/* ── Section ticker divider ──────────────────────────────── */
.mb-ticker {
  overflow: hidden;
  border-top: 1px solid var(--mb-line, rgba(39,61,78,0.1));
  border-bottom: 1px solid var(--mb-line, rgba(39,61,78,0.1));
  padding: 15px 0;
  background: #fff;
  user-select: none;
}
.mb-ticker__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: mb-ticker-roll 36s linear infinite;
}
.mb-ticker__track:hover { animation-play-state: paused; }
@keyframes mb-ticker-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.mb-ticker__item {
  font-family: var(--font-nav, 'Inter', sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--mb-heading, #273d4e);
  padding: 0 26px;
  white-space: nowrap;
}
.mb-ticker__dot {
  color: var(--mb-accent, #ff4a17);
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Nav active indicator dot ────────────────────────────── */
.navmenu > ul > li > a {
  position: relative;
}
.navmenu > ul > li > a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--mb-accent, #ff4a17);
  transform: translateX(-50%) scale(0);
  transition: transform 0.28s cubic-bezier(.2,.7,.2,1);
}
.navmenu > ul > li > a.active::after {
  transform: translateX(-50%) scale(1);
}

/* ── Reduced-motion: disable new looping animations ─────── */
@media (prefers-reduced-motion: reduce) {
  #mb-grain { animation: none !important; }
  .mb-ticker__track { animation: none !important; }
  .hero-container { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════
   CINEMATIC SHOWREEL BAND — 4 clips crossfading as one film
   ══════════════════════════════════════════════════════════ */
.mb-showreel {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #0a141d;
}
.mb-showreel__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.mb-showreel__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
  will-change: opacity;
}
/* Fade up from the dark band once the film starts playing */
.mb-showreel.is-playing .mb-showreel__video {
  opacity: 1;
}
/* Cinematic top-and-bottom scrim so the headline always reads */
.mb-showreel__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(8,16,24,0.55) 0%,
      rgba(8,16,24,0.12) 26%,
      rgba(8,16,24,0.30) 58%,
      rgba(8,16,24,0.90) 100%);
}
.mb-showreel__inner {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(48px, 7vw, 112px);
  padding-top: clamp(80px, 12vw, 160px);
  color: #fff;
}
.mb-showreel__eyebrow {
  font-family: var(--font-nav, "Inter", sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 12px;
  font-weight: 700;
  color: var(--mb-accent, #ff4a17);
  margin: 0 0 16px;
}
.mb-showreel__title {
  font-family: var(--font-display, "Raleway", sans-serif);
  font-weight: 800;
  font-size: clamp(30px, 5vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 0 0 20px;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0,0,0,0.35);
}
.mb-showreel__lead {
  font-family: var(--font-nav, "Inter", sans-serif);
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.62;
  max-width: 54ch;
  color: rgba(255,255,255,0.84);
  margin: 0;
}
/* Segmented progress — one bar per clip, active bar lit in accent */
.mb-showreel__progress {
  position: absolute;
  z-index: 2;
  right: clamp(20px, 4vw, 64px);
  bottom: clamp(28px, 5vw, 64px);
  display: flex;
  gap: 9px;
}
.mb-showreel__progress span {
  display: block;
  width: clamp(22px, 3vw, 38px);
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.26);
  transition: background 0.6s ease, transform 0.6s ease;
}
.mb-showreel__progress span.is-on {
  background: var(--mb-accent, #ff4a17);
  transform: scaleY(1.7);
}
@media (max-width: 767.98px) {
  .mb-showreel { min-height: 66vh; }
}
@media (prefers-reduced-motion: reduce) {
  .mb-showreel__video { transition: none; }
}