/* ============================================================
   سدو — سابقة الأعمال
   نظام لوني وطباعي مستوحى من نسيج السدو: أرض صوف طبيعي،
   وأشرطة عنّابية وسوداء، ونقوش هندسية متناظرة.
   ============================================================ */

:root{
  /* اللون */
  --madder:    #932315;  /* أحمر اللوجو تماماً */
  --oxblood:   #6B1810;  /* أرض الشريط العميق */
  --oxblood-d: #4E100A;
  --ink:       #17110E;  /* أسود دافئ — خيوط السدى */
  --wool:      #D7CBB9;  /* صوف غير مصبوغ — الأرضية */
  --wool-lite: #E6DDCD;
  --bone:      #F3EDE2;  /* النقوش الفاتحة */
  --amber:     #BE7B26;  /* الخيط الثانوي — بالقطّارة */

  /* الطباعة */
  --display: "Reem Kufi", "Noto Kufi Arabic", system-ui, sans-serif;
  --body: "IBM Plex Sans Arabic", system-ui, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  /* المقاس */
  --wrap: 1180px;
  --gut: clamp(1.15rem, 4vw, 3rem);
  --band: clamp(76px, 8vw, 108px);  /* ارتفاع شريط السدو في الواجهة */
  --motif: 68px;                    /* مربّع النقش بجانب كل مشروع */
  --r: 3px;              /* النسيج لا ينحني كثيراً */
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:88px; }

body{
  margin:0;
  background:var(--wool);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  font-size:clamp(15.5px,.55vw + 14px,17px);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.15; margin:0; letter-spacing:0; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

.mono{ font-family:var(--mono); font-size:.86em; letter-spacing:.02em; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.skip{
  position:fixed; inset-block-start:-100px; inset-inline-start:1rem; z-index:100;
  background:var(--ink); color:var(--bone); padding:.7rem 1.1rem; border-radius:var(--r);
  text-decoration:none; font-size:.9rem;
}
.skip:focus{ inset-block-start:1rem; }

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
}

/* ── الأزرار ───────────────────────────────────────────── */
.btn{
  --btn-bg:transparent; --btn-fg:var(--ink); --btn-line:currentColor;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.82rem 1.6rem; border:1px solid var(--btn-line); background:var(--btn-bg);
  color:var(--btn-fg); border-radius:var(--r); font:inherit; font-weight:600;
  font-size:.94rem; text-decoration:none; cursor:pointer;
  transition:background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease), transform .18s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--solid{ --btn-bg:var(--madder); --btn-fg:var(--bone); --btn-line:var(--madder); }
.btn--solid:hover{ --btn-bg:var(--ink); --btn-line:var(--ink); }
.btn--line{ --btn-fg:var(--bone); --btn-line:rgba(243,237,226,.45); }
.btn--line:hover{ --btn-bg:var(--bone); --btn-fg:var(--oxblood); --btn-line:var(--bone); }
.btn--ghost{ --btn-line:rgba(23,17,14,.28); }
.btn--ghost:hover{ --btn-bg:var(--ink); --btn-fg:var(--bone); --btn-line:var(--ink); }
.btn--sm{ padding:.55rem 1.05rem; font-size:.86rem; }

/* ── العناوين المشتركة ────────────────────────────────── */
.eyebrow{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--madder); margin:0 0 .85rem;
  display:flex; align-items:center; gap:.6rem;
}
.eyebrow::before{
  content:""; inline-size:26px; block-size:7px; flex:none;
  background:
    linear-gradient(currentColor 0 0) 0 0/6px 100% no-repeat,
    linear-gradient(currentColor 0 0) 10px 0/6px 100% no-repeat,
    linear-gradient(currentColor 0 0) 20px 0/6px 100% no-repeat;
  opacity:.75;
}
.eyebrow--light{ color:var(--amber); }

.sec-title{
  font-size:clamp(2rem,4.4vw,3.15rem);
  letter-spacing:-.01em;
}

/* ══════════════════════════════════════════════════════
   الهيدر
   ══════════════════════════════════════════════════════ */
.masthead{
  position:sticky; inset-block-start:0; z-index:60;
  background:color-mix(in srgb, var(--wool) 88%, transparent);
  backdrop-filter:blur(12px) saturate(1.2);
  border-block-end:1px solid rgba(23,17,14,.12);
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
.masthead.is-stuck{ box-shadow:0 10px 34px -22px rgba(23,17,14,.8); }
.masthead__in{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding:.65rem var(--gut);
  display:flex; align-items:center; gap:1.5rem;
}
.brand{ flex:none; line-height:0; }
.brand img{ inline-size:auto; block-size:38px; }

.nav{ margin-inline-start:auto; display:flex; gap:1.85rem; }
.nav a{
  position:relative; text-decoration:none; font-size:.95rem; font-weight:500;
  padding-block:.35rem; color:var(--ink);
}
.nav a::after{
  content:""; position:absolute; inset-block-end:0; inset-inline:0;
  block-size:2px; background:var(--madder);
  transform:scaleX(0); transform-origin:inline-end;
  transition:transform .3s var(--ease);
}
.nav a:hover::after{ transform:scaleX(1); transform-origin:inline-start; }

.masthead__end{ display:flex; align-items:center; gap:.7rem; }

.burger{
  display:none; inline-size:42px; block-size:38px; padding:9px 8px;
  background:none; border:1px solid rgba(23,17,14,.25); border-radius:var(--r);
  cursor:pointer; flex-direction:column; justify-content:space-between;
}
.burger span{ display:block; block-size:2px; background:var(--ink); transition:transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ══════════════════════════════════════════════════════
   الواجهة
   ══════════════════════════════════════════════════════ */
.hero{
  position:relative;
  background:
    radial-gradient(120% 90% at 82% 0%, rgba(190,123,38,.16), transparent 58%),
    linear-gradient(180deg, var(--oxblood) 0%, var(--oxblood-d) 100%);
  color:var(--bone);
  padding-block:clamp(4.5rem,11vw,8.5rem) 0;
  overflow:hidden;
}
/* خيوط السدى خلف الواجهة */
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(90deg,
    rgba(243,237,226,.075) 0 1px, transparent 1px 9px);
  opacity:.9; pointer-events:none;
}
.hero__in{
  position:relative; z-index:1;
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--gut); padding-block-end:clamp(3.5rem,8vw,6rem);
  max-inline-size:min(100%, 46rem);
}
.hero__title{
  font-size:clamp(2.6rem,7.4vw,5.4rem);
  font-weight:700; letter-spacing:-.02em; margin-block-end:1.4rem;
}
.hero__title em{
  font-style:normal; color:var(--amber);
  position:relative; white-space:nowrap;
}
.hero__title em::after{
  content:""; position:absolute; inset-inline:0; inset-block-end:.08em;
  block-size:.09em; background:currentColor; opacity:.5;
}
.hero__lede{
  font-size:clamp(1rem,1.5vw,1.15rem); font-weight:300;
  color:rgba(243,237,226,.82); max-inline-size:38rem; margin-block-end:2.3rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* التوقيع: شريط السدو — نفس نقش الصورة، مرسوم SVG ويتكرر أفقياً */
.loom{
  position:relative; block-size:var(--band);
  background:var(--oxblood-d);
}
.loom__weft{
  position:absolute; inset:0;
  background-repeat:repeat-x; background-position:center;
  background-size:auto 100%;
  clip-path:inset(0 100% 0 0);
  animation:weft 1.9s var(--ease) .35s forwards;
}
@keyframes weft{ to{ clip-path:inset(0 0 0 0); } }

/* ══════════════════════════════════════════════════════
   الأعمال
   ══════════════════════════════════════════════════════ */
.work{ padding-block:clamp(4rem,9vw,7rem); }

.sec-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1.5rem; margin-block-end:2.2rem;
}
.sec-note{
  font-size:.92rem; color:rgba(23,17,14,.62); max-inline-size:22rem;
  padding-block-end:.4rem;
}

.filters{
  display:flex; flex-wrap:wrap; gap:.5rem;
  padding-block-end:1.6rem; margin-block-end:.5rem;
  border-block-end:1px solid rgba(23,17,14,.16);
}
.chip{
  font:inherit; font-size:.86rem; font-weight:500; cursor:pointer;
  padding:.42rem 1rem; border-radius:100px;
  border:1px solid rgba(23,17,14,.22); background:transparent; color:var(--ink);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.chip:hover{ border-color:var(--ink); }
.chip[aria-pressed="true"]{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.chip__n{ font-family:var(--mono); font-size:.76em; opacity:.55; margin-inline-start:.4rem; }

/* — الأشرطة — كل مشروع تمريرة مكوك على النول */
.bands{ border-block-start:1px solid rgba(23,17,14,.16); }

.band{
  border-block-end:1px solid rgba(23,17,14,.16);
  opacity:0; transform:translateX(24px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.band:nth-child(even){ transform:translateX(-24px); }
.band.is-in{ opacity:1; transform:none; }

.band__btn{
  display:grid; inline-size:100%; text-align:start;
  grid-template-columns:var(--motif) minmax(0,.9fr) minmax(0,1.1fr);
  align-items:center; gap:clamp(1rem,3vw,2.4rem);
  padding:1.5rem 0; background:none; border:0; font:inherit; color:inherit; cursor:pointer;
  transition:background .35s var(--ease), padding-inline .35s var(--ease);
}
.band__btn:hover{
  background:linear-gradient(90deg, rgba(147,35,21,.07), rgba(147,35,21,0) 70%);
  padding-inline:clamp(.5rem,1.6vw,1.1rem);
}

.band__motif{
  inline-size:var(--motif); block-size:var(--motif); border-radius:var(--r);
  overflow:hidden; flex:none; align-self:start;
  background-size:cover; background-position:center;
  box-shadow:0 0 0 1px rgba(23,17,14,.14);
  transition:transform .45s var(--ease);
}
.band__btn:hover .band__motif{ transform:scale(1.08); }

.band__shot{
  position:relative; aspect-ratio:16/10; border-radius:var(--r); overflow:hidden;
  background:var(--wool-lite); box-shadow:0 2px 0 rgba(23,17,14,.14);
}
.band__shot img{
  inline-size:100%; block-size:100%; object-fit:cover;
  transition:transform .6s var(--ease), filter .5s var(--ease);
  filter:saturate(.82);
}
.band__btn:hover .band__shot img{ transform:scale(1.05); filter:saturate(1); }

.band__ph{
  position:absolute; inset:0; display:grid; place-content:center; gap:.3rem;
  text-align:center; background-repeat:repeat; background-size:auto 46px;
}
.band__ph span{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  background:var(--wool-lite); color:rgba(23,17,14,.62);
  padding:.35rem .7rem; border-radius:100px;
}

.band__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.08em;
  color:rgba(23,17,14,.55); margin-block-end:.5rem;
}
.band__meta i{ font-style:normal; color:rgba(23,17,14,.3); }
.band__text{ display:block; }
.band__title{
  display:block; font-family:var(--display); font-weight:600; line-height:1.2;
  font-size:clamp(1.35rem,2.5vw,1.95rem); margin-block-end:.45rem;
}
.band__sum{ display:block; font-size:.96rem; color:rgba(23,17,14,.72); max-inline-size:34rem; }
.band__tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-block-start:.9rem; }
.tag{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.04em;
  padding:.22rem .6rem; border:1px solid rgba(23,17,14,.2); border-radius:100px;
  color:rgba(23,17,14,.65);
}
.band__go{
  display:inline-flex; align-items:center; gap:.45rem; margin-block-start:1rem;
  font-size:.86rem; font-weight:600; color:var(--madder);
}
.band__go svg{ transition:transform .3s var(--ease); }
.band__btn:hover .band__go svg{ transform:translateX(-5px); }

.bands__empty{
  padding-block:3rem; text-align:center; color:rgba(23,17,14,.55);
}

/* ══════════════════════════════════════════════════════
   الاقتباس
   ══════════════════════════════════════════════════════ */
.quote{
  background:var(--ink); color:var(--bone);
  padding-block:clamp(3.5rem,8vw,6rem);
  border-block:1px solid var(--ink);
}
.quote__in{ max-inline-size:52rem; text-align:center; }
.quote__text{
  font-family:var(--display); font-size:clamp(1.4rem,3.3vw,2.25rem);
  line-height:1.5; margin:0 0 1.5rem; color:var(--bone);
}
.quote__by{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.1em;
  color:rgba(243,237,226,.5);
}
.quote__by span{ color:var(--amber); }

/* ══════════════════════════════════════════════════════
   القدرات
   ══════════════════════════════════════════════════════ */
.craft{ padding-block:clamp(4rem,9vw,7rem); background:var(--wool-lite); }
.craft .sec-title{ margin-block-end:2.6rem; }

.craft__list{
  display:grid; gap:1px; background:rgba(23,17,14,.16);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  border:1px solid rgba(23,17,14,.16);
}
.craft__item{
  background:var(--wool-lite); padding:1.9rem 1.6rem;
  transition:background .3s var(--ease);
}
.craft__item:hover{ background:var(--bone); }
.craft__item h3{ font-size:1.18rem; margin-block-end:.6rem; }
.craft__item p{ font-size:.93rem; color:rgba(23,17,14,.7); }

/* ══════════════════════════════════════════════════════
   تواصل
   ══════════════════════════════════════════════════════ */
.contact{
  background:
    radial-gradient(90% 120% at 10% 100%, rgba(190,123,38,.14), transparent 60%),
    var(--oxblood);
  color:var(--bone);
  padding-block:clamp(4rem,9vw,7rem);
}
.contact__in{
  display:grid; gap:clamp(2.2rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:start;
}
.contact__title{ font-size:clamp(1.9rem,4vw,2.9rem); margin-block-end:1rem; }
.contact__lede{ color:rgba(243,237,226,.8); font-weight:300; max-inline-size:26rem; }

.contact__direct{ margin-block-start:2.2rem; display:grid; gap:.9rem; }
.contact__direct li{
  display:flex; align-items:baseline; gap:1rem;
  padding-block-end:.7rem; border-block-end:1px solid rgba(243,237,226,.18);
}
.contact__direct span{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--amber); inline-size:5rem; flex:none;
}
.contact__direct a{ text-decoration:none; font-size:1.02rem; border-block-end:1px solid transparent; }
.contact__direct a:hover{ border-block-end-color:currentColor; }

.form{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.1rem; }
.field{ display:grid; gap:.4rem; }
.field--full{ grid-column:1 / -1; }
.field label{
  font-family:var(--mono); font-size:.71rem; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(243,237,226,.62);
}
.field input,.field select,.field textarea{
  font:inherit; font-size:.97rem; color:var(--bone);
  background:rgba(243,237,226,.06); border:1px solid rgba(243,237,226,.24);
  border-radius:var(--r); padding:.75rem .9rem; inline-size:100%;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.field textarea{ resize:vertical; min-block-size:110px; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:rgba(243,237,226,.45); }
.field input:focus,.field select:focus,.field textarea:focus{
  background:rgba(243,237,226,.1); border-color:var(--amber);
}
.field select option{ background:var(--oxblood-d); color:var(--bone); }
.field.is-bad input,.field.is-bad textarea{ border-color:var(--amber); }

.form__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-block-start:.4rem; }
.form__note{ font-size:.82rem; color:rgba(243,237,226,.6); flex:1 1 14rem; }
.form__note.is-bad{ color:var(--amber); }

/* ══════════════════════════════════════════════════════
   الفوتر
   ══════════════════════════════════════════════════════ */
.foot{ background:var(--ink); color:rgba(243,237,226,.72); padding-block:2.4rem; }
.foot__in{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.4rem;
}
.foot__logo{
  inline-size:auto; block-size:34px;
  filter:brightness(0) invert(1); opacity:.85;
}
.foot__nav{ display:flex; gap:1.4rem; }
.foot__nav a{ text-decoration:none; font-size:.9rem; }
.foot__nav a:hover{ color:var(--amber); }
.foot__note{ font-size:.82rem; color:rgba(243,237,226,.45); }

/* ══════════════════════════════════════════════════════
   لوحة تفاصيل المشروع
   ══════════════════════════════════════════════════════ */
.sheet{
  border:0; padding:0; color:var(--ink); background:var(--wool-lite);
  inline-size:min(880px, 100%);
  max-inline-size:min(880px, calc(100vw - 2rem));
  max-block-size:min(88vh, 900px);
  border-radius:var(--r); overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(23,17,14,.85);
}
.sheet::backdrop{ background:rgba(23,17,14,.72); backdrop-filter:blur(3px); }
.sheet[open]{ animation:sheetIn .38s var(--ease); }
@keyframes sheetIn{ from{ opacity:0; transform:translateY(16px); } }

.sheet__x{
  position:absolute; inset-block-start:.85rem; inset-inline-end:.85rem; z-index:2;
  inline-size:38px; block-size:38px; border-radius:100px; cursor:pointer;
  border:1px solid rgba(243,237,226,.4); background:rgba(23,17,14,.45);
  color:var(--bone); font-size:1.5rem; line-height:1;
  transition:background .25s var(--ease);
}
.sheet__x:hover{ background:var(--ink); }

.sheet__body{ max-block-size:min(88vh,900px); overflow-y:auto; }
.sheet__hero{ aspect-ratio:16/8; background:var(--wool); position:relative; }
.sheet__hero img{ inline-size:100%; block-size:100%; object-fit:cover; }
.sheet__pad{ padding:clamp(1.4rem,4vw,2.6rem); }
.sheet__meta{
  display:flex; flex-wrap:wrap; gap:.55rem; font-family:var(--mono);
  font-size:.74rem; letter-spacing:.08em; color:rgba(23,17,14,.55); margin-block-end:.7rem;
}
.sheet__title{ font-size:clamp(1.6rem,3.5vw,2.3rem); margin-block-end:.9rem; }
.sheet__sum{ font-size:1.02rem; color:rgba(23,17,14,.78); max-inline-size:44rem; }

.sheet__facts{
  display:grid; gap:1px; background:rgba(23,17,14,.16);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border:1px solid rgba(23,17,14,.16); margin-block:1.8rem;
}
.sheet__fact{ background:var(--wool-lite); padding:1rem 1.1rem; }
.sheet__fact dt{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(23,17,14,.5); margin-block-end:.3rem;
}
.sheet__fact dd{ margin:0; font-weight:600; font-size:.98rem; }

.sheet__gal{ display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.sheet__gal img{ inline-size:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r); }

/* ══════════════════════════════════════════════════════
   الاستجابة
   ══════════════════════════════════════════════════════ */
@media (max-width:900px){
  .contact__in{ grid-template-columns:1fr; }
  .band__btn{ grid-template-columns:46px minmax(0,1fr); gap:1rem 1.2rem; }
  .band__motif{ inline-size:46px; block-size:46px; }
  .band__shot{ grid-column:1 / -1; grid-row:1; }
  .band__text{ grid-column:2; }
}

@media (max-width:720px){
  html{ scroll-padding-top:72px; }
  .burger{ display:flex; }
  .nav{
    position:absolute; inset-block-start:100%; inset-inline:0;
    flex-direction:column; gap:0; margin:0;
    background:var(--wool-lite); border-block-end:1px solid rgba(23,17,14,.16);
    padding:.4rem var(--gut) 1rem;
    display:none;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding-block:.8rem; border-block-end:1px solid rgba(23,17,14,.1); }
  .masthead__end .btn{ display:none; }
  .masthead__in{ position:relative; justify-content:space-between; }
  .form{ grid-template-columns:1fr; }
  .quote__in{ text-align:start; }
}

@media (max-width:560px){
  .band__btn{ grid-template-columns:1fr; gap:1.1rem; }
  .band__motif{ grid-row:2; }
  .band__shot{ grid-column:1; grid-row:1; }
  .band__text{ grid-column:1; }
  .band__btn:hover .band__motif{ transform:none; }
  .sec-note{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .band{ opacity:1; transform:none; }
  .loom__weft{ clip-path:none; }
}