/* Al Manar — MIDTEST root landing (visual replica).
   External stylesheet because the API sends CSP "style-src 'self'" with no
   'unsafe-inline'; an inline <style> block would be blocked. */
:root{
  --navy:#1B4F8A;          /* section headings / rules */
  --navy-deep:#003B73;     /* brand navy, from the logo */
  --navy-dark:#002A52;
  --blue-soft:#4A90C2;     /* small caption text */
  --band:#1B4F8A;          /* blue band behind the cards */
  --rule:#C4D0DE;
  --ink:#0B2239;
  --page:#FFFFFF;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"Segoe UI",system-ui,Tahoma,Arial,sans-serif;
  color:var(--ink);line-height:1.5;background:var(--page);
}
a{text-decoration:none}

/* faint geometric wash, generated in CSS rather than copied artwork */
.pattern{
  background-color:#fff;
  background-image:
    radial-gradient(circle at 20px 20px, rgba(27,79,138,.05) 2px, transparent 2px),
    radial-gradient(circle at 60px 60px, rgba(27,79,138,.05) 2px, transparent 2px);
  background-size:80px 80px;
}

/* thin top band with carousel dots (decorative, static) */
.topbar{background:#FBEEF0;padding:7px 0}
.dots{display:flex;gap:7px;justify-content:flex-start;max-width:1240px;margin:0 auto;padding:0 24px}
.dots i{width:9px;height:9px;border-radius:50%;background:#fff;border:1px solid #E3C9CE;display:block}
.dots i.on{background:var(--navy)}

.brandbar{max-width:1240px;margin:0 auto;padding:18px 24px}
.brandbar img{height:44px;display:block}

/* ---- services strip ---------------------------------------------------- */
.services{max-width:1240px;margin:0 auto;padding:26px 24px 34px;
          display:grid;grid-template-columns:repeat(4,1fr)}
.svc{display:flex;gap:16px;align-items:flex-start;padding:6px 22px}
.svc + .svc{border-left:2px solid var(--navy)}
.svc .ico{flex:0 0 auto;color:var(--navy);line-height:0;padding-top:2px}
.svc h3{font-size:24px;font-weight:400;color:var(--navy);line-height:1.15;margin-bottom:6px}
.svc p{font-size:12px;color:var(--blue-soft);line-height:1.45}
.stores{display:flex;gap:18px;align-items:center;margin-top:8px;color:var(--navy)}
.stores span{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--blue-soft)}

/* the one live element on this page */
.kmid-btn{
  display:inline-block;margin-top:12px;padding:10px 20px;border-radius:4px;
  background:var(--navy-deep);color:#fff;font-size:13.5px;font-weight:600;
  transition:background .15s;
}
.kmid-btn:hover{background:var(--navy-dark)}
.kmid-btn:focus-visible{outline:3px solid rgba(0,59,115,.35);outline-offset:2px}

/* ---- blue band with cards --------------------------------------------- */
.band{
  background-color:var(--band);
  background-image:
    radial-gradient(circle at 24px 24px, rgba(255,255,255,.045) 3px, transparent 3px),
    radial-gradient(circle at 72px 72px, rgba(255,255,255,.045) 3px, transparent 3px);
  background-size:96px 96px;
  padding:42px 0 52px;
}
.cards{max-width:1240px;margin:0 auto;padding:0 24px;
       display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.card{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
      border-radius:2px;aspect-ratio:4/3;display:flex;align-items:flex-end;padding:14px}
.card span{color:#fff;font-size:13px;opacity:.9}

.foot{background:#fff;padding:18px 24px;text-align:center;font-size:11.5px;color:#8A98A8}

/* ---- responsive -------------------------------------------------------- */
@media (max-width:1020px){
  .services{grid-template-columns:repeat(2,1fr);gap:22px 0}
  .svc + .svc{border-left:none}
  .svc:nth-child(even){border-left:2px solid var(--navy)}
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .services{grid-template-columns:1fr;padding:20px 20px 28px}
  .svc{padding:14px 0;border-left:none !important;border-bottom:1px solid var(--rule)}
  .svc:last-child{border-bottom:none}
  .svc h3{font-size:20px}
  .cards{grid-template-columns:1fr}
  .card{aspect-ratio:16/9}
}