/* service-page-muslim-weddings-law-reform-2026: used by 1 page(s): muslim-weddings-law-reform-2026.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 */
/* two-pillar mega */
/* sticky mobile CTA */
/* trust strip */
.tstrip{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tstrip-in{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem 2.5rem;padding:1.5rem 0;text-align:center}
.tstrip span{display:inline-flex;align-items:center;gap:.6rem;font-size:var(--t-sm);color:var(--ink-2);font-weight:450}
.tstrip svg{width:18px;height:18px;stroke:var(--blue);fill:none;stroke-width:1.8;flex:0 0 auto}
@media (max-width:640px){.tstrip-in{flex-direction:column;gap:.9rem;padding:1.4rem 0}}
/* micro-polish */
/* section surfaces */
/* ==== restored component styles (fcard grid, standards, aim, sec heads) ==== */
.sec--navy{background:var(--navy);color:var(--inverse);position:relative;overflow:hidden}
.sec--navy .girih{position:absolute;inset:0;opacity:.06;mix-blend-mode:screen}
.sec--navy .inner{position:relative;z-index:1}
.sec-head{max-width:62ch;margin-bottom:clamp(2.5rem,4.5vw,3.75rem)}
.sec-head .h2{margin:1.05rem 0}
.fcard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,2.6vw,2.25rem)}
.fcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-feat,24px);padding:clamp(2rem,3vw,2.6rem);box-shadow:0 30px 60px -45px rgba(11,31,58,.4);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
@media (hover:hover){.fcard:hover{transform:translateY(-6px)}}
.fcard .ic{width:48px;height:48px;border-radius:12px;background:var(--tint,#EEF3FB);display:grid;place-items:center;margin-bottom:1.1rem}
.fcard .ic svg{width:24px;height:24px;stroke:var(--blue);fill:none;stroke-width:1.6}
.fcard h3{color:var(--navy);margin-bottom:.5rem;font-family:var(--serif);font-weight:600;font-size:1.14rem;line-height:1.25}
.fcard h3 .ar{font-size:.8em;color:var(--blue);margin-left:.35rem}
.fcard p{margin:0 0 1.1rem;color:var(--ink-2);font-size:var(--t-sm);line-height:1.55;flex:1}
.fcard p a{color:var(--blue)}
.fcard .lk{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:var(--t-sm);color:var(--blue);text-decoration:none}
.fcard .lk svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;transition:transform .2s}
@media (hover:hover){.fcard .lk:hover svg{transform:translateX(3px)}}
.std-cols{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.std-list{list-style:none;margin:0;padding:0}
.std-list li{position:relative;padding:.85rem 0 .85rem 1.75rem;border-top:1px solid var(--line-d,#22385c);font-size:var(--t-body);color:#EAF1FF}
.std-list li:first-child{border-top:0}

.aim{background:var(--navy-2,#0f2947);border:1px solid var(--line-d,#22385c);border-radius:var(--r-feat,24px);padding:clamp(1.6rem,2.6vw,2.2rem);box-shadow:var(--shadow)}
.aim .q{font-family:var(--serif);font-weight:500;font-size:var(--t-lg);line-height:1.5;color:#fff;margin:0}
.aim .lbl{font-size:var(--t-cap);letter-spacing:.01em;text-transform:none;color:var(--blue-lt);font-weight:700;margin-bottom:.9rem;display:block}
.note{margin-top:1.75rem;color:var(--ink-2);font-size:var(--t-sm);max-width:70ch}
.sec--navy .note{color:#9DB2D4}
@media (max-width:1024px){.fcard-grid{grid-template-columns:1fr 1fr}.std-cols{grid-template-columns:1fr}}
@media (max-width:640px){.fcard-grid{grid-template-columns:1fr}}
/* ===== service page hero (shared, clean navy) ===== */
.shero{position:relative;overflow:hidden;background:radial-gradient(130% 100% at 50% 0%,#12325C 0%,var(--navy) 55%,#08152a 100%);color:#F4F1EA}
.shero-in{text-align:left;max-width:1180px;margin:0 auto;padding:clamp(3.25rem,7vw,5.5rem) clamp(20px,5vw,48px)}
.shero .crumb{justify-content:flex-start;color:#8FA6CC;margin-bottom:1.25rem}
.shero .crumb a{color:#8FA6CC}
.shero .crumb span{margin:0 .4rem;color:#4E668F}
.shero .eyebrow{justify-content:flex-start}

.shero-h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.3rem,5vw,4rem);line-height:1.08;letter-spacing:-.02em;color:#fff;margin:1.1rem 0 1.2rem;max-width:20ch}
.shero-sub{color:#CBD3E2;font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.6;max-width:60ch;margin:0 0 2.25rem}
.shero-cta{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;justify-content:flex-start}
.shero-call{display:inline-flex;align-items:center;gap:.55rem;color:#CBD3E2;text-decoration:none;font-weight:500;font-size:var(--t-sm)}
.shero-call svg{width:18px;height:18px;stroke:var(--blue-lt);stroke-width:1.8}
@media (hover:hover){.shero-call:hover{color:#fff}}
.wrap.narrow{max-width:760px}
/* short Q&A summary cards */
.qa2-list{display:flex;flex-direction:column;gap:.9rem}
.qa2{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-card,18px);padding:1.5rem 1.75rem;text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s}
@media (hover:hover){.qa2:hover{border-color:var(--blue-lt);transform:translateY(-3px);box-shadow:0 24px 44px -34px rgba(11,31,58,.4)}}
.qa2-body h3{font-family:var(--serif);font-weight:600;font-size:1.2rem;color:var(--navy);margin:0 0 .4rem;line-height:1.25}
.qa2-body p{font-size:.98rem;color:#42526B;line-height:1.55;margin:0;max-width:58ch}
.qa2-go{flex:0 0 auto;display:inline-flex;align-items:center;gap:.45rem;font-size:.85rem;font-weight:600;color:var(--blue);white-space:nowrap}
.qa2-go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s}
@media (hover:hover){.qa2:hover .qa2-go svg{transform:translateX(4px)}}
@media(max-width:640px){.qa2{flex-direction:column;align-items:flex-start;gap:.9rem}}
/* detail page prose */
.dp-body{max-width:720px;margin:0 auto}
.dp-lead{font-size:clamp(1.15rem,1.6vw,1.35rem);color:#42526B;line-height:1.65;margin:0 0 2.5rem}
.dp-section{padding:2.25rem 0;border-top:1px solid var(--line)}
.dp-section:first-of-type{border-top:0;padding-top:0}
.dp-section h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.4rem,2.2vw,1.85rem);color:var(--navy);margin:0 0 1rem;letter-spacing:-.01em}
.dp-section p{font-size:1.075rem;color:#42526B;line-height:1.75;margin:0 0 1.1rem;max-width:64ch}
.dp-section p:last-child{margin-bottom:0}
.dp-list{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.75rem}
.dp-list li{position:relative;padding-left:1.75rem;font-size:1.05rem;color:#42526B;line-height:1.6}

.dp-note{background:var(--tint,#EEF3FB);border-left:3px solid var(--blue);border-radius:0 12px 12px 0;padding:1.25rem 1.5rem;margin:1.75rem 0;font-size:1.02rem;color:var(--navy);line-height:1.6}
.article{max-width:720px;margin:0 auto}
.article-meta{display:flex;gap:.9rem;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:.85rem;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line)}
.article-meta .cat{color:var(--blue);font-weight:700;letter-spacing:.01em;text-transform:none}
.article-meta span+span::before{content:"·";margin-right:.9rem;color:var(--line-2,#CBD2E0)}
.article-lead{font-size:clamp(1.2rem,1.7vw,1.4rem);color:var(--navy);line-height:1.6;margin:0 0 2rem;font-family:var(--serif)}
.article h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,2.3vw,1.9rem);color:var(--navy);margin:2.5rem 0 1rem;letter-spacing:-.01em}
.article h3{font-family:var(--serif);font-weight:600;font-size:1.25rem;color:var(--navy);margin:1.75rem 0 .75rem}
.article p{font-size:1.075rem;color:#42526B;line-height:1.75;margin:0 0 1.2rem}
.article ul{margin:1rem 0 1.5rem;padding:0;list-style:none}
.article ul li{position:relative;padding-left:1.75rem;margin-bottom:.7rem;font-size:1.05rem;color:#42526B;line-height:1.6}
.article ul{list-style:none !important}
.article ul li{list-style:none !important}

.article strong{color:var(--navy)}
.article-note{background:var(--tint,#EEF3FB);border-left:3px solid var(--blue);border-radius:0 12px 12px 0;padding:1.25rem 1.5rem;margin:1.75rem 0;color:var(--navy);line-height:1.65}
.article-cta{background:var(--navy);color:#fff;border-radius:var(--r-feat,24px);padding:clamp(1.75rem,3vw,2.5rem);margin:2.5rem 0 0;text-align:center}
.article-cta h3{color:#fff;margin:0 0 .6rem}
.article-cta p{color:#C7D3E8;margin:0 0 1.25rem}
/* 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) */