:root{
  /* هوية "نور النافذة": brand/README.md */
  --paper:#F3EEE2; --card:#E6E0D1; --ink:#2A2E1C; --ink-soft:#5F6447; --rule:#CFC9B8;
  --noor:#D9A441; --noor-text:#8C6420;
  --display:"IBM Plex Sans Arabic",Tahoma,sans-serif;
  --body:"IBM Plex Sans Arabic",Tahoma,"Segoe UI",sans-serif;
  --latin:"Jost","IBM Plex Sans Arabic",sans-serif;
  --mono:"IBM Plex Mono","IBM Plex Sans Arabic",monospace;
  --ruqaa:"Aref Ruqaa","IBM Plex Sans Arabic",serif;
  --p-bg:#0C1E33; --p-glow:rgba(74,168,242,.35); --p-text:#1E6FD9;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--paper:#1A1C14;--card:#24271B;--ink:#E6E8DA;--ink-soft:#A9AD94;--rule:#3A3E2B;--noor-text:#D9A441}
}
:root[data-theme="dark"]{--paper:#1A1C14;--card:#24271B;--ink:#E6E8DA;--ink-soft:#A9AD94;--rule:#3A3E2B;--noor-text:#D9A441}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.8;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.wrap{width:min(1200px,100% - 2.5rem);margin-inline:auto}

header{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
header.solid{border-color:var(--rule)}
.bar{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{text-decoration:none;display:flex;align-items:center;gap:12px;color:var(--ink)}
.logo .lt{display:flex;flex-direction:column;line-height:1}
.logo .lt b{font-family:var(--ruqaa);font-weight:400;font-size:24px;line-height:1.3}
.logo .mk{width:32px;height:32px;color:var(--ink);display:block}
nav ul{list-style:none;display:flex;gap:1.8rem;margin:0;padding:0}
nav a{text-decoration:none;color:var(--ink-soft);font-weight:500}
nav a:hover{color:var(--ink)}
.hd-end{display:flex;align-items:center;gap:1rem}
.theme-btn{background:none;border:1px solid var(--rule);color:var(--ink);width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:1rem}

/* hero */
.hero{display:grid;grid-template-columns:.85fr 1.15fr;gap:3rem;align-items:center;padding:4rem 0 5rem}
.avail{display:inline-flex;align-items:center;gap:.55rem;font-size:.92rem;color:var(--ink-soft);border:1px solid var(--rule);border-radius:999px;padding:.35rem .9rem;margin-bottom:1.6rem}
.avail i{width:8px;height:8px;border-radius:50%;background:#2DB37A;box-shadow:0 0 0 4px rgba(45,179,122,.16)}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(2.3rem,4.6vw,4rem);line-height:1.3;margin:0 0 1.3rem;letter-spacing:-.015em}
.hero p{font-size:1.15rem;color:var(--ink-soft);max-width:34ch;margin:0 0 2.2rem}
.cta{display:flex;gap:.8rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;padding:.85rem 1.6rem;border-radius:999px;font-weight:600;text-decoration:none;border:1.5px solid transparent;font-family:var(--body);font-size:1rem;cursor:pointer;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn.dark{background:var(--ink);color:var(--paper)}
.btn.out{border-color:var(--rule);color:var(--ink);background:transparent}
.btn.pbtn{background:var(--p-bg);color:#fff}

.show{position:relative}
.panel{position:relative;border-radius:28px;overflow:hidden;background:var(--p-bg);transition:background-color .8s ease;aspect-ratio:1.28/1;isolation:isolate}
.panel::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 70% 85%,var(--p-glow),transparent 70%);transition:background .8s;z-index:-1}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.slide.on{opacity:1}
.slide .laptop{position:absolute;width:80%;right:7%;top:12%;transform:translateY(16px);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.slide .phone{position:absolute;width:21%;left:6%;bottom:8%;transform:translateY(30px);transition:transform 1s .1s cubic-bezier(.2,.8,.2,1)}
.slide.on .laptop,.slide.on .phone{transform:none}
.laptop .scr{border:9px solid #1B1E22;border-bottom-width:12px;border-radius:14px 14px 0 0;background:#000;overflow:hidden;aspect-ratio:16/10}
.laptop .scr img{width:100%;height:100%;object-fit:cover;object-position:top right}
.laptop .base{height:12px;margin-inline:-7%;background:linear-gradient(#d6d9dd,#949aa1);border-radius:0 0 16px 16px;position:relative}
.laptop .base::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:16%;height:5px;background:#828990;border-radius:0 0 8px 8px}
.phone{position:relative;border:7px solid #1B1E22;border-radius:30px;overflow:hidden;background:#000;aspect-ratio:390/844;box-shadow:0 30px 60px -24px rgba(0,0,0,.7)}
.phone::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:32%;height:14px;background:#1B1E22;border-radius:14px;z-index:2}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top}
.switch{display:flex;gap:.5rem;margin-top:1rem;flex-wrap:wrap}
.switch button{position:relative;overflow:hidden;display:flex;align-items:center;gap:.55rem;font-family:var(--body);font-size:.95rem;padding:.5rem 1rem;border-radius:999px;border:1px solid var(--rule);background:var(--card);color:var(--ink-soft);cursor:pointer}
.switch button i{width:10px;height:10px;border-radius:50%}
.switch button[aria-pressed="true"]{color:var(--ink);border-color:var(--ink)}
.switch button .bar-p{position:absolute;bottom:0;right:0;height:2px;width:0;background:var(--ink)}
.switch button[aria-pressed="true"] .bar-p{animation:fill var(--dur,5s) linear forwards}
.show.paused .switch .bar-p{animation-play-state:paused}
@keyframes fill{to{width:100%}}

/* work */
section{padding:5.5rem 0}
.sec-h{margin-bottom:2.8rem;max-width:52ch}
.sec-h h2{font-family:var(--display);font-weight:700;font-size:clamp(2rem,4vw,3rem);margin:0 0 .4rem;line-height:1.2}
.sec-h p{margin:0;color:var(--ink-soft);font-size:1.1rem}
.proj{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:center;margin-bottom:5rem}
.proj:nth-child(even) .tile{order:-1}
.proj .kind{font-weight:600;color:var(--t)}
.proj h3{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,3.4vw,2.6rem);margin:.3rem 0 .9rem;line-height:1.25}
.proj p{color:var(--ink-soft);margin:0 0 1.4rem;max-width:44ch}
.pts{list-style:none;padding:0;margin:0 0 2rem;display:grid;gap:.55rem}
.pts li{display:flex;gap:.7rem;align-items:baseline}
.pts li::before{content:"";flex:0 0 7px;height:7px;border-radius:50%;background:var(--t);transform:translateY(-2px)}
.tile{position:relative;display:block;width:100%;border:0;padding:0;cursor:pointer;border-radius:26px;overflow:hidden;background:var(--b);aspect-ratio:1.2/1;isolation:isolate}
.tile::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 30% 100%,var(--g),transparent 70%);z-index:-1}
.tile .lap{position:absolute;width:86%;right:7%;top:9%;border-radius:12px;overflow:hidden;box-shadow:0 30px 60px -28px rgba(0,0,0,.7);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.tile .lap img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top right}
.tile .phone{position:absolute;width:22%;left:7%;bottom:-6%;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.tile:hover .lap{transform:translateY(-6px)}
.tile:hover .phone{transform:translateY(-14px)}
.tile .open{position:absolute;bottom:1.1rem;right:1.1rem;background:rgba(255,255,255,.94);color:#1A1A1A;border-radius:999px;padding:.4rem 1rem;font-size:.9rem;font-weight:600}

.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.svc div{border-top:2px solid var(--ink);padding-top:1.2rem}
.svc h3{font-family:var(--display);font-weight:500;font-size:1.3rem;margin:0 0 .5rem}
.svc p{margin:0;color:var(--ink-soft)}
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem}
.about h2{font-family:var(--display);font-weight:700;font-size:clamp(2rem,4vw,3rem);margin:0;line-height:1.2}
.about p{margin:0 0 1.2rem;max-width:60ch}
.tools{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem;padding:0;list-style:none}
.tools li{border:1px solid var(--rule);border-radius:10px;padding:.3rem .85rem;font-size:.92rem;color:var(--ink-soft)}
.contact{background:var(--ink);color:var(--paper);border-radius:28px;padding:clamp(2rem,6vw,4.5rem);display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.contact h2{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4.4vw,3.2rem);margin:0 0 .6rem;line-height:1.2}
.contact p{margin:0;opacity:.7}
.links{display:flex;flex-direction:column;gap:.6rem}
.links a{display:flex;justify-content:space-between;padding:.95rem 1.2rem;border:1px solid color-mix(in srgb,var(--paper) 22%,transparent);border-radius:14px;text-decoration:none}
.links a:hover{background:color-mix(in srgb,var(--paper) 8%,transparent)}
footer{padding:2rem 0 3rem;color:var(--ink-soft);font-size:.9rem;text-align:center}

/* case study */
dialog{border:0;padding:0;max-width:none;max-height:none;width:100%;height:100%;background:var(--paper);color:var(--ink)}
dialog::backdrop{background:rgba(0,0,0,.5)}
dialog[open]{animation:rise .35s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
.cs{width:min(1100px,100% - 2.5rem);margin-inline:auto;padding:0 0 calc(env(safe-area-inset-bottom,0px) + 4rem)}
.cs-top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top,0px) + .9rem) 0 .9rem;margin-bottom:1rem;background:var(--paper)}
.close{background:none;border:1px solid var(--rule);color:var(--ink);border-radius:999px;padding:.45rem 1.1rem;font-family:var(--body);font-size:.95rem;cursor:pointer}
.cs h2{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.2;margin:0 0 .8rem}
.cs .lead{font-size:1.2rem;color:var(--ink-soft);max-width:62ch;margin:0 0 2.4rem}
.cs-cover{background:var(--p-bg);border-radius:24px;padding:clamp(1.5rem,5vw,4rem) clamp(1.5rem,6vw,5rem) 0;overflow:hidden;position:relative;isolation:isolate}
.cs-cover::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 50% 100%,var(--p-glow),transparent 70%);z-index:-1}
.cs-cover .laptop{max-width:900px;margin:0 auto}
.cover-m{display:none;justify-content:center;padding-bottom:2rem}
.cover-m .phone{width:min(250px,66vw)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2.4rem 0 3.5rem;padding:1.4rem 0;border-block:1px solid var(--rule)}
.facts dt{font-size:.85rem;color:var(--ink-soft)}
.facts dd{margin:0;font-weight:600}
.cs h3{font-family:var(--display);font-weight:700;font-size:1.6rem;margin:0 0 1.4rem}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin:0 0 2.6rem}
.feat h4{font-family:var(--display);font-weight:500;font-size:1.2rem;margin:0 0 .8rem;color:var(--p-text)}
.feat ul{list-style:none;margin:0;padding:0}
.feat li{padding:.85rem 0;border-top:1px solid var(--rule)}
.feat li b{display:block;font-weight:600}
.feat li span{color:var(--ink-soft);font-size:.98rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 4rem}
.chips span{background:var(--card);border:1px solid var(--rule);border-radius:999px;padding:.35rem .95rem;font-size:.92rem}
.gal-h{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:0 0 1.2rem}
.gal-h h3{margin:0}
.gal-h p{margin:0;color:var(--ink-soft);font-size:.95rem}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-bottom:4rem}
.shot{margin:0}
.shot.full{grid-column:span 2}
.shot button{display:block;width:100%;padding:0;border:1px solid var(--rule);border-radius:14px;overflow:hidden;background:var(--card);cursor:zoom-in;box-shadow:0 24px 50px -32px rgba(0,0,0,.45)}
.shot img{width:100%;height:auto}
.shot figcaption{margin-top:.7rem;font-size:.95rem;color:var(--ink-soft)}
.shot figcaption b{color:var(--ink);font-weight:600}
.compare{position:relative;border-radius:14px;overflow:hidden;margin-bottom:4rem;user-select:none;border:1px solid var(--rule)}
.compare img{width:100%;height:auto;display:block}
.compare .top{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x,50%))}
.compare .handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:#fff;pointer-events:none}
.compare .handle::after{content:"◐";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:#fff;color:#1A1A1A;display:grid;place-items:center;font-size:18px;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;direction:ltr}
.phones{display:flex;justify-content:center;gap:2rem;margin-bottom:3rem}
.phones figure{margin:0;text-align:center}
.phones .phone{width:230px}
.phones figcaption{margin-top:.8rem;color:var(--ink-soft);font-size:.95rem}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(10,10,10,.94);overflow:auto;display:flex;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 3.5rem) 1rem calc(env(safe-area-inset-bottom,0px) + 1rem)}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(1900px,100%);height:auto;border-radius:8px}
.lightbox button{position:fixed;top:calc(env(safe-area-inset-top,0px) + .8rem);inset-inline-end:1rem;background:#fff;color:#1A1A1A;border:0;border-radius:999px;padding:.45rem 1.1rem;font-family:var(--body);cursor:pointer}


/* ---- print work ---- */
.print{display:grid;grid-template-columns:.85fr 1.15fr;gap:3rem;align-items:center}
.print .kind{font-weight:600;color:#1F7A3E}
.print h3{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,3.4vw,2.6rem);margin:.3rem 0 .9rem;line-height:1.25}
.print p{color:var(--ink-soft);margin:0 0 1.4rem;max-width:44ch}
.print .pts li::before{background:#1F7A3E}
.wall{position:relative;display:block;width:100%;border:0;cursor:pointer;border-radius:26px;padding:clamp(1.4rem,4vw,3rem);background:linear-gradient(160deg,#E7E0CF,#DBD3BF);overflow:hidden;font:inherit}
:root[data-theme="dark"] .wall{background:linear-gradient(160deg,#2A2D21,#202219)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wall{background:linear-gradient(160deg,#2A2D21,#202219)}}
.wall::after{content:"";position:absolute;inset:auto 0 0 0;height:18%;background:linear-gradient(transparent,rgba(0,0,0,.06))}
.frame{background:#fff;padding:3.2%;border:6px solid #1C1C1C;box-shadow:0 2px 0 rgba(255,255,255,.4) inset,0 28px 40px -22px rgba(0,0,0,.55),0 6px 12px -6px rgba(0,0,0,.3)}
.frame img{width:100%;aspect-ratio:1684/1191;object-fit:cover}
.wall .big{width:100%;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.wall .row{display:grid;grid-template-columns:repeat(4,1fr);gap:4%;margin-top:6%}
.wall .row .frame{border-width:3px;padding:4%}
.wall:hover .big{transform:translateY(-4px)}
.wall .open{position:absolute;bottom:1.1rem;right:1.1rem;z-index:2;background:rgba(255,255,255,.94);color:#1A1A1A;border-radius:999px;padding:.4rem 1rem;font-size:.9rem;font-weight:600}
.cs-wall{border-radius:24px;padding:clamp(1.5rem,6vw,5rem);background:linear-gradient(160deg,#E7E0CF,#D9D0BB)}
.cs-wall .frame{max-width:980px;margin:0 auto;border-width:8px}
.boards{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-bottom:4rem}
.boards .shot:first-child{grid-column:span 2}
.details{columns:3;column-gap:1.2rem;margin-bottom:4rem}
.details .shot{break-inside:avoid;margin-bottom:1.4rem}
.details .shot button{background:#fff}
.lightbox img{cursor:zoom-in}
.lightbox.zoom{align-items:flex-start;justify-content:flex-start}
.lightbox.zoom img{max-width:none;width:min(4200px,260%);cursor:zoom-out}
.lb-hint{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 1rem);left:50%;transform:translateX(-50%);background:rgba(255,255,255,.12);color:#fff;border-radius:999px;padding:.35rem 1rem;font-size:.88rem;pointer-events:none}
@media (max-width:900px){.print{grid-template-columns:1fr;gap:1.6rem}.print .wall{order:-1}.svc{grid-template-columns:1fr 1fr}}
@media (max-width:720px){
  .boards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;margin-inline:-1.25rem;padding:0 1.25rem .8rem}
  .boards .shot,.boards .shot:first-child{flex:0 0 88%;scroll-snap-align:center}
  .details{columns:2;column-gap:.8rem}
  .wall .row .frame{border-width:2px}
  .svc{grid-template-columns:1fr}
}

/* ---- academic ---- */
.teaser{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;text-decoration:none;background:var(--card);border:1px solid var(--rule);border-radius:28px;padding:clamp(1.6rem,4vw,3.2rem);transition:border-color .3s}
.teaser:hover{border-color:var(--ink)}
.t-kicker{font-weight:600;color:var(--ink-soft)}
.teaser h2{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.35;margin:.4rem 0 .8rem}
.teaser p{color:var(--ink-soft);margin:0 0 1.6rem}
.scale-svg{width:100%;height:auto;display:block}
.scale-svg rect{fill:none;stroke:var(--ink);stroke-width:1.5}
.scale-svg .park{fill:#1F7A3E;fill-opacity:.08;stroke:#1F7A3E}
.scale-svg .garden{fill:#8A9A3B;fill-opacity:.25;stroke:#6E7E2A}
.scale-svg .villa{fill:#B8573A;stroke:#B8573A}
.scale-svg text{font-family:var(--body);font-size:13px;fill:var(--ink-soft);text-anchor:end}
.scale-svg line{stroke:var(--ink-soft);stroke-width:.8}
body.ac main,body.ac #hd nav{display:none}
.acad{padding:2.5rem 0 5rem}
.back{display:inline-block;color:var(--ink-soft);text-decoration:none;margin-bottom:2rem}
.back:hover{color:var(--ink)}
.acad-head{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:end;margin-bottom:3.5rem;padding-bottom:2.5rem;border-bottom:1px solid var(--rule)}
.acad-head h1{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,5vw,4rem);margin:0 0 1rem;line-height:1.2}
.acad-head p{color:var(--ink-soft);font-size:1.15rem;margin:0;max-width:44ch}
.studio{display:grid;grid-template-columns:5.5rem 1fr 1.1fr;gap:2rem;align-items:center;padding:2.2rem 0;border-bottom:1px solid var(--rule)}
.studio .num{font-family:var(--display);font-weight:800;font-size:3.4rem;line-height:1;color:var(--ink)}
.studio .course{font-family:var(--body);font-weight:600;font-size:.95rem;color:var(--ink-soft);direction:ltr;text-align:right}
.studio h3{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2rem);margin:.2rem 0 .2rem;line-height:1.3}
.studio .en{direction:ltr;text-align:right;color:var(--ink-soft);margin:0 0 .9rem;font-size:.98rem}
.studio .meta{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.2rem}
.studio .meta span{border:1px solid var(--rule);border-radius:999px;padding:.2rem .8rem;font-size:.88rem;color:var(--ink-soft)}
.studio .meta .st{color:var(--ink);border-color:var(--ink)}
.studio .thumb{display:block;width:100%;border:1px solid var(--rule);border-radius:14px;overflow:hidden;padding:0;cursor:pointer;background:var(--card)}
.studio .thumb img{width:100%;aspect-ratio:16/9;object-fit:cover}
.studio.soon{opacity:.6}
.studio.soon .thumb{cursor:default;aspect-ratio:16/9;border-style:dashed;display:grid;place-items:center;color:var(--ink-soft);font-size:.95rem}
.cs-note{font-size:.92rem;color:var(--ink-soft);margin:-1.6rem 0 2rem}
.cs-wall.dark{background:linear-gradient(160deg,#3A3834,#24221F)}
@media (max-width:900px){
  .teaser,.acad-head{grid-template-columns:1fr}
  .studio{grid-template-columns:1fr;gap:1rem}
  .studio .num{font-size:2.4rem}
  .studio .thumb{order:-1}
}

@media (max-width:900px){
  nav ul{display:none}
  .hero{grid-template-columns:1fr;padding:2.5rem 0 3.5rem;gap:2rem}
  .proj{grid-template-columns:1fr;gap:1.6rem;margin-bottom:3.5rem}
  .proj .tile,.proj:nth-child(even) .tile{order:-1}
  .svc,.about,.contact{grid-template-columns:1fr}
  .svc{gap:2rem}
  .facts{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  section{padding:4rem 0}
  .panel{border-radius:22px}
  .phone{border-width:5px;border-radius:20px}
  .phone::before{height:9px;top:4px}
  .cs-cover{padding:2rem 1rem 0}
  .cs-cover .laptop{display:none}
  .cover-m{display:flex}
  .cover-m .phone{border-width:8px;border-radius:34px}
  .feat{grid-template-columns:1fr;gap:1.5rem}
  .gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;margin-inline:-1.25rem;padding:0 1.25rem .8rem}
  .shot,.shot.full{flex:0 0 86%;scroll-snap-align:center}
  .gal-h{flex-direction:column;gap:.2rem}
  .phones{gap:.7rem}
  .phones .phone{width:29vw}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---- أسعار الانطلاق ---- */
#pricing{margin-top:1rem}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.plan{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule);border-radius:22px;padding:1.5rem 1.4rem 1.3rem}
.plan h3{font-family:var(--display);font-weight:700;font-size:1.3rem;margin:0 0 .3rem;line-height:1.4}
.plan .fit{margin:0 0 1.2rem;color:var(--ink-soft);font-size:.95rem;line-height:1.7}
.plan .price{margin:auto 0 .9rem;font-family:var(--display);font-weight:700;font-size:1.25rem}
.plan .btn{justify-content:center;padding:.7rem 1rem;font-size:.95rem}
.ex-link{background:none;border:0;padding:0;margin:-.4rem 0 .9rem;font:inherit;font-size:.92rem;color:var(--ink-soft);text-decoration:underline;text-underline-offset:4px;cursor:pointer;text-align:start}
.ex-link:hover{color:var(--ink)}

.foot-link{display:inline-block;margin-top:.6rem;color:var(--ink-soft);font-size:.88rem;text-underline-offset:4px}
.foot-link:hover{color:var(--ink)}

@media (max-width:1000px){.plans{grid-template-columns:1fr 1fr}}
@media (max-width:720px){
  .plans{grid-template-columns:1fr}
}

/* ================================================================
   هوية "نور النافذة" (brand/README.md): زوايا حادة، بدون ظلال ولا تدرجات،
   ولون "نور" للتفاصيل الصغيرة بس. شاشة الجوال في اللقطات مستثناة من الزوايا الحادة.
   ================================================================ */
.btn,.avail,.theme-btn,.switch button,.panel,.tile,.tile .lap,.tile .open,.wall,.wall .open,
.contact,.links a,.tools li,.chips span,.shot button,.compare,.cs-cover,.cs-wall,.close,
.lightbox img,.lightbox button,.studio .thumb,.studio .meta span,.teaser,
.plan,.lab-card,.lb-hint,.cs-note{border-radius:0}
:focus-visible{border-radius:0}
.tile .lap,.shot button,.frame,.phone,.compare .handle::after{box-shadow:none}
.panel::before,.tile::before,.cs-cover::before,.wall::after{display:none}
.wall,.cs-wall,:root[data-theme="dark"] .wall{background:var(--card)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wall{background:var(--card)}}
.cs-wall.dark{background:#2A2E1C}
.laptop .base{background:#AEB2A4}
.laptop .base::after{background:#8D9283}
header{background:var(--paper);backdrop-filter:none}

/* العناوين: IBM Plex Sans Arabic بوزن ٦٠٠–٧٠٠ */
.hero h1,.contact h2,.cs h2,.acad-head h1{font-weight:700;letter-spacing:0}
.sec-h h2,.about h2,.proj h3,.print h3,.teaser h2,.studio h3{font-weight:700}
.studio .num{font-family:var(--latin);font-weight:500}

/* التسميات الصغيرة بخط Mono */
.proj .kind,.print .kind,#csKind,.studio .course,.facts dt,.shot figcaption{font-family:var(--mono);font-size:.82rem;letter-spacing:0}
.proj .kind,.print .kind{font-weight:500}

/* لمسات "نور" */
.avail i{background:var(--noor);box-shadow:none;border-radius:0}
.ex-link,.foot-link{color:var(--noor-text)}
.svc div{border-top-color:var(--ink)}

/* كرت A+ Lab (يودّي للموقع المستقل) */
.svc-3{grid-template-columns:repeat(3,1fr)}
.lab-card{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;text-decoration:none;border:1px solid var(--rule);background:var(--card);padding:1.6rem 1.8rem;transition:border-color .2s}
.lab-card:hover{border-color:var(--ink)}
.lab-card b{display:block;font-family:var(--display);font-weight:700;font-size:1.3rem}
.lab-card small{color:var(--ink-soft);font-size:.95rem}
.lab-go{font-family:var(--latin);font-weight:500;font-size:1.05rem;white-space:nowrap;border-bottom:2px solid var(--noor);padding-bottom:2px}
@media (max-width:900px){.svc-3{grid-template-columns:1fr}}

/* الخدمات الخمس: صف واحد على الشاشات العريضة، و٣ + ٢ على المتوسطة */
@media (min-width:1101px){.svc.svc-5{grid-template-columns:repeat(5,1fr)}}
@media (min-width:901px) and (max-width:1100px){.svc.svc-5{grid-template-columns:repeat(3,1fr)}}

/* ================= الباقات (وسم، ويشمل، وملاحظة) + طريقة الشغل ================= */
.plans{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.plan{position:relative}
.plan.is-new{border:2px solid var(--ink)}
.plan-tag{position:absolute;top:-.8rem;inset-inline-start:1.2rem;background:var(--noor);color:#2A2E1C;font-family:var(--display);font-weight:700;font-size:.8rem;padding:.15rem .7rem}
.plan-inc{margin:0 0 1rem;padding:0;list-style:none;display:flex;flex-direction:column;gap:.35rem;font-size:.92rem;color:var(--ink-soft);line-height:1.6}
.plan-inc li{position:relative;padding-inline-start:1rem}
.plan-inc li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:6px;height:6px;background:var(--noor)}
.plan-note{margin:-.5rem 0 .9rem;font-size:.82rem;color:var(--ink-soft)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin:0;padding:0;list-style:none}
.steps li{border-top:2px solid var(--ink);padding-top:1.2rem}
.steps .no{display:block;font-family:var(--display);font-weight:700;font-size:2.2rem;line-height:1;color:var(--ink);margin-bottom:.8rem}
.steps h3{font-family:var(--display);font-weight:700;font-size:1.25rem;margin:0 0 .4rem}
.steps p{margin:0;color:var(--ink-soft)}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;gap:2rem 1.4rem}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* ================= تطوير الصفحة: عنوان صغير، وحقائق، وشريط متحرك، وخدمات مرقّمة، وأسئلة، وقائمة جوال ================= */
.kicker{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:.7rem;font-size:.95rem;font-weight:600;color:var(--noor-text)}
.kicker::before{content:"";width:22px;height:2px;background:var(--noor)}
.hd-cta{padding:.55rem 1.2rem;font-size:.92rem}
.hd-cta:hover{transform:none}
.nav-btn{display:none;width:40px;height:40px;border:1px solid var(--rule);background:none;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-btn span{width:18px;height:2px;background:var(--ink)}
.facts{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:1.8rem 0 0;padding:0;list-style:none;font-size:.95rem;color:var(--ink-soft)}
.facts li{display:flex;align-items:center;gap:.5rem}
.facts li::before{content:"";width:7px;height:7px;background:var(--noor)}
.ticker{overflow:hidden;background:var(--ink);color:var(--paper);padding:1rem 0;direction:ltr;margin-top:3rem}
.ticker-t{display:flex;width:max-content;animation:tick 45s linear infinite}
.ticker span{display:flex;align-items:center;gap:1.6rem;padding-inline-end:1.6rem;font-weight:600;font-size:1.05rem;white-space:nowrap;direction:rtl}
.ticker span::after{content:"";width:6px;height:6px;background:var(--noor)}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker:hover .ticker-t{animation-play-state:paused}
.svc-n{display:block;font-family:var(--latin);font-size:.9rem;color:var(--noor-text);margin-bottom:.6rem}
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;align-items:start}
.faq{display:flex;flex-direction:column;border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 0;cursor:pointer;list-style:none;font-weight:600;font-size:1.1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;width:12px;height:12px;flex:none}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;inset:5px 0 auto;height:2px;background:var(--ink);transition:transform .2s}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq p{margin:0 0 1.2rem;color:var(--ink-soft)}
@media (prefers-reduced-motion:reduce){.ticker-t{animation:none}}
@media (max-width:900px){
  .faq-wrap{grid-template-columns:1fr;gap:0}
  .hd-cta{display:none}
  .nav-btn{display:flex}
  nav#mainNav{position:absolute;top:68px;inset-inline:0;background:var(--paper);border-bottom:1px solid var(--rule)}
  nav#mainNav ul{display:none;flex-direction:column;gap:0;padding:.4rem 1.25rem 1rem}
  nav#mainNav.open ul{display:flex}
  nav#mainNav li a{display:block;padding:.85rem 0;border-bottom:1px solid var(--rule);font-size:1.05rem}
  .ticker{margin-top:2rem;padding:.8rem 0}
  .ticker span{font-size:.95rem}
}

/* ================= الأسعار أرتب، وليش العارف ستوديو، وشريط التواصل ================= */
.plans{gap:1.1rem}
.plan{padding:1.7rem 1.5rem 1.4rem;border:1px solid var(--rule);transition:border-color .2s}
.plan:hover{border-color:var(--ink)}
.plan-n{position:absolute;top:1rem;inset-inline-end:1.2rem;font-family:var(--display);font-weight:700;font-size:2.2rem;line-height:1;color:color-mix(in srgb,var(--ink) 10%,transparent)}
.plan h3{font-size:1.35rem;padding-inline-end:2.6rem}
.plan .price{display:inline-block;align-self:flex-start;margin:auto 0 1rem;padding:.35rem .8rem;background:color-mix(in srgb,var(--noor) 22%,var(--card));font-size:1.15rem}
.plan .btn{justify-content:center;width:100%}
.plan .btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:none}
.whys{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.whys > div{border-top:2px solid var(--ink);padding-top:1.2rem}
.why-i{display:block;width:12px;height:12px;background:var(--noor);margin-bottom:1rem}
.whys h3{font-family:var(--display);font-weight:700;font-size:1.25rem;margin:0 0 .4rem}
.whys p{margin:0;color:var(--ink-soft)}
.kicker.on-dark{color:var(--noor)}
.contact{grid-template-columns:1.3fr .9fr;padding:clamp(2.2rem,6vw,5rem)}
.contact h2{font-size:clamp(2.2rem,5vw,3.6rem)}
@media (max-width:900px){.contact{grid-template-columns:1fr}} /* كان يطلع عمودين على الجوال ويسبب سحب يمين ويسار */
.c-acts{display:flex;flex-direction:column;gap:1rem;align-items:stretch}
.c-main{justify-content:center;gap:.6rem;padding:1.05rem 1.6rem;background:var(--noor);color:#2A2E1C;font-size:1.05rem;font-weight:700}
.c-main:hover{background:var(--paper);color:var(--ink);transform:none}
.c-mail{text-align:center;text-decoration:none;font-size:.95rem;opacity:.8}
.c-mail:hover{opacity:1;text-decoration:underline}
@media (max-width:900px){.whys{grid-template-columns:1fr 1fr;gap:2rem 1.4rem}}
@media (max-width:560px){.whys{grid-template-columns:1fr}}

/* ================================================================
   الهوية البصرية والشعار (#identity). ألوان الهوية بس، زوايا حادة،
   بدون ظلال ولا تدرجات. «تشريح العلامة» يرتسم مرة وحدة.
   ================================================================ */
.idn{padding-bottom:5rem}
.svc-more{display:inline-block;margin-top:.4rem;color:var(--noor-text);text-decoration:none;font-weight:600;font-size:.95rem}
.svc-more:hover{text-decoration:underline}

/* تشريح العلامة */
.anat{display:grid;grid-template-columns:1fr minmax(0,440px) 1fr;gap:2.4rem;align-items:center;margin:0 0 4.5rem;padding:2.4rem 0;border-block:1px solid var(--rule)}
.anat-side{display:flex;flex-direction:column;gap:1.6rem}
.anat-core{width:100%;height:auto;display:block;color:var(--ink);overflow:visible}
.g-grid line{stroke:var(--rule);stroke-width:.6}
.g-cons > *{fill:none;stroke:var(--ink-soft);stroke-width:.8;opacity:.75}
.mk-line{fill:none;stroke:var(--ink);stroke-width:1.4}
.mk-fill{fill:var(--ink)}
.g-call{font-family:var(--mono);font-size:12.5px;fill:var(--ink-soft);direction:ltr} /* ltr عشان x يكون بداية النص من اليسار */
.g-call text{fill:var(--ink-soft)}
.g-call line{stroke:var(--noor);stroke-width:1.2}
.g-call .safe{fill:none;stroke:var(--noor-text);stroke-width:1;stroke-dasharray:5 5}
.g-call .mini{fill:var(--ink)}
.lyr{margin:0;border:1px solid var(--rule);background:var(--paper);padding:1rem 1.1rem 1.1rem}
.lyr figcaption{font-family:var(--mono);font-size:.78rem;color:var(--ink-soft);margin-bottom:.8rem;padding-bottom:.6rem;border-bottom:1px solid var(--rule)}
.sw{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;font-size:.92rem}
.sw li{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:.7rem}
.sw i{width:28px;height:28px;border:1px solid var(--rule)}
.sw bdi{font-family:var(--mono);font-size:.8rem;color:var(--ink-soft)}
.ty{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;line-height:1}
.ty-ar{font-family:var(--display);font-weight:700;font-size:3rem}
.ty-la{font-family:var(--latin);font-weight:500;font-size:2.6rem}
.ty-n{margin:.7rem 0 0;font-family:var(--mono);font-size:.75rem;color:var(--ink-soft)}
.bcard{position:relative;aspect-ratio:85/55;background:#2A2E1C;color:#F3EEE2;padding:12% 10%;display:flex;flex-direction:column;justify-content:flex-end;gap:5px}
.bcard svg{position:absolute;top:14%;inset-inline-end:10%;width:18%;fill:#F3EEE2}
.bc-name{font-family:var(--ruqaa);font-size:1.5rem;line-height:1.1}
.bcard i,.post i{display:block;height:2px;background:#F3EEE2;opacity:.35;width:52%}
.bcard i + i{width:34%}
.post{aspect-ratio:4/5;max-width:200px;background:#F3EEE2;color:#2A2E1C;border:1px solid var(--rule);padding:10%;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;position:relative}
.post svg{position:absolute;top:10%;inset-inline-start:10%;width:20%;fill:#2A2E1C}
.post b{font-family:var(--display);font-weight:700;font-size:1.15rem;line-height:1.35}
.post i{background:#D9A441;opacity:1;width:24px;margin-top:8px}

/* الحركة: الخطوط ترتسم، والتعبئة والطبقات تظهر بتتابع */
.anat .draw{stroke-dasharray:1;stroke-dashoffset:1}
.anat .mk-fill,.anat .g-call,.anat .g-grid{opacity:0}
.anat .lyr{opacity:0;transform:translateY(10px)}
.anat.on .draw{animation:idn-draw 1.1s cubic-bezier(.65,0,.35,1) var(--d,0s) forwards}
.anat.on .g-grid{animation:idn-in .8s ease forwards}
.anat.on .mk-fill{animation:idn-in .6s ease 2.2s forwards}
.anat.on .g-call{animation:idn-in .6s ease 2.5s forwards}
.anat.on .lyr{animation:idn-up .7s cubic-bezier(.16,1,.3,1) var(--d,0s) forwards}
@keyframes idn-draw{to{stroke-dashoffset:0}}
@keyframes idn-in{to{opacity:1}}
@keyframes idn-up{to{opacity:1;transform:none}}
.anat.done .draw{animation:none;stroke-dashoffset:0}
.anat.done .mk-fill,.anat.done .g-call,.anat.done .g-grid,.anat.done .lyr{animation:none;opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .anat .draw{stroke-dashoffset:0;animation:none!important}
  .anat .mk-fill,.anat .g-call,.anat .g-grid,.anat .lyr{opacity:1;transform:none;animation:none!important}
}

/* بطاقات المستويات */
.idn-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;align-items:stretch}
.tier{position:relative;display:flex;flex-direction:column;border:1px solid var(--rule);background:var(--paper);padding:2rem 1.6rem 1.6rem}
.tier h3{font-family:var(--display);font-weight:700;font-size:1.35rem;margin:0 0 1rem}
.tier-price{margin:0;font-family:var(--display);line-height:1.1}
.tier-price small{display:block;font-size:.85rem;font-weight:500;color:var(--ink-soft);margin-bottom:.25rem}
.tier-price b{font-size:2.8rem;font-weight:700;letter-spacing:-.01em}
.tier-price span{font-size:1rem;font-weight:600;color:var(--ink-soft)}
.tier-time{margin:.6rem 0 1.4rem;font-family:var(--mono);font-size:.8rem;color:var(--ink-soft);padding-bottom:1.2rem;border-bottom:1px solid var(--rule)}
.tier-inc{list-style:none;margin:0 0 1.8rem;padding:0;display:flex;flex-direction:column;gap:.55rem;font-size:.95rem;line-height:1.65}
.tier-inc li{position:relative;padding-inline-start:1.1rem}
.tier-inc li::before{content:"";position:absolute;inset-inline-start:0;top:.7em;width:6px;height:6px;border:1px solid currentColor}
.tier .btn{margin-top:auto;justify-content:center;width:100%}
.tier .btn.out:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:none}
.tier.is-feat{background:#2A2E1C;color:#F3EEE2;border-color:#2A2E1C}
.tier.is-feat .tier-price small,.tier.is-feat .tier-price span,.tier.is-feat .tier-time{color:#C9CCB8}
.tier.is-feat .tier-time{border-color:rgba(243,238,226,.18)}
.tier.is-feat .tier-inc li::before{background:#D9A441;border-color:#D9A441}
.tier-tag{position:absolute;top:-.8rem;inset-inline-start:1.4rem;background:#D9A441;color:#2A2E1C;font-weight:700;font-size:.8rem;padding:.15rem .7rem}
.btn.cream{background:#F3EEE2;color:#2A2E1C}
.btn.cream:hover{transform:none;background:#D9A441}
:root[data-theme="dark"] .tier.is-feat{border-color:#3A3E2B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tier.is-feat{border-color:#3A3E2B}}

.idn-not{margin:1.4rem 0 3.5rem;color:var(--ink-soft);font-size:.95rem}
.idn-not b{color:var(--ink);font-weight:600}
.idn-row{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-bottom:4rem}
.idn-row h3,.idn-proc-h h3,.idn-samples h3{font-family:var(--display);font-weight:700;font-size:1.25rem;margin:0 0 1rem}
.idn-addons table{width:100%;border-collapse:collapse;border-top:2px solid var(--ink)}
.idn-addons td{padding:.85rem 0;border-bottom:1px solid var(--rule)}
.idn-addons td:last-child{text-align:end;white-space:nowrap;font-weight:600}
.idn-terms ul{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.idn-terms li{padding:.85rem 0;border-bottom:1px solid var(--rule);color:var(--ink-soft)}

/* المراحل: خط زمني */
.idn-proc{list-style:none;margin:0 0 4rem;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;position:relative}
.idn-proc::before{content:"";position:absolute;top:1.15rem;inset-inline:0;height:1px;background:var(--ink)}
.idn-proc li{position:relative;padding-top:3rem}
.idn-proc .no{position:absolute;top:0;inset-inline-start:0;background:var(--paper);padding-inline-end:.8rem;font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1.5}
.idn-proc h4{font-family:var(--display);font-weight:700;font-size:1.2rem;margin:0 0 .4rem}
.idn-proc p{margin:0;color:var(--ink-soft)}

/* نماذج الهوية (تظهر لو فيه عناصر) */
.idn-samples{margin-bottom:4rem}
.idn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.2rem}
.idn-sample{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;padding:0;border:0;background:none;color:var(--ink);text-align:start;font-family:var(--body);cursor:pointer}
.idn-sample img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;border:1px solid var(--rule);margin-bottom:.7rem}
.idn-sample b{font-family:var(--display);font-size:1.1rem}
.idn-sample small{color:var(--ink-soft);font-size:.9rem}
.idn-label{position:absolute;top:.7rem;inset-inline-start:.7rem;background:#2A2E1C;color:#F3EEE2;font-family:var(--mono);font-size:.72rem;padding:.2rem .55rem}

.idn-cta{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.idn-mail{color:var(--noor-text);font-weight:600;text-decoration:none}
.idn-mail:hover{text-decoration:underline}

@media (max-width:1000px){
  .anat{grid-template-columns:1fr 1fr;gap:1.4rem}
  .anat-core{grid-column:1 / -1;order:-1;max-width:440px;margin-inline:auto}
  .idn-tiers{grid-template-columns:1fr;max-width:560px}
}
@media (max-width:700px){
  .anat{padding:1.6rem 0;gap:1rem}
  .anat-side{gap:1rem}
  .lyr{padding:.8rem}
  .ty-ar{font-size:1.7rem;white-space:nowrap}.ty-la{font-size:1.5rem}
  .sw li{grid-template-columns:20px 1fr;row-gap:0}.sw i{width:20px;height:20px}.sw bdi{grid-column:2}
  .bc-name{font-size:1.1rem}.post b{font-size:.95rem}
  .idn-row{grid-template-columns:1fr;gap:2.4rem}
  .idn-proc{grid-template-columns:1fr;gap:0}
  .idn-proc::before{top:0;bottom:0;inset-inline:auto;inset-inline-start:1.05rem;width:1px;height:auto}
  .idn-proc li{padding:0 0 1.8rem;padding-inline-start:3.4rem}
  .idn-proc .no{padding:0 0 .3rem;font-size:1.3rem}
  .tier-price b{font-size:2.4rem}
}

/* ================= إعادة تصميم الرئيسية (٢ نوفمبر ٢٠٢٦): الأعمال أول، خط ضخم، حركة ناعمة ================= */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* الهيدر فوق الواجهة الغامقة */
header{transition:background-color .35s,border-color .3s}
header.on-dark{background:transparent;backdrop-filter:none;border-color:transparent}
header.on-dark.solid{background:#2A2E1C;border-color:rgba(243,238,226,.12)}
header.on-dark .logo,header.on-dark .logo .mk{color:#F3EEE2}
header.on-dark .theme-btn{color:#F3EEE2;border-color:rgba(243,238,226,.3)}
header.on-dark .nav-btn{border-color:rgba(243,238,226,.3)}
header.on-dark .nav-btn span{background:#F3EEE2}
header.on-dark .hd-cta{background:#F3EEE2;color:#2A2E1C}
@media (min-width:901px){header.on-dark nav a{color:rgba(243,238,226,.72)}header.on-dark nav a:hover{color:#F3EEE2}}

/* الواجهة: ثابتة زيتوني في الفاتح والداكن */
.hx{box-sizing:border-box;background:#2A2E1C;color:#F3EEE2;margin-top:-69px;padding:calc(69px + 2.5rem) 0 2.2rem;min-height:100svh;display:flex;overflow:hidden}
.hx-in{display:flex;flex-direction:column;justify-content:space-between;gap:2rem}
.hx-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.hx .avail{color:rgba(243,238,226,.75);border-color:rgba(243,238,226,.25);margin:0}
.hx-loc{font-family:var(--mono);font-size:.85rem;color:rgba(243,238,226,.6)}
.hx-main{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:end;margin:clamp(1.5rem,5vh,4rem) 0 clamp(1.5rem,4vh,3rem)}
.hx-h{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,6.2vw,5.6rem);line-height:1.18}
.hx-h .ln{display:block;overflow:hidden;padding-bottom:.08em}
.hx-h .ln>span{display:block}
.hx-h em{font-style:normal;color:var(--noor)}
.hx-sub p{margin:0 0 1.6rem;color:rgba(243,238,226,.72);font-size:1.1rem;max-width:38ch}
.hx-cta{display:flex;align-items:center;gap:1.4rem}
.hx-link{color:#F3EEE2;text-decoration:none;font-weight:600;border-bottom:1px solid rgba(243,238,226,.35);padding-bottom:2px}
.hx-link:hover{border-color:var(--noor)}
.hx-link span{display:inline-block;animation:hxb 2s infinite}
@keyframes hxb{50%{transform:translateY(4px)}}
.hx-stage{display:grid;grid-template-columns:1fr auto;gap:clamp(.8rem,1.5vw,1.2rem);height:clamp(280px,34vw,500px)}
.hx-show{position:relative;overflow:hidden;cursor:pointer;background:#1A1C14;outline:none}
.hs{position:absolute;inset:0;margin:0;background:var(--b);opacity:0;transition:opacity 1s}
.hs.on{opacity:1}
.hs img{position:absolute;inset:9% 8% auto 8%;width:84%;aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform .8s var(--ez)}
.hx-show:hover .hs.on img{transform:scale(1.03)}
.hs figcaption{position:absolute;right:1.1rem;bottom:.9rem;display:flex;align-items:baseline;gap:.7rem;color:#fff}
.hs figcaption b{font-family:var(--display);font-size:1.15rem}
.hs figcaption span{font-size:.85rem;opacity:.7}
.hs-dots{position:absolute;left:1.1rem;bottom:1.2rem;display:flex;gap:6px}
.hs-dots i{width:18px;height:2px;background:rgba(255,255,255,.35);transition:background .3s,width .3s}
.hs-dots i.on{width:34px;background:var(--noor)}
.hx-reel{position:relative;height:100%;aspect-ratio:9/16;padding:0;border:0;background:#1A1C14;cursor:pointer;overflow:hidden}
.hx-reel video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.hx-reel:hover video{transform:scale(1.05)}
.hx-play{position:absolute;inset:auto 0 0 0;padding:.55rem;background:rgba(42,46,28,.88);color:#F3EEE2;font-size:.85rem;font-weight:600}
.hx :focus-visible{outline:2px solid var(--noor);outline-offset:4px}

/* الأعمال */
.wk-sec{padding-top:clamp(4rem,8vw,7rem)}
.wk-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap;margin-bottom:2.5rem}
.wk-head h2{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,6vw,5rem);line-height:1.1}
.wk-head p{margin:0;color:var(--ink-soft);max-width:34ch}
.works{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,2.5rem) clamp(1rem,2.5vw,2rem)}
.wk{cursor:pointer;outline:none}
.wk:first-child{grid-column:1/-1}
.wk-media{position:relative;background:var(--b);aspect-ratio:16/11;overflow:hidden}
.wk:first-child .wk-media{aspect-ratio:16/8}
.wk-l{position:absolute;inset:9% 7% auto 7%;width:86%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.wk-p{position:absolute;left:5%;bottom:7%;width:17%;background:#111;aspect-ratio:9/19;object-fit:cover;object-position:top;border-radius:14px;border:3px solid #111;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.wk:first-child .wk-l{inset:8% 16% auto 16%;width:68%}
.wk:first-child .wk-p{width:11%;left:10%}
.wk:hover .wk-l,.wk:focus-visible .wk-l{transform:scale(1.035)}
.wk:hover .wk-p,.wk:focus-visible .wk-p{transform:translateY(-6%)}
.wk:focus-visible .wk-media{outline:3px solid var(--noor);outline-offset:4px}
.wk-meta{display:flex;align-items:baseline;gap:1rem;padding-top:1rem;border-bottom:1px solid var(--rule);padding-bottom:1rem}
.wk-n{font-size:.85rem;color:var(--ink-soft)}
.wk-meta h3{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2.2vw,1.9rem);line-height:1.3}
.wk-k{margin-inline-start:auto;color:var(--ink-soft);font-size:.95rem;text-align:end}

/* الخدمات: صفوف مرقمة */
.srows{border-top:2px solid var(--ink)}
.srow{display:grid;grid-template-columns:5rem 1fr 1.2fr;gap:1.5rem;align-items:baseline;padding:1.7rem 0;border-bottom:1px solid var(--rule);color:inherit;text-decoration:none;transition:padding .35s}
.srow .svc-n{font-size:.9rem;color:var(--ink-soft)}
.srow h3{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,2.8vw,2.3rem);line-height:1.25}
.srow p{margin:0;color:var(--ink-soft)}
a.srow h3::after{content:" ←";color:var(--noor-text)}
a.srow:hover{padding-inline-start:1rem}

/* عنّي: جملة كبيرة */
.stmt{padding:clamp(4rem,9vw,8rem) 0}
.stmt-t{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(1.6rem,3.6vw,3rem);line-height:1.5;max-width:30ch}
.stmt-t b{font-weight:700}
.stmt-t span{color:var(--noor-text)}

/* التواصل: راسلني ضخمة */
.bigc{background:#2A2E1C;color:#F3EEE2;padding:clamp(4.5rem,10vw,9rem) 0}
.bigc .kicker{color:var(--noor)}
.bigc-t{display:inline-block;font-family:var(--display);font-weight:800;font-size:clamp(4.5rem,17vw,15rem);line-height:1.05;color:#F3EEE2;text-decoration:none;transition:color .3s}
.bigc-t:hover{color:var(--noor)}
.bigc-p{margin:1rem 0 3rem;color:rgba(243,238,226,.7);font-size:1.15rem;max-width:44ch}
.bigc-links{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(243,238,226,.25)}
.bigc-links a{display:flex;flex-direction:column;gap:.3rem;padding:1.2rem 0;color:#F3EEE2;text-decoration:none;border-bottom:1px solid rgba(243,238,226,.25)}
.bigc-links a span{font-size:.9rem;color:rgba(243,238,226,.6)}
.bigc-links a bdi{font-family:var(--mono);font-size:1rem;text-align:right}
.bigc-links a:hover bdi{color:var(--noor)}

/* ريل كامل */
.reel-dlg{border:0;padding:0;background:transparent;max-width:none;max-height:none}
.reel-dlg::backdrop{background:rgba(20,22,14,.92)}
.reel-dlg video{display:block;height:min(88svh,1100px);max-width:94vw;aspect-ratio:9/16;background:#000}
.reel-dlg .close{position:fixed;top:1rem;left:1rem;z-index:2}

/* مؤشر الماوس */
.cur{position:fixed;top:0;left:0;z-index:100;pointer-events:none;opacity:0;transition:opacity .25s}
.cur.vis{opacity:1}
.cur::before{content:"";position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--ink);transition:all .3s cubic-bezier(.2,.7,.2,1)}
.cur span{position:absolute;transform:translate(-50%,-50%) scale(.4);opacity:0;color:#2A2E1C;font-weight:700;font-size:.95rem;white-space:nowrap;transition:all .3s}
.cur.big::before{width:96px;height:96px;margin:-48px 0 0 -48px;background:var(--noor)}
.cur.big span{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cur::before{background:var(--noor)} /* يبان على الكريمي والزيتوني */

/* ===== الحركة (تشتغل بس لو الجهاز ما طالب تقليل الحركة؛ main.js يضيف .mo) ===== */
:root{--ez:cubic-bezier(.16,1,.3,1)}
/* الواجهة تتركّب: الاسم ينكتب من اليمين، النافذة تطلع ونورها يطيح، والباقي يجي ورا بعض */
.mo .hx-h .ln>span{transform:translateY(105%);transition:transform 1.2s var(--ez)}
.mo .hx-h .ln:nth-child(2)>span{transition-delay:.12s}
.mo .hx-top,.mo .hx-sub{opacity:0;transform:translateY(20px);transition:opacity 1s var(--ez) .55s,transform 1s var(--ez) .55s}
.mo .hx-top{transition-delay:.1s}
.mo .hx-stage>*{clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--ez) .7s}
.mo .hx-stage>.hx-reel{transition-delay:.85s}
.mo .hx-show .hs.on img{scale:1.15;transition:opacity 1s,scale 2s var(--ez) .7s}
.hx-go .hx-h .ln>span,.hx-go .hx-top,.hx-go .hx-sub{opacity:1;transform:none}
.hx-go .hx-stage>*{clip-path:inset(0)}
.hx-go .hx-show .hs.on img{scale:1}

/* العناوين تطلع من تحت قناع */
.rv-up{clip-path:inset(0 0 100% 0);transform:translateY(40%);transition:clip-path 1.1s var(--ez),transform 1.1s var(--ez)}
.rv-up.in{clip-path:inset(-20% -5% -20% -5%);transform:none}
/* بطاقات الأعمال: اللون ينفتح من تحت، والصورة تصغر لمكانها، والاسم يجي آخر شي */
.rv-wk .wk-media{clip-path:inset(100% 0 0 0);transition:clip-path 1.2s var(--ez) calc(var(--i,0)%2*.15s)}
.rv-wk .wk-l{scale:1.25;transition:scale 1.6s var(--ez) calc(var(--i,0)%2*.15s),transform .8s var(--ez)}
.rv-wk .wk-p{opacity:0;translate:0 40%;transition:opacity .9s var(--ez),translate 1.2s var(--ez),transform .8s var(--ez);transition-delay:calc(.45s + var(--i,0)%2*.15s)}
.rv-wk .wk-meta{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ez),transform .8s var(--ez);transition-delay:calc(.35s + var(--i,0)%2*.15s)}
.rv-wk.in .wk-media{clip-path:inset(0)}
.rv-wk.in .wk-l{scale:1}
.rv-wk.in .wk-p{opacity:1;translate:0 0}
.rv-wk.in .wk-meta{opacity:1;transform:none}
/* عمق خفيف وأنت تمرّر */
.mo .wk-l{transform:translateY(var(--py,0px))}
.mo .wk:hover .wk-l,.mo .wk:focus-visible .wk-l{transform:translateY(var(--py,0px)) scale(1.035)}
/* الباقي: يطلع لفوق ورا بعض */
.rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ez),transform .9s var(--ez);transition-delay:calc(var(--i,0)*.08s)}
.rv.in{opacity:1;transform:none}
/* شريط تقدّم القراءة */
.prog{position:fixed;top:0;right:0;left:0;height:2px;background:var(--noor);transform:scaleX(0);transform-origin:right;z-index:60;pointer-events:none}
/* خط تحت الخدمة يتعبّى عند التمرير */
.srow{position:relative}
.srow::after{content:"";position:absolute;bottom:-1px;right:0;left:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ez)}
.srow:hover::after{transform:scaleX(1)}

@media (max-width:900px){
  .hx-main{grid-template-columns:1fr;gap:1.4rem}
  .srow{grid-template-columns:3rem 1fr}
  .srow p{grid-column:2}
}
@media (max-width:700px){
.hx{padding-top:calc(69px + 1.5rem);min-height:auto}
  .hx-stage{grid-template-columns:1fr;height:auto}
  .hx-show{aspect-ratio:4/3}
  .hx-reel{display:none}
  .hx-cta{flex-wrap:wrap}
  .works{grid-template-columns:1fr}
  .wk-media,.wk:first-child .wk-media{aspect-ratio:4/3}
  .wk:first-child .wk-l{inset:9% 7% auto 7%;width:86%}
  .wk:first-child .wk-p{width:17%;left:5%}
  .wk-meta{flex-wrap:wrap;gap:.2rem .8rem}
  .wk-k{margin-inline-start:0;width:100%;text-align:start}
  .bigc-links{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .hx-link span{animation:none}
  .wk-l,.wk-p,.hx-reel video,.srow,.srow::after{transition:none}
}

/* ===== الواجهة والتواصل يتبعون الوضع (فاتح/داكن) بدل الزيتوني الثابت: قرار صالح ٢ نوفمبر ٢٠٢٦ «نصه كذا ونصه كذا» ===== */
.hx{background:var(--paper);color:var(--ink)}
.hx .avail{color:var(--ink-soft);border-color:var(--rule)}
.hx-loc{color:var(--ink-soft)}
.hx-h em{color:var(--noor-text)}
.hx-sub p{color:var(--ink-soft)}
.hx-cta{flex-wrap:wrap;gap:1rem 1.6rem}
.hx-link{color:var(--ink);border-bottom-color:var(--rule);background:none;border-top:0;border-inline:0;padding:0 0 2px;font:inherit;font-weight:600;cursor:pointer}
.hx-link:hover{border-bottom-color:var(--noor)}
.hx-reelb i{font-style:normal;font-size:.75em;color:var(--noor-text)}
.hx-stage{grid-template-columns:1fr}
.hx-show{background:var(--card)}
.hx-show:focus-visible{outline:2px solid var(--noor);outline-offset:4px}
.bigc{background:var(--paper);color:var(--ink);border-top:1px solid var(--rule)}
.bigc .kicker{color:var(--noor-text)}
.bigc-t{color:var(--ink)}
.bigc-t:hover{color:var(--noor-text)}
.bigc-p{color:var(--ink-soft)}
.bigc-links{border-top-color:var(--rule)}
.bigc-links a{color:var(--ink);border-bottom-color:var(--rule)}
.bigc-links a span{color:var(--ink-soft)}
.bigc-links a:hover bdi{color:var(--noor-text)}
.cur::before{background:var(--ink)}
.cur.big::before{background:var(--noor)}

/* تبديل الوضع بنعومة */
::view-transition-old(root),::view-transition-new(root){animation-duration:.6s;animation-timing-function:ease}
.theme-fade,.theme-fade *{transition:background-color .5s,color .5s,border-color .5s !important}
.theme-btn{transition:transform .5s var(--ez)}
.theme-btn:hover{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.theme-btn:hover{transform:none}}
.bigc .kicker{display:flex;width:fit-content}
.bigc-t{font-size:clamp(3.5rem,11vw,9rem)}
.bigc-t{line-height:1.4}
.bigc-p{margin-top:.6rem}

/* زر الوضع: شمس في النهاري، وتتحول لهلال في الليلي (الأشعة تلف وتختفي، والقرص يكبر وينقطع منه هلال) */
.theme-btn{display:inline-grid;place-items:center;padding:0}
.theme-btn:hover{transform:none}
.tg{width:20px;height:20px;overflow:visible}
.tg-core,.tg-cut,.tg-rays{transition:r .6s var(--ez),cx .6s var(--ez),cy .6s var(--ez),transform .6s var(--ez),opacity .4s}
.tg-rays{transform-origin:12px 12px}
.theme-btn:hover .tg-rays{transform:rotate(45deg)}
:root[data-theme="dark"] .tg-core{r:8}
:root[data-theme="dark"] .tg-cut{cx:17;cy:7;r:7}
:root[data-theme="dark"] .tg-rays{transform:rotate(-90deg) scale(.4);opacity:0}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tg-core{r:8}
  :root:not([data-theme="light"]) .tg-cut{cx:17;cy:7;r:7}
  :root:not([data-theme="light"]) .tg-rays{transform:rotate(-90deg) scale(.4);opacity:0}
}
/* الزر نفسه يبقى فوق التلاشي عشان تشوف الشمس وهي تتحول */
.theme-btn{view-transition-name:theme-btn}
::view-transition-group(theme-btn),::view-transition-old(theme-btn),::view-transition-new(theme-btn){animation:none}
::view-transition-old(theme-btn){display:none}
@media (prefers-reduced-motion:reduce){.tg-core,.tg-cut,.tg-rays{transition:none}}

/* ===== سلة الطلب ===== */
.add-btn.is-added{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.add-mini{background:none;border:1px solid var(--rule);color:var(--ink);font:inherit;font-size:.85rem;font-weight:600;padding:.2rem .6rem;cursor:pointer;white-space:nowrap}
.add-mini:hover{border-color:var(--ink)}
.add-mini.is-added{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cart-bar{position:fixed;z-index:40;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 1rem);transform:translateX(-50%);display:flex;align-items:center;gap:.8rem;padding:.75rem 1.1rem;background:var(--ink);color:var(--paper);border:0;font:inherit;cursor:pointer;white-space:nowrap;animation:cbIn .5s var(--ez)}
.cart-bar[hidden]{display:none}
@keyframes cbIn{from{transform:translate(-50%,120%)}}
.cb-n{display:inline-grid;place-items:center;min-width:1.6rem;height:1.6rem;background:var(--noor);color:#2A2E1C;font-weight:700;font-size:.9rem}
.cb-t{font-weight:700}
.cb-sum{opacity:.75;font-size:.92rem}
.cb-go{font-weight:600;border-inline-start:1px solid color-mix(in srgb,var(--paper) 30%,transparent);padding-inline-start:.8rem}
.cart{border:0;padding:0;margin:0 0 0 auto;width:min(460px,100vw);max-width:none;height:100dvh;max-height:none;background:var(--paper);color:var(--ink);border-inline-end:1px solid var(--rule)}
.cart[open]{animation:cartIn .45s var(--ez)}
@keyframes cartIn{from{transform:translateX(100%)}}
.cart::backdrop{background:rgba(20,22,14,.5)}
.cart-in{padding:1.4rem 1.4rem 2rem;display:flex;flex-direction:column;gap:1rem}
.cart-top{display:flex;justify-content:space-between;align-items:center}
.cart-top h2{margin:0;font-family:var(--display);font-size:1.8rem}
.cart-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.cart-list li{display:grid;grid-template-columns:1fr auto auto;gap:.8rem;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--rule)}
.cart-list li span{color:var(--ink-soft);font-size:.92rem;white-space:nowrap}
.cart-list li button{background:none;border:0;color:var(--ink-soft);font-size:1.3rem;cursor:pointer;padding:0 .3rem;line-height:1}
.cart-list li button:hover{color:var(--ink)}
.cart-list .cart-empty{display:block;color:var(--ink-soft)}
.cart-total{margin:0;font-size:1.05rem}
.cart-note,.cart-hint{margin:0;color:var(--ink-soft);font-size:.88rem}
.cart-f{display:flex;flex-direction:column;gap:.35rem;font-size:.92rem;font-weight:600}
.cart-f input,.cart-f textarea{font:inherit;font-weight:400;color:var(--ink);background:var(--card);border:1px solid var(--rule);padding:.6rem .75rem;border-radius:0;resize:vertical}
.cart-f input:focus,.cart-f textarea:focus{outline:2px solid var(--noor);outline-offset:0;border-color:transparent}
.cart-prev summary{cursor:pointer;color:var(--noor-text);font-weight:600;font-size:.92rem}
.cart-prev pre{white-space:pre-wrap;font-family:var(--body);font-size:.9rem;background:var(--card);padding:.8rem;margin:.6rem 0 0}
.cart-send-h{margin:.4rem 0 0;font-weight:700}
.cart-send{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.cart-send .btn{justify-content:center;padding:.8rem .5rem;border-radius:0}
.cart-clear{align-self:flex-start;background:none;border:0;color:var(--ink-soft);text-decoration:underline;font:inherit;font-size:.88rem;cursor:pointer;padding:0}
.toast{position:fixed;z-index:200;top:calc(env(safe-area-inset-top,0px) + 80px);left:50%;transform:translate(-50%,-20px);background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;font-weight:600;font-size:.95rem;opacity:0;pointer-events:none;transition:opacity .3s,transform .4s var(--ez);max-width:calc(100vw - 2rem)}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:560px){.cb-sum{display:none}.cart{width:100vw}}
@media (prefers-reduced-motion:reduce){.cart-bar,.cart[open]{animation:none}}

/* ===== بطاقات الأعمال: لقطة الصفحة كاملة تنزل لحالها (بالماوس، وعلى الجوال لما تكون قدامك) ===== */
.wk .sc{object-position:50% 0}
@media (prefers-reduced-motion:no-preference){
  .wk .wk-l.sc{transition:object-position var(--sd,1.2s) cubic-bezier(.4,0,.4,1),transform .8s var(--ez),scale 1.6s var(--ez);transition-delay:0s,0s,calc(var(--i,0)%2*.15s)}
  .wk .wk-p.sc{transition:object-position var(--sd,1.2s) cubic-bezier(.4,0,.4,1),transform .8s var(--ez),opacity .9s var(--ez),translate 1.2s var(--ez);transition-delay:0s,0s,calc(.45s + var(--i,0)%2*.15s),calc(.45s + var(--i,0)%2*.15s)}
  .wk:hover .sc,.wk:focus-visible .sc,.wk.play .sc{object-position:50% 100%;--sd:var(--dur,6s)}
}