/* ═══════════════════════════════════════════════════════════════════════
   MidBank cinematic hero — the Our Story framework, as a shared component.
   2026-09-18

   Our Story's hero is the page Italo points to as the standard: full-height
   cinematic media, a navy scrim, a centred pill chip, a large Playfair
   headline, a lede, ONE round red call to action and a quiet scroll cue.
   It lived as inline CSS on that single page. This file is the same rules,
   renamed to .mb-cine-* so any page can use it without colliding with
   our-story.html's own inline copy.

   The values below are taken from our-story.html verbatim. Do not "tune"
   them per page — consistency across the site is the point.

   Additions over Our Story, and why:
   - .mb-cine-media accepts an <img> as well as a <video>. Most pages have a
     photograph, not footage; a still gets a very slow zoom so the hero still
     feels alive, and that motion is switched off for reduced-motion users.
   - .mb-cine-cta--ghost: many service pages carry two actions (e.g. Schedule
     a consultation + Apply now). The second is a quiet outline pill so the red
     one stays the single primary, per the one-red-CTA-per-section rule.
   ═══════════════════════════════════════════════════════════════════════ */

.mb-cine-hero{
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding:96px 0 84px;
  position:relative;overflow:hidden;
  background-color:#0E1526;
  background-size:cover;background-position:center;
  isolation:isolate;
}

.mb-cine-media{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  z-index:0;border:0;pointer-events:none;
  max-width:none;
}
img.mb-cine-media{
  transform-origin:center 40%;
  animation:mbCineDrift 28s ease-in-out infinite alternate;
}
@keyframes mbCineDrift{
  from{transform:scale(1.02)}
  to{transform:scale(1.10)}
}

/* Navy-to-transparent scrim: legible headline, the media still reads. */
.mb-cine-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(14,21,38,.78) 0%,rgba(14,21,38,.20) 34%,rgba(14,21,38,.30) 62%,rgba(14,21,38,.88) 100%),
    linear-gradient(90deg,rgba(44,46,131,.52) 0%,rgba(44,46,131,.14) 52%,rgba(44,46,131,.44) 100%);
}

.mb-cine-hero .container{position:relative;z-index:2;}

.mb-cine-content{
  position:relative;z-index:2;
  text-align:center;max-width:940px;margin:0 auto;
}

.mb-cine-chip{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 20px;border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#fff;font-size:13px;font-weight:600;
  letter-spacing:1.6px;text-transform:uppercase;
  margin-bottom:28px;
}
.mb-cine-chip-dot{width:7px;height:7px;border-radius:50%;background:#fff;flex:0 0 auto;}

.mb-cine-hero h1{
  font-family:var(--font-display,'Playfair Display',Georgia,serif);
  font-size:clamp(36px,7.2vw,78px);
  font-weight:800;line-height:1.06;letter-spacing:-.01em;
  color:#fff;margin:0 0 26px;
  text-shadow:0 2px 34px rgba(0,0,0,.42);
}
/* Old service heroes wrap part of the headline in .gradient-text, which the
   white theme recoloured navy. On the dark scrim that must read white. */
.mb-cine-hero h1 .gradient-text,
.mb-cine-hero h1 .mb-cine-accent{
  color:#fff;-webkit-text-fill-color:#fff;background:none;
  display:inline-block;position:relative;
}
.mb-cine-hero h1 .mb-cine-accent::after{
  content:'';position:absolute;left:0;right:0;bottom:-.16em;
  height:4px;border-radius:4px;background:rgba(255,255,255,.40);
}

.mb-cine-hero p.mb-cine-lede{
  font-size:clamp(16px,1.9vw,21px);line-height:1.72;
  color:rgba(255,255,255,.90);
  max-width:720px;margin:0 auto 40px;
  text-shadow:0 1px 18px rgba(0,0,0,.42);
}

.mb-cine-actions{
  display:flex;flex-wrap:wrap;gap:14px;
  justify-content:center;align-items:center;
}

.mb-cine-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:56px;padding:16px 34px;border-radius:999px;
  background:var(--mb-red,#DD1726);color:#fff;
  font-size:16px;font-weight:700;text-decoration:none;
  box-shadow:0 14px 40px rgba(221,23,38,.34);
  transition:transform .28s ease,box-shadow .28s ease,background .28s ease;
}
.mb-cine-cta:hover,.mb-cine-cta:focus-visible{
  background:var(--mb-red-dark,#B5121F);color:#fff;
  transform:translateY(-2px);
  box-shadow:0 18px 48px rgba(221,23,38,.44);
}
.mb-cine-cta--ghost{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.46);
  box-shadow:none;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.mb-cine-cta--ghost:hover,.mb-cine-cta--ghost:focus-visible{
  background:rgba(255,255,255,.18);box-shadow:none;
}

.mb-cine-scroll{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:3;display:inline-flex;flex-direction:column;align-items:center;
  gap:8px;min-width:52px;min-height:52px;justify-content:flex-end;
  padding:6px 10px;
  color:rgba(255,255,255,.72);
  font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  text-decoration:none;transition:color .3s ease;
}
.mb-cine-scroll:hover,.mb-cine-scroll:focus-visible{color:#fff;}
.mb-cine-rail{
  width:1px;height:42px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.65));
}
.mb-cine-rail::after{
  content:'';position:absolute;left:0;top:-42px;width:1px;height:42px;
  background:#fff;
  animation:mbCineRail 2.6s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes mbCineRail{
  0%{transform:translateY(0);opacity:0}
  22%{opacity:1}
  100%{transform:translateY(84px);opacity:0}
}

/* Phones: the hero must still land above the fold without cramping. */
@media (max-width:640px){
  .mb-cine-hero{padding:88px 0 96px;}
  .mb-cine-chip{font-size:11.5px;letter-spacing:1.3px;padding:8px 16px;margin-bottom:22px;}
  .mb-cine-actions{flex-direction:column;align-items:stretch;padding:0 8px;}
  .mb-cine-cta{width:100%;}
}

@media (prefers-reduced-motion:reduce){
  img.mb-cine-media{animation:none;transform:none;}
  .mb-cine-rail::after{animation:none;}
  .mb-cine-cta{transition:none;}
}

/* ---------- Proof band directly under the hero -------------------------
   Several old heroes carried a stats card beside the headline. The Our Story
   framework is centred with nothing beside it, so those figures move here
   rather than being dropped. White band, navy figures, hairline dividers:
   the calm beat after the loud one. */
.mb-cine-stats{background:#fff;border-bottom:1px solid #E6E8EF;padding:clamp(34px,5vw,56px) 0;}
.mb-cine-stats-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:980px;margin:0 auto;}
.mb-cine-stat{text-align:center;padding:6px 18px;}
.mb-cine-stat + .mb-cine-stat{border-left:1px solid #E6E8EF;}
.mb-cine-stat-num{
  font-family:var(--font-display,'Playfair Display',Georgia,serif);
  font-size:clamp(30px,4.2vw,48px);font-weight:800;line-height:1.05;
  color:#2C2E83;letter-spacing:-.01em;
}
.mb-cine-stat-label{margin-top:8px;font-size:14px;font-weight:600;color:#4A5268;letter-spacing:.2px;}
@media (max-width:640px){
  .mb-cine-stats-row{grid-template-columns:minmax(0,1fr);gap:18px;}
  .mb-cine-stat + .mb-cine-stat{border-left:0;border-top:1px solid #E6E8EF;padding-top:22px;}
}