/* ============================================================
   OUMLAYLA — layout fix + spacing system (4px grid)
   Fixes: text stuck to edges, white side strip, overflow, mobile air
   ============================================================ */

:root{
  /* spacing scale */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;
  --s-6:24px;--s-7:32px;--s-8:40px;--s-9:48px;--s-10:64px;
  /* page gutters — NEVER let content kiss the viewport */
  --gutter:max(20px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --gutter-lg:clamp(20px, 4vw, 40px);
  --section-y:clamp(2.75rem, 6vw, 4.5rem);
  --max:1120px;
  --dock-h:76px;
}

/* kill white strip / horizontal bleed */
html{
  background:#070B16 !important;
  overflow-x:clip;
  width:100%;
  max-width:100%;
}
body{
  background:#070B16 !important;
  overflow-x:clip;
  width:100%;
  max-width:100%;
  min-height:100dvh;
  padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 8px) !important;
  padding-left:env(safe-area-inset-left, 0px);
  padding-right:env(safe-area-inset-right, 0px);
}
/* don't force max-width on all pseudo — breaks glows; clip at root instead */
img,video,svg,canvas{max-width:100%;height:auto}

/* CONTAINER — real breathing room */
.container{
  width:100% !important;
  max-width:var(--max) !important;
  margin-inline:auto !important;
  padding-inline:var(--gutter-lg) !important;
  box-sizing:border-box !important;
}

/* Topbar */
.topbar{
  padding-inline:0;
  overflow:hidden;
}
.topbar-inner{
  padding-block:10px !important;
  padding-inline:var(--gutter-lg) !important;
  gap:10px !important;
  justify-content:space-between !important;
}
@media(max-width:640px){
  .topbar-inner{
    justify-content:center !important;
    gap:8px !important;
  }
  .topbar-inner > span:not(.live){
    display:none !important; /* reduce cram */
  }
}

/* NAV — pill must not touch screen edges */
.nav{
  padding:10px var(--gutter-lg) 8px !important;
  width:100%;
  box-sizing:border-box;
}
.nav-inner{
  width:100% !important;
  max-width:var(--max);
  margin-inline:auto;
  padding:8px 10px 8px 14px !important;
  gap:10px !important;
  box-sizing:border-box;
}
.brand{gap:10px !important;min-width:0;flex:1 1 auto}
.brand-txt{min-width:0}
.brand-txt strong{
  font-size:clamp(.95rem, 2.8vw, 1.05rem) !important;
}
.brand-txt span{
  font-size:clamp(.62rem, 2vw, .7rem) !important;
  max-width:42vw;
}
.nav-cta{gap:8px !important;flex-shrink:0}
.nav-cta .btn-sm{
  padding:.55rem .9rem !important;
  min-height:42px !important;
}
@media(max-width:420px){
  .nav-cta .btn-ghost{display:none !important}
  .brand img{width:40px !important;height:40px !important}
}

/* HERO — air + no edge kiss */
.hero{
  padding:clamp(1.5rem, 4vw, 2.75rem) 0 clamp(2.25rem, 5vw, 3.5rem) !important;
  width:100%;
  overflow:hidden;
}
.hero > .container{
  padding-inline:var(--gutter-lg) !important;
}
.hero-grid{
  gap:clamp(1.25rem, 3vw, 2.25rem) !important;
  width:100%;
  min-width:0;
}
.hero-grid > div{min-width:0;max-width:100%}
.hero h1{
  font-size:clamp(1.55rem, 5.2vw, 2.75rem) !important;
  line-height:1.35 !important;
  padding-inline:0;
  word-wrap:break-word;
  overflow-wrap:anywhere;
}
.lead,.hero .lead{
  font-size:clamp(.95rem, 2.6vw, 1.08rem) !important;
  max-width:36rem;
  padding-inline:0;
  margin-bottom:1.25rem !important;
}
.hero-cta{
  gap:10px !important;
  width:100%;
}
.hero-cta .btn{
  flex:1 1 auto;
  min-width:min(100%, 140px);
  max-width:100%;
}
@media(max-width:520px){
  .hero-cta{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  .hero-cta .btn{
    width:100% !important;
    max-width:100% !important;
  }
}
.trust-row{
  gap:8px !important;
  margin-top:4px;
}
.pill{
  padding:8px 12px !important;
  font-size:.76rem !important;
}
.metrics{
  gap:10px !important;
  margin-top:1.35rem !important;
  width:100%;
}
.metric{
  padding:14px 10px !important;
}
.hero-visual{
  width:100% !important;
  max-width:min(100%, 400px) !important;
  margin-inline:auto;
  padding-inline:0;
}
.hero-badge{
  inset-inline:12px !important;
  bottom:12px !important;
  max-width:calc(100% - 24px) !important;
  font-size:.78rem !important;
}

/* SECTIONS */
section,.band{
  padding-block:var(--section-y) !important;
  width:100%;
  overflow-x:clip;
}
.section-head{
  padding-inline:0;
  margin-bottom:clamp(1.5rem, 3vw, 2.25rem) !important;
}
.section-head h2{
  padding-inline:4px;
  overflow-wrap:anywhere;
}
.section-head p{
  padding-inline:4px;
  max-width:34rem;
}

/* GRIDS — gap air */
.grid-3,.grid-2,.steps,.secrecy,.services-bento{
  gap:clamp(12px, 2.5vw, 18px) !important;
  width:100%;
}
.card-body{
  padding:1.1rem 1.15rem 1.3rem !important;
}
.card-body h3,.card-body p{
  overflow-wrap:anywhere;
}

/* STORY */
.story{
  padding:clamp(1rem, 3vw, 1.5rem) !important;
  gap:clamp(1rem, 3vw, 1.75rem) !important;
  margin-inline:0;
}

/* PAGE HERO (inner pages + blog) */
.page-hero{
  padding:clamp(1.75rem, 4vw, 2.75rem) 0 clamp(1.5rem, 3vw, 2rem) !important;
}
.page-hero h1{
  overflow-wrap:anywhere;
  padding-inline:0;
  line-height:1.35 !important;
}
.breadcrumb{
  margin-bottom:12px !important;
  overflow-wrap:anywhere;
}

/* ARTICLE layout — fix edge + sidebar */
.prose{
  max-width:100% !important;
  padding-inline:0 !important;
}
.prose h2,.prose p,.prose li,.prose .ai-summary{
  overflow-wrap:anywhere;
}
.ai-summary{
  padding:1rem 1.1rem !important;
  margin-inline:0 !important;
}
.banner-img{
  width:100% !important;
  border-radius:18px !important;
  margin-inline:0 !important;
}
.blog-toc{
  margin-inline:0 !important;
  padding:1rem 1.1rem !important;
}
.article-meta{
  gap:8px !important;
  margin-top:12px !important;
}

/* two-col article: stack cleanly + gutter */
main .container[style*="grid-template-columns"]{
  gap:clamp(1.25rem, 3vw, 2rem) !important;
  width:100% !important;
  max-width:var(--max) !important;
  padding-inline:var(--gutter-lg) !important;
  box-sizing:border-box !important;
}
@media(max-width:900px){
  main .container[style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
    display:grid !important;
  }
  aside .plan{position:static !important}
}

/* FAQ */
.faq details{
  padding:1rem 1.1rem !important;
  margin-bottom:10px !important;
}
.faq summary{
  gap:12px !important;
  line-height:1.45;
  overflow-wrap:anywhere;
}

/* CTA band */
.cta-band{
  margin-inline:0;
  border-radius:clamp(18px, 3vw, 28px) !important;
}
.cta-band .inner{
  padding:clamp(1.75rem, 5vw, 2.75rem) clamp(1rem, 4vw, 1.5rem) !important;
  width:100%;
  box-sizing:border-box;
}
.cta-actions{
  gap:10px !important;
  width:100%;
  justify-content:center;
}
@media(max-width:520px){
  .cta-actions{flex-direction:column;align-items:stretch}
  .cta-actions .btn{width:100%}
}

/* MARQUEE — don't overflow page */
.marquee{
  width:100%;
  max-width:100vw;
  overflow:hidden !important;
}
.marquee-track{padding-inline:var(--gutter-lg)}

/* CHIPS */
.chips{
  gap:8px !important;
  padding-inline:0;
}
.chip{
  padding:10px 14px !important;
}

/* FOOTER */
footer{
  padding:clamp(2rem, 5vw, 3rem) 0 calc(1.25rem + env(safe-area-inset-bottom)) !important;
}
.foot-grid{
  gap:clamp(1.25rem, 3vw, 1.75rem) !important;
}
.foot-bottom{
  padding-inline:var(--gutter-lg) !important;
}

/* DOCK — never edge-bleed, equal cells */
.dock{
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  gap:8px !important;
  grid-template-columns:1fr 1fr 1.2fr !important;
  width:100%;
  max-width:100vw;
  box-sizing:border-box;
  left:0;right:0;
}
.dock a{
  padding:12px 6px !important;
  min-height:48px !important;
  font-size:clamp(.72rem, 2.8vw, .84rem) !important;
  border-radius:14px !important;
}

/* DRAWER — full cover, no white flash */
.drawer{
  background:#070B16 !important;
  width:100% !important;
  max-width:100vw !important;
  inset:0 !important;
  padding:max(16px, env(safe-area-inset-top)) var(--gutter-lg) calc(24px + env(safe-area-inset-bottom)) !important;
  box-sizing:border-box !important;
}
.backdrop{
  background:rgba(0,0,0,.72) !important;
}
.drawer-nav a{
  padding:14px 16px !important;
}
.drawer-cta .btn{width:100%}

/* PLAN / ASIDE cards */
.plan{
  padding:1.25rem 1.2rem !important;
}
.plan h3,.plan p{overflow-wrap:anywhere}

/* BUTTONS global wrap safety */
.btn{
  max-width:100%;
  box-sizing:border-box;
  white-space:normal !important;
  text-align:center;
  line-height:1.3;
  padding-block:12px !important;
}

/* SECRECY */
.secrecy-item{padding:1.25rem 1.15rem !important}

/* STEPS (legacy) */
.step{padding:1.35rem 1.2rem !important}

/* Process steps — home "كيف يعمل الديوان" (immune to art-direction .step grid) */
.process-steps{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:clamp(1rem, 2.5vw, 1.5rem) !important;
  align-items:stretch !important;
  width:100% !important;
  max-width:100% !important;
}
@media (max-width: 860px){
  .process-steps{ grid-template-columns:1fr !important; }
}
.process-step{
  display:flex !important;
  flex-direction:column !important;
  gap:0.85rem !important;
  min-width:0 !important;
  height:auto !important;
  overflow:visible !important;
  padding:clamp(1.25rem, 3vw, 1.65rem) !important;
  background:linear-gradient(165deg, rgba(26,22,18,.95), rgba(12,11,10,.98)) !important;
  border:1px solid rgba(201,168,108,.2) !important;
  border-radius:14px !important;
  box-shadow:0 12px 36px rgba(0,0,0,.28) !important;
  grid-template-columns:none !important;
}
.process-num{
  position:static !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:2.5rem !important;
  height:2.5rem !important;
  flex:0 0 auto !important;
  margin:0 !important;
  border-radius:999px !important;
  border:1px solid rgba(201,168,108,.4) !important;
  background:rgba(201,168,108,.1) !important;
  color:#e8d5a3 !important;
  font-family:var(--font-d, "Noto Kufi Arabic", sans-serif) !important;
  font-size:1.15rem !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
}
.process-body{
  min-width:0 !important;
  overflow:visible !important;
}
.process-body h3{
  margin:0 0 0.45rem !important;
  padding:0 !important;
  font-size:clamp(1.05rem, 2.2vw, 1.2rem) !important;
  font-weight:800 !important;
  line-height:1.4 !important;
  color:#f2ead8 !important;
  max-width:none !important;
  overflow:visible !important;
  display:block !important;
  -webkit-line-clamp:unset !important;
}
.process-body p{
  margin:0 !important;
  padding:0 !important;
  font-size:0.95rem !important;
  line-height:1.75 !important;
  color:#c8bca8 !important;
  max-width:none !important;
  overflow:visible !important;
  display:block !important;
  -webkit-line-clamp:unset !important;
  font-family:var(--font-b, Tajawal, sans-serif) !important;
  font-style:normal !important;
}
/* Don't let card seal-num rules hijack process numbers */
.process-step .seal-num,
.process-num.seal-num{
  position:static !important;
  inset:auto !important;
}

/* Prevent 100vw scrollbar bug */
.hero-bg,.hero-shade,.hero-grain,.cta-band img{
  max-width:none; /* allowed inside overflow hidden parent */
}
.hero,.cta-band,.marquee,.nav,.topbar{max-width:100vw}

/* Desktop refine */
@media(min-width:960px){
  :root{--gutter-lg:clamp(24px, 3vw, 40px)}
  .hero-cta .btn{flex:0 1 auto;min-width:auto}
  .hero-cta{flex-direction:row !important}
}

/* Tiny phones */
@media(max-width:360px){
  :root{--gutter-lg:16px}
  .brand-txt span{display:none}
  .metric strong{font-size:1rem !important}
}