/* ══════════════════════════════════════════════════════════════
   MBN DIGITAL — STYLES
   Three layers concatenated in cascade order. Do not reorder.
     1. BASE           the site
     2. STUDIO FINISH  texture, lighting, depth
     3. ABOUT TONE     charcoal About section
   Layers 2 and 3 are additive and fenced with banners, so either
   can be deleted whole to revert that pass.
   ══════════════════════════════════════════════════════════════ */

/* ═══════════════════ 1. BASE ═══════════════════ */
/* ══════════════════════════════════════════════════════════════
   SETTINGS
   ══════════════════════════════════════════════════════════════ */
:root{
  --pink:        #FF4F9A;   /* brand accent: marks, cursor, small elements */
  --pink-field:  #F57FB1;   /* large backgrounds only, same hue at 48% sat instead of 69% */
  --yellow:      #FFD400;
  --ink:         #101010;
  --paper:       #F6F2E9;
  --ink-panel:   #191919;
  --ink-face:    #1E1E1E;
  --paper-panel: #EDE7DA;

  --font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-body:    'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif:   'Source Serif 4', Georgia, serif;

  --fs-hero:    clamp(44px, 6.6vw, 96px);
  --fs-h2:      clamp(30px, 4.2vw, 56px);
  --fs-h3:      clamp(19px, 1.6vw, 24px);
  --fs-lead:    clamp(17px, 1.35vw, 20px);
  --fs-body:    16px;
  --fs-small:   14.5px;
  --fs-label:   11.5px;
  --fs-stat:    clamp(30px, 3.4vw, 46px);

  --lh-display: 0.96;
  --lh-body:    1.62;
  --track-display: -0.025em;
  --track-label:    0.17em;
  --weight-body:    400;
  --weight-strong:  600;

  --container:  1240px;
  --gutter:     44px;
  --section-y:  126px;
  --stack-lg:   56px;
  --stack-md:   28px;
  --stack-sm:   14px;
  --grid-gap:   26px;
  --nav-h:      68px;

  --radius:     14px;
  --radius-lg:  22px;
  --radius-pill: 100px;
  --hairline:   rgba(16,16,16,0.16);
  --hairline-invert: rgba(246,242,233,0.20);
  --cube-seam:  rgba(16,16,16,0.30);

  --dur-fast: 0.18s;
  --dur:      0.34s;
  --dur-slow: 0.72s;
  --ease:     cubic-bezier(.22,.9,.3,1);
}

@media (max-width: 820px){
  :root{
    --gutter:    22px;
    --section-y: 84px;
    --stack-lg:  36px;
    --grid-gap:  18px;
    --fs-body:   15.5px;
    --nav-h:     58px;
    --lh-display: 1.0;
  }
}

*{ box-sizing:border-box; margin:0; padding:0; }
.mbn,.mbn *,.mbn *::before,.mbn *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px); }

.mbn{
  font-family:var(--font-body);
  font-weight:var(--weight-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  background:var(--paper);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.mbn img{ max-width:100%; display:block; }
.mbn a{ color:inherit; text-decoration:none; }
/* ── HOST STYLESHEET DEFENCE ──────────────────────────────────────
   Inheritance is the weakest thing in the cascade. When this page sits
   inside another site, a rule as plain as  h1{color:#fff}  applies
   directly to the element and beats the colour inherited from .mbn, no
   matter how specific .mbn is. Squarespace section colour themes do
   exactly that, which is why headings came out white on the live site.

   These force the affected elements back to inheriting, so colour flows
   from .mbn, .mbn-on-dark and the card containers again as designed.

   :where() contributes ZERO specificity, so this sits at plain class
   level and every component rule further down still wins. Placed here,
   near the top, so source order also favours the components.        */
.mbn :where(h1,h2,h3,h4,h5,h6,p,li,dt,dd,ul,ol,td,th,blockquote,figcaption,address,small){
  color:inherit;
}
/* the hero headline is the most visible casualty, so it is pinned
   outright rather than left to inherit */
.mbn-hero h1{ color:var(--ink); }
.mbn-hero h1 .accent{ color:var(--pink); }
.mbn button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
.mbn ul{ list-style:none; }
.mbn ::selection{ background:var(--pink); color:var(--paper); }

.mbn h1,.mbn h2,.mbn h3{
  font-family:var(--font-display);
  font-weight:400;
  line-height:var(--lh-display);
  letter-spacing:var(--track-display);
}

.mbn-wrap{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.mbn-section{ padding:var(--section-y) 0; }

.mbn-on-dark{ background:var(--ink); color:var(--paper); }
.mbn-on-dark h2,.mbn-on-dark h3,.mbn-on-dark p{ color:var(--paper); }
.mbn-on-dark{ --cube-seam:rgba(246,242,233,0.30); }

.mbn-label{
  display:inline-block; font-size:var(--fs-label); font-weight:700;
  letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--pink); margin-bottom:var(--stack-sm);
}
.mbn-on-dark .mbn-label{ color:var(--yellow); }
.mbn-lead{ font-size:var(--fs-lead); line-height:1.55; }

.mbn a:focus-visible,.mbn button:focus-visible,.mbn [tabindex]:focus-visible,
.mbn input:focus-visible,.mbn textarea:focus-visible,.mbn select:focus-visible{
  outline:3px solid var(--pink); outline-offset:3px; border-radius:2px;
}
.mbn-on-dark a:focus-visible,.mbn-on-dark button:focus-visible{ outline-color:var(--yellow); }

.mbn-skip{ position:absolute; left:-9999px; top:0; z-index:1000; background:var(--ink); color:var(--paper); padding:14px 20px; font-weight:700; }
.mbn-skip:focus{ left:12px; top:12px; }
.mbn-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── CUBE ─────────────────────────────────────────────────── */
.mbn-cube{ position:relative; width:100%; aspect-ratio:1/1; }
.mbn-cube i{
  position:absolute; inset:0; display:block;
  filter:drop-shadow(0 0 .7px var(--cube-seam));
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), opacity var(--dur-slow) var(--ease);
}
.mbn-cube .f-top{   background:var(--pink);     clip-path:polygon(50% 4%, 91% 27%, 50% 50%, 9% 27%); }
.mbn-cube .f-left{  background:var(--yellow);   clip-path:polygon(9% 27%, 50% 50%, 50% 96%, 9% 73%); }
.mbn-cube .f-right{ background:var(--ink-face); clip-path:polygon(91% 27%, 50% 50%, 50% 96%, 91% 73%); }
.mbn-on-dark .mbn-cube .f-right{ background:#333; }

/* ── BUTTONS ──────────────────────────────────────────────── */
.mbn-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-size:var(--fs-small); font-weight:700; letter-spacing:.01em;
  padding:15px 26px; border-radius:var(--radius-pill);
  transition:transform var(--dur-fast) var(--ease), background var(--dur-fast), color var(--dur-fast);
  border:2px solid transparent;
}
.mbn-btn:active{ transform:scale(.96); }
.mbn-btn svg{ transition:transform var(--dur-fast) var(--ease); }
.mbn-btn:hover svg{ transform:translateX(4px); }
.mbn-btn--solid{ background:var(--ink); color:var(--paper); }
.mbn-btn--solid:hover{ background:var(--pink); color:var(--ink); }
.mbn-btn--line{ border-color:var(--ink); color:var(--ink); }
.mbn-btn--line:hover{ background:var(--ink); color:var(--paper); }
.mbn-btn--sm{ padding:11px 20px; }
.mbn-on-dark .mbn-btn--solid{ background:var(--yellow); color:var(--ink); }
.mbn-on-dark .mbn-btn--solid:hover{ background:var(--pink); }
.mbn-on-dark .mbn-btn--line{ border-color:var(--paper); color:var(--paper); }
.mbn-on-dark .mbn-btn--line:hover{ background:var(--paper); color:var(--ink); }

/* ══ NAV ═══════════════════════════════════════════════════ */
.mbn-nav{
  position:fixed; top:0; left:0; right:0; z-index:600; height:var(--nav-h);
  display:flex; align-items:center;
  background:transparent; border-bottom:1px solid transparent;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), height var(--dur) var(--ease);
}
.mbn-nav.is-stuck{
  background:rgba(246,242,233,.90);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom-color:var(--hairline);
}
.mbn-nav__in{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.mbn-nav__brand{ display:flex; align-items:center; gap:11px; }
.mbn-nav__cube{ width:26px; flex-shrink:0; }
.mbn-nav__word{ font-family:var(--font-display); font-size:19px; letter-spacing:var(--track-display); }
.mbn-nav__links{ display:flex; align-items:center; gap:30px; }
.mbn-nav__links a{ font-size:var(--fs-small); font-weight:var(--weight-strong); position:relative; padding:6px 0; }
.mbn-nav__links a::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--pink); transition:width var(--dur) var(--ease); }
.mbn-nav__links a:hover::after,.mbn-nav__links a:focus-visible::after{ width:100%; }
.mbn-nav__burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; }
.mbn-burger{ position:relative; width:22px; height:22px; }
.mbn-burger i{ position:absolute; left:0; width:22px; height:2.5px; background:var(--ink); border-radius:2px; transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease), background var(--dur); }
.mbn-burger i:nth-child(1){ top:3px; }
.mbn-burger i:nth-child(2){ top:10px; }
.mbn-burger i:nth-child(3){ top:17px; }
.mbn-nav.is-open .mbn-burger i:nth-child(1){ transform:translateY(7px) rotate(45deg); background:var(--pink); }
.mbn-nav.is-open .mbn-burger i:nth-child(2){ opacity:0; }
.mbn-nav.is-open .mbn-burger i:nth-child(3){ transform:translateY(-7px) rotate(-45deg); background:var(--ink); }

/* ══ HERO ══════════════════════════════════════════════════ */
.mbn-hero{ padding:calc(var(--nav-h) + 62px) 0 var(--section-y); position:relative; }
.mbn-hero__grid{ display:grid; grid-template-columns:1.18fr .82fr; gap:60px; align-items:center; }
.mbn-hero__tag{
  display:inline-block; background:var(--yellow); color:var(--ink);
  font-size:var(--fs-label); font-weight:700; letter-spacing:var(--track-label);
  text-transform:uppercase; padding:9px 16px; border-radius:var(--radius-pill); margin-bottom:26px;
}
.mbn-hero h1{ font-size:var(--fs-hero); margin-bottom:var(--stack-md); }
.mbn-hero h1 .ln{ display:block; overflow:hidden; }
.mbn-hero h1 .ln > span{ display:block; }
.mbn-hero h1 .accent{ color:var(--pink); }
.mbn-hero__sub{ font-size:var(--fs-lead); line-height:1.55; max-width:540px; margin-bottom:36px; }
.mbn-hero__cta{ display:flex; gap:14px; flex-wrap:wrap; }
.mbn-hero__cube{ width:100%; max-width:400px; margin-left:auto; }

/* hero entrance */
.mbn-anim .mbn-hero__cube .f-top{  transform:translate(0,-165%); opacity:0; }
.mbn-anim .mbn-hero__cube .f-left{ transform:translate(-165%,42%); opacity:0; }
.mbn-anim .mbn-hero__cube .f-right{transform:translate(165%,42%); opacity:0; }
.mbn-anim .mbn-hero__tag,
.mbn-anim .mbn-hero__sub,
.mbn-anim .mbn-hero__cta{ opacity:0; transform:translateY(12px); }
.mbn-anim .mbn-hero h1 .ln > span{ transform:translateY(105%); }
.mbn-hero.is-in .mbn-hero__cube i{ transform:none; opacity:1; }
.mbn-hero.is-in .mbn-hero__tag{ opacity:1; transform:none; transition:opacity .5s var(--ease) .55s, transform .5s var(--ease) .55s; }
.mbn-hero.is-in h1 .ln > span{ transform:none; transition:transform .66s var(--ease) .78s; }
.mbn-hero.is-in .mbn-hero__sub{ opacity:1; transform:none; transition:opacity .5s var(--ease) 1.12s, transform .5s var(--ease) 1.12s; }
.mbn-hero.is-in .mbn-hero__cta{ opacity:1; transform:none; transition:opacity .5s var(--ease) 1.3s, transform .5s var(--ease) 1.3s; }

/* ══ POSITIONING ═══════════════════════════════════════════ */
.mbn-pos{ padding:calc(var(--section-y) * .62) 0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.mbn-pos p{ font-family:var(--font-display); font-size:clamp(24px,3.1vw,42px); line-height:1.22; letter-spacing:var(--track-display); max-width:26ch; }
.mbn-pos .hi{ color:var(--pink); }
.mbn-pos .box{ background:var(--yellow); padding:0 8px; }

/* ══ SECTION HEAD ══════════════════════════════════════════ */
.mbn-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:44px; margin-bottom:var(--stack-lg); flex-wrap:wrap; }
.mbn-head h2{ font-size:var(--fs-h2); }
.mbn-head__aside{ max-width:360px; font-size:var(--fs-body); }

/* ══ THREE SIDES ═══════════════════════════════════════════ */
.mbn-sides{ display:grid; grid-template-columns:1.12fr 1fr; gap:14px; }
.mbn-sides__col{ display:grid; gap:14px; align-content:stretch; }
.mbn-side{
  position:relative; display:flex; flex-direction:column; width:100%; text-align:left;
  background:var(--ink-panel); color:var(--paper);
  padding:32px 30px 28px; overflow:hidden; cursor:pointer;
  border:1px solid var(--hairline-invert);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  clip-path:polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
}
.mbn-side::before{ /* the assigned cube face, bled into the panel */
  content:''; position:absolute; right:-70px; bottom:-70px; width:210px; height:210px;
  background:var(--tone); opacity:.14; transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  clip-path:polygon(50% 0, 100% 28%, 50% 56%, 0 28%);
}
.mbn-side:hover{ background:#1F1F1F; }
.mbn-side:hover::before{ opacity:.2; }
.mbn-side.is-open{ background:#202020; border-color:var(--tone); }
.mbn-side.is-open::before{ opacity:.34; transform:translate(-8px,-8px) scale(1.05); }
.mbn-side--tall{ min-height:100%; }
.mbn-side__accent{ position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--tone); }
.mbn-side__cube{ position:absolute; top:24px; right:32px; width:34px; opacity:.9; transition:transform var(--dur) var(--ease); }
.mbn-side:hover .mbn-side__cube{ transform:translateY(-3px) rotate(6deg); }
.mbn-side.is-open .mbn-side__cube{ transform:translateY(-3px) rotate(6deg); }
.mbn-side__n{ display:block; font-size:var(--fs-label); font-weight:700; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--tone); margin-bottom:14px; }
.mbn-side h3{ font-size:clamp(26px,2.7vw,38px); margin-bottom:8px; }
.mbn-side__btn{ font:inherit; color:inherit; letter-spacing:inherit; text-align:left; padding:0; }
.mbn-side__btn::after{ content:''; position:absolute; inset:0; z-index:2; }
.mbn-side__btn:focus-visible{ outline:none; }
.mbn-side:has(.mbn-side__btn:focus-visible){ outline:3px solid var(--tone); outline-offset:3px; }
.mbn-side__btn:focus-visible::after{ outline:3px solid var(--tone); outline-offset:-3px; }
.mbn-side:has(.mbn-side__btn:focus-visible) .mbn-side__btn:focus-visible::after{ outline:none; }
.mbn-side__line{ font-family:var(--font-serif); font-style:italic; font-size:var(--fs-lead); color:var(--tone); margin-bottom:0; }
.mbn-side__hint{ display:flex; align-items:center; gap:9px; margin-top:auto; padding-top:22px; font-size:var(--fs-label); font-weight:700; letter-spacing:var(--track-label); text-transform:uppercase; }
.mbn-side__hint svg{ transition:transform var(--dur) var(--ease); }
.mbn-side.is-open .mbn-side__hint svg{ transform:rotate(180deg); }
.mbn-side__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur) var(--ease); }
.mbn-side.is-open .mbn-side__panel{ grid-template-rows:1fr; }
.mbn-side__panel > div{ overflow:hidden; }
/* clean ruled list, not a field of pills */
.mbn-side__list{ padding-top:20px; column-gap:30px; }
.mbn-side--tall .mbn-side__list{ columns:2; }
.mbn-side__list li{
  font-size:var(--fs-small); padding:9px 0 9px 16px; position:relative;
  border-bottom:1px solid var(--hairline-invert); break-inside:avoid;
}
.mbn-side__list li::before{ content:''; position:absolute; left:0; top:16px; width:7px; height:7px; background:var(--tone); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }

/* ══ WORK ══════════════════════════════════════════════════ */
/* widths are stated explicitly rather than inherited, so the cards
   hold their shape even when this page is embedded in another site
   whose stylesheet also touches span, svg and grid children */
.mbn-work__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--grid-gap); width:100%; }
.mbn-work__grid > *{ min-width:0; max-width:100%; }
.mbn-job{
  position:relative; display:block; width:100%; max-width:100%; padding:0;
  border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3;
  background:var(--paper-panel); cursor:pointer; text-align:left; border:0;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mbn-job--feature{ grid-column:span 2; aspect-ratio:16/7.4; }
.mbn-job--wide{ grid-column:span 2; aspect-ratio:16/6.4; }
.mbn-job:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(16,16,16,.13); }
.mbn-job__art{ position:absolute; inset:0; display:block; width:100%; }
.mbn-job__art svg{ display:block; width:100%; height:100%; max-width:100%; }
/* badges identify the work without leading the eye */
.mbn-job__tag,.mbn-job__flag{
  position:absolute; top:14px; z-index:3; max-width:44%;
  font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  padding:5px 10px; border-radius:var(--radius-pill); line-height:1.4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mbn-job__tag{ left:14px; background:rgba(246,242,233,.88); color:var(--ink); }
.mbn-job__flag{ right:14px; background:var(--yellow); color:var(--ink); }
.mbn-job__flag--alt{ background:rgba(16,16,16,.84); color:var(--paper); }
/* caption sits in roughly the bottom quarter so the cover art leads */
.mbn-job__body{
  position:absolute; left:0; right:0; bottom:0; z-index:2; display:block; width:100%;
  padding:16px 20px 18px; color:var(--paper);
  background:linear-gradient(0deg, rgba(16,16,16,.96) 0%, rgba(16,16,16,.88) 62%, rgba(16,16,16,0) 100%);
}
.mbn-job__client{ display:block; font-family:var(--font-display); font-size:22px; letter-spacing:var(--track-display); line-height:1.08; margin-bottom:5px; }
.mbn-job__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.mbn-job__meta{ display:block; font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--yellow); line-height:1.4; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* an explicit, always-visible cue that the card opens */
.mbn-job__cta{
  display:inline-flex; align-items:center; gap:7px; flex-shrink:0;
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); background:var(--yellow); padding:7px 12px; border-radius:var(--radius-pill);
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mbn-job__cta svg{ transition:transform var(--dur) var(--ease); }
.mbn-job:hover .mbn-job__cta{ background:var(--pink); }
.mbn-job:hover .mbn-job__cta svg{ transform:translate(2px,-2px); }
.mbn-job__sum{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; font-size:13.5px; line-height:1.45; }


/* ══ CASE STUDIES ══════════════════════════════════════════════
   Dark panels on the cream section so the figures carry the most
   weight on the page. Same devices as the service pillars: tone
   accent bar, corner notch, bled cube face.
   The figure row is a flex wrap, so a fourth metric (booked jobs,
   lead-to-customer rate, revenue, ROAS) can be dropped in later
   with no layout change at all.                                */
.mbn-cs{ display:grid; gap:var(--grid-gap); }
.mbn-cs__pair{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--grid-gap); }
.mbn-cs__card{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--ink-panel); color:var(--paper);
  border:1px solid var(--hairline-invert); padding:34px 34px 30px;
  clip-path:polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.mbn-cs__card::before{
  content:''; position:absolute; right:-72px; bottom:-72px; width:232px; height:232px;
  background:var(--tone); opacity:.13;
  clip-path:polygon(50% 0, 100% 28%, 50% 56%, 0 28%);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mbn-cs__card:hover{ background:#1F1F1F; transform:translateY(-3px); }
.mbn-cs__card:hover::before{ opacity:.2; transform:translate(-8px,-8px) scale(1.05); }
.mbn-cs__accent{ position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--tone); }
.mbn-cs__cat{ display:block; font-size:var(--fs-label); font-weight:700; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--tone); margin-bottom:16px; }
.mbn-cs__head{ font-family:var(--font-display); font-size:clamp(23px,2.5vw,32px); line-height:1.04; letter-spacing:var(--track-display); margin-bottom:12px; }
.mbn-cs--lead .mbn-cs__head{ font-size:clamp(34px,4.6vw,60px); max-width:14ch; }
.mbn-cs__sub{ font-size:var(--fs-small); line-height:1.6; max-width:54ch; margin-bottom:24px; }
.mbn-cs__figs{ display:flex; flex-wrap:wrap; gap:34px; padding:22px 0; border-top:1px solid var(--hairline-invert); border-bottom:1px solid var(--hairline-invert); }
.mbn-cs--lead .mbn-cs__figs{ gap:52px; }
.mbn-cs__fig b{ display:block; font-family:var(--font-display); font-size:var(--fs-stat); letter-spacing:var(--track-display); line-height:1; }
.mbn-cs--lead .mbn-cs__fig b{ font-size:clamp(34px,4vw,54px); }
.mbn-cs__fig span{ display:block; font-size:var(--fs-label); font-weight:700; letter-spacing:var(--track-label); text-transform:uppercase; margin-top:9px; opacity:.72; }
.mbn-cs__fig--tone b{ color:var(--tone); }
/* before and after, read left to right with the drop shown between */
.mbn-cs__ba{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:24px; }
.mbn-cs__ba > div{ min-width:96px; }
.mbn-cs__ba em{ display:block; font-style:normal; font-size:var(--fs-label); font-weight:700; letter-spacing:var(--track-label); text-transform:uppercase; opacity:.55; margin-bottom:5px; }
.mbn-cs__ba strong{ font-family:var(--font-display); font-size:22px; letter-spacing:var(--track-display); font-weight:400; }
.mbn-cs__ba .was strong{ opacity:.5; }
.mbn-cs__ba .now strong{ color:var(--tone); }
.mbn-cs__arrow{ width:34px; height:2px; background:var(--tone); position:relative; opacity:.7; }
.mbn-cs__arrow::after{ content:''; position:absolute; right:0; top:-3px; border-left:7px solid var(--tone); border-top:4px solid transparent; border-bottom:4px solid transparent; }
.mbn-cs__more{ display:flex; flex-wrap:wrap; gap:7px 26px; margin-top:22px; }
.mbn-cs__more li{ position:relative; font-size:var(--fs-small); padding-left:16px; }
.mbn-cs__more li::before{ content:''; position:absolute; left:0; top:9px; width:6px; height:6px; background:var(--tone); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.mbn-cs__tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; padding-top:26px; }
.mbn-cs__tags li{ font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--hairline-invert); border-radius:var(--radius-pill); padding:6px 11px; }
.mbn-cs__note{ margin-top:var(--stack-md); font-size:var(--fs-small); opacity:.72; }
.mbn-cs__divider{ margin-top:var(--stack-lg); padding-top:var(--stack-lg); border-top:1px solid var(--hairline); }

/* ══ CAMPAIGN PERFORMANCE ══════════════════════════════════ */
/* proof that sits under the work rather than competing with it */
.mbn-perf{ margin-top:var(--stack-lg); padding-top:var(--stack-lg); border-top:1px solid var(--hairline); }
.mbn-perf__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--grid-gap); margin-top:var(--stack-sm); }
.mbn-perf__item{ padding:30px 32px; border:1px solid var(--hairline); border-radius:var(--radius-lg); background:var(--paper-panel); }
.mbn-perf__cat{ display:block; font-size:var(--fs-label); font-weight:700; letter-spacing:var(--track-label); text-transform:uppercase; margin-bottom:22px; }
.mbn-perf__figs{ display:flex; flex-wrap:wrap; gap:34px; }
.mbn-perf__figs b{ display:block; font-family:var(--font-display); font-size:var(--fs-stat); letter-spacing:var(--track-display); line-height:1; }
.mbn-perf__figs span{ display:block; font-size:var(--fs-small); margin-top:8px; }
.mbn-perf__type{ display:block; margin-top:24px; padding-top:18px; border-top:1px solid var(--hairline); font-size:var(--fs-label); font-weight:700; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--pink); }
.mbn-perf__note{ margin-top:20px; font-size:var(--fs-small); }

/* ══ SOLUTIONS ═════════════════════════════════════════════ */
/* related to Services, deliberately quieter: ruled columns on paper
   rather than the dark panels the three campaign pillars use */
.mbn-sol__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--hairline); }
.mbn-sol__item{ padding:32px 34px 34px 0; border-right:1px solid var(--hairline); }
.mbn-sol__item:last-child{ border-right:0; padding-right:0; }
.mbn-sol__item + .mbn-sol__item{ padding-left:34px; }
.mbn-sol__n{ display:block; font-family:var(--font-display); font-size:14px; letter-spacing:var(--track-display); color:var(--pink); margin-bottom:16px; }
.mbn-sol__item h3{ font-size:var(--fs-h3); margin-bottom:12px; }
.mbn-sol__item p{ font-size:var(--fs-small); line-height:1.62; margin-bottom:20px; }
.mbn-sol__tags{ display:flex; flex-wrap:wrap; gap:7px; }
.mbn-sol__tags li{ position:relative; font-size:var(--fs-label); font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:7px 12px 7px 22px; border:1px solid var(--hairline); border-radius:var(--radius-pill); }
.mbn-sol__tags li::before{ content:''; position:absolute; left:10px; top:50%; margin-top:-3px; width:6px; height:6px; background:var(--pink); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.mbn-sol__cta{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:var(--stack-lg); padding-top:var(--stack-md); border-top:1px solid var(--hairline); }
.mbn-sol__cta p{ font-family:var(--font-display); font-size:clamp(20px,2.2vw,28px); letter-spacing:var(--track-display); }
/* Proof, Growth Systems and Process run three paper sections in a row.
   With no colour change at those joins, a full pad on both sides reads as
   an empty band, which is most obvious under the short CTA line. Halved on
   each side, so each join is one section's worth of space instead of two. */
.mbn-proof,
.mbn-sol{ padding-bottom:calc(var(--section-y) * 0.45); }

/* The closing CTA and the footer are both dark, so the full pad on each
   side of that join has no colour change to justify it and reads as an
   empty band. Trimmed on both sides. The FAQ is pulled in a little too,
   since it ends on a thin accordion row and the void below it was the
   next largest gap on the page. */
.mbn-cta{ padding-bottom:calc(var(--section-y) * 0.42); }
.mbn-foot{ padding-top:42px; }
#faq{ padding-bottom:calc(var(--section-y) * 0.66); }
.mbn-cta__sub{ margin-bottom:32px; }
.mbn-cta__btns{ margin-bottom:28px; }

.mbn-sol,
.mbn-sol + .mbn-section{ padding-top:calc(var(--section-y) * 0.55); }


/* ══ GROWTH SYSTEMS TEASER ═════════════════════════════════════
   A compact cream band sitting between two dark sections, so it
   reads as a deliberate breather rather than a fourth pillar.
   Roughly half the vertical padding of a real section, and it
   borrows the diamond marker already used across the site rather
   than introducing a new motif.                                */
.mbn-gsx{ padding:calc(var(--section-y) * .52) 0; }
.mbn-gsx__in{ display:grid; grid-template-columns:auto 1fr auto; gap:40px; align-items:center; }
.mbn-gsx__mark{ width:78px; height:78px; flex-shrink:0; }
.mbn-gsx__mark line{ stroke:var(--hairline); stroke-width:2; }
.mbn-gsx__mark polygon{ transition:transform var(--dur) var(--ease); transform-origin:center; transform-box:fill-box; }
.mbn-gsx:hover .mbn-gsx__mark polygon{ transform:scale(1.22); }
.mbn-gsx__mark polygon:nth-of-type(2){ transition-delay:.06s; }
.mbn-gsx__mark polygon:nth-of-type(3){ transition-delay:.12s; }
.mbn-gsx__body h2{ font-size:clamp(24px,2.9vw,38px); margin-bottom:10px; }
.mbn-gsx__body p{ font-size:var(--fs-body); line-height:1.6; max-width:56ch; }
.mbn-gsx__list{ display:block; margin-top:16px; font-size:var(--fs-label); font-weight:700; letter-spacing:var(--track-label); text-transform:uppercase; opacity:.6; }
.mbn-gsx__cta{ white-space:nowrap; }
.mbn-gsx__cta svg{ transition:transform var(--dur-fast) var(--ease); }
.mbn-gsx__cta:hover svg{ transform:translateY(3px); }

/* ══ HOW IT CONNECTS ═══════════════════════════════════════ */
.mbn-hiw{ --tone:var(--pink); }
/* legend names the three sides, so the ring itself stays uncluttered */
.mbn-hiw__legend{ display:flex; justify-content:center; gap:32px; flex-wrap:wrap; margin-bottom:24px; }
.mbn-hiw__leg{ display:flex; align-items:center; gap:9px; font-size:var(--fs-label); font-weight:700; letter-spacing:var(--track-label); text-transform:uppercase; }
.mbn-hiw__leg i{ width:11px; height:11px; background:var(--gtone); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
/* 16:10.5 keeps the ring a true circle rather than a stretched ellipse */
.mbn-hiw__stage{ position:relative; aspect-ratio:16/13; max-width:1020px; margin:0 auto; }
.mbn-hiw__ring{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.mbn-hiw__ring ellipse{ fill:none; stroke:var(--paper); stroke-opacity:.15; }
.mbn-hiw__ring line{ stroke:var(--tone); stroke-width:2; opacity:0; transition:opacity var(--dur) var(--ease); }
.mbn-hiw__ring line.is-on{ opacity:.85; }
/* faint marker for the cube resting position at the centre of the ring */
.mbn-hiw__origin{ position:absolute; left:50%; top:50%; width:11%; aspect-ratio:1/1; transform:translate(-50%,-50%); opacity:.2; }
.mbn-hiw__origin polygon{ fill:none; stroke:var(--paper); stroke-width:1.5; }
.mbn-hiw__cube{
  position:absolute; left:calc(50% + var(--cx,0%)); top:calc(50% + var(--cy,0%));
  width:11%; transform:translate(-50%,-50%) rotate(var(--cr,0deg));
  transition:left var(--dur-slow) var(--ease), top var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.mbn-hiw__cube i{ transition:opacity var(--dur) var(--ease), background var(--dur) var(--ease); }
.mbn-cube.on-creative .f-left,.mbn-cube.on-creative .f-right{ opacity:.32; }
.mbn-cube.on-content .f-top,.mbn-cube.on-content .f-right{ opacity:.32; }
.mbn-cube.on-paid .f-top,.mbn-cube.on-paid .f-left{ opacity:.32; }
.mbn-cube.on-paid .f-right{ background:var(--paper); }
/* items sit on the circumference */
.mbn-hiw__item{
  display:inline-flex; align-items:center; gap:9px;
  font-size:var(--fs-small); font-weight:var(--weight-strong); text-align:left;
  background:var(--ink-panel); color:var(--paper); border:1px solid var(--hairline-invert);
  border-radius:var(--radius-pill); padding:9px 15px; white-space:nowrap;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease);
}
.mbn-hiw__item i{ width:7px; height:7px; flex-shrink:0; background:var(--gtone); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); transition:background var(--dur-fast); }
.mbn-hiw__item:hover{ border-color:var(--gtone); }
.mbn-hiw__item.is-on{ background:var(--gtone); color:var(--ink); border-color:var(--gtone); }
.mbn-hiw__item.is-on i{ background:var(--ink); }
.mbn-hiw__item.tone-paid.is-on{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.mbn-hiw__stage .mbn-hiw__item{ position:absolute; transform:translate(-50%,-50%); font-size:13.5px; padding:8px 14px; }
/* on the left half the marker flips to the inner edge, so every diamond faces the cube */
.mbn-hiw__item.is-mirrored{ flex-direction:row-reverse; }
.mbn-hiw__stage .mbn-hiw__item:hover{ transform:translate(-50%,-50%) translateY(-2px); }
.mbn-hiw__stage .mbn-hiw__item.is-on{ transform:translate(-50%,-50%) scale(1.06); }
.mbn-hiw__read{ max-width:640px; margin:34px auto 0; text-align:center; min-height:62px; }
.mbn-hiw__read p{ font-size:var(--fs-lead); line-height:1.5; }
.mbn-hiw__read b{ color:var(--tone); font-weight:700; }
.mbn-hiw__m{ display:none; }
/* ── mobile: three expandable sides ─────────────────────────── */
.mbn-hiw__mgrp{ border-top:1px solid var(--hairline-invert); }
.mbn-hiw__mgrp:last-child{ border-bottom:1px solid var(--hairline-invert); }
.mbn-hiw__mhead{ width:100%; display:flex; align-items:center; gap:14px; padding:20px 0; text-align:left; }
.mbn-hiw__mcube{ width:30px; flex-shrink:0; }
.mbn-hiw__mcube i{ transition:opacity var(--dur) var(--ease); }
.mbn-hiw__mgrp[data-side="creative"] .mbn-hiw__mcube .f-left,.mbn-hiw__mgrp[data-side="creative"] .mbn-hiw__mcube .f-right{ opacity:.3; }
.mbn-hiw__mgrp[data-side="content"] .mbn-hiw__mcube .f-top,.mbn-hiw__mgrp[data-side="content"] .mbn-hiw__mcube .f-right{ opacity:.3; }
.mbn-hiw__mgrp[data-side="paid"] .mbn-hiw__mcube .f-top,.mbn-hiw__mgrp[data-side="paid"] .mbn-hiw__mcube .f-left{ opacity:.3; }
.mbn-hiw__mgrp[data-side="paid"] .mbn-hiw__mcube .f-right{ background:var(--paper); }
.mbn-hiw__mtitle{ flex:1; font-family:var(--font-display); font-size:19px; letter-spacing:var(--track-display); }
.mbn-hiw__mchev{ transition:transform var(--dur) var(--ease); }
.mbn-hiw__mgrp.is-open .mbn-hiw__mchev{ transform:rotate(180deg); }
.mbn-hiw__mpanel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur) var(--ease); }
.mbn-hiw__mgrp.is-open .mbn-hiw__mpanel{ grid-template-rows:1fr; }
.mbn-hiw__mpanel > div{ overflow:hidden; }
.mbn-hiw__mitems{ display:flex; flex-wrap:wrap; gap:8px; padding-bottom:14px; }
.mbn-hiw__mread{ font-size:var(--fs-small); padding:0 0 20px; }
.mbn-hiw__mread b{ color:var(--gtone); }

/* ══ PROOF ═════════════════════════════════════════════════ */
.mbn-proof{ background:var(--paper); }
.mbn-proof__metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--grid-gap); margin-bottom:var(--stack-lg); }
.mbn-proof__m{ padding:26px 24px; background:var(--paper-panel); border-radius:var(--radius-lg); }
.mbn-proof__m b{ display:block; font-family:var(--font-display); font-size:var(--fs-stat); letter-spacing:var(--track-display); margin-bottom:6px; }
.mbn-proof__m span{ display:block; font-size:var(--fs-small); font-weight:var(--weight-strong); }
.mbn-proof__m em{ display:block; font-style:normal; font-size:var(--fs-label); font-weight:700; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--pink); margin-top:10px; }
.mbn-proof__cols{ display:grid; grid-template-columns:1fr 1fr; gap:var(--stack-lg); padding-top:var(--stack-lg); border-top:1px solid var(--hairline); }
.mbn-proof__col h3{ font-size:var(--fs-h3); margin-bottom:18px; }
.mbn-proof__tags{ display:flex; flex-wrap:wrap; gap:8px; }
.mbn-proof__tags li{ font-size:var(--fs-small); font-weight:var(--weight-strong); border:1px solid var(--hairline); border-radius:var(--radius-pill); padding:8px 14px; }
.mbn-proof__caps li{ display:flex; gap:12px; align-items:flex-start; font-size:var(--fs-body); padding:11px 0; border-bottom:1px solid var(--hairline); }
.mbn-proof__caps li:last-child{ border-bottom:0; }
.mbn-proof__caps svg{ flex-shrink:0; margin-top:5px; }

/* ══ PROCESS ═══════════════════════════════════════════════ */
.mbn-step{ position:relative; z-index:0; display:grid; grid-template-columns:150px 1fr; gap:32px; padding:40px 0; border-top:1px solid var(--hairline); align-items:start; }
.mbn-steps .mbn-step:last-child{ border-bottom:1px solid var(--hairline); }
/* highlight is painted by a pseudo-element inset from the wrapper, so text never moves */
.mbn-step::before{
  content:''; position:absolute; inset:7px -22px; z-index:-1;
  background:var(--yellow); border-radius:var(--radius);
  opacity:0; transition:opacity var(--dur) var(--ease);
}
.mbn-step.is-on::before{ opacity:1; }
.mbn-step.is-on{ border-top-color:transparent; }
.mbn-step__n{ font-family:var(--font-display); font-size:var(--fs-stat); letter-spacing:var(--track-display); color:var(--pink); transition:color var(--dur); }
.mbn-step h3{ font-size:var(--fs-h3); margin-bottom:8px; }
.mbn-step p{ max-width:58ch; }
.mbn-step.is-on .mbn-step__n{ color:var(--ink); }

/* ══ ABOUT ═════════════════════════════════════════════════ */
.mbn-about{ background:var(--pink-field); color:var(--ink); }
.mbn-about .mbn-label{ color:var(--ink); }
.mbn-about h2{ font-size:var(--fs-h2); margin-bottom:var(--stack-md); color:var(--ink); }
.mbn-about p{ font-size:var(--fs-lead); line-height:1.55; max-width:62ch; color:var(--ink); }
.mbn-about p + p{ margin-top:18px; }
.mbn-about .fine{ font-size:var(--fs-body); font-weight:var(--weight-strong); margin-top:24px; }

/* ══ FAQ ═══════════════════════════════════════════════════ */
.mbn-faq__list{ border-top:1px solid var(--hairline); }
.mbn-faq__item{ border-bottom:1px solid var(--hairline); margin:0 -18px; padding:0 18px; border-radius:var(--radius); transition:background var(--dur) var(--ease); }
.mbn-faq__item.is-open{ background:var(--paper-panel); }
.mbn-faq__q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:28px; padding:26px 0; text-align:left; font-family:var(--font-body); font-size:var(--fs-lead); font-weight:var(--weight-strong); line-height:1.4; }
.mbn-faq__q:hover{ color:var(--pink); }
.mbn-faq__ico{ flex-shrink:0; width:26px; height:26px; border-radius:50%; border:1.5px solid var(--ink); display:flex; align-items:center; justify-content:center; transition:all var(--dur) var(--ease); }
.mbn-faq__item.is-open .mbn-faq__ico{ background:var(--pink); border-color:var(--pink); transform:rotate(180deg); }
.mbn-faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur) var(--ease); }
.mbn-faq__item.is-open .mbn-faq__a{ grid-template-rows:1fr; }
.mbn-faq__a > div{ overflow:hidden; }
.mbn-faq__a p{ font-size:var(--fs-small); max-width:74ch; padding-bottom:28px; }

/* ══ FINAL CTA ═════════════════════════════════════════════ */
.mbn-cta{ text-align:center; }
.mbn-cta h2{ font-size:var(--fs-hero); margin-bottom:var(--stack-md); }
.mbn-cta__sub{ font-size:var(--fs-lead); max-width:54ch; margin:0 auto 40px; }
.mbn-cta__btns{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:34px; }
.mbn-cta__row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; align-items:center; font-size:var(--fs-small); font-weight:var(--weight-strong); margin-bottom:18px; }
.mbn-cta__row a:hover{ color:var(--yellow); }
.mbn-cta__dot{ color:var(--pink); }
.mbn-cta__social{ display:flex; gap:24px; justify-content:center; font-size:var(--fs-label); font-weight:700; letter-spacing:var(--track-label); text-transform:uppercase; }
.mbn-cta__social a:hover{ color:var(--yellow); }

/* ══ FOOTER ════════════════════════════════════════════════ */
.mbn-foot{ background:var(--ink); color:var(--paper); border-top:1px solid var(--hairline-invert); padding:52px 0 30px; --cube-seam:rgba(246,242,233,0.30); }
.mbn-foot__top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:34px; border-bottom:1px solid var(--hairline-invert); }
.mbn-foot__brand{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.mbn-foot__cube{ width:30px; }
.mbn-foot__word{ font-family:var(--font-display); font-size:20px; letter-spacing:var(--track-display); }
.mbn-foot__desc{ font-size:var(--fs-label); font-weight:700; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--yellow); }
.mbn-foot__cols{ display:flex; gap:60px; flex-wrap:wrap; }
.mbn-foot__col h3{ font-family:var(--font-body); font-size:var(--fs-label); font-weight:700; letter-spacing:var(--track-label); text-transform:uppercase; line-height:1.4; margin-bottom:14px; }
.mbn-foot__col a,.mbn-foot__col p{ display:block; font-size:var(--fs-small); margin-bottom:9px; }
.mbn-foot__col a:hover{ color:var(--yellow); }
.mbn-foot__bot{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:24px; font-size:var(--fs-small); }
.mbn-foot__bot a:hover{ color:var(--yellow); }

/* ══ OVERLAYS ══════════════════════════════════════════════ */
.mbn-ov{ position:fixed; inset:0; z-index:900; background:var(--paper); color:var(--ink); display:none; flex-direction:column; overflow-y:auto; }
.mbn-ov.is-open{ display:flex; animation:mbnOvIn .42s var(--ease); }
@keyframes mbnOvIn{ from{ transform:translateY(3%); opacity:0; } to{ transform:none; opacity:1; } }
.mbn-ov__bar{ position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; padding:18px var(--gutter); background:var(--paper); border-bottom:1px solid var(--hairline); }
.mbn-ov__title{ font-family:var(--font-display); font-size:17px; letter-spacing:var(--track-display); }
.mbn-ov__x{ width:44px; height:44px; border-radius:50%; border:2px solid var(--ink); display:flex; align-items:center; justify-content:center; transition:all var(--dur) var(--ease); }
.mbn-ov__x:hover{ background:var(--ink); color:var(--paper); transform:rotate(90deg); }
.mbn-ov__in{ width:100%; max-width:880px; margin:0 auto; padding:44px var(--gutter) 100px; }
.mbn-ov__tag{ display:inline-block; background:var(--yellow); font-size:var(--fs-label); font-weight:700; letter-spacing:var(--track-label); text-transform:uppercase; padding:8px 14px; border-radius:var(--radius-pill); margin-bottom:18px; }
.mbn-ov__tag--alt{ background:var(--ink); color:var(--paper); }
.mbn-ov__in h2{ font-size:var(--fs-h2); margin-bottom:26px; }
.mbn-ov__art{ border-radius:var(--radius-lg); overflow:hidden; margin-bottom:36px; aspect-ratio:16/9; }
.mbn-ov__art svg{ width:100%; height:100%; display:block; }
.mbn-ov__blk{ margin-bottom:26px; }
.mbn-ov__blk h4{ font-size:var(--fs-label); font-weight:700; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--pink); margin-bottom:9px; }
/* the full case study opens inside this same overlay, never a new dialog */
.mbn-ov__more{
  display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%;
  margin-top:32px; padding:18px 22px; border:2px solid var(--ink); border-radius:var(--radius);
  font-size:var(--fs-small); font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mbn-ov__more:hover{ background:var(--ink); color:var(--paper); }
.mbn-ov__more svg{ flex-shrink:0; transition:transform var(--dur) var(--ease); }
.mbn-ov__more[aria-expanded="true"] svg{ transform:rotate(180deg); }
.mbn-ov__deep{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur-slow) var(--ease); }
.mbn-ov__deep.is-open{ grid-template-rows:1fr; }
.mbn-ov__deep > div{ overflow:hidden; }
.mbn-ov__deep-in{ padding-top:36px; }
.mbn-ov__glance{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:var(--radius); overflow:hidden; margin-bottom:36px; }
.mbn-ov__glance > div{ background:var(--paper); padding:16px 18px; }
.mbn-ov__glance dt{ font-size:var(--fs-label); font-weight:700; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--pink); margin-bottom:7px; }
.mbn-ov__glance dd{ font-family:var(--font-display); font-size:18px; letter-spacing:var(--track-display); }
.mbn-ov__sec{ margin-bottom:38px; }
.mbn-ov__sec h3{ font-size:clamp(21px,2.3vw,29px); margin:9px 0 15px; }
.mbn-ov__sec > p{ font-size:var(--fs-body); line-height:1.65; max-width:66ch; margin-bottom:13px; }
.mbn-ov__steps{ margin-top:14px; }
.mbn-ov__steps li{ display:grid; grid-template-columns:46px 1fr; gap:16px; padding:17px 0; border-top:1px solid var(--hairline); }
.mbn-ov__steps b{ font-family:var(--font-display); font-size:15px; letter-spacing:var(--track-display); color:var(--pink); }
.mbn-ov__steps strong{ display:block; font-weight:700; margin-bottom:5px; }
.mbn-ov__steps span{ display:block; font-size:var(--fs-small); line-height:1.6; }
.mbn-ov__points{ margin-top:6px; }
.mbn-ov__points li{ display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--hairline); font-size:var(--fs-small); line-height:1.55; }
.mbn-ov__points li:last-child{ border-bottom:0; }
.mbn-ov__points svg{ flex-shrink:0; margin-top:5px; }
.mbn-ov__reslabel{ font-size:var(--fs-label); font-weight:700; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--pink); }
.mbn-ov__reslabel + .mbn-ov__stats{ margin-top:10px; }
.mbn-ov__stats{ display:flex; gap:44px; flex-wrap:wrap; margin:32px 0; padding:26px 0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.mbn-ov__stat b{ display:block; font-family:var(--font-display); font-size:var(--fs-stat); letter-spacing:var(--track-display); }
.mbn-ov__stat span{ font-size:var(--fs-label); font-weight:700; letter-spacing:var(--track-label); text-transform:uppercase; }
.mbn-ov__apps{ display:flex; flex-wrap:wrap; gap:9px; margin-top:8px; }
.mbn-ov__apps li{ font-size:var(--fs-small); font-weight:var(--weight-strong); background:var(--paper-panel); border-radius:var(--radius-pill); padding:9px 15px; }
.mbn-ov__pal{ display:flex; gap:8px; margin-top:8px; }
.mbn-ov__sw{ width:50px; height:50px; border-radius:8px; border:1px solid var(--hairline); }
.mbn-note{ font-size:var(--fs-small); font-weight:var(--weight-strong); padding:15px 18px; border-radius:var(--radius); }
.mbn-note--real{ background:var(--yellow); }
.mbn-note--plain{ background:var(--paper-panel); border:1px solid var(--hairline); }
.mbn-ov__cta{ margin-top:34px; padding-top:30px; border-top:1px solid var(--hairline); }

/* ══ LEGAL DOCUMENT ════════════════════════════════════════ */
.mbn-legal h2{ margin-bottom:8px; }
.mbn-legal__meta{ font-size:var(--fs-label); font-weight:700; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--pink); margin-bottom:26px; }
.mbn-legal__lead{ font-size:var(--fs-lead); line-height:1.6; margin-bottom:10px; }
.mbn-legal h3{ font-size:var(--fs-h3); margin:38px 0 12px; }
.mbn-legal p{ font-size:var(--fs-body); line-height:1.68; margin-bottom:12px; max-width:70ch; }
.mbn-legal ul{ margin:0 0 12px; max-width:70ch; }
.mbn-legal li{ position:relative; font-size:var(--fs-body); line-height:1.62; padding:7px 0 7px 20px; }
.mbn-legal li::before{ content:''; position:absolute; left:0; top:16px; width:7px; height:7px; background:var(--pink); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.mbn-legal a{ text-decoration:underline; text-underline-offset:3px; }
.mbn-legal a:hover{ color:var(--pink); }

/* ══ FORM ══════════════════════════════════════════════════ */
.mbn-f{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.mbn-f label,.mbn-fs__legend{ font-size:var(--fs-label); font-weight:700; letter-spacing:var(--track-label); text-transform:uppercase; }
.mbn-f input,.mbn-f textarea,.mbn-f select{
  font-family:inherit; font-size:var(--fs-body); color:var(--ink);
  background:var(--paper-panel); border:2px solid transparent; border-radius:var(--radius); padding:14px 16px;
  transition:border-color var(--dur-fast);
}
.mbn-f input:focus,.mbn-f textarea:focus,.mbn-f select:focus{ border-color:var(--pink); outline:none; }
.mbn-f input[aria-invalid="true"],.mbn-f textarea[aria-invalid="true"]{ border-color:#B3261E; }
.mbn-f__err{ font-size:var(--fs-small); font-weight:var(--weight-strong); color:#B3261E; min-height:0; }
.mbn-f2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.mbn-fs{ border:0; margin-bottom:20px; }
.mbn-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.mbn-chip{ position:relative; }
.mbn-chip input{ position:absolute; opacity:0; width:100%; height:100%; left:0; top:0; margin:0; cursor:pointer; }
.mbn-chip span{ display:block; border:2px solid var(--hairline); border-radius:var(--radius-pill); padding:10px 17px; font-size:var(--fs-small); font-weight:var(--weight-strong); transition:all var(--dur-fast); }
.mbn-chip input:checked + span{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.mbn-chip input:focus-visible + span{ outline:3px solid var(--pink); outline-offset:3px; }
.mbn-form__status{ margin-top:20px; }
.mbn-form__status:empty{ margin-top:0; }
.mbn-form__note{ font-size:var(--fs-small); background:var(--paper-panel); border:1px dashed var(--hairline); border-radius:var(--radius); padding:14px 16px; margin-bottom:24px; }
.mbn-btn[disabled]{ opacity:.55; cursor:not-allowed; }

/* ══ HOST PAGE TRIM ════════════════════════════════════════════
   This block styles the SITE AROUND the embed, not the embed itself.
   It is here rather than in Squarespace's Custom CSS so it travels with
   the file. Delete the whole block to hand control back to the host.

   Squarespace wraps a code block in a padded .sqs-block inside a padded
   .page-section, and renders its own footer section underneath. This
   page ships its own footer, so that host footer is empty and shows as
   a blank band below the dark one. :has() scopes the padding rules to
   the section holding this embed, so no other page is touched.      */
.page-section:has(#mbn),
section:has(> .content-wrapper #mbn){ padding-top:0 !important; padding-bottom:0 !important; }
.sqs-block:has(#mbn),
.sqs-block-content:has(#mbn){ padding:0 !important; }
.sqs-layout:has(#mbn) .sqs-row,
.sqs-layout:has(#mbn) .sqs-block-code{ margin:0 !important; }
/* the host footer is empty because this file provides one */
#footer-sections{ display:none !important; }

/* ══ REVEALS ═══════════════════════════════════════════════ */
.rv{ opacity:0; transform:translateY(24px); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.rv.in{ opacity:1; transform:none; }

/* ══ RESPONSIVE ════════════════════════════════════════════ */
@media (max-width:1080px){
  .mbn-proof__metrics{ grid-template-columns:repeat(2,1fr); }
  /* below this width the caption would grow taller than the art can spare,
     so it moves under the artwork instead of sitting over it */
  .mbn-job{ aspect-ratio:auto; display:block; }
  /* height comes from the artwork's own viewBox, so it can never letterbox
     or leave a gap regardless of what the host stylesheet does */
  .mbn-job__art{ position:relative; inset:auto; aspect-ratio:auto; }
  .mbn-job__art svg{ height:auto; }
  .mbn-job__body{ position:relative; background:var(--ink); padding:16px 20px 18px; }
  .mbn-job__sum{ -webkit-line-clamp:2; }
}
@media (max-width:940px){
  /* Mobile menu: a centred stack.
     The previous version slid in from the right, so the panel entered the
     viewport edge-first and the links read as arriving one after another.
     This fades and drifts in as a single piece instead, so everything
     lands together. Closed state uses visibility and pointer-events so
     the invisible panel cannot swallow taps on the page beneath it. */
  .mbn-nav__links{
    position:fixed; left:0; right:0; top:var(--nav-h); bottom:0;
    /* a soft wash of brand light rather than a hard geometric shape. It is
       a background-image on the panel itself, so there is no pseudo-element
       and no clip-path to rasterise while the panel fades. */
    background-color:var(--paper);
    background-image:radial-gradient(circle at 50% 42%, rgba(255,79,154,.11) 0%, rgba(255,212,0,.05) 34%, transparent 66%);
    flex-direction:column; align-items:center; justify-content:center;
    gap:0; padding:40px var(--gutter); text-align:center; overflow-y:auto;
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translate3d(0,-8px,0);
    will-change:opacity, transform; backface-visibility:hidden;
    transition:opacity .24s var(--ease), transform .24s var(--ease),
               visibility 0s linear .24s;
  }
  .mbn-nav.is-open .mbn-nav__links{
    opacity:1; visibility:visible; pointer-events:auto; transform:translate3d(0,0,0);
    transition:opacity .24s var(--ease), transform .24s var(--ease), visibility 0s;
  }
  .mbn-nav__links a{
    position:relative; font-family:var(--font-display); font-weight:400;
    font-size:clamp(28px,8.4vw,40px); letter-spacing:var(--track-display);
    line-height:1.06; padding:13px 0; border-bottom:0;
    transition:color var(--dur-fast) var(--ease);
  }
  .mbn-nav__links a:active{ color:var(--pink); }
  .mbn-nav__links a::after{ display:none; }
  .mbn-nav__links .mbn-btn{ position:relative; margin-top:30px; width:auto; min-width:232px; }
  .mbn-nav__burger{ display:flex; }
  /* No blur at all on mobile. backdrop-filter creates a containing block
     for fixed descendants, which trapped the menu panel inside the 58px
     nav bar. Toggling it only while open fixed that but created and
     destroyed a compositing layer on the animation's first frame, which
     is what made the movement stutter. Removing it outright at this width
     solves both; the bar is near-opaque instead, which reads the same on
     a small screen. */
  .mbn-nav.is-stuck{
    background:rgba(246,242,233,.97);
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .mbn-nav.is-open{ background:var(--paper); border-bottom-color:var(--hairline); }
  .mbn-sides{ grid-template-columns:1fr; }
  .mbn-side--tall{ min-height:0; }
  .mbn-side--tall .mbn-side__list{ columns:1; }
  .mbn-hiw__stage,.mbn-hiw__read{ display:none; }
  .mbn-hiw__m{ display:block; }
}
/* landscape phones: shrink the stack so it never needs to scroll */
@media (max-width:940px) and (max-height:620px){
  .mbn-nav__links a{ font-size:clamp(21px,5.4vw,26px); padding:8px 0; }
  .mbn-nav__links .mbn-btn{ margin-top:20px; }
}
@media (max-width:820px){
  .mbn-hero__grid{ grid-template-columns:1fr; gap:34px; }
  .mbn-hero__cube{ order:-1; max-width:190px; margin:0; }
  .mbn-hero{ padding-top:calc(var(--nav-h) + 34px); }
  .mbn-work__grid{ grid-template-columns:1fr; }
  .mbn-perf__grid{ grid-template-columns:1fr; }
  .mbn-perf__item{ padding:24px 22px; }
  .mbn-perf__figs{ gap:24px; }
  .mbn-cs__pair{ grid-template-columns:1fr; }
  .mbn-cs__card{ padding:26px 22px 24px; }
  .mbn-cs__figs,.mbn-cs--lead .mbn-cs__figs{ gap:22px 30px; padding:18px 0; }
  .mbn-cs__more{ gap:6px 18px; }
  .mbn-cs__ba{ gap:12px; }
  .mbn-gsx__in{ grid-template-columns:1fr; gap:22px; }
  .mbn-gsx__mark{ width:58px; height:58px; }
  .mbn-gsx__cta{ width:100%; }
  .mbn-sol__grid{ grid-template-columns:1fr; }
  .mbn-sol__item{ padding:26px 0; border-right:0; border-bottom:1px solid var(--hairline); }
  .mbn-sol__item:last-child{ border-bottom:0; padding-bottom:0; }
  .mbn-sol__item + .mbn-sol__item{ padding-left:0; }
  .mbn-sol__cta{ flex-direction:column; align-items:flex-start; gap:18px; }
  .mbn-sol__cta .mbn-btn{ width:100%; }
  .mbn-job--feature,.mbn-job--wide{ grid-column:span 1; }
  /* every phone cover is a 4:3 composition built for this shape in drawArt,
     not the desktop artwork squeezed down */
  .mbn-job__body{ padding:15px 17px 17px; }
  .mbn-job__client{ font-size:20px; }
  .mbn-job__sum{ font-size:13px; }
  .mbn-job__tag,.mbn-job__flag{ top:11px; font-size:9.5px; padding:5px 9px; letter-spacing:.1em; }
  .mbn-job__tag{ left:11px; } .mbn-job__flag{ right:11px; }
  .mbn-job__row{ flex-wrap:wrap; gap:9px; }
  .mbn-step{ grid-template-columns:1fr; gap:8px; padding:30px 0; }
  .mbn-step::before{ inset:6px -11px; }
  .mbn-head{ flex-direction:column; align-items:flex-start; gap:18px; }
  .mbn-pos p{ max-width:none; }
  .mbn-proof__metrics{ grid-template-columns:1fr; }
  .mbn-proof__cols{ grid-template-columns:1fr; gap:var(--stack-lg); }
  .mbn-f2{ grid-template-columns:1fr; }
  .mbn-ov__in{ padding:30px var(--gutter) 80px; }
  .mbn-ov__stats{ gap:26px; }
  .mbn-ov__glance{ grid-template-columns:repeat(2,1fr); }
  .mbn-ov__steps li{ grid-template-columns:34px 1fr; gap:12px; }
  .mbn-foot__cols{ gap:34px; }
  .mbn-faq__q{ font-size:var(--fs-body); padding:22px 0; gap:18px; }
}
/* very small screens: let the title and cover carry the card */
@media (max-width:400px){
  .mbn-job__sum{ display:none; }
  .mbn-job__client{ font-size:18px; }
  .mbn-job__body{ padding:14px 15px 15px; }
  .mbn-btn{ padding:13px 20px; font-size:13.5px; }
  .mbn-cta__btns{ gap:12px; }
}

@media (prefers-reduced-motion: reduce){
  .mbn *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .rv{ opacity:1 !important; transform:none !important; }
  .mbn-anim .mbn-hero__cube i,
  .mbn-anim .mbn-hero__tag,
  .mbn-anim .mbn-hero__sub,
  .mbn-anim .mbn-hero__cta{ opacity:1 !important; transform:none !important; }
  .mbn-anim .mbn-hero h1 .ln > span{ transform:none !important; }
  /* cube changes face emphasis only, it does not travel or rotate */
  .mbn-hiw__cube{ left:50% !important; top:52% !important; transform:translate(-50%,-50%) !important; }
}

/* ═══════════ 2. STUDIO FINISH — delete this section to revert ═══════════ */
/* ══════════════════════════════════════════════════════════════
   MBN DIGITAL — STUDIO FINISH v2
   ──────────────────────────────────────────────────────────────
   Colour balance, texture and lighting. Nothing else.
   Untouched: fonts, type scale, layout, spacing, structure, copy,
   animations, interactions, information architecture.

   TO DISABLE: delete the style#mbn-theme-studio block.

   WHY THE CUBE LOOKED LIKE IT WAS GLOWING IN v1
   A coloured radial halo behind an object reads as emissive, as if
   the thing is lit from inside. A real object photographed in a
   studio is sold by its FLOOR, not by a halo: a pool of neutral
   light on the surface behind it, a tight occlusion shadow where it
   makes contact, a longer cast shadow thrown away from the key
   light, and a faint reflection. v2 removes the halo and builds
   those four instead.
   ══════════════════════════════════════════════════════════════ */

.mbn{
  /* --st-grain is wired for real: a wash of the surface colour sits
     over the texture, so 1 is full grain and 0 removes it entirely.
     v2 declared this knob but never read it, which is why turning it
     down did nothing.                                              */
  --st-grain:   0.55;   /* texture strength, 0 to 1                 */
  --st-lift:    0.60;   /* light falling from above                 */
  --st-ground:  0.10;   /* how far the edges fall into shadow       */
  --st-shadow:  1;      /* strength of shadows objects cast         */
  /* Reflection is OFF. The machinery below is intact and correct, but it
     has not looked right at small sizes and I am not going to keep
     guessing at it. Set this to 0.6 to switch it on.                */
  --st-reflect: 0;      /* 0 = off, 0.6 = a good starting point      */
}

/* ── 1. THE STOCK ───────────────────────────────────────────────
   Two layers: fine tooth and long fibres. The speck layer from v2
   is gone, it multiplied on a light ground and read as dirt.     */
.mbn{
  background-color:var(--paper);
  background-image:
    linear-gradient(rgba(246,242,233,calc(1 - var(--st-grain))), rgba(246,242,233,calc(1 - var(--st-grain)))),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='0.30'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.016 0.60' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E"),
    radial-gradient(150% 60% at 50% -6%, rgba(255,253,247,var(--st-lift)), transparent 56%),
    radial-gradient(46% 34% at 12% 22%, rgba(206,172,120,.050), transparent 76%),
    radial-gradient(155% 125% at 50% 40%, transparent 60%, rgba(52,38,20,var(--st-ground)) 100%);
  background-blend-mode:normal, overlay, soft-light, normal, normal, normal;
  background-repeat:repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-size:auto, 260px 260px, 340px 340px, auto, auto, auto;
}
.mbn-perf__item,.mbn-job{
  background-color:var(--paper-panel);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='0.30'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014 0.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E"), linear-gradient(166deg, rgba(255,255,255,.6), transparent 60%);
  background-blend-mode:overlay, soft-light, normal;
  background-repeat:repeat, repeat, no-repeat;
  background-size:260px 260px, 340px 340px, auto;
}

/* ── 2. DARK STOCK ─────────────────────────────────────────────
   Ink laid on the same paper: the tooth still shows, plus pooling
   at the edges the way heavy ink dries darker at its boundary.   */
.mbn-on-dark{
  background-color:var(--ink);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='0.30'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014 0.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E"),
    radial-gradient(78% 48% at 50% -3%, rgba(255,255,255,.10), transparent 58%),
    radial-gradient(140% 108% at 50% 46%, transparent 40%, rgba(0,0,0,.66) 100%);
  background-blend-mode:overlay, soft-light, screen, multiply;
  background-repeat:repeat, repeat, no-repeat, no-repeat;
  background-size:260px 260px, 340px 340px, auto, auto;
  box-shadow:inset 0 0 140px rgba(0,0,0,.28);
}

/* ── 3. THE PINK FIELD ─────────────────────────────────────────
   Kept as the one pink moment, but lit and inked rather than flat. */
.mbn-about{
  background-color:var(--pink-field);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='0.30'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014 0.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E"),
    radial-gradient(82% 58% at 18% -10%, rgba(255,250,246,.58), transparent 60%),
    radial-gradient(145% 112% at 50% 44%, transparent 42%, rgba(104,30,62,.36) 100%);
  background-blend-mode:overlay, soft-light, screen, multiply;
  background-repeat:repeat, repeat, no-repeat, no-repeat;
  background-size:260px 260px, 340px 340px, auto, auto;
  box-shadow:inset 0 0 120px rgba(96,26,58,.16);
}

/* ── 4. SECTIONS AS STACKED SHEETS ─────────────────────────────
   A soft shadow cast upward onto whatever sits above, so the page
   reads as sheets laid down rather than bands of flat colour.    */
.mbn-on-dark,.mbn-about{
  box-shadow:inset 0 0 140px rgba(0,0,0,.28), 0 -14px 34px rgba(52,38,20,calc(.10 * var(--st-shadow)));
}
.mbn-about{ box-shadow:inset 0 0 120px rgba(96,26,58,.16), 0 -14px 34px rgba(52,38,20,calc(.10 * var(--st-shadow))); }

/* ── 5. COLOUR BALANCE: YELLOW BACK TO AN ACCENT ──────────────── */
.mbn .mbn-on-dark .mbn-btn--solid{ background-color:var(--paper); color:var(--ink); }
.mbn .mbn-on-dark .mbn-btn--solid:hover{ background-color:var(--pink); color:var(--ink); }
.mbn .mbn-job__meta{ color:rgba(246,242,233,.74); }
.mbn .mbn-job__cta{ background-color:var(--paper); color:var(--ink); }
.mbn .mbn-job:hover .mbn-job__cta{ background-color:var(--pink); color:var(--ink); }
.mbn .mbn-step.is-on::before{
  background-image:linear-gradient(172deg, rgba(255,255,255,.44) 0%, rgba(255,255,255,0) 44%, rgba(96,60,0,.16) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 12px 30px rgba(74,54,28,.20);
}

/* ── 6. THE CUBE AS A LIT OBJECT ────────────────────────────────
   Key from the upper left. Each face gets a bevel catch along its
   leading edge, body shading, and bounce light underneath.       */
.mbn-cube .f-top{
  background-image:
    linear-gradient(118deg, rgba(255,255,255,.70) 0 2.5%, rgba(255,255,255,.12) 6%, transparent 11%),
    linear-gradient(152deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.26) 22%, rgba(255,255,255,0) 48%, rgba(122,28,72,.34) 100%);
}
.mbn-cube .f-left{
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.48) 0 2%, transparent 7%),
    linear-gradient(0deg, rgba(255,226,160,.30) 0%, transparent 26%),
    linear-gradient(172deg, rgba(255,255,255,.44) 0%, rgba(255,255,255,.05) 28%, rgba(92,58,0,.18) 62%, rgba(58,34,0,.54) 100%);
}
.mbn-cube .f-right{
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.34) 0 2%, transparent 8%),
    linear-gradient(0deg, rgba(255,206,140,.18) 0%, transparent 30%),
    linear-gradient(206deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.03) 20%, rgba(0,0,0,.38) 58%, rgba(0,0,0,.70) 100%);
}

/* ── 7. THE FLOOR THE HERO CUBE SITS ON ─────────────────────────
   No halo. A pool of light on the wall behind, then contact
   shadow, cast shadow and reflection below the object.          */
.mbn-hero{
  background-image:
    radial-gradient(44% 40% at 78% 40%, rgba(255,252,242,.85), transparent 68%),
    radial-gradient(70% 30% at 78% 78%, rgba(52,38,20,.055), transparent 72%);
  background-repeat:no-repeat, no-repeat;
}
.mbn-hero__cube{ isolation:isolate; }   /* REQUIRED: without a stacking context the
                                           shadow layers fall behind the page background */
/* Reflection in the surface.
   A real duplicate of the cube, not drawn polygons. The mirror plane is
   the cube's BASE, and because each face is a parallelogram with vertical
   sides, reflecting through that plane is a pure vertical translation:
       left  +46%   right +46%   top +92%   (46% = one edge length)
   Verified against the reflected vertices. The duplicate reuses the same
   clip-paths, so any change to the cube carries through automatically.

   Two layers give blur that grows with distance: a near copy, barely
   softened, and a far copy blurred harder and masked to the lower part
   only. Blur sits on the PARENT while clip-path sits on the faces, so
   the blur does reach the edges. (Putting both on one element does not
   work: CSS runs filter before clip-path.)                          */
.mbn-reflect{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  transform-origin:50% 96%;
  transform:translateY(-3.45%) scaleY(.85);   /* gentle floor compression;
        the translate re-seats the side contacts after the scale, so the
        centre overlaps up into the cube and no seam can open at the base */
  -webkit-mask-size:100% 200%; mask-size:100% 200%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.mbn-reflect .mbn-cube{ position:absolute; inset:0; width:100%; }
/* !important is needed only to sit above the hero entrance rules, which
   target .mbn-hero__cube i and would otherwise reset these transforms */
.mbn-reflect .f-left,
.mbn-reflect .f-right{ transform:translateY(46%) !important; opacity:1 !important; }
.mbn-reflect .f-top{ transform:translateY(92%) !important; opacity:1 !important; }

/* shading mirrors with the geometry: every gradient angle t becomes 180-t */
.mbn-reflect .f-left{
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.40) 0 2%, transparent 7%),
    linear-gradient(180deg, rgba(255,226,160,.26) 0%, transparent 26%),
    linear-gradient(8deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.05) 28%, rgba(92,58,0,.18) 62%, rgba(58,34,0,.50) 100%);
}
.mbn-reflect .f-right{
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.28) 0 2%, transparent 8%),
    linear-gradient(180deg, rgba(255,206,140,.16) 0%, transparent 30%),
    linear-gradient(334deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.03) 20%, rgba(0,0,0,.34) 58%, rgba(0,0,0,.64) 100%);
}
.mbn-reflect .f-top{
  background-image:
    linear-gradient(62deg, rgba(255,255,255,.60) 0 2.5%, rgba(255,255,255,.12) 6%, transparent 11%),
    linear-gradient(28deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.24) 22%, rgba(255,255,255,0) 48%, rgba(122,28,72,.30) 100%);
}

/* near copy: strongest at the contact, fading out before it ends so the
   reflection never terminates on a visible edge */
.mbn-reflect--near{
  -webkit-mask-size:100% 200%; mask-size:100% 200%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  opacity:calc(.60 * var(--st-reflect));
  filter:blur(1.5px);
  -webkit-mask-image:linear-gradient(180deg, #000 0 38%, rgba(0,0,0,.58) 49%, rgba(0,0,0,.20) 58%, transparent 68%);
  mask-image:linear-gradient(180deg, #000 0 38%, rgba(0,0,0,.58) 49%, rgba(0,0,0,.20) 58%, transparent 68%);
}
/* far copy: only the lower reach, blurred harder, so softness grows with
   distance from the cube */
.mbn-reflect--far{
  -webkit-mask-size:100% 200%; mask-size:100% 200%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  opacity:calc(.34 * var(--st-reflect));
  filter:blur(7px);
  -webkit-mask-image:linear-gradient(180deg, transparent 42%, rgba(0,0,0,.55) 52%, rgba(0,0,0,.40) 60%, transparent 72%);
  mask-image:linear-gradient(180deg, transparent 42%, rgba(0,0,0,.55) 52%, rgba(0,0,0,.40) 60%, transparent 72%);
}
/* contact shadow at the base, cast thrown to the right */
.mbn-hero__cube::after{
  content:''; position:absolute; left:50%; top:90%; width:88%; height:22%;
  transform:translateX(-50%);
  background:
    radial-gradient(ellipse 22% 16% at 50% 24%, rgba(24,17,6,calc(.30 * var(--st-shadow))) 0%, transparent 74%),
    radial-gradient(ellipse 40% 26% at 60% 38%, rgba(24,17,6,calc(.13 * var(--st-shadow))) 0%, transparent 76%);
  filter:blur(9px); z-index:-2; pointer-events:none;
}
/* the ring cube gets the same treatment, quieter */
.mbn-hiw__cube::after{
  content:''; position:absolute; left:50%; bottom:-14%; width:96%; height:20%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(0,0,0,.60) 0%, transparent 72%);
  filter:blur(9px); z-index:-1; pointer-events:none;
}

/* ── 8. DEPTH WITHOUT CARDS ─────────────────────────────────── */
.mbn-job{ box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 2px 8px rgba(52,38,20,.10); }
.mbn-job:hover{ box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 26px 52px rgba(52,38,20,calc(.26 * var(--st-shadow))); }
.mbn-perf__item{ box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 8px 22px rgba(52,38,20,.09); }
.mbn-side{ box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 18px 40px rgba(0,0,0,.30); }
.mbn-btn--solid{
  background-image:linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.10));
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 7px 18px rgba(46,30,10,.24);
}
.mbn-job__flag,.mbn-job__cta,.mbn-job__tag{
  box-shadow:0 1px 0 rgba(255,255,255,.34) inset, 0 3px 9px rgba(30,20,8,.24);
}
.mbn-ov__bar{ box-shadow:0 8px 24px rgba(52,38,20,.08); }

/* ── 9. AGED RULES AND SEAMS ────────────────────────────────── */
.mbn{ --hairline:rgba(52,38,20,0.19); --cube-seam:rgba(40,26,10,0.34); }
.mbn-on-dark{ --hairline-invert:rgba(246,242,233,0.16); }

/* ── 10. GUARDS ─────────────────────────────────────────────── */
@media (max-width:820px){
  .mbn{ --st-ground:0.06; --st-lift:0.50; --st-shadow:0.7; --st-grain:0.45; --st-reflect:0; }
  .mbn-hero{ background-image:none; }        /* the cube sits above the copy here */
}
@media (prefers-reduced-transparency: reduce){
  .mbn{ --st-grain:0; }
}

/* ═══════════ 3. ABOUT TONE — delete this section to revert ═══════════ */
.mbn-about{
  background-color:var(--ink);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='0.30'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014 0.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E"),
    radial-gradient(78% 48% at 50% -3%, rgba(255,255,255,.10), transparent 58%),
    radial-gradient(140% 108% at 50% 46%, transparent 40%, rgba(0,0,0,.66) 100%);
  background-blend-mode:overlay, soft-light, screen, multiply;
  background-repeat:repeat, repeat, no-repeat, no-repeat;
  background-size:260px 260px, 340px 340px, auto, auto;
  box-shadow:inset 0 0 140px rgba(0,0,0,.28);
}
.mbn-about{
  color:var(--paper);
  --cube-seam:rgba(246,242,233,0.30);
  --hairline:var(--hairline-invert);
}
.mbn-about h2,
.mbn-about p,
.mbn-about .fine{ color:var(--paper); }
.mbn-about .mbn-label{ color:var(--pink); }   /* 5.45:1 on charcoal, keeps the accent */