/* ============================================================
   DESIGN B — "Engineered Path"
   Dark-first identity. A restrained path motif guides the eye,
   cut corners echo the logo slash, gold marks energy. No full
   pattern washes — only engineered fragments with a function.
   ============================================================ */

.m2--b { background: var(--m2-navy); color: #fff; }
.m2--b .m2-main { background: var(--m2-navy); }

/* Cut corner utility (logo slash geometry) */
.m2b-cut { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
:lang(ar) .m2b-cut, [dir="rtl"] .m2b-cut { clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px); }

/* Header B: navy, gold hairline */
.m2--b .m2-header { background: rgba(1, 25, 53, 0.9); backdrop-filter: blur(10px); color: #fff; border-bottom: 1px solid var(--m2-line-dark); }
.m2--b .m2-header.is-scrolled { border-bottom-color: rgba(242, 180, 90, 0.35); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); }
.m2--b .m2-nav a { color: rgba(255, 255, 255, 0.85); }
.m2--b .m2-nav a:hover { color: #fff; }
.m2--b .m2-nav a::after { background: var(--m2-gold); }
.m2--b .m2-nav a[aria-current="page"] { color: var(--m2-gold); }
.m2--b .m2-nav .m2-nav__cta {
  color: var(--m2-navy); background: var(--m2-gold); font-weight: 700;
  padding-inline: 16px; border-radius: 0;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
}
.m2--b .m2-nav .m2-nav__cta::after { content: none; }
.m2--b .m2-nav .m2-nav__cta:hover { background: #f6c477; color: var(--m2-navy); }
.m2--b .m2-lang { color: #fff; border: 1px solid var(--m2-line-dark); }
.m2--b .m2-lang:hover { border-color: var(--m2-gold); color: var(--m2-gold); }

/* ---------------- HERO B: anchored composition over directional gradient ---------------- */
.m2b-hero { position: relative; min-height: min(78vh, 760px); display: flex; align-items: flex-end; isolation: isolate; overflow: hidden; }
.m2b-hero__bg { position: absolute; inset: 0; z-index: -2; }
.m2b-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; display: block; }
:lang(en) .m2b-hero__bg img { object-position: 38% center; }
.m2b-hero::before {
  /* directional gradient: dark on the text (start) side only */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(1, 25, 53, 0.92) 0%, rgba(1, 25, 53, 0.35) 45%, rgba(1, 25, 53, 0.15) 100%),
    linear-gradient(var(--m2b-grad-dir, to left), rgba(1, 25, 53, 0.05) 30%, rgba(1, 25, 53, 0.82) 78%);
}
:lang(ar) .m2b-hero::before { --m2b-grad-dir: to right; }
.m2b-hero__path {
  position: absolute; z-index: 0; inset-inline-start: 0; top: 0;
  width: min(52vw, 560px); opacity: 0.85; pointer-events: none;
}
:lang(ar) .m2b-hero__path { transform: scaleX(-1); }
.m2b-hero__copy { position: relative; z-index: 1; width: 100%; padding-block: var(--m2-s7) var(--m2-s6); }
.m2b-hero__copy .m2-display { max-width: 16ch; color: #fff; margin-block: var(--m2-s3); }
.m2b-hero__copy .m2-lead { color: var(--m2-pale); max-width: 46ch; margin-bottom: var(--m2-s5); }
.m2b-hero__actions { display: flex; flex-wrap: wrap; gap: var(--m2-s3); align-items: center; }
.m2b-hero__scroll {
  position: absolute; z-index: 1; inset-inline-start: 50%; bottom: 0;
  width: 1px; height: 44px; background: linear-gradient(to bottom, transparent, var(--m2-gold));
}

/* ---------------- Strip: engineered stats/categories ---------------- */
.m2b-strip { border-block: 1px solid var(--m2-line-dark); background: rgba(255, 255, 255, 0.02); }
.m2b-strip__grid { display: grid; gap: 0; grid-template-columns: 1fr; }
@media (min-width: 900px) { .m2b-strip__grid { grid-template-columns: auto repeat(4, 1fr); } }
.m2b-strip__stat, .m2b-strip__cell { padding: var(--m2-s4) var(--m2-s4); }
.m2b-strip__stat {
  display: flex; align-items: baseline; gap: var(--m2-s3);
  border-inline-end: 1px solid var(--m2-line-dark);
}
.m2b-strip__stat strong { font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; color: var(--m2-gold); font-variant-numeric: tabular-nums; }
.m2b-strip__stat span { font-size: var(--m2-small); color: var(--m2-pale); max-width: 16ch; }
.m2b-strip__cell { display: flex; align-items: center; gap: var(--m2-s2); font-size: 0.9375rem; color: rgba(255, 255, 255, 0.85); border-inline-end: 1px solid var(--m2-line-dark); }
.m2b-strip__cell:last-child { border-inline-end: 0; }
.m2b-strip__cell::before { content: ""; width: 6px; height: 6px; background: var(--m2-blue); transform: rotate(45deg); flex: none; }
@media (max-width: 899px) {
  .m2b-strip__grid { grid-template-columns: 1fr 1fr; }
  .m2b-strip__stat { grid-column: 1 / -1; border-inline-end: 0; border-bottom: 1px solid var(--m2-line-dark); }
  .m2b-strip__cell:nth-child(odd) { border-inline-end: 0; }
}

/* ---------------- Path connector between sections ---------------- */
.m2b-connector { position: relative; height: var(--m2-s7); }
.m2b-connector::before {
  content: ""; position: absolute; inset-inline-start: calc(var(--m2-gutter) + 3px);
  top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom, var(--m2-gold), rgba(242, 180, 90, 0.15));
}
.m2b-connector::after {
  content: ""; position: absolute; inset-inline-start: var(--m2-gutter); bottom: -3px;
  width: 7px; height: 7px; background: var(--m2-gold); transform: rotate(45deg);
}

/* ---------------- Section heading device B ---------------- */
.m2b-secthead { margin-bottom: var(--m2-s6); display: flex; align-items: baseline; gap: var(--m2-s3); flex-wrap: wrap; }
.m2b-secthead h2 { color: inherit; max-width: 22ch; }
.m2b-secthead .m2-tertiary { margin-inline-start: auto; }

/* ---------------- Services B: cut-corner cards on light ground ---------------- */
.m2b-light { background: var(--m2-off); color: var(--m2-charcoal); }
.m2b-services__grid { display: grid; gap: var(--m2-s4); grid-template-columns: 1fr; }
@media (min-width: 700px) { .m2b-services__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .m2b-services__grid { grid-template-columns: repeat(3, 1fr); } }
.m2b-svc {
  position: relative; display: flex; flex-direction: column; gap: var(--m2-s2);
  background: #fff; padding: var(--m2-s4);
  border: 1px solid rgba(42, 47, 53, 0.1);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  transition: border-color var(--m2-fast), transform var(--m2-fast), box-shadow var(--m2-fast);
  color: inherit;
}
:lang(ar) .m2b-svc { clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px); }
.m2b-svc::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--m2-blue), var(--m2-gold));
  transform: scaleX(0); transform-origin: var(--m2-underline-origin, right);
  transition: transform var(--m2-med);
}
.m2b-svc:hover { border-color: rgba(57, 108, 181, 0.4); box-shadow: var(--m2-shadow-1); }
.m2b-svc:hover::before { transform: scaleX(1); }
.m2b-svc__num { font-size: var(--m2-small); font-weight: 700; color: var(--m2-blue); font-variant-numeric: tabular-nums; }
.m2b-svc h3 { font-size: var(--m2-h3); }
.m2b-svc p { margin: 0; font-size: var(--m2-small); color: rgba(42, 47, 53, 0.65); }
.m2b-svc .m2-tertiary { margin-top: auto; padding-top: var(--m2-s2); font-size: var(--m2-small); }

/* ---------------- Projects B: image cards with engineered overlay ---------------- */
.m2b-projects__grid { display: grid; gap: var(--m2-s4); grid-template-columns: 1fr; }
@media (min-width: 700px) { .m2b-projects__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) {
  .m2b-projects__grid { grid-template-columns: repeat(12, 1fr); }
  .m2b-proj:nth-child(1) { grid-column: span 7; }
  .m2b-proj:nth-child(2) { grid-column: span 5; }
  .m2b-proj:nth-child(3) { grid-column: span 5; }
  .m2b-proj:nth-child(4) { grid-column: span 7; }
}
.m2b-proj { position: relative; display: block; overflow: hidden; color: #fff; }
.m2b-proj img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; transition: transform var(--m2-med); }
.m2b-proj:hover img { transform: scale(1.03); }
.m2b-proj::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(1, 25, 53, 0.88) 0%, rgba(1, 25, 53, 0.25) 45%, transparent 70%);
  transition: background var(--m2-fast);
}
.m2b-proj__cap { position: absolute; z-index: 1; inset-inline: var(--m2-s4); bottom: var(--m2-s4); display: grid; gap: 4px; }
.m2b-proj__cap::before { content: ""; width: 34px; height: 2px; background: var(--m2-gold); margin-bottom: 6px; transition: width var(--m2-med); }
.m2b-proj:hover .m2b-proj__cap::before { width: 56px; }
.m2b-proj__cap h3 { color: #fff; font-size: var(--m2-h3); }
.m2b-proj__cap span { font-size: var(--m2-small); color: var(--m2-pale); }

/* ---------------- About B: compact split on navy ---------------- */
.m2b-about { display: grid; gap: var(--m2-s5); }
@media (min-width: 1024px) { .m2b-about { grid-template-columns: 6fr 5fr; gap: var(--m2-s8); align-items: center; } }
.m2b-about p { color: var(--m2-pale); }
.m2b-about p + p { margin-top: var(--m2-s3); }
.m2b-about__media { position: relative; }
.m2b-about__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.m2b-about__media::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 40%;
  background: linear-gradient(to top, rgba(1, 25, 53, 0.55), transparent);
}
.m2b-about__media::after {
  content: ""; position: absolute; top: -10px; inset-inline-end: -10px;
  width: 84px; height: 84px;
  border-top: 2px solid var(--m2-gold); border-inline-end: 2px solid var(--m2-gold);
}

/* ---------------- CTA B ---------------- */
.m2b-cta { position: relative; overflow: hidden; border-top: 1px solid var(--m2-line-dark); }
.m2b-cta svg.m2b-cta__path { position: absolute; inset-inline-end: 0; bottom: 0; width: min(48vw, 520px); opacity: 0.5; pointer-events: none; }
:lang(en) .m2b-cta svg.m2b-cta__path { transform: scaleX(-1); }
.m2b-cta__inner { position: relative; z-index: 1; padding-block: var(--m2-s8); max-width: 62ch; }
.m2b-cta h2 { color: #fff; }
.m2b-cta p { color: var(--m2-pale); margin: var(--m2-s3) 0 var(--m2-s5); }

/* B buttons take the cut corner */
.m2--b .m2-btn--primary { border-radius: 0; clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); }
:lang(en) .m2--b .m2-btn--primary { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.m2--b .m2-btn--ghost { border-radius: 0; }

/* Light sub-sections inside B keep charcoal text for form */
.m2--b .m2b-light .m2-eyebrow { color: var(--m2-blue); }

/* AR measure fixes + strip behaviour */
.m2--b:lang(ar) .m2b-hero__copy .m2-display { max-width: 12em; }
.m2b-strip__cell { white-space: nowrap; }
.m2b-strip__stat span { max-width: 13em; }
.m2--b:lang(ar) .m2b-strip__stat span { max-width: 12em; }
@media (min-width: 900px) { .m2b-strip__grid { grid-template-columns: minmax(280px, auto) repeat(4, minmax(0, 1fr)); } }
.m2b-strip__cell { justify-content: center; }

/* ============================================================
   SITE-WIDE ROLLOUT EXTENSIONS (inner pages, details, forms)
   ============================================================ */

/* Page head band: navy, path fragment, compact */
.m2b-pagehead {
  position: relative; overflow: hidden;
  padding-block: var(--m2-s6) var(--m2-s5);
  border-bottom: 1px solid var(--m2-line-dark);
}
.m2b-pagehead::after {
  content: ""; position: absolute; inset-inline-end: 0; top: 0;
  width: min(40vw, 420px); height: 100%;
  background: url("../img/masar-path-line.svg") no-repeat top right / contain;
  opacity: 0.35; pointer-events: none;
}
:lang(en) .m2b-pagehead::after { transform: scaleX(-1); }
.m2b-pagehead .m2-display, .m2b-pagehead h1 { color: #fff; position: relative; z-index: 1; }
.m2b-pagehead__meta { margin-top: var(--m2-s2); position: relative; z-index: 1; }
.m2b-pagehead__meta .masar-project-meta { color: var(--m2-gold); font-size: var(--m2-small); }
.m2b-pagehead .masar-backlink { margin: 0 0 var(--m2-s3); position: relative; z-index: 1; }
.m2b-pagehead .masar-backlink a { color: var(--m2-pale); font-size: var(--m2-small); }
.m2b-pagehead .masar-backlink a:hover { color: var(--m2-gold); }
.m2b-pagehead .m2b-pagehead__lead { color: var(--m2-pale); margin: var(--m2-s3) 0 0; position: relative; z-index: 1; }

/* Featured figure band between pagehead and light detail */
.m2b-figure { background: linear-gradient(to bottom, var(--m2-navy) 55%, var(--m2-off) 55%); }
.m2b-figure img { width: 100%; display: block; box-shadow: var(--m2-shadow-2); }
.m2b-figure figure { margin: 0; }

/* Detail area on light ground */
.m2b-detail { max-width: 860px; }
.m2b-detail .masar-facts { margin-bottom: var(--m2-s5); background: #fff; border: 1px solid rgba(42,47,53,0.1); }
.m2b-detail .masar-facts th { background: rgba(57,108,181,0.06); font-weight: 700; color: var(--m2-indigo); width: 1%; white-space: nowrap; padding: 14px 16px; }
.m2b-detail .masar-facts td { padding: 14px 16px; }
.m2b-detail .masar-facts tr:last-child :is(th, td) { border-bottom: 0; }
.m2b-inline-cta { margin-top: var(--m2-s5); padding-top: var(--m2-s4); border-top: 1px solid rgba(42,47,53,0.12); }

/* Generic prose page (privacy, fallback) */
.m2b-prose { max-width: 780px; }

/* 404 */
.m2b-404 { position: relative; overflow: hidden; min-height: 46vh; }
.m2b-404::before {
  content: ""; position: absolute; inset-inline-start: -30px; bottom: -30px;
  width: 340px; height: 340px;
  background: url("../img/masar-pattern-corner.svg") no-repeat center / contain;
  opacity: 0.1; pointer-events: none;
}
.m2b-404 h1 { color: #fff; }
.m2b-404 p { color: var(--m2-pale); }
.m2b-404 .wp-element-button {
  display: inline-flex; align-items: center; height: 46px; padding-inline: 20px;
  border-radius: 0; clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  background: var(--m2-blue); color: #fff; font-weight: 700; text-decoration: none;
}
:lang(en) .m2b-404 .wp-element-button { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }

/* ---------- Query-loop project cards (Projects page) → B card ---------- */
.m2--b .masar-projects-grid .masar-card {
  background: #fff; border: 1px solid rgba(42,47,53,0.1); border-radius: 0;
  box-shadow: none;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  transition: border-color var(--m2-fast), box-shadow var(--m2-fast);
}
.m2--b:lang(ar) .masar-projects-grid .masar-card { clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px); }
.m2--b .masar-projects-grid .masar-card:hover { transform: none; border-color: rgba(57,108,181,0.45); box-shadow: var(--m2-shadow-1); }
.m2--b .masar-projects-grid .wp-block-post-title { font-size: var(--m2-h3); }
.m2--b .masar-projects-grid .wp-block-post-title a { color: var(--m2-charcoal); text-decoration: none; }
.m2--b .masar-projects-grid .wp-block-post-title a:hover { color: var(--m2-blue); text-decoration: none; }
.m2--b .masar-project-meta { color: rgba(42,47,53,0.6); font-size: var(--m2-small); }
.m2--b .masar-projects-grid .wp-block-post-featured-image { position: relative; }
.m2--b .masar-projects-grid .wp-block-post-featured-image::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: 0;
  width: 44px; height: 3px; background: var(--m2-gold);
}

/* ---------- Form panel (Contact / Landing) ---------- */
.m2b-form-panel {
  background: #fff; border: 1px solid rgba(42,47,53,0.1);
  padding: var(--m2-s5);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}
:lang(ar) .m2b-form-panel { clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px); }
.m2b-contact-grid { display: grid; gap: var(--m2-s5); align-items: start; }
@media (min-width: 1024px) { .m2b-contact-grid { grid-template-columns: 5fr 7fr; gap: var(--m2-s6); } }
.m2b-contact-card { display: grid; gap: var(--m2-s3); }
.m2b-contact-card__row { display: flex; gap: 12px; align-items: baseline; padding: var(--m2-s3) 0; border-bottom: 1px solid rgba(42,47,53,0.12); }
.m2b-contact-card__row svg { width: 16px; height: 16px; flex: none; color: var(--m2-blue); translate: 0 2px; }
.m2b-contact-card__row a { color: var(--m2-charcoal); font-weight: 500; }
.m2b-contact-card__row a:hover { color: var(--m2-blue); }
.m2b-note { font-size: var(--m2-small); color: rgba(42,47,53,0.75); }

/* Landing tweaks */
.m2--landing .m2b-hero { min-height: min(64vh, 640px); }

/* Values grid (About) */
.m2b-values { display: grid; gap: var(--m2-s4); grid-template-columns: 1fr; }
@media (min-width: 700px) { .m2b-values { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .m2b-values { grid-template-columns: repeat(3, 1fr); } }
.m2b-value { background: #fff; border: 1px solid rgba(42,47,53,0.1); padding: var(--m2-s4); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
:lang(ar) .m2b-value { clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px); }
.m2b-value h3 { color: var(--m2-indigo); font-size: var(--m2-h3); margin-bottom: var(--m2-s2); }
.m2b-value p { margin: 0; font-size: var(--m2-small); color: rgba(42,47,53,0.7); }

/* Why-Masar checklist (About, on navy) */
.m2b-why { columns: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--m2-s2); }
@media (min-width: 800px) { .m2b-why { grid-template-columns: 1fr 1fr; gap: var(--m2-s2) var(--m2-s6); } }
.m2b-why li { display: flex; gap: 10px; align-items: baseline; color: var(--m2-pale); padding: 6px 0; }
.m2b-why li::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--m2-gold); transform: rotate(45deg) translateY(-1px); }

/* Plots gallery (Projects page) */
.m2b-plots-gallery { display: grid; gap: var(--m2-s3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .m2b-plots-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .m2b-plots-gallery { grid-template-columns: repeat(4, 1fr); } }
.m2b-plots-gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.m2b-plots-gallery figure { position: relative; overflow: hidden; margin: 0; }

/* Category loop sections rhythm (Projects page) */
.m2b-loop-section { padding-block: var(--m2-s6) var(--m2-s6); }
.m2b-loop-section .m2b-loop-heading { margin-bottom: var(--m2-s5); }
.m2b-loop-section + .m2b-loop-section { border-top: 1px solid rgba(42,47,53,0.08); }