/* Arrahma — company colours (layout comes from assets/css/corporate.css) */
:root{
  --brand:#283B2B;      /* deep olive */
  --brand-2:#3d5640;
  --accent:#C8A875;     /* warm sand */
  --accent-ink:#6e5a36;
  --surface:#f5f2ea;    /* light cream */
  --line:#e5e0d4;
}
/* Development plans list */
.plan-list{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--line)}
.plan-list li{padding:14px 0;border-bottom:1px solid var(--line);color:#3e4650}
.plan-list b{color:var(--brand);font-weight:600}

/* Milestones: photo beside a formal, table-style list */
.ms-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.ms-photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.ms-split h2{font-size:clamp(30px,3vw,40px);margin-bottom:10px}
.ms-intro{color:var(--muted);margin-bottom:26px}
.ms-table{border-top:2px solid var(--brand)}
.ms-table div{display:grid;grid-template-columns:190px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.ms-table dt{font-weight:700;color:var(--brand)}
.ms-table dd{color:#3e4650}
.ms-table .planned dt{color:var(--accent-ink)}
.ms-table .planned dd{color:var(--muted)}

/* Gallery: one featured photo with smaller ones beside it */
.mosaic{display:grid;grid-template-columns:1.6fr 1fr 1fr;grid-template-rows:280px 280px;gap:16px}
.mosaic figure{position:relative;overflow:hidden;background:var(--surface)}
.mosaic .m-feature{grid-row:span 2}
.mosaic .m-wide{grid-column:span 2}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.mosaic figure:hover img{transform:scale(1.04)}
.mosaic figcaption{position:absolute;inset:auto 0 0;padding:44px 22px 18px;color:#fff;background:linear-gradient(0deg,rgba(18,26,19,.85),rgba(18,26,19,0));display:flex;flex-direction:column;gap:2px}
.mosaic figcaption b{font-family:var(--head);font-size:21px;font-weight:600}
.mosaic figcaption span{font-size:14.5px;opacity:.9}
html[lang="ar"] .mosaic figcaption b{font-family:"IBM Plex Sans Arabic",Tahoma,sans-serif}

@media (max-width:960px){
  .ms-split{grid-template-columns:1fr;gap:36px}
  .ms-photo img{aspect-ratio:16/10}
  .mosaic{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .mosaic .m-feature{grid-column:span 2;grid-row:auto;aspect-ratio:16/10}
  .mosaic figure{aspect-ratio:1/1}
  .mosaic .m-wide{grid-column:span 2;aspect-ratio:16/9}
}
@media (max-width:640px){
  .ms-table div{grid-template-columns:1fr;gap:2px}
  .mosaic{grid-template-columns:1fr}
  .mosaic .m-feature,.mosaic .m-wide{grid-column:auto}
  .mosaic figure,.mosaic .m-feature,.mosaic .m-wide{aspect-ratio:4/3}
}