:root{--paper:#F3EFE7;--paper2:#ECE6DA;--ink:#17140F;--ink2:#4A443B;--mute:#857D70;--rule:#CFC6B6;--acc:#6E1A1A;--acc2:#8C2A22;
--ar:"IBM Plex Sans Arabic",system-ui,sans-serif;--sans:"Inter Tight","IBM Plex Sans Arabic",system-ui,sans-serif;--serif:"Newsreader",Georgia,serif;--mono:"IBM Plex Mono",ui-monospace,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
html[lang=ar] body{font-family:var(--ar);font-size:17.5px;line-height:1.85}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.skip{position:absolute;inset-inline-start:-999px}.skip:focus{inset-inline-start:12px;top:12px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:9}
.mono,.secno,.num,.kicker,.from,.how b,.c5{font-family:var(--mono)}
h1,h2,h3{font-weight:500;letter-spacing:-.01em}
html[lang=en] h1,html[lang=en] h2{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}
html[lang=ar] h1,html[lang=ar] h2{font-family:var(--ar);font-weight:600;letter-spacing:0}
em{font-style:normal;color:var(--acc)} html[lang=en] em{font-style:italic}
/* nav */
.nav{position:sticky;top:0;z-index:5;background:rgba(243,239,231,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--ink)}
.navin{display:flex;align-items:center;gap:40px;height:68px}
.brand{display:flex;align-items:center;gap:12px;font-weight:600;font-size:18px}
.mark{width:34px;height:34px;display:block}
.nav nav{display:flex;gap:28px;font-size:14.5px;color:var(--ink2)}
.nav nav a:hover{color:var(--acc)}
.navr{margin-inline-start:auto;display:flex;gap:18px;align-items:center}
.ghost{background:none;border:0;font:500 13px var(--mono);letter-spacing:.06em;color:var(--ink);cursor:pointer;padding:6px 0;border-bottom:1px solid var(--ink)}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);padding:15px 26px;font:500 15px inherit;font-family:inherit;border:1px solid var(--ink);cursor:pointer;transition:background .2s,color .2s}
.btn:after{content:"→";transition:transform .2s}html[dir=rtl] .btn:after{content:"←"}
.btn:hover{background:var(--acc);border-color:var(--acc)}.btn:hover:after{transform:translateX(3px)}html[dir=rtl] .btn:hover:after{transform:translateX(-3px)}
.btn.sm{padding:10px 18px;font-size:14px}
.btn.line{background:transparent;color:var(--ink)}.btn.line:hover{background:var(--ink);color:var(--paper)}
/* hero */
.hero{padding:88px 0 96px;border-bottom:1px solid var(--ink)}
.herogrid{display:grid;grid-template-columns:7fr 4.2fr;gap:88px;align-items:end}
.kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:28px;display:flex;align-items:center;gap:12px}
.kicker:before{content:"";width:28px;height:1px;background:var(--acc)}
h1{font-size:clamp(44px,6.4vw,92px);line-height:1.02;margin-bottom:32px}
html[lang=ar] h1{line-height:1.3;font-size:clamp(40px,5.4vw,78px)}
.lead{font-size:19px;color:var(--ink2);max-width:36em;margin-bottom:40px}
.row{display:flex;gap:14px;flex-wrap:wrap}
.proof{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);margin-top:56px;border-top:1px solid var(--rule)}
.proof li{padding:16px 0 0;font-size:14px;color:var(--ink2);padding-inline-end:16px}
.proof li:before{content:"✓";color:var(--acc);margin-inline-end:8px}
/* case file */
.case{background:#FBF9F4;border:1px solid var(--ink);padding:0;position:relative;box-shadow:8px 8px 0 var(--paper2),8px 8px 0 1px var(--rule);transform:rotate(-.6deg)}
html[dir=rtl] .case{transform:rotate(.6deg)}
.casehead{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-bottom:1px solid var(--ink);font-size:13px;font-weight:600;gap:10px}
.casehead .mono{font-size:11px;color:var(--mute);letter-spacing:.06em;font-weight:400}
.stamp{position:absolute;top:70px;inset-inline-end:18px;border:2px solid var(--acc);color:var(--acc);padding:4px 12px;font:600 13px var(--mono);letter-spacing:.12em;text-transform:uppercase;transform:rotate(-8deg);opacity:.85}
.case dl{padding:6px 22px}
.case dl div{display:grid;grid-template-columns:110px 1fr;padding:13px 0;border-bottom:1px dashed var(--rule);font-size:15px}
.case dt{font:400 11.5px var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.08em;padding-top:3px}
html[lang=ar] .case dt{font-family:var(--ar);font-size:13px;letter-spacing:0}
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:18px 22px 8px}
.steps4 span{height:3px;background:var(--rule)}.steps4 .on{background:var(--ink)}
.case .small{padding:0 22px 20px;font-size:12.5px;color:var(--mute)}
/* sections */
.sec{padding:120px 0;border-bottom:1px solid var(--rule)}
.sec.alt{background:var(--paper2)}
.secno{font-size:12px;color:var(--acc);letter-spacing:.1em;margin-bottom:18px}
h2{font-size:clamp(34px,4vw,56px);line-height:1.08;margin-bottom:14px}
html[lang=ar] h2{line-height:1.35}
.sub{color:var(--ink2);max-width:34em;margin-bottom:56px}
#services .wrap,#pricing .wrap{display:grid;grid-template-columns:3.4fr 8fr;column-gap:72px}
#services .wrap>p,#services .wrap>h2,#pricing .wrap>p:not(.small),#pricing .wrap>h2{grid-column:1}
.svc,.prices{grid-column:2;grid-row:1/span 4;border-top:1px solid var(--ink)}
.item{display:grid;grid-template-columns:64px 1fr 1.15fr;gap:24px;padding:30px 0;border-bottom:1px solid var(--rule);transition:background .25s,padding .25s}
.item:hover{background:#FBF9F4;padding-inline:14px}
.num{font-size:13px;color:var(--mute);padding-top:6px}
.item h3{font-size:21px;line-height:1.35}
.item p{color:var(--ink2);font-size:15.5px}
/* how */
.how{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);margin-top:48px}
.how li{padding:28px 28px 0 0;border-inline-end:1px solid var(--rule);padding-inline:0 28px}
.how li+li{padding-inline-start:28px}.how li:last-child{border:0}
.how b{display:block;font-weight:400;font-size:13px;color:var(--acc);margin-bottom:40px}
.how b:before{content:"0"}
.how h3{font-size:20px;margin-bottom:8px}.how p{color:var(--ink2);font-size:15px}
/* pricing */
.pi{display:flex;align-items:baseline;gap:16px;padding:22px 0;border-bottom:1px solid var(--rule)}
.pi h3{font-size:18px;font-weight:500}
.pi .from{order:2;margin-inline-start:auto;font-size:11.5px;color:var(--mute);text-transform:uppercase;letter-spacing:.08em;flex:1;text-align:end;white-space:nowrap;overflow:hidden}
.pi .from:before{content:". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";color:var(--rule);margin-inline-end:10px}
.pi .amt{order:3;font:400 30px var(--serif);min-width:90px;text-align:end}
.pi .amt small{font-size:14px;color:var(--acc)}
.pi.feat h3:after{content:"Court";font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acc);border:1px solid var(--acc);padding:2px 6px;margin-inline-start:10px;vertical-align:middle}
html[lang=ar] .pi.feat h3:after{content:"للمحاكم";font-family:var(--ar);font-size:11px}
.note{display:block;font:500 11.5px var(--mono);color:var(--acc);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
#pricing .small{grid-column:2;margin-top:16px;font-size:13px;color:var(--mute)}
/* legal */
.legal{background:var(--ink);color:var(--paper);padding:120px 0}
.legal .secno,.legal .kicker{color:#D9A79E}.legal .kicker:before{background:#D9A79E}
.legalgrid{display:grid;grid-template-columns:5fr 7fr;gap:88px}
.legal .lead{color:#BDB4A5}
.rules{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid #4A443B;align-self:start}
.rule{padding:28px 0;padding-inline-end:28px}.rule+.rule{padding-inline:28px 0;border-inline-start:1px solid #4A443B}
.rule h3{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px;color:#BDB4A5}
html[lang=ar] .rule h3{font:600 15px var(--ar);letter-spacing:0}
.rule ul{list-style:none}.rule li{padding:12px 0;border-bottom:1px solid #2F2A24;font-size:15.5px;display:flex;gap:12px}
.rule.yes li:before{content:"+";color:#A9C2A0;font-family:var(--mono)}.rule.no li:before{content:"×";color:#E08A7E;font-family:var(--mono)}
.rules>.small{grid-column:1/-1;padding-top:24px;border-top:1px solid #4A443B;color:#9B9283;font-size:13.5px}
/* form */
.ordergrid{display:grid;grid-template-columns:4fr 7fr;gap:88px;align-items:start}
.ordergrid>div:first-child{position:sticky;top:110px}
.form{border-top:1px solid var(--ink);padding-top:12px}
.g2{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
.form label{display:block;padding:18px 0 0}
.form label>span,legend{display:block;font:500 11.5px var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.09em;margin-bottom:6px}
html[lang=ar] .form label>span,html[lang=ar] legend{font:500 13.5px var(--ar);letter-spacing:0;text-transform:none}
input:not([type=radio]):not([type=checkbox]),select{width:100%;background:transparent;border:0;border-bottom:1px solid var(--ink2);padding:10px 0;font:inherit;color:var(--ink);border-radius:0;outline:0;transition:border-color .2s}
input:focus,select:focus{border-bottom-color:var(--acc)!important;box-shadow:0 1px 0 var(--acc)}
input[type=file]{border:1px dashed var(--ink2)!important;padding:18px!important;background:#FBF9F4!important;font-size:14px!important}
fieldset{border:0;margin-top:28px;padding:20px;background:#FBF9F4;border:1px solid var(--rule);border-inline-start:3px solid var(--acc)}
.form label.radio,.form label.check{display:flex;gap:12px;align-items:flex-start;padding:8px 0;font-size:15.5px}
.form label.radio span,.form label.check span{font:inherit;text-transform:none;letter-spacing:0;color:var(--ink);margin:0}
.form label.check{margin-top:22px;font-size:14.5px;color:var(--ink2)}
input[type=radio],input[type=checkbox]{accent-color:var(--acc);width:17px;height:17px;margin-top:5px;flex:none}
.invalid{border-color:var(--acc)!important;background:rgba(110,26,26,.04)!important}
.err{color:var(--acc);font-size:14px;margin-top:14px}
.form .btn{margin-top:28px;width:100%;justify-content:space-between;padding:20px 26px}
.okbox{border:1px solid var(--ink);padding:36px;background:#FBF9F4}.okbox h3{font-size:24px;margin-bottom:8px}
/* faq */
.narrow{max-width:1240px;display:grid;grid-template-columns:3.4fr 8fr;column-gap:72px}
.narrow>p,.narrow>h2{grid-column:1}.narrow details{grid-column:2}
.narrow details:first-of-type{grid-row:1;border-top:1px solid var(--ink)}
details{border-bottom:1px solid var(--rule)}
summary{list-style:none;cursor:pointer;padding:24px 0;font-size:19px;font-weight:500;display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";font:300 24px var(--mono);color:var(--acc);transition:transform .25s}
details[open] summary:after{transform:rotate(45deg)}
details p{padding:0 0 24px;color:var(--ink2);max-width:40em}
/* contact */
#contact{border:0}
.contact{display:flex;justify-content:space-between;align-items:end;gap:40px;border-top:1px solid var(--ink);padding-top:48px!important}
.contact .sub{margin:0}
.btn.wa{background:var(--acc);border-color:var(--acc)}.btn.wa:hover{background:var(--ink);border-color:var(--ink)}
.foot{border-top:1px solid var(--ink);padding:26px 0;font:400 12px var(--mono);color:var(--mute);letter-spacing:.04em}
.foot .wrap{display:flex;justify-content:space-between}
html[lang=ar] .foot{font-family:var(--ar);font-size:13px}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
@media(prefers-reduced-motion:no-preference){.hero h1,.hero .lead,.hero .row,.case{animation:up .8s cubic-bezier(.2,.7,.2,1) both}.hero .lead{animation-delay:.08s}.hero .row{animation-delay:.16s}.case{animation-delay:.24s}
@keyframes up{from{opacity:0;translate:0 14px}}}
@media(max-width:980px){.nav nav{display:none}.herogrid,.legalgrid,.ordergrid,#services .wrap,#pricing .wrap,.narrow{grid-template-columns:1fr;gap:48px}
.svc,.prices,.narrow details,#pricing .small{grid-column:1;grid-row:auto}.narrow details:first-of-type{grid-row:auto}.ordergrid>div:first-child{position:static}.how{grid-template-columns:1fr 1fr}.how li:nth-child(3){padding-inline-start:0}.how li{padding-bottom:32px}}
@media(max-width:640px){.wrap{padding:0 22px}.hero{padding:56px 0 64px}.sec,.legal{padding:80px 0}.navin{gap:16px}.btn.sm{padding:9px 14px;font-size:13px}
.proof{grid-template-columns:1fr}.proof li{padding:12px 0;border-bottom:1px solid var(--rule)}
.item{grid-template-columns:40px 1fr;gap:6px 14px}.item p{grid-column:2}.how{grid-template-columns:1fr}.how li,.how li+li{padding:24px 0;border:0;border-bottom:1px solid var(--rule)}.how b{margin-bottom:12px}
.rules{grid-template-columns:1fr}.rule,.rule+.rule{padding:24px 0;border:0}.g2{grid-template-columns:1fr}
.pi{flex-wrap:wrap}.pi h3{width:100%}.pi .from{text-align:start}.pi .from:before{content:""}.sub{margin-bottom:36px}
.contact{flex-direction:column;align-items:stretch}.foot .wrap{flex-direction:column;gap:6px}.case{transform:none!important}.lead{font-size:17px}}
html[lang=ar] .kicker,html[lang=ar] .note,html[lang=ar] .pi .from,html[lang=ar] .stamp,html[lang=ar] .case .small{font-family:var(--ar);letter-spacing:0;font-size:13.5px;font-weight:500}
html[lang=ar] .stamp{font-size:14px;font-weight:700}