/* MetaBaz "Signal". Tokens mirror the active DESIGN.md. */

@font-face{font-family:'Manrope';src:url('fonts/manrope-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('fonts/manrope-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('fonts/manrope-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

.mb{
  --bg:#0B0D10; --surface:#15191F; --ink:#F2F4F7; --muted:#9BA5B4;
  --line:#232830; --accent:#147BFF;
  /* Same hue, lifted for body-size text. #147BFF measures 4.46 against the
     surface ground, just under the 4.5 AA threshold; this clears it on both. */
  --accent-text:#3A93FF;
  --display:'Manrope',sans-serif;
  --body:'Inter',sans-serif;
  --r:6px;
  --wrap:1180px;
  --gut:24px;
}

html,body.mb-body{background:#0B0D10}
body.mb-body{margin:0}

.mb :where(h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,dl,dd){margin:0;padding:0;border:0}
.mb :where(ul,ol){list-style:none}
.mb :where(img,svg,iframe){display:block;max-width:100%}
.mb :where(img){height:auto}
.mb :where(a){color:inherit;text-decoration:none}
.mb :where(button){font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.mb{background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:400;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  /* clip, not hidden: overflow:hidden creates a scroll container and silently
     breaks position:sticky on the header. clip contains overflow without it. */
  overflow-x:clip}
.mb *,.mb *::before,.mb *::after{box-sizing:border-box}
.mb ::selection{background:var(--accent);color:#0B0D10}

.mb__wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* ---------- type ---------- */
.mb h1,.mb h2,.mb h3,.mb .mb-num{font-family:var(--display)}
.mb h1{font-weight:800;font-size:clamp(2.7rem,6.4vw,4.9rem);line-height:1.03;letter-spacing:-0.035em}
.mb h2{font-weight:700;font-size:clamp(2rem,4vw,3rem);line-height:1.06;letter-spacing:-0.025em}
.mb h3{font-weight:600;font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.2;letter-spacing:-0.015em}
.mb .mb-lede{font-size:clamp(1.05rem,1.35vw,1.19rem);color:var(--muted);max-width:60ch;line-height:1.65}
.mb .mb-accent{color:var(--accent)}
.mb .mb-label{font-family:var(--body);font-size:.72rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}

/* ---------- buttons ---------- */
.mb-btn{display:inline-flex;align-items:center;justify-content:center;
  padding:17px 30px;border-radius:var(--r);font-family:var(--body);font-weight:600;
  font-size:1rem;letter-spacing:-0.005em;
  transition:background-color .2s ease,border-color .2s ease,transform .12s ease}
.mb-btn--primary{background:var(--accent);color:var(--bg)}
.mb-btn--primary:hover{background:#3A93FF}
.mb-btn--ghost{border:1px solid var(--line);color:var(--ink)}
.mb-btn--ghost:hover{border-color:#39404C}
.mb-btn:active{transform:translateY(1px)}
.mb-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- nav ---------- */
.mb-head{position:sticky;top:0;z-index:60;background:rgba(11,13,16,.72);
  backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:background-color .3s ease,border-color .3s ease}
.mb-head.is-stuck{background:rgba(11,13,16,.94);border-bottom-color:var(--line)}
.mb-head__in{display:flex;align-items:center;gap:32px;height:78px;
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);transition:height .3s ease}
.mb-head.is-stuck .mb-head__in{height:66px}
.mb-head__logo img{height:32px;width:auto}
.mb-nav{display:flex;align-items:center;gap:34px;margin-left:auto}
.mb-nav a{font-size:.94rem;font-weight:500;color:var(--muted);position:relative;
  transition:color .18s ease}
.mb-nav a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;
  background:var(--accent);transition:width .25s ease}
.mb-nav a:hover,.mb-nav a:focus-visible{color:var(--ink)}
.mb-nav a:hover::after,.mb-nav a:focus-visible::after{width:100%}
.mb-nav a:focus-visible,.mb-head__logo:focus-visible,.mb-burger:focus-visible,
.mb-svc__row:focus-visible,.mb-case__item:focus-visible,.mb-rev__link:focus-visible,
.mb-foot a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.mb-head__cta{margin-left:8px}
.mb-head__cta .mb-btn{padding:11px 20px;font-size:.9rem}
.mb-burger{display:none;margin-left:auto;padding:10px;color:var(--ink)}
.mb-burger span{display:block;width:22px;height:1.5px;background:currentColor;margin:5px 0;
  transition:transform .25s ease,opacity .25s ease}

/* ---------- hero ----------
   Layered: 1 page ground, 2 photograph, 3 scrim, 4 content, 5 accent lift.
   Scrim stops are tuned to the photograph's measured luminance: bright sky
   across the top (168-228), very dark building mass along the bottom (19-27).
   The headline sits top-left, so that corner is driven to near-solid ground. */
.mb-hero{position:relative;isolation:isolate;
  padding-block:clamp(104px,14vw,184px) clamp(88px,11vw,148px);
  overflow:clip;background:var(--bg)}

.mb-hero__media{position:absolute;inset:0;z-index:1;pointer-events:none}
.mb-hero__media img{width:100%;height:100%;object-fit:cover;
  object-position:74% 34%;
  filter:saturate(.5) contrast(1.06) brightness(.8)}

.mb-hero__scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    /* horizontal: near-solid behind the copy, opening toward the right */
    linear-gradient(96deg,
      var(--bg) 0%,
      var(--bg) 29%,
      rgba(11,13,16,.965) 41%,
      rgba(11,13,16,.86) 51%,
      rgba(11,13,16,.62) 63%,
      rgba(11,13,16,.38) 76%,
      rgba(11,13,16,.30) 88%,
      rgba(11,13,16,.52) 100%),
    /* vertical: settle under the header, then fall into the next section */
    linear-gradient(180deg,
      rgba(11,13,16,.78) 0%,
      rgba(11,13,16,.34) 20%,
      rgba(11,13,16,.22) 48%,
      rgba(11,13,16,.68) 84%,
      var(--bg) 100%),
    /* vignette anchored to the content, no straight edges anywhere */
    radial-gradient(135% 115% at 20% 38%,
      transparent 24%,
      rgba(11,13,16,.34) 62%,
      rgba(11,13,16,.66) 100%)}

/* accent lift, kept above the scrim so it reads as brand, not haze */
.mb-hero::before{content:"";position:absolute;top:-16%;left:50%;
  transform:translateX(-62%);width:min(1100px,124%);height:640px;
  z-index:3;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(20,123,255,.11),transparent 64%)}

.mb-hero__in{position:relative;z-index:4;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.mb-hero h1{max-width:17ch;margin-bottom:30px}
.mb-hero .mb-lede{max-width:56ch;margin-bottom:44px}
.mb-hero__cta{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-bottom:64px}

/* single trust signal */
.mb-trust{display:flex;align-items:center;gap:14px;padding-top:32px;
  border-top:1px solid var(--line);max-width:520px}
.mb-stars{display:flex;gap:3px;color:var(--accent)}
.mb-stars svg{width:16px;height:16px;fill:currentColor}
.mb-trust__txt{font-size:.93rem;color:var(--muted)}
.mb-trust__txt b{color:var(--ink);font-weight:600}

/* ---------- sections ---------- */
.mb-sec{padding-block:clamp(80px,10vw,152px)}
.mb-sec--surface{background:var(--surface)}
.mb-sec__head{max-width:64ch;margin-bottom:clamp(48px,6vw,80px)}
.mb-sec__head .mb-label{display:block;margin-bottom:20px}
.mb-sec__head h2{margin-bottom:22px}

/* ---------- reviews ---------- */
.mb-rev__top{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  flex-wrap:wrap;padding-bottom:36px;border-bottom:1px solid var(--line);margin-bottom:44px}
.mb-rev__score{display:flex;align-items:baseline;gap:16px}
.mb-rev__num{font-family:var(--display);font-weight:800;font-size:clamp(3.4rem,7vw,5rem);
  line-height:.9;letter-spacing:-0.04em}
.mb-rev__meta .mb-stars{margin-bottom:8px}
.mb-rev__meta span{font-size:.95rem;color:var(--muted)}
.mb-rev__link{font-size:.95rem;color:var(--accent);font-weight:500}
.mb-rev__link:hover{text-decoration:underline}
.mb-rev__widget{--ti-dark:1}
.mb-rev__widget .ti-widget{background:transparent!important}

/* ---------- services ---------- */
.mb-svc{border-top:1px solid var(--line)}
.mb-svc__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(24px,4vw,64px);align-items:start;padding-block:clamp(32px,4vw,48px);
  border-bottom:1px solid var(--line);position:relative;transition:padding-left .3s ease}
.mb-svc__row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .35s ease}
.mb-svc__row:hover::before{transform:scaleY(1)}
.mb-svc__row:hover{padding-left:22px}
.mb-num{font-weight:700;font-size:.95rem;color:var(--muted);letter-spacing:.04em;
  padding-top:6px;transition:color .25s ease}
.mb-svc__row:hover .mb-num{color:var(--accent)}
.mb-svc__body h3{margin-bottom:12px}
.mb-svc__body p{color:var(--muted);max-width:58ch;font-size:1rem}
.mb-svc__go{align-self:center;color:var(--muted);font-size:.9rem;font-weight:500;
  white-space:nowrap;transition:color .25s ease,transform .25s ease}
.mb-svc__row:hover .mb-svc__go{color:var(--accent);transform:translateX(4px)}

/* ---------- services index: row and card background media ----------
   Each row carries its own service photograph, bleeding in from the right and
   scrimmed to solid across the copy. Per-image brightness arrives as a custom
   property, solved so every row lands on the same visible value. Scoped to the
   index containers so the homepage rows are untouched. */
.mb-svc--media .mb-svc__row,
.mb-case--media .mb-case__item{position:relative;overflow:hidden;isolation:isolate}

.mb-rowmedia{position:absolute;inset:0;z-index:0;pointer-events:none;display:block}
.mb-rowmedia img{width:100%;height:100%;object-fit:cover;
  object-position:var(--mb-rp,50%) 50%;
  transform:scaleX(var(--mb-rf,1));
  filter:saturate(.7) contrast(1.03) brightness(var(--mb-rb,.8));
  transition:filter .35s ease,transform .5s ease}

.mb-rowscrim{position:absolute;inset:0;z-index:1;pointer-events:none;display:block;
  background:linear-gradient(90deg,
    var(--bg) 0%,
    var(--bg) 22%,
    rgba(11,13,16,.97) 33%,
    rgba(11,13,16,.92) 44%,
    rgba(11,13,16,.82) 56%,
    rgba(11,13,16,.66) 67%,
    rgba(11,13,16,.46) 78%,
    rgba(11,13,16,.30) 89%,
    rgba(11,13,16,.22) 100%)}

/* Alternate section grounds need their own base colour in the scrim. */
.mb-sec--surface .mb-rowscrim{background:linear-gradient(90deg,
    var(--surface) 0%,
    var(--surface) 22%,
    rgba(21,25,31,.97) 33%,
    rgba(21,25,31,.92) 44%,
    rgba(21,25,31,.82) 56%,
    rgba(21,25,31,.66) 67%,
    rgba(21,25,31,.46) 78%,
    rgba(21,25,31,.30) 89%,
    rgba(21,25,31,.22) 100%)}

/* Content sits above both layers. */
.mb-svc--media .mb-svc__row > .mb-num,
.mb-svc--media .mb-svc__row > .mb-svc__body,
.mb-svc--media .mb-svc__row > .mb-svc__go,
.mb-svc--media .mb-svc__row > .mb-svc__price,
.mb-case--media .mb-case__item > .mb-case__body,
.mb-case--media .mb-case__item > .mb-case__mark{position:relative;z-index:2}

/* The accent bar has to clear the media layer too. */
.mb-svc--media .mb-svc__row::before{z-index:3}

/* Restrained hover: the photograph lifts slightly rather than animating. */
.mb-svc--media .mb-svc__row:hover .mb-rowmedia img,
.mb-case--media .mb-case__item:hover .mb-rowmedia img{
  filter:saturate(.85) contrast(1.03) brightness(calc(var(--mb-rb,.8) * 1.25));
  transform:scaleX(var(--mb-rf,1)) scale(1.03)}

/* Cards are taller, so the image reads from the lower right corner. */
.mb-case--media .mb-rowscrim{background:
  linear-gradient(105deg,
    var(--bg) 0%,
    rgba(11,13,16,.96) 34%,
    rgba(11,13,16,.84) 52%,
    rgba(11,13,16,.62) 72%,
    rgba(11,13,16,.40) 100%),
  linear-gradient(180deg,
    rgba(11,13,16,.55) 0%,
    rgba(11,13,16,.12) 45%,
    rgba(11,13,16,.42) 100%)}
.mb-sec--surface .mb-case--media .mb-rowscrim{background:
  linear-gradient(105deg,
    #10141A 0%,
    rgba(16,20,26,.96) 34%,
    rgba(16,20,26,.84) 52%,
    rgba(16,20,26,.62) 72%,
    rgba(16,20,26,.40) 100%),
  linear-gradient(180deg,
    rgba(16,20,26,.55) 0%,
    rgba(16,20,26,.12) 45%,
    rgba(16,20,26,.42) 100%)}

@media (prefers-reduced-motion:reduce){
  .mb-rowmedia img{transition:none!important}
  .mb-svc--media .mb-svc__row:hover .mb-rowmedia img,
  .mb-case--media .mb-case__item:hover .mb-rowmedia img{transform:scaleX(var(--mb-rf,1))}
}

@media (max-width:900px){
  /* Copy runs full width on small screens, so the tint recedes. */
  .mb-rowscrim{background:linear-gradient(90deg,
    var(--bg) 0%,var(--bg) 46%,rgba(11,13,16,.92) 62%,rgba(11,13,16,.72) 82%,rgba(11,13,16,.60) 100%)}
  .mb-sec--surface .mb-rowscrim{background:linear-gradient(90deg,
    var(--surface) 0%,var(--surface) 46%,rgba(21,25,31,.92) 62%,rgba(21,25,31,.72) 82%,rgba(21,25,31,.60) 100%)}
}

/* ---------- portfolio: case study rows ---------- */
.mb-work{border-top:1px solid var(--line)}
.mb-work__row{display:grid;grid-template-columns:132px minmax(0,1fr) auto;
  gap:clamp(24px,4vw,52px);align-items:center;
  padding-block:clamp(26px,3vw,34px);border-bottom:1px solid var(--line);
  position:relative;transition:padding-left .3s ease}
.mb-work__row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--accent);transform:scaleY(0);transform-origin:top;
  transition:transform .35s ease}
.mb-work__row:hover::before{transform:scaleY(1)}
.mb-work__row:hover{padding-left:22px}

.mb-work__mark{display:flex;align-items:center;justify-content:center;
  height:84px;padding:12px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg);overflow:hidden}
.mb-sec--surface .mb-work__mark{background:#10141A}
.mb-work__mark img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;
  filter:grayscale(1) brightness(1.75) contrast(.85);opacity:.7;
  transition:filter .3s ease,opacity .3s ease}
.mb-work__row:hover .mb-work__mark img{filter:none;opacity:1}

.mb-work__body .mb-label{display:block;margin-bottom:10px}
.mb-work__body h3{margin-bottom:8px}
.mb-work__body p{color:var(--muted);font-size:.98rem;max-width:60ch;margin-bottom:14px}
.mb-work__tags{display:flex;flex-wrap:wrap;gap:7px}
.mb-work__tags span{font-size:.7rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line);
  border-radius:var(--r);padding:4px 9px}
.mb-work__go{color:var(--muted);font-size:.9rem;font-weight:500;white-space:nowrap;
  transition:color .25s ease,transform .25s ease}
.mb-work__row:hover .mb-work__go{color:var(--accent-text);transform:translateX(4px)}

/* ---------- portfolio: client wall ---------- */
.mb-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  gap:clamp(10px,1.4vw,16px)}
.mb-wall__item{display:flex;align-items:center;justify-content:center;
  aspect-ratio:4 / 3;padding:18px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .3s ease,background-color .3s ease,transform .3s ease}
.mb-sec--surface .mb-wall__item{background:#10141A}
.mb-wall__item img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;
  filter:grayscale(1) brightness(1.7) contrast(.85);opacity:.6;
  transition:filter .35s ease,opacity .35s ease}
.mb-wall__item:hover{border-color:#39404c;transform:translateY(-2px)}
.mb-wall__item:hover img{filter:none;opacity:1}
/* Clients with a written case study carry a quiet accent edge. */
.mb-wall__item.has-study{border-color:#1d3557}

@media (prefers-reduced-motion:reduce){
  .mb-wall__item,.mb-wall__item img,.mb-work__mark img,.mb-work__row{transition:none!important}
  .mb-wall__item:hover{transform:none}
}

@media (max-width:900px){
  .mb-work__row{grid-template-columns:92px minmax(0,1fr);row-gap:16px}
  .mb-work__mark{height:64px}
  .mb-work__go{grid-column:2;justify-self:start}
}
@media (max-width:600px){
  .mb-wall{grid-template-columns:repeat(auto-fill,minmax(126px,1fr))}
  .mb-work__row{grid-template-columns:1fr}
  .mb-work__mark{width:112px;height:72px}
  .mb-work__go{grid-column:1}
}

/* ---------- logo marquee ---------- */
.mb-marquee{position:relative;overflow:hidden;padding-block:8px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mb-marquee__track{display:flex;width:max-content;will-change:transform;
  animation:mb-scroll 58s linear infinite}
.mb-marquee:hover .mb-marquee__track{animation-play-state:paused}
.mb-logo{flex:0 0 auto;width:176px;height:104px;margin-right:20px;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r)}
.mb-sec--surface .mb-logo{background:#10141A}
.mb-logo img{max-height:100%;max-width:100%;width:auto;object-fit:contain;
  filter:grayscale(1) brightness(1.7) contrast(.85);opacity:.62;
  transition:filter .3s ease,opacity .3s ease}
.mb-logo:hover img{filter:none;opacity:1}
@keyframes mb-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------- approach ---------- */
.mb-appr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(32px,4vw,56px) clamp(40px,6vw,96px)}
.mb-appr__item{padding-top:26px;border-top:1px solid var(--line)}
.mb-appr__item h3{margin-bottom:12px}
.mb-appr__item p{color:var(--muted);font-size:.99rem;max-width:46ch}

/* ---------- case studies ---------- */
/* One lead engagement, then two supporting. Deliberately not three equal cards. */
.mb-case{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.5vw,32px)}
.mb-case__item--lead{grid-column:1/-1;flex-direction:row;align-items:center;
  gap:clamp(28px,5vw,64px);padding:clamp(30px,3.4vw,44px)}
.mb-case__item--lead .mb-case__mark{height:60px;margin-bottom:0;flex:0 0 150px}
.mb-case__item--lead .mb-case__mark img{max-height:60px}
.mb-case__item--lead .mb-case__body{flex:1}
.mb-case__item--lead h3{font-size:clamp(1.4rem,2.2vw,1.9rem)}
.mb-case__item--lead p{max-width:52ch}
.mb-case__item{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(26px,3vw,34px);display:flex;flex-direction:column;
  transition:border-color .3s ease,transform .3s ease}
.mb-sec--surface .mb-case__item{background:#10141A}
.mb-case__item:hover{border-color:#39404C;transform:translateY(-3px)}
.mb-case__mark{height:44px;margin-bottom:26px;display:flex;align-items:center}
.mb-case__mark img{max-height:44px;width:auto;filter:grayscale(1) brightness(1.7);opacity:.75;
  transition:filter .3s ease,opacity .3s ease}
.mb-case__item:hover .mb-case__mark img{filter:none;opacity:1}
.mb-case__item h3{margin-bottom:10px}
.mb-case__item p{color:var(--muted);font-size:.95rem;margin-bottom:22px;flex:1}
.mb-case__tags{display:flex;flex-wrap:wrap;gap:8px}
.mb-case__tags span{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:var(--r);padding:5px 10px}

/* ---------- skip link ---------- */
.mb-skip{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--accent);color:var(--bg);padding:14px 22px;
  font-family:var(--body);font-weight:600;border-radius:0 0 var(--r) 0}
.mb-skip:focus{left:0}

/* ---------- faq ---------- */
.mb-faq{border-top:1px solid var(--line);max-width:900px}
.mb-faq__item{border-bottom:1px solid var(--line)}
.mb-faq__item summary{display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding-block:26px;cursor:pointer;list-style:none;
  transition:color .2s ease}
.mb-faq__item summary::-webkit-details-marker{display:none}
.mb-faq__item summary:hover{color:var(--accent)}
.mb-faq__item summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.mb-faq__item h3{display:inline;font-size:clamp(1.05rem,1.5vw,1.25rem)}
.mb-faq__ico{position:relative;flex:0 0 16px;height:16px}
.mb-faq__ico::before,.mb-faq__ico::after{content:"";position:absolute;background:currentColor;
  transition:transform .28s ease,opacity .28s ease}
.mb-faq__ico::before{left:0;top:7.5px;width:16px;height:1.5px}
.mb-faq__ico::after{left:7.5px;top:0;width:1.5px;height:16px}
.mb-faq__item[open] .mb-faq__ico::after{transform:rotate(90deg);opacity:0}
.mb-faq__item[open] summary{color:var(--accent)}
.mb-faq__item p{color:var(--muted);font-size:1rem;max-width:72ch;
  padding-bottom:28px;margin-top:-4px}

/* ---------- closing ---------- */
.mb-close{text-align:center;max-width:840px;margin-inline:auto}
.mb-close h2{margin-bottom:24px;font-size:clamp(2.2rem,5vw,3.6rem)}
.mb-close .mb-lede{margin-inline:auto;margin-bottom:40px;max-width:52ch}

/* ================= service pages ================= */

.mb-crumb{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  font-size:.82rem;color:var(--muted);margin-bottom:40px}
.mb-crumb a:hover{color:var(--accent)}
.mb-crumb span[aria-hidden]{opacity:.45}

.mb-shero{position:relative;isolation:isolate;overflow:clip;
  padding-block:clamp(64px,8vw,104px) clamp(72px,9vw,120px);
  background:var(--bg);border-bottom:1px solid var(--line)}
.mb-shero .mb__wrap{position:relative;z-index:4}

/* Layer 2: the page's own photograph, full bleed behind the content. */
.mb-shero__media{position:absolute;inset:0;z-index:1;pointer-events:none}
.mb-shero__media img{width:100%;height:100%;object-fit:cover;object-position:70% 40%}

/* Layer 3: scrim.
   One profile for every page. The ten stops below were solved against each
   image's measured column luminance so the photograph lands on the same visible
   value on the right of every hero, while the copy side stays near solid.
   Per-image brightness, crop and mirroring arrive as custom properties. */
.mb-shero__scrim{position:absolute;inset:0;z-index:2;pointer-events:none}
.mb-shero.has-media .mb-shero__scrim{background:
  linear-gradient(96deg,
    rgba(11,13,16,.98) 0%,
    rgba(11,13,16,.95) 11%,
    rgba(11,13,16,.88) 22%,
    rgba(11,13,16,.78) 33%,
    rgba(11,13,16,.62) 44%,
    rgba(11,13,16,.46) 56%,
    rgba(11,13,16,.34) 67%,
    rgba(11,13,16,.26) 78%,
    rgba(11,13,16,.24) 89%,
    rgba(11,13,16,.32) 100%),
  linear-gradient(180deg,
    rgba(11,13,16,.62) 0%,
    rgba(11,13,16,.18) 24%,
    rgba(11,13,16,.14) 58%,
    rgba(11,13,16,.60) 86%,
    var(--bg) 100%),
  radial-gradient(150% 130% at 14% 46%,
    transparent 26%,
    rgba(11,13,16,.24) 68%,
    rgba(11,13,16,.46) 100%)}

.mb-shero.has-media .mb-shero__media img{
  object-position:50% var(--mb-hp,50%);
  transform:scaleX(var(--mb-hf,1));
  filter:saturate(.62) contrast(1.04) brightness(var(--mb-hb,.7))}

/* Genuinely low resolution source: a slight blur reads as depth of field
   rather than as a soft image. */
.mb-shero.is-low .mb-shero__media img{
  filter:saturate(.55) contrast(1.03) brightness(var(--mb-hb,.7)) blur(3px);
  transform:scaleX(var(--mb-hf,1)) scale(1.07)}
.mb-shero__grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(36px,6vw,80px);align-items:start}
.mb-shero.has-media .mb-price{background:rgba(21,25,31,.82);backdrop-filter:blur(10px)}
.mb-shero h1{font-size:clamp(2.2rem,4.6vw,3.5rem);max-width:19ch;margin-bottom:26px}
.mb-shero .mb-lede{margin-bottom:36px;max-width:58ch}

.mb-price{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  padding:clamp(24px,3vw,32px)}
.mb-price .mb-label{display:block;margin-bottom:14px}
.mb-price__n{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,2.4vw,1.95rem);letter-spacing:-0.02em;color:var(--accent);margin-bottom:12px}
.mb-price p{color:var(--muted);font-size:.9rem;margin:0}

/* deliverables: two-column hairline list, never cards */
.mb-deliv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(32px,5vw,72px);border-top:1px solid var(--line)}
.mb-deliv li{padding:20px 0 20px 30px;border-bottom:1px solid var(--line);
  position:relative;color:var(--ink);font-size:1rem}
.mb-deliv li::before{content:"";position:absolute;left:0;top:31px;
  width:11px;height:2px;background:var(--accent)}

/* process steps */
.mb-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,32px)}
.mb-steps li{border-top:2px solid var(--line);padding-top:22px}
.mb-steps li:first-child{border-top-color:var(--accent)}
.mb-steps .mb-num{display:block;font-family:var(--display);font-weight:700;
  font-size:.88rem;color:var(--accent);margin-bottom:14px;letter-spacing:.04em}
.mb-steps h3{margin-bottom:10px}
.mb-steps p{color:var(--muted);font-size:.95rem}

/* comparison */
.mb-cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,28px)}
.mb-cmp__col{border:1px solid var(--line);border-radius:var(--r);padding:clamp(26px,3vw,34px);
  background:var(--surface)}
.mb-sec--surface .mb-cmp__col{background:var(--bg)}
.mb-cmp__col--acc{border-color:#1d3557}
.mb-cmp__col h3{margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.mb-cmp__col--acc h3{color:var(--accent)}
.mb-cmp__col li{padding:11px 0 11px 26px;position:relative;color:var(--muted);font-size:.96rem}
.mb-cmp__col li::before{content:"";position:absolute;left:0;top:20px;width:9px;height:1px;background:var(--muted)}
.mb-cmp__col--acc li::before{background:var(--accent)}

/* channel tags */
.mb-chan{display:flex;flex-wrap:wrap;gap:12px}
.mb-chan span{border:1px solid var(--line);border-radius:var(--r);
  padding:13px 22px;font-size:.95rem;color:var(--ink);background:var(--surface);
  transition:border-color .2s ease,color .2s ease}
.mb-sec--surface .mb-chan span{background:var(--bg)}
.mb-chan span:hover{border-color:var(--accent);color:var(--accent)}

/* ranking signals */
.mb-sig{border-top:1px solid var(--line)}
.mb-sig__item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);
  gap:clamp(20px,4vw,56px);padding-block:26px;border-bottom:1px solid var(--line)}
.mb-sig__item h3{color:var(--ink)}
.mb-sig__item p{color:var(--muted);font-size:.97rem}

/* related services */
.mb-rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,28px)}
.mb-rel__item{border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,30px);
  background:var(--bg);transition:border-color .25s ease,transform .25s ease}
.mb-rel__item:hover{border-color:#39404c;transform:translateY(-3px)}
.mb-rel__item .mb-label{display:block;margin-bottom:14px}
.mb-rel__item h3{margin-bottom:8px}
.mb-rel__item p{color:var(--accent-text);font-size:.92rem;font-weight:500}

/* The page's own content, styled as prose.
   A three-track grid keeps running text at a readable measure while letting
   figures and tables span the full container, so images align to the same edges
   as every other section instead of sitting at arbitrary widths. */
.mb-prose{display:grid;grid-template-columns:1fr min(74ch,100%) 1fr}
.mb-prose > *{grid-column:2;margin-bottom:26px}
.mb-prose > *:last-child{margin-bottom:0}

.mb-prose > figure,
.mb-prose > .wp-block-image,
.mb-prose > .wp-block-table,
.mb-prose > table{grid-column:1 / -1;margin-block:clamp(40px,5vw,64px);width:100%}

.mb-prose > figure img,
.mb-prose > .wp-block-image img{width:100%;height:auto;display:block;
  aspect-ratio:16 / 8;object-fit:cover;object-position:center;
  border-radius:var(--r);border:1px solid var(--line)}

.mb-prose figcaption{grid-column:2;color:var(--muted);font-size:.86rem;
  margin-top:12px;text-align:left}
.mb-prose h2{font-size:clamp(1.6rem,2.8vw,2.1rem);margin-top:64px;margin-bottom:20px}
.mb-prose h3{font-size:clamp(1.1rem,1.6vw,1.3rem);margin-top:40px;margin-bottom:14px}
.mb-prose h4{font-family:var(--display);font-weight:600;font-size:1.02rem;
  margin-top:32px;margin-bottom:12px}
.mb-prose > *:first-child{margin-top:0}
.mb-prose p,.mb-prose li{color:var(--muted);font-size:1.02rem;line-height:1.75}
.mb-prose strong{color:var(--ink);font-weight:600}
.mb-prose a{color:var(--accent-text);text-decoration:underline;
  text-decoration-color:rgba(58,147,255,.35);text-underline-offset:3px}
.mb-prose a:hover{text-decoration-color:var(--accent-text)}
.mb-prose ul,.mb-prose ol{padding-left:0}
.mb-prose li{position:relative;padding-left:26px;margin-bottom:12px;list-style:none}
.mb-prose li::before{content:"";position:absolute;left:0;top:.72em;
  width:9px;height:1px;background:var(--accent)}
.mb-prose ol{counter-reset:mbp}
.mb-prose ol li{counter-increment:mbp}
.mb-prose ol li::before{content:counter(mbp);width:auto;height:auto;background:none;
  color:var(--accent);font-family:var(--display);font-weight:600;font-size:.9rem;top:0}
.mb-prose img{border-radius:var(--r);border:1px solid var(--line)}
/* Any colour the old light-background markup tried to force is stripped server
   side, so these rules are the single source of truth for prose colour. */
.mb-prose,.mb-prose p,.mb-prose li,.mb-prose td{color:var(--muted)}
.mb-prose h2,.mb-prose h3,.mb-prose h4,.mb-prose h5,.mb-prose h6,
.mb-prose strong,.mb-prose b,.mb-prose th{color:var(--ink)}
.mb-prose em{color:var(--ink)}
.mb-prose table{width:100%;border-collapse:collapse;margin-block:32px;font-size:.95rem}
.mb-prose th{text-align:left;font-family:var(--display);font-weight:600;color:var(--ink);
  padding:14px 16px 14px 0;border-bottom:1px solid var(--line)}
.mb-prose td{padding:14px 16px 14px 0;border-bottom:1px solid var(--line);color:var(--muted);
  vertical-align:top}
.mb-prose blockquote{border-left:2px solid var(--accent);padding-left:24px;margin-block:32px}
.mb-prose .wp-block-image{margin-block:36px}

@media (max-width:900px){
  .mb-shero__grid{grid-template-columns:1fr;gap:34px}
  .mb-deliv{grid-template-columns:1fr}
  .mb-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mb-cmp{grid-template-columns:1fr}
  .mb-rel{grid-template-columns:1fr}
  .mb-sig__item{grid-template-columns:1fr;gap:8px}
}
@media (max-width:600px){
  .mb-steps{grid-template-columns:1fr}
  .mb-shero__cta .mb-btn{width:100%}
  .mb-prose{max-width:none}
}

/* ---------- footer ---------- */
.mb-foot{background:var(--surface);border-top:1px solid var(--line);
  padding-block:clamp(64px,7vw,96px) 0}
.mb-foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:clamp(32px,4vw,56px);
  padding-bottom:56px}
.mb-foot__logo{height:32px;width:auto;margin-bottom:20px}
.mb-foot p{color:var(--muted);font-size:.95rem;max-width:34ch}
.mb-foot h4{font-family:var(--display);font-weight:600;font-size:.85rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);margin-bottom:20px}
.mb-foot ul li{margin-bottom:12px}
.mb-foot ul a{color:var(--muted);font-size:.95rem;transition:color .18s ease}
.mb-foot ul a:hover{color:var(--accent)}
.mb-foot__map{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  height:200px;margin-bottom:40px;filter:grayscale(1) invert(.92) contrast(.86)}
.mb-foot__map iframe{width:100%;height:100%;border:0}
.mb-foot__bar{border-top:1px solid var(--line);padding-block:26px;
  display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;
  color:var(--muted);font-size:.88rem}
.mb-foot__bar a{transition:color .18s ease}
.mb-foot__bar a:hover{color:var(--accent)}

/* ---------- motion ---------- */
.mb-js .mb-reveal{opacity:0;transform:translateY(22px)}
.mb-reveal{transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)}
.mb-reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .mb-js .mb-reveal,.mb-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .mb-marquee__track{animation:none!important}
  .mb-btn,.mb-svc__row,.mb-case__item,.mb-logo img{transition:none!important}
}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .mb-foot__grid{grid-template-columns:1fr 1fr;gap:40px}
  .mb-case{grid-template-columns:1fr;gap:16px}
  .mb-case__item--lead{flex-direction:column;align-items:flex-start;gap:24px}
  .mb-case__item--lead .mb-case__mark{flex:0 0 auto;margin-bottom:0}
}
/* Tablet: copy still leads, so pull the frame right and deepen the left. */
@media (max-width:1100px){
  .mb-hero__media img{object-position:78% 32%;filter:saturate(.45) contrast(1.06) brightness(.72)}
  .mb-hero__scrim{background:
    linear-gradient(96deg,var(--bg) 0%,var(--bg) 24%,rgba(11,13,16,.95) 38%,
      rgba(11,13,16,.80) 52%,rgba(11,13,16,.56) 70%,rgba(11,13,16,.46) 100%),
    linear-gradient(180deg,rgba(11,13,16,.80) 0%,rgba(11,13,16,.40) 22%,
      rgba(11,13,16,.30) 50%,rgba(11,13,16,.74) 84%,var(--bg) 100%),
    radial-gradient(140% 120% at 18% 38%,transparent 20%,rgba(11,13,16,.42) 64%,rgba(11,13,16,.72) 100%)}
}

/* Mobile: content is full width, so the photograph recedes to atmosphere.
   Reframed onto the dark lower mass rather than reusing the desktop crop. */
@media (max-width:700px){
  .mb-hero__media img{object-position:66% 68%;filter:saturate(.35) contrast(1.04) brightness(.58)}
  .mb-hero__scrim{background:
    linear-gradient(180deg,rgba(11,13,16,.90) 0%,rgba(11,13,16,.62) 26%,
      rgba(11,13,16,.58) 52%,rgba(11,13,16,.86) 82%,var(--bg) 100%),
    radial-gradient(150% 100% at 50% 34%,transparent 8%,rgba(11,13,16,.52) 62%,rgba(11,13,16,.80) 100%)}
  .mb-hero::before{opacity:.7}
}

@media (max-width:900px){
  .mb-nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;
    gap:0;background:var(--surface);border-block:1px solid var(--line);padding:8px var(--gut) 20px;
    display:none}
  .mb-nav.is-open{display:flex}
  .mb-nav a{width:100%;padding-block:14px;border-bottom:1px solid var(--line);font-size:1rem}
  .mb-nav a::after{display:none}
  .mb-burger{display:block}
  .mb-head__cta{display:none}
  .mb-appr{grid-template-columns:1fr;gap:28px}
  .mb-svc__row{grid-template-columns:auto minmax(0,1fr);row-gap:8px}
  .mb-svc__go{grid-column:2;justify-self:start;align-self:start}
  .mb-rev__top{align-items:flex-start}
}
@media (max-width:600px){
  .mb{font-size:16px}
  .mb-hero__cta .mb-btn{width:100%}
  .mb-foot__grid{grid-template-columns:1fr;gap:36px}
  .mb-logo{width:140px;height:88px;padding:16px}
  .mb-trust{flex-direction:column;align-items:flex-start;gap:10px}
}