/* ====================================================================
   LAW KEY · sections.css — everything below the hero
   Tokens only (no other color literals). Motion: transform + opacity,
   plus stroke-dashoffset on the two SVG drives (seams, hold ring).
   ==================================================================== */
:root{
  --canvas:#0b0907;
  --panel:#15110c;
  --accent:#d9ae5c;
  --accent-hover:#f0ce8e;
  --accent-muted:rgba(217,174,92,.18);
  --text-secondary:#a89a7c;
  --text-primary:#f1e8d4;

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);

  --font-display:'Amiri',Georgia,'Times New Roman',serif;
  --font-body:'IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- shared skeleton ---------- */
.lk-s{
  position:relative;
  padding-block:clamp(3.5rem,9vw,7rem);
  font-family:var(--font-body);
  font-weight:400;
  color:var(--text-primary);
  line-height:1.6;
}
.lk-wrap{
  width:min(100% - 2*clamp(1.25rem,5vw,4rem),1120px);
  margin-inline:auto;
}
.lk-wrap-center{ text-align:center }

.lk-kicker{
  display:block;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:.78rem;
  letter-spacing:.24em;
  color:var(--text-secondary);
  margin-block-end:.55rem;
}
.lk-h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2rem,1.3rem + 3vw,3.6rem);
  line-height:1.2;
  margin:0;
  color:var(--text-primary);
}
.lk-defs{ position:absolute; width:0; height:0; overflow:hidden }
.lk-sr{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---------- the environment: one fixed layer under the whole page ---------- */
.env{
  position:fixed; inset:0; z-index:-1;
  pointer-events:none; overflow:hidden;
  background:var(--canvas);
}
.env-dust{
  position:absolute; inset:-30%;
  background-image:
    radial-gradient(circle,var(--accent) 0 .9px,transparent 1.6px),
    radial-gradient(circle,var(--accent) 0 .6px,transparent 1.3px);
  background-size:340px 340px,680px 680px;
  background-position:0 0,170px 110px;
  opacity:.14;
  will-change:transform;
  animation:lk-dust 120s linear -40s infinite;
}
.env-grain{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;
  opacity:.055;
  mix-blend-mode:overlay;
}

/* ---------- seams: the gold line that draws itself between sections ---------- */
.lk-seam{
  height:clamp(72px,12vw,120px);
  display:flex; justify-content:center;
  pointer-events:none;
  color:var(--accent);
}
.lk-seam svg{ height:100%; width:auto; overflow:visible; display:block }
.lk-seam line{
  stroke:currentColor; stroke-width:1.1; stroke-linecap:round;
  stroke-dasharray:100px; stroke-dashoffset:100px;
  opacity:.85;
}
.lk-seam circle{ fill:currentColor; opacity:0; transition:opacity .6s var(--ease-out) }
.lk-seam.drawn circle{ opacity:.9 }

/* ======================= كيف يعمل: the ledger of three ======================= */
.lk-how{ overflow:hidden }
.lk-how-glow{
  position:absolute; z-index:-1;
  width:60vmax; height:60vmax; top:-24vmax; inset-inline-end:-22vmax;
  border-radius:50%;
  background:radial-gradient(closest-side,var(--accent-muted),transparent 72%);
  opacity:.55; pointer-events:none;
}
.lk-how-head{
  display:flex; align-items:baseline; gap:1.25rem;
  margin-block-end:clamp(2.5rem,7vw,4.5rem);
}
.lk-how-head .lk-kicker{ margin:0 }
.lk-steps{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(3rem,8vw,5.5rem) }
.lk-step{
  display:grid;
  grid-template-columns:auto 1fr 1.25fr;
  grid-template-areas:"num title still";
  column-gap:clamp(1.25rem,4vw,3rem);
  align-items:center;
}
.lk-step:nth-child(even){
  grid-template-columns:auto 1.25fr 1fr;
  grid-template-areas:"num still title";
}
.lk-step-num{
  grid-area:num;
  font-family:var(--font-mono);
  font-weight:400;
  font-size:clamp(2rem,1.2rem + 3vw,3.8rem);
  line-height:1;
  color:var(--text-secondary);
  opacity:.7;
  align-self:start;
}
.lk-step-title{
  grid-area:title;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.7rem,1.1rem + 2.4vw,3rem);
  line-height:1.3;
  margin:0;
  max-width:12ch;
}
.lk-step:nth-child(even) .lk-step-title{ justify-self:end; text-align:start }
.lk-still{
  grid-area:still;
  position:relative; margin:0;
  aspect-ratio:16/10; overflow:hidden;
  border-radius:4px;
  background:var(--panel);
}
.lk-still::after{
  content:""; position:absolute; inset:0;
  border:1px solid var(--accent-muted); border-radius:inherit;
  pointer-events:none;
}
.lk-still img{
  display:block; width:100%; height:100%; object-fit:cover;
  transform:scale(1.02);
  transition:transform 1.6s var(--ease-out);
}
.lk-step:hover .lk-still img{ transform:scale(1.045) }

/* ============================ الفريق: the table ============================ */
.lk-team-head{ margin-block-end:clamp(2rem,6vw,3.5rem) }
.lk-stage{
  --r:min(33vw,168px);
  position:relative;
  width:min(78vw,400px); aspect-ratio:1;
  margin-inline:auto;
}
.lk-table{
  position:absolute; inset:7%;
  border-radius:50%;
  border:1px dashed var(--accent-muted);
  opacity:0;
  transition:opacity 1.2s var(--ease-out) .9s;
}
.lk-team.done .lk-table{ opacity:1 }
.lk-orbs{ position:absolute; inset:0 }
.lk-orb{
  position:absolute; top:50%; left:50%;
  width:22px; height:22px; margin:-11px 0 0 -11px;
  transform:rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a)));
}
.lk-orb:nth-child(1){ --a:-90deg }
.lk-orb:nth-child(2){ --a:-18deg }
.lk-orb:nth-child(3){ --a:54deg }
.lk-orb:nth-child(4){ --a:126deg }
.lk-orb:nth-child(5){ --a:198deg }
.lk-orb i{
  position:relative; display:block; width:100%; height:100%;
  border-radius:50%; background:var(--accent);
  opacity:.16; transform:scale(.5);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
}
.lk-orb i::after{
  content:""; position:absolute; inset:-2px; border-radius:50%;
  box-shadow:0 0 22px 6px var(--accent-muted),0 0 4px 1px var(--accent);
  opacity:0;
  transition:opacity .8s var(--ease-out);
}
.lk-team.done .lk-orb i{ opacity:1; transform:scale(1) }
.lk-team.done .lk-orb i::after{ opacity:1 }
.lk-team.done .lk-orb:nth-child(1) i,.lk-team.done .lk-orb:nth-child(1) i::after{ transition-delay:.15s }
.lk-team.done .lk-orb:nth-child(2) i,.lk-team.done .lk-orb:nth-child(2) i::after{ transition-delay:.3s }
.lk-team.done .lk-orb:nth-child(3) i,.lk-team.done .lk-orb:nth-child(3) i::after{ transition-delay:.45s }
.lk-team.done .lk-orb:nth-child(4) i,.lk-team.done .lk-orb:nth-child(4) i::after{ transition-delay:.6s }
.lk-team.done .lk-orb:nth-child(5) i,.lk-team.done .lk-orb:nth-child(5) i::after{ transition-delay:.75s }

.lk-hold{
  position:absolute; top:50%; left:50%;
  width:clamp(118px,34vw,156px); aspect-ratio:1;
  transform:translate(-50%,-50%);
  appearance:none; -webkit-appearance:none;
  border:0; padding:0; margin:0;
  border-radius:50%;
  background:var(--panel);
  color:var(--text-secondary);
  cursor:pointer;
  touch-action:none;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .5s var(--ease-out);
}
.lk-hold.holding{ transform:translate(-50%,-50%) scale(.965) }
.lk-hold-halo{
  position:absolute; inset:-8%; border-radius:50%;
  box-shadow:0 0 70px 14px var(--accent-muted);
  opacity:.3; pointer-events:none;
}
.lk-hold-glow{
  position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 44px 8px var(--accent-muted),inset 0 0 28px var(--accent-muted);
  opacity:var(--p,0); pointer-events:none;
}
.lk-hold-ring{
  position:absolute; inset:0; width:100%; height:100%;
  transform:rotate(-90deg) scaleX(-1);
  overflow:visible;
}
.lk-ring-track{ fill:none; stroke:var(--text-secondary); stroke-opacity:.38; stroke-width:1.2 }
.lk-ring-fill{
  fill:none; stroke:var(--accent); stroke-width:2.4; stroke-linecap:round;
  stroke-dasharray:100px;
  stroke-dashoffset:calc(100px - var(--p,0) * 100px);
}
.lk-hold-seal{
  position:absolute; inset:15%; width:70%; height:70%;
  color:var(--text-secondary);
  transition:color .7s var(--ease-out);
}
.lk-hold.holding .lk-hold-seal,.lk-team.done .lk-hold-seal{ color:var(--accent) }
.lk-team.done .lk-hold{ cursor:default }

.lk-team-caption{
  margin:clamp(1.75rem,5vw,3rem) 0 0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.45rem,1rem + 1.8vw,2.2rem);
  line-height:1.4;
}
.lk-cap-a{ color:var(--text-secondary); transition:opacity .9s var(--ease-out) }
.lk-cap-b{
  display:inline-block;
  color:var(--text-primary);
  opacity:0; transform:translateY(8px);
  transition:opacity 1s var(--ease-out) 1s,transform 1s var(--ease-out) 1s;
}
.lk-team.done .lk-cap-b{ opacity:1; transform:none }
.lk-team.done .lk-cap-a{ opacity:.55 }

/* ============================ الثقة: the ledger ============================ */
.lk-trust-head{ display:flex; align-items:baseline; gap:1.25rem }
.lk-trust-head .lk-kicker{ margin:0 }
.lk-trust-mark{
  width:56px; height:auto;
  margin-inline-start:auto; align-self:center;
  color:var(--text-secondary); opacity:.85;
  transform-origin:50% 12%;
}
.lk-ledger{
  list-style:none; margin:clamp(2rem,5vw,3.5rem) 0 0; padding:0;
  border-block-start:1px solid var(--accent-muted);
}
.lk-line{
  display:grid; grid-template-columns:3rem 1fr;
  align-items:baseline; column-gap:1.25rem;
  padding-block:clamp(1.4rem,3.5vw,2.4rem);
  border-block-end:1px solid var(--accent-muted);
}
.lk-line-idx{
  font-family:var(--font-mono); font-size:.85rem; letter-spacing:.1em;
  color:var(--text-secondary);
}
.lk-line-text{
  margin:0;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.5rem,1rem + 2.2vw,2.7rem);
  line-height:1.4;
  max-width:26ch;
}

/* ====================== أسئلة المحامين: question | answer ====================== */
.lk-faq-grid{ --g:clamp(2rem,6vw,5rem); position:relative; margin-block-start:clamp(2rem,5vw,3.5rem) }
.lk-faq-rule{
  position:absolute; top:0; bottom:0;
  inset-inline-start:calc((100% - var(--g)) / 2.4 + var(--g) / 2);
  width:1px;
  background:var(--accent-muted);
  opacity:.9; pointer-events:none;
}
.lk-qa{
  margin:0;
  display:grid; grid-template-columns:1fr 1.4fr;
  column-gap:var(--g); row-gap:clamp(1.75rem,4vw,2.75rem);
  align-items:baseline;
}
.lk-qa-row{ display:contents }
.lk-q{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.35rem,1rem + 1.4vw,1.95rem);
  line-height:1.35;
  max-width:16ch;
}
.lk-a{
  margin:0;
  font-size:clamp(1rem,.95rem + .4vw,1.2rem);
  line-height:1.8;
  color:var(--text-secondary);
  max-width:44ch;
}

/* ========================= الدعوة الأخيرة: the seal settles ========================= */
.lk-cta-panel{
  position:relative; isolation:isolate;
  padding:clamp(3rem,8vw,6rem) clamp(1.5rem,6vw,5rem);
  border:1px solid var(--accent-muted); border-radius:6px;
  background:var(--panel);
  overflow:hidden;
}
.lk-cta-seal{
  display:block; width:clamp(64px,12vw,96px); height:auto;
  margin:0 auto 1.5rem;
  color:var(--accent); opacity:.92;
}
.lk-cta-title{ max-width:16ch; margin-inline:auto }
.lk-btn-wrap{ position:relative; display:inline-block; margin-block-start:clamp(1.5rem,4vw,2.5rem) }
.lk-btn-wrap::after{
  content:""; position:absolute; inset:-12px -22px; z-index:-1;
  border-radius:999px;
  box-shadow:0 0 46px 10px var(--accent-muted);
  opacity:.4; pointer-events:none;
}
.lk-btn{
  display:inline-block;
  font-family:var(--font-body); font-weight:500; font-size:1.1rem;
  line-height:1.2;
  padding:.95em 2.6em;
  background:var(--accent); color:var(--canvas);
  border-radius:999px; text-decoration:none;
  transition:background-color .35s var(--ease-out),transform .45s var(--ease-out);
}
.lk-btn:hover{ background:var(--accent-hover); transform:translateY(-2px) }
.lk-btn:active{ transform:translateY(0) }

/* ================================ التذييل ================================ */
.lk-footer{
  padding-block:clamp(2.5rem,6vw,4rem) clamp(2rem,5vw,3rem);
  border-block-start:1px solid var(--accent-muted);
  font-size:.92rem;
  color:var(--text-secondary);
}
.lk-footer-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem 2.5rem;
}
.lk-footer-brand{ display:inline-flex; align-items:center; gap:.7rem; margin:0 }
.lk-footer-seal{ width:30px; height:30px; color:var(--text-secondary) }
.lk-footer-name{ font-family:var(--font-mono); font-weight:500; letter-spacing:.22em; font-size:.8rem; color:var(--text-primary) }
.lk-footer-site{ margin:0 }
.lk-footer-site a{
  font-family:var(--font-mono); font-size:.85rem; letter-spacing:.06em;
  color:var(--text-secondary); text-decoration:none;
  border-block-end:1px solid var(--accent-muted);
  transition:color .35s var(--ease-out),border-color .35s var(--ease-out);
}
.lk-footer-site a:hover{ color:var(--accent-hover); border-color:var(--accent) }
.lk-footer-note{ margin:0 }

/* ---------- entrances: IntersectionObserver adds .in; delays retire on .settled ---------- */
.lk-s .part{
  opacity:0; transform:translateY(24px);
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
}
.lk-team .lk-stage.part{ transform:scale(.94) }
.lk-trust .lk-line.part{ transform:translateX(28px) }
.lk-faq .lk-q.part{ transform:translateX(22px) }
.lk-faq .lk-a.part{ transform:translateX(-22px) }
.lk-footer .part{ transform:none }
.lk-s.in .part{ opacity:1; transform:none }

.lk-s.in .lk-items > .part:nth-child(1){ transition-delay:.12s }
.lk-s.in .lk-items > .part:nth-child(2){ transition-delay:.24s }
.lk-s.in .lk-items > .part:nth-child(3){ transition-delay:.36s }
.lk-s.in .lk-items > .part:nth-child(4){ transition-delay:.48s }
.lk-s.in .lk-items > .part:nth-child(5){ transition-delay:.6s }
.lk-s.in .lk-items > .part:nth-child(6){ transition-delay:.72s }
.lk-team.in .lk-stage.part{ transition-delay:.12s }
.lk-team.in .lk-team-caption.part{ transition-delay:.3s }
.lk-faq.in .lk-qa-row:nth-child(1) > .part:nth-child(1){ transition-delay:.12s }
.lk-faq.in .lk-qa-row:nth-child(1) > .part:nth-child(2){ transition-delay:.21s }
.lk-faq.in .lk-qa-row:nth-child(2) > .part:nth-child(1){ transition-delay:.3s }
.lk-faq.in .lk-qa-row:nth-child(2) > .part:nth-child(2){ transition-delay:.39s }
.lk-faq.in .lk-qa-row:nth-child(3) > .part:nth-child(1){ transition-delay:.48s }
.lk-faq.in .lk-qa-row:nth-child(3) > .part:nth-child(2){ transition-delay:.57s }
.lk-cta.in .lk-cta-panel > .part:nth-child(2){ transition-delay:.14s }
.lk-cta.in .lk-cta-panel > .part:nth-child(3){ transition-delay:.3s }
.lk-footer.in .part:nth-child(2){ transition-delay:.1s }
.lk-footer.in .part:nth-child(3){ transition-delay:.2s }

/* retire every stagger once the entrance has played (beats every nth-child rule above) */
.lk-s.in.settled .part:nth-child(n){ transition-delay:0s !important }

/* ---------- one living element per section, whisper level, only while on screen ---------- */
@keyframes lk-dust{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-680px,680px,0) } }
@keyframes lk-breathe{ 0%,100%{ opacity:.22 } 50%{ opacity:.7 } }
@keyframes lk-sway{ 0%,100%{ transform:rotate(-2.5deg) } 50%{ transform:rotate(2.5deg) } }
@keyframes lk-glow-drift{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-14vmax,9vmax,0) } }

.lk-how.live .lk-how-glow{ animation:lk-glow-drift 16s var(--ease-inout) -6s infinite alternate }
.lk-team.live .lk-hold-halo{ animation:lk-breathe 6s ease-in-out -2.4s infinite }
.lk-trust.live .lk-trust-mark{ animation:lk-sway 7s ease-in-out -3s infinite }
.lk-faq.live .lk-faq-rule{ animation:lk-breathe 5s ease-in-out -1.8s infinite }
.lk-cta.live .lk-btn-wrap::after{ animation:lk-breathe 4.5s ease-in-out -1.5s infinite }

body.paused *,body.paused *::before,body.paused *::after{ animation-play-state:paused !important }

/* ---------- focus + touch ---------- */
.lk-s :focus-visible{ outline:2px solid var(--accent); outline-offset:4px }
.lk-hold:focus-visible{ outline-offset:10px }
@media (pointer:coarse){
  .lk-btn{ box-sizing:border-box; min-height:44px; display:inline-flex; align-items:center; justify-content:center }
  .lk-footer-site a{ box-sizing:border-box; min-height:44px; display:inline-flex; align-items:center }
  .lk-hold{ box-sizing:border-box; min-width:44px; min-height:44px }
}

/* ---------- phones ---------- */
@media (max-width:720px){
  .lk-step,.lk-step:nth-child(even){
    grid-template-columns:auto 1fr;
    grid-template-areas:"num title" "still still";
    row-gap:1.1rem;
    align-items:baseline;
  }
  .lk-step:nth-child(even) .lk-step-title{ justify-self:start }
  .lk-step-num{ align-self:baseline }
  .lk-how-head,.lk-trust-head{ flex-wrap:wrap }
  .lk-trust-mark{ width:44px }
  .lk-line{ grid-template-columns:2.4rem 1fr; column-gap:.9rem }
  .lk-faq-rule{ display:none }
  .lk-qa{ grid-template-columns:1fr; row-gap:.5rem }
  .lk-a{ margin-block-end:1.5rem }
  .lk-qa-row:last-child .lk-a{ margin-block-end:0 }
  .lk-footer-row{ flex-direction:column; align-items:flex-start; gap:1.1rem }
}
@media (max-height:520px){
  .lk-how-glow{ display:none }
}

/* ---------- JS pin (reduced-motion flip while the page is open) ---------- */
html.lk-pinned .lk-s .part{ transition-delay:0s !important }
html.lk-pinned .lk-seam line{ stroke-dashoffset:0 !important }
html.lk-pinned .lk-seam circle{ opacity:.9 }

/* ---------- reduced motion: final states, no engines, elements and pseudo-elements ---------- */
@media (prefers-reduced-motion:reduce){
  .lk-s,.lk-s *,.lk-s *::before,.lk-s *::after,
  .env,.env *,.lk-seam,.lk-seam *{
    animation:none !important;
    transition:none !important;
    transition-delay:0s !important;
  }
  .lk-s .part{ opacity:1; transform:none }
  .lk-seam line{ stroke-dashoffset:0 }
  .lk-seam circle{ opacity:.9 }
  .lk-still img,.lk-step:hover .lk-still img{ transform:none }
  .lk-team .lk-table{ opacity:1 }
  .lk-team .lk-orb i{ opacity:1; transform:scale(1) }
  .lk-team .lk-orb i::after{ opacity:1 }
  .lk-team .lk-hold{ --p:1 !important; transform:translate(-50%,-50%) }
  .lk-team .lk-hold-seal{ color:var(--accent) }
  .lk-team .lk-hold-halo{ opacity:.45 }
  .lk-team .lk-cap-b{ opacity:1; transform:none }
  .lk-team .lk-cap-a{ opacity:.55 }
  .lk-btn:hover{ transform:none }
}