/* =========================================================
   MAGICBRICK — ABOUT US PAGE  (FULL CSS — FINAL v3)
   ========================================================= */

.mb-a-page{background:#fff;}

/* ---------------------------------------------------------
   1) HERO
   --------------------------------------------------------- */
.mb-a-hero{
  position:relative;background-color:var(--navy);
  background-size:cover;background-position:center right;background-repeat:no-repeat;
  padding:74px 0 130px;overflow:hidden;
}
.mb-a-hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,
    var(--navy) 0%,var(--navy) 28%,
    rgba(11,27,61,.94) 40%,rgba(11,27,61,.55) 56%,
    rgba(11,27,61,.18) 74%,rgba(11,27,61,.04) 100%);
}
.mb-a-hero-inner{position:relative;z-index:2;}
.mb-a-tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:16px;}
.mb-a-hero h1{font-family:var(--serif);color:#fff;font-weight:800;line-height:1.08;font-size:clamp(2.1rem,4.6vw,3.2rem);margin:0 0 20px;letter-spacing:-.5px;}
.mb-a-hero-sub{color:rgba(255,255,255,.86);font-size:1.02rem;line-height:1.7;margin:0 0 28px;max-width:440px;}
.mb-a-hero .mb-btn{padding:14px 26px;}

/* ---------------------------------------------------------
   FEATURE CARD
   --------------------------------------------------------- */
.mb-a-feats-wrap{position:relative;z-index:5;margin-top:-78px;}
.mb-a-feats{
  background:#faf8f4;border-radius:10px;box-shadow:0 22px 50px rgba(11,27,61,.14);
  display:grid;grid-template-columns:repeat(4,1fr);padding:38px 14px;
}
.mb-a-feat{text-align:center;padding:6px 26px;border-right:1px solid #e5e2da;display:flex;flex-direction:column;align-items:center;gap:10px;}
.mb-a-feat:last-child{border-right:none;}
.mb-a-feat-ic{color:var(--gold);display:flex;align-items:center;justify-content:center;height:38px;}
.mb-a-feat-ic img{height:34px;width:34px;object-fit:contain;}
.mb-a-feat h3{font-size:1.02rem;color:var(--navy);font-weight:700;margin:0;}
.mb-a-feat p{font-size:.82rem;color:var(--gray);line-height:1.55;margin:0;}

/* ---------------------------------------------------------
   2) OUR STORY + STATS
   --------------------------------------------------------- */
.mb-a-story{padding:60px 0;}
.mb-a-story-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center;}
.mb-a-eyebrow{display:block;font-size:.72rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:12px;}
.mb-a-story-left h2{font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.1rem);color:var(--navy);font-weight:800;margin:0 0 16px;}
.mb-a-story-left p{color:var(--gray);font-size:.94rem;line-height:1.75;margin:0 0 14px;}
.mb-a-sign{margin-top:22px;}
.mb-a-sign-img{max-height:54px;width:auto;margin-bottom:6px;}
.mb-a-sign-name{font-family:var(--serif);font-size:1.5rem;color:var(--navy);font-style:italic;font-weight:700;line-height:1;margin-bottom:4px;}
.mb-a-sign-role{font-size:.82rem;color:var(--gray);font-weight:600;}

.mb-a-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.mb-a-stat{text-align:center;padding:6px 8px;}
.mb-a-stat-ic{color:var(--gold);display:flex;justify-content:center;margin-bottom:14px;height:36px;align-items:center;}
.mb-a-stat-n{font-size:1.9rem;font-weight:800;color:var(--navy);line-height:1;margin-bottom:10px;}
.mb-a-stat-l{font-size:.92rem;color:var(--navy);font-weight:700;margin-bottom:8px;}
.mb-a-stat-s{font-size:.8rem;color:var(--gray);line-height:1.5;}

/* ---------------------------------------------------------
   3) MEET THE TEAM
   --------------------------------------------------------- */
.mb-a-team{padding:8px 0 60px;}
.mb-a-team-head{text-align:center;margin-bottom:34px;}
.mb-a-team-head h2{font-family:var(--serif);font-size:clamp(1.6rem,2.8vw,2.05rem);color:var(--navy);font-weight:800;margin:0 0 10px;}
.mb-a-team-head p{color:var(--gray);font-size:.92rem;line-height:1.6;margin:0 auto;max-width:620px;}

/* --- Carousel wrapper --- */
.mb-a-team-wrap{
  position:relative;
  padding:0 28px;
  overflow:visible;
}

/* --- Non-carousel: exactly 4 columns --- */
.mb-a-team-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

/* --- CAROUSEL: flex-based (reliable across all browsers) --- */
.mb-a-team-grid.is-carousel{
  display:flex;
  flex-wrap:nowrap;
  gap:20px;
  overflow-x:auto;
  overflow-y:visible;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding-bottom:8px;
  -ms-overflow-style:none;
  scrollbar-width:none;
  /* prevent container clipping */
  width:100%;
  box-sizing:border-box;
}
.mb-a-team-grid.is-carousel::-webkit-scrollbar{display:none;}

/* Each card: fixed width so exactly 4 show */
.mb-a-team-grid.is-carousel .mb-a-member{
  min-width:calc(25% - 15px);
  max-width:calc(25% - 15px);
  flex-shrink:0;
  scroll-snap-align:start;
}

/* --- Card (shared) --- */
.mb-a-member{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 12px 18px;
  transition:box-shadow .25s,transform .25s;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
}
.mb-a-member:hover{box-shadow:0 14px 34px rgba(11,27,61,.10);transform:translateY(-3px);}

.mb-a-member-img{ border-radius:8px; overflow:hidden; aspect-ratio:1/1; margin-bottom:14px; flex-shrink:0; width:100%; background: url(https://magicbrick.co.uk/wp-content/uploads/2026/06/magic-brick-team-bg.png); background-size: cover; background-position: center;
}
.mb-a-member-img img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
.mb-a-member h3{font-size:1.02rem;color:var(--navy);font-weight:700;margin:0 0 3px;padding:0 4px;}
.mb-a-member-role{font-size:.82rem;color:var(--gray);margin:0 0 10px;padding:0 4px;}
.mb-a-member p{font-size:.82rem;color:var(--gray);line-height:1.55;margin:0 0 14px;padding:0 4px;flex:1;}
.mb-a-member-li{display:inline-flex;padding:0 4px;color:var(--navy);}
.mb-a-member-li:hover{color:var(--gold);}

/* --- Arrow buttons --- */
.mb-a-car-btn{
  position:absolute;
  top:38%;
  transform:translateY(-50%);
  z-index:10;
  width:42px;height:42px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  color:var(--navy);
  box-shadow:0 6px 18px rgba(11,27,61,.14);
  transition:background .2s,color .2s,opacity .2s;
  padding:0;
}
.mb-a-car-btn:hover{background:var(--navy);color:#fff;}
.mb-a-car-prev{left:0;}
.mb-a-car-next{right:0;}
.mb-a-car-btn[disabled]{opacity:0;pointer-events:none;}
.mb-a-car-prev svg { rotate: 180deg; }

/* ---------------------------------------------------------
   4) LOCAL EXPERTISE
   --------------------------------------------------------- */
.mb-a-local{padding:8px 0 56px;}
.mb-a-local-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center;}
.mb-a-local-img{border-radius:12px;overflow:hidden;height:320px;}
.mb-a-local-img img{width:100%;height:100%;object-fit:cover;}
.mb-a-local-right h2{font-family:var(--serif);font-size:clamp(1.6rem,2.8vw,2rem);color:var(--navy);font-weight:800;margin:0 0 14px;}
.mb-a-local-right p{color:var(--gray);font-size:.94rem;line-height:1.7;margin:0 0 20px;}
.mb-a-local-list{display:flex;flex-direction:column;gap:12px;}
.mb-a-local-list li{display:flex;align-items:center;gap:11px;font-size:.9rem;color:var(--ink);}
.mb-a-local-list li svg{flex-shrink:0;color:var(--gold);}

/* ---------------------------------------------------------
   5) PROUD MEMBERS — logo marquee
   --------------------------------------------------------- */
.mb-a-members{padding:8px 0 56px;}
.mb-a-members-box{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:30px 0;}
.mb-a-members-tag{display:block;text-align:center;font-size:.72rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:24px;}
.mb-a-marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.mb-a-marquee-track{display:flex;align-items:center;gap:70px;width:max-content;animation:mb-a-scroll 28s linear infinite;}
.mb-a-marquee:hover .mb-a-marquee-track{animation-play-state:paused;}
.mb-a-logo{flex-shrink:0;display:flex;align-items:center;justify-content:center;height:64px;}
.mb-a-logo img{max-height:60px;width:auto;object-fit:contain;}
@keyframes mb-a-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------------------------------------------------------
   6) REVIEWS
   --------------------------------------------------------- */
.mb-a-reviews{padding:8px 0 60px;}
.mb-a-reviews-head{margin-bottom:28px;}
.mb-a-reviews-head .mb-a-eyebrow{text-align:left;}
.mb-a-reviews-head h2{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,1.9rem);color:var(--navy);font-weight:800;margin:0;}
.mb-a-reviews-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.mb-a-review{background:var(--soft);border-radius:12px;padding:24px 22px;display:flex;flex-direction:column;}
.mb-a-stars{display:flex;gap:3px;margin-bottom:14px;color:var(--gold);}
.mb-a-review-quote{font-size:.86rem;color:var(--ink);line-height:1.65;margin:0 0 18px;flex:1;}
.mb-a-review-by{display:flex;align-items:center;gap:11px;}
.mb-a-review-av{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#dfe3ea;flex-shrink:0;}
.mb-a-review-by b{display:block;font-size:.85rem;color:var(--navy);font-weight:700;}
.mb-a-review-by span{display:block;font-size:.76rem;color:var(--gray);}
.mb-a-google{background:var(--soft);border-radius:12px;padding:24px 22px;display:flex;flex-direction:column;justify-content:center;}
.mb-a-google-logo{height:38px;margin-bottom:14px;}
.mb-a-google-logo img{height:38px;width:auto;object-fit:contain;}
.mb-a-google-rating{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.mb-a-google-rating b{font-size:1.5rem;color:var(--navy);font-weight:800;}
.mb-a-google-rating .mb-a-stars{margin:0;}
.mb-a-google p{font-size:.82rem;color:var(--gray);margin:0 0 14px;}
.mb-a-google a{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--gold);}
.mb-a-google a:hover{color:var(--gold-dark);}

/* ---------------------------------------------------------
   7) LET'S WORK TOGETHER
   --------------------------------------------------------- */
.mb-a-cta{padding:6px 0 64px;}
.mb-a-cta-bar{background:var(--navy);border-radius:12px;padding:26px 36px;display:flex;align-items:center;gap:22px;}
.mb-a-cta-ic{flex-shrink:0;width:52px;height:52px;border-radius:50%;border:2px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;color:#fff;}
.mb-a-cta-txt{flex:1;}
.mb-a-cta-txt h2{font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.55rem);color:#fff;font-weight:800;margin:0 0 3px;}
.mb-a-cta-txt p{color:rgba(255,255,255,.74);font-size:.88rem;margin:0;}
.mb-a-cta .mb-btn{white-space:nowrap;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:1100px){
  .mb-a-story-grid,.mb-a-local-grid{gap:36px;}
  .mb-a-team-grid:not(.is-carousel){grid-template-columns:repeat(3,1fr);}
  .mb-a-team-grid.is-carousel .mb-a-member{
    min-width:calc(33.333% - 14px);
    max-width:calc(33.333% - 14px);
  }
  .mb-a-reviews-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:980px){
  .mb-a-hero{background-position:center;padding:64px 0 120px;}
  .mb-a-hero::before{background:linear-gradient(rgba(11,27,61,.82),rgba(11,27,61,.88));}
  .mb-a-hero-inner{max-width:none;}
  .mb-a-feats{grid-template-columns:repeat(2,1fr);gap:8px 0;padding:28px 14px;}
  .mb-a-feat:nth-child(2){border-right:none;}
  .mb-a-feat{padding:16px 18px;}
  .mb-a-story-grid{grid-template-columns:1fr;}
  .mb-a-local-grid{grid-template-columns:1fr;}
  .mb-a-team-grid.is-carousel .mb-a-member{
    min-width:calc(50% - 10px);
    max-width:calc(50% - 10px);
  }
}
@media(max-width:820px){
  .mb-a-stats{grid-template-columns:repeat(2,1fr);gap:30px 18px;}
  .mb-a-team-grid:not(.is-carousel){grid-template-columns:repeat(2,1fr);}
  .mb-a-cta-bar{flex-direction:column;text-align:center;gap:16px;}
}
@media(max-width:600px){
  .mb-a-hero{padding:54px 0 110px;}
  .mb-a-feats{grid-template-columns:1fr;}
  .mb-a-feat{border-right:none;border-bottom:1px solid #e5e2da;padding:18px;}
  .mb-a-feat:last-child{border-bottom:none;}
  .mb-a-feats-wrap{margin-top:-70px;}
  .mb-a-stats{grid-template-columns:1fr;gap:26px;}
  .mb-a-team-grid:not(.is-carousel){grid-template-columns:1fr;}
  .mb-a-team-grid.is-carousel .mb-a-member{
    min-width:85%;
    max-width:85%;
  }
  .mb-a-team-wrap{padding:0;}
  .mb-a-car-btn{display:none;}
  .mb-a-reviews-grid{grid-template-columns:1fr;}
  .mb-a-marquee-track{gap:44px;}
}