/* about: used by 1 page(s): about.html */
/* =============================================================
  LawFiq v5 - white / navy / royal blue
  Visual system: the Meeting Arch. A pointed (Islamic) arch and
  a round (English) arch spring from two sides and meet at a
  keystone - LawFiq. Arches frame the photography; a girih line
  texture adds cultured depth to the dark bands. Layered, with
  real overlap and shadow, not flat cards.
  Image zones are styled to look finished now and to receive
  commissioned photography later (swap the .imgslot background).
  ============================================================= */
/* ---- reusable image zone (holds photography) ---- */
/* arch shapes */
/* =============================================================
  HEADER + MEGA
  ============================================================= */
.navlink,.navtrigger{border-radius:12px;display:inline-flex;align-items:center;gap:.4rem;background:none;border:0;text-decoration:none;font-size:.95rem;font-weight:450;color:var(--ink);padding:.6rem .7rem;border-radius:8px;cursor:pointer}
/* =============================================================
  HERO - the Meeting Arch
  ============================================================= */
/* the arch composition (dual-arch SVG) */
.arch-stage .cred-float{position:absolute;left:-14px;bottom:18px;z-index:4}
/* (legacy) */
.cred-float{position:absolute;left:-16px;bottom:26px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:1rem 1.2rem;max-width:255px;z-index:4}
.cred-float p{margin:0;font-family:var(--serif);font-weight:600;font-size:1rem;color:var(--navy);line-height:1.25}
/* facts ribbon */
/* THE GAP */
.gap{padding:var(--sec) 0;background:#fff}
/* =============================================================
  APPROACH - convergence
  ============================================================= */
.approach{padding:var(--sec) 0}
/* the converging bridge */
/* =============================================================
  SERVICE PATHWAYS
  ============================================================= */
/* =============================================================
  PEOPLE
  ============================================================= */
/* =============================================================
  PROCESS
  ============================================================= */
/* =============================================================
  TRANSPARENCY
  ============================================================= */
/* =============================================================
  INSIGHTS
  ============================================================= */
/* =============================================================
  CONSULTATION
  ============================================================= */
/* =============================================================
  FOOTER
  ============================================================= */
@media (max-width:640px){
 .pcols{grid-template-columns:1fr}.converge{display:none}.node{display:none}.pfix{grid-template-columns:1fr}
 .ribbon-in{grid-template-columns:1fr}.rib{border-left:0;border-bottom:1px solid var(--line-d)}
 .psteps,.ins-grid,.ftr-top{grid-template-columns:1fr}
 .creds li{grid-template-columns:1fr;gap:.2rem}
 .ftr-base{flex-direction:column}
}
/* mobile panel */
/* ===== hero photo: medium & balanced, mobile card below ===== */
/* prose */
/* subpage compact header */
/* halal band */
.halal{background:var(--navy);color:var(--inverse);position:relative;overflow:hidden}
.halal .girih{position:absolute;inset:0;opacity:.06;mix-blend-mode:screen}
.halal-in{position:relative;z-index:1;padding:var(--sec) 0;text-align:center;max-width:760px;margin:0 auto}
.halal .eyebrow{justify-content:center}

.halal h2{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,3.4vw,3rem);line-height:1.1;color:#fff;margin:1.1rem 0 1.1rem;letter-spacing:-.015em}
.halal p{color:#C7D3E8;font-size:var(--t-lg);line-height:1.6;margin:0 auto 1.6rem;max-width:60ch}
.halal .u2{background:linear-gradient(transparent 60%,rgba(122,162,240,.4) 60%)}
/* two-pillar mega */
/* sticky mobile CTA */
/* micro-polish */
/* section surfaces */
/* footer contact + social */
.ftr-contact{display:flex;flex-direction:column;gap:.65rem;margin:1.25rem 0 1.25rem}
.ftr-contact a,.ftr-hours{display:inline-flex;align-items:center;gap:.6rem;color:#C7D3E8;text-decoration:none;font-size:.95rem}
@media (hover:hover){.ftr-contact a:hover{color:#fff}}
.ftr-contact svg{width:17px;height:17px;flex:0 0 auto;opacity:.8}
.ftr-social{display:flex;gap:.6rem;margin-top:.25rem}
.ftr-social a{width:38px;height:38px;border-radius:10px;border:1px solid var(--line-d,#22385c);display:grid;place-items:center;color:#8FA6CC;transition:color .15s,border-color .15s,background .15s}
@media (hover:hover){.ftr-social a:hover{color:#fff;border-color:var(--blue);background:rgba(29,78,216,.15)}}
.ftr-social svg{width:19px;height:19px}
/* a11y: eyebrow contrast (corrected) */