/* ==========================================================================
   PrimeLogic — Design System
   Layer 1: Tokens      → كل قيمة بصرية هنا فقط
   Layer 2: Base        → reset + typography
   Layer 3: Primitives  → wrap / section / eyebrow / btn / pill / icon-btn
   Layer 4: Components  → header / hero / ledger / sheet / work / cta / footer
   Layer 5: Pages       → about / contact / project detail
   Layer 6: Responsive + motion

   القاعدة: مفيش لون أو مقاس أو ظل مكتوب جوه أي component.
   كله بياخد من Layer 1.
   الملف كله logical properties → نفس الـ CSS يشتغل RTL و LTR.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

/* Alternate palettes — swap only these four values (brand/deep/accent/paper/ink
   travel together) to re-skin the whole site from this block.
/* indigo + lilac   : brand #1D1B4B  deep #14123A  accent #A78BFA  paper #F7F6FC  ink #171533 */
/* cobalt + acid    : brand #2338F5  deep #101B7A  accent #E4FF4F  paper #EEF0FF  ink #0E1354 */
/* plum + apricot   : brand #35163C  deep #24102A  accent #FF9E7D  paper #FBF6F4  ink #23131F */

:root {
    /* --- Color: brand field (header / hero / CTA band) --- */
    --c-brand:        #1A4B3C;
    --c-brand-deep:   #123528;   /* footer, deepest band */
    --c-brand-tint:   #2F7A62;   /* hover states on the dark field */

    /* --- Color: accent — one only --- */
    --c-accent:       #f0d492;   /* buttons + fills on the dark field only */
    --c-accent-soft:  #f3d99e;   /* accent as TEXT on the dark field */
    --c-accent-hover: #EBBD51;   /* نفس درجة اللون بس أغمق — نفس hue/sat بتاع --c-accent */
    --c-accent-ink:   #123528;   /* text sitting on top of --c-accent */
    --c-accent-deep:  #86620C;   /* نفس عيلة --c-accent بس غامقة كفاية لنص/حدود فوق سطح فاتح — 5.2:1+ */

    /* --- Color: light surfaces --- */
    --c-paper:        #FAF7F2;   /* section background — warm, never grey */
    --c-card:         #FFFFFF;
    --c-line:         #EBE4DA;

    /* --- Color: text on light --- */
    --c-ink:          #12262B;
    --c-ink-soft:     #4A5C62;
    --c-ink-faint:    #7A8A8F;   /* placeholders only — 3.36:1 on paper */

    /* --- Color: text on the brand field --- */
    --c-on-brand:      #FFFFFF;
    --c-on-brand-soft: rgba(255, 255, 255, 0.72);
    --c-on-brand-line: rgba(255, 255, 255, 0.12);

    /* --- Color: message states --- */
    --c-success:      #1F6B4F;
    --c-error:        #A8321C;
    --c-warning:      #9A6B14;

    /* --- Typography --- */
    --font-ar:   'IBM Plex Sans Arabic', system-ui, sans-serif;
    --font-en:   'IBM Plex Sans', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    --fs-eyebrow: 0.75rem;
    --fs-xs:      0.8125rem;
    --fs-sm:      0.9375rem;
    --fs-base:    1.0625rem;
    --fs-lg:      1.25rem;
    --fs-h3:      1.5rem;
    --fs-h2:      clamp(1.75rem, 3.5vw, 2.5rem);
    --fs-h1:      clamp(2.25rem, 6vw, 4rem);
    --fs-stat:    clamp(2rem, 4vw, 2.75rem);
    --fs-icon-lg: 1.4rem;

    --size-icon-btn:  2.75rem;   /* 44px — minimum touch target */
    --size-logo-mark: 1.5rem;
    --size-thumb:     4.5rem;

    --lh-tight: 1.15;
    --lh-body:  1.85;             /* Arabic needs 1.85 minimum leading */

    /* --- Space --- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: .75rem;
    --sp-4: 1.5rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-7: 2rem;
    --sp-8: 2.5rem;

    /* --- Layout --- */
    --wrap:      1240px;
    --gutter:    clamp(1.25rem, 4vw, 3rem);
    --header-h:  72px;

    /* --- Shape / depth --- */
    --r-sm: 4px;
    --r-md: 8px;
    --r-pill: 999px;
    --hair: 1px;
    --shadow-card: 0 1px 2px rgba(14, 42, 34, 0.04),
                   0 12px 32px -18px rgba(14, 42, 34, 0.22);

    /* --- Motion --- */
    --t-fast: 140ms ease;
    --t-base: 260ms cubic-bezier(0.22, 0.61, 0.36, 1);

    /* --- Brand exception: official WhatsApp green, outside the palette on purpose --- */
    --c-whatsapp:       #17833F;
    --c-whatsapp-hover: #147237;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--c-paper);
    color: var(--c-ink);
    font-family: var(--font-en);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
}

/* IBM Plex covers both scripts from one family — swap by document language */
html[lang^="ar"] body { font-family: var(--font-ar); }
html[lang="en"]  body { font-family: var(--font-en); }

h1, h2, h3, h4 {
    line-height: var(--lh-tight);
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.01em;
}

p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

/* الفوكس افتراضيًا بلون البراند — الأخضر الغامق واضح على أي خلفية فاتحة (أغلب
   الموقع). النحاسي الفاتح بقى شاحب أوي عشان يبان كـ outline فوق ورق/كارت
   (~1.4:1) رغم إنه ممتاز كخلفية زرار. على الحقول الغامقة (هيدر/هيرو/فوتر/
   الـ CTA) بيرجع النحاسي لأنه هو اللي بيبان هناك. */
:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}
.site-header :focus-visible,
.hero :focus-visible,
.cta :focus-visible,
.site-footer :focus-visible,
.contact-aside :focus-visible {
    outline-color: var(--c-accent);
}

hr { display: none; }   /* الفواصل بقت هيكلية مش <hr> */

/* ==========================================================================
   3. PRIMITIVES
   ========================================================================== */
.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: var(--sp-7); }

/* eyebrow: label صغير mono — بيقول للقارئ هو فين. خط واحد على جهة البداية بس */
.eyebrow {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-accent-deep);
}
.eyebrow::before {
    content: "";
    inline-size: 2.5rem;
    block-size: 1px;
    background: currentColor;
    opacity: 0.55;
    flex: none;
}
/* على الحقل الغامق (الهيرو) لازم نسخة النص الفاتحة من النحاسي */
.hero .eyebrow { color: var(--c-accent-soft); }

.section-head { max-width: 62ch; margin-bottom: var(--sp-5); }
.section-head h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-2); }
.section-head p  { color: var(--c-ink-soft); }

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 0.85em 1.6em;
    border: var(--hair) solid transparent;
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast),
                border-color var(--t-fast), transform var(--t-fast);
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* accent fill — dark field only (hero / CTA band) */
.btn--primary {
    background: var(--c-accent);
    color: var(--c-accent-ink);
}
.btn--primary:hover { background: var(--c-accent-hover); }

.btn--ghost {
    background: transparent;
    color: var(--c-on-brand);
    border-color: var(--c-on-brand-line);
}
.btn--ghost:hover { border-color: var(--c-on-brand); }

/* brand fill — safe on light surfaces, unlike the accent */
.btn--solid {
    background: var(--c-brand);
    color: var(--c-on-brand);
}
.btn--solid:hover { background: var(--c-brand-tint); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* --- Pill: shared shape for filter chips + pagination links --- */
.pill {
    padding: var(--sp-1) var(--sp-3);
    border: var(--hair) solid var(--c-line);
    border-radius: var(--r-pill);
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

/* --- Icon button: shared geometry for nav-toggle + gallery arrows --- */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--size-icon-btn);
    block-size: var(--size-icon-btn);
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */

/* --- 4.1 Header --------------------------------------------------------
   الهيدر والهيرو والـ ledger حقل واحد متصل بلون --c-brand. الفاصل الوحيد
   بين الهيدر والهيرو خط 1px — مفيش ظل أو مسافة أو حاجة تانية. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--c-brand);
    color: var(--c-on-brand);
    border-block-end: var(--hair) solid var(--c-on-brand-line);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    min-height: var(--header-h);
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: 0.01em;
}
/* mark: شبكة ٢×٢ — نفس فكرة الخلايا اللي البراند مبني عليها */
.logo__mark {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    inline-size: var(--size-logo-mark);
    block-size: var(--size-logo-mark);
    flex: none;
}
.logo__mark i {
    background: var(--c-on-brand-soft);
    border-radius: 1px;
}
.logo__mark i:first-child { background: var(--c-accent); }

.nav { display: flex; align-items: center; gap: var(--sp-1); }
.nav a {
    position: relative;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--c-on-brand-soft);
    border-radius: var(--r-sm);
    transition: color var(--t-fast);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--c-on-brand); }
.nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    inset-inline: var(--sp-3);
    bottom: 2px;
    height: 2px;
    background: var(--c-accent);
}
.nav__lang {
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.1em;
    border: var(--hair) solid var(--c-on-brand-line);
}

.nav-toggle {
    display: none;
    background: none;
    border: var(--hair) solid var(--c-on-brand-line);
    color: var(--c-on-brand);
    font-size: var(--fs-lg);
}

/* --- 4.2 Hero ----------------------------------------------------------
   padding-block-end صفر بالتصميم — الـ ledger لازم يلاصق حافة السكشن.
   ده مش سهو، متلمسوش. */
.hero {
    position: relative;
    background: var(--c-brand);
    color: var(--c-on-brand);
    padding-block: var(--sp-8) 0;
    overflow: hidden;
}
/* شبكة خلايا خفيفة في الخلفية — مش زخرفة، ده عالَم المنتج نفسه */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, var(--c-on-brand-line) var(--hair), transparent var(--hair)),
        linear-gradient(to bottom, var(--c-on-brand-line) var(--hair), transparent var(--hair));
    background-size: 76px 76px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent 78%);
    pointer-events: none;
}
.hero__inner { position: relative; }
.hero__title {
    font-size: var(--fs-h1);
    font-weight: 700;
    max-width: 22ch;
    margin-bottom: var(--sp-4);
}
.hero__title em {
    font-style: normal;
    color: var(--c-accent-soft);   /* accent كنص فوق حقل غامق = النسخة الفاتحة */
}
.hero__lead {
    max-width: 54ch;
    color: var(--c-on-brand-soft);
    margin-bottom: var(--sp-5);
}

/* --- 4.3 Ledger strip — العنصر المميز -----------------------------------
   أربع خلايا: رقم كبير + وصف صغير. auto-fit بدل عدد ثابت عشان لو الخلية
   الرابعة لسه FILL_ME (مش بتتعرض) ميفضلش عمود فاضي في الشبكة. */
.ledger {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    margin-top: var(--sp-6);
}
.ledger__cell {
    padding: var(--sp-5) var(--sp-4);
    border-inline-start: var(--hair) solid var(--c-on-brand-line);
}
.ledger__cell:first-child { border-inline-start: 0; }
.ledger__num {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-stat);
    font-weight: 500;
    line-height: 1.1;
    color: var(--c-on-brand);
    margin-block-end: var(--sp-2);
}
.ledger__label {
    font-size: var(--fs-sm);
    color: var(--c-on-brand-soft);
    line-height: 1.6;
}

/* --- 4.4 Sheet grid (الخدمات) ---------------------------------------- */
.sheet {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--hair);
    background: var(--c-line);
    border: var(--hair) solid var(--c-line);
    border-radius: var(--r-md);
    overflow: hidden;
}
.sheet__cell {
    background: var(--c-card);
    padding: var(--sp-5) var(--sp-4);
    transition: background var(--t-base), color var(--t-base);
}
.sheet__cell:hover { background: var(--c-brand); color: var(--c-on-brand); }

.sheet__icon { margin-bottom: var(--sp-4); }
.sheet__icon svg {
    display: block;
    inline-size: calc(var(--fs-icon-lg) * 2);
    block-size: auto;
    color: var(--c-ink);
    transition: color var(--t-base);
}
.sheet__cell:hover .sheet__icon svg { color: var(--c-accent-soft); }

.sheet__cell h3 {
    font-size: var(--fs-h3);
    margin-bottom: var(--sp-2);
}
.sheet__cell p {
    font-size: var(--fs-sm);
    color: var(--c-ink-soft);
    line-height: 1.7;
    transition: color var(--t-base);
}
.sheet__cell:hover p { color: var(--c-on-brand-soft); }

/* --- 4.5 Work cards (أعمالنا) ---------------------------------------- */
.work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--sp-4);
}
.work {
    display: flex;
    flex-direction: column;
    background: var(--c-card);
    border: var(--hair) solid var(--c-line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color var(--t-base), box-shadow var(--t-base),
                transform var(--t-base);
}
.work:hover {
    border-color: var(--c-brand-tint);
    box-shadow: var(--shadow-card);
    transform: translateY(-3px);
}
.work__media {
    aspect-ratio: 16 / 10;
    background: var(--c-paper);
    border-block-end: var(--hair) solid var(--c-line);
    overflow: hidden;
}
.work__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-base);
}
.work:hover .work__media img { transform: scale(1.035); }

.work__body { padding: var(--sp-4); }
.work__tag {
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.12em;
    color: var(--c-accent-deep);
    display: block;
    margin-bottom: var(--sp-2);
}
.work__body h3 {
    font-size: var(--fs-h3);
    margin-bottom: var(--sp-2);
}
.work__body p {
    font-size: var(--fs-sm);
    color: var(--c-ink-soft);
    line-height: 1.75;
}

/* --- 4.6 CTA band ----------------------------------------------------- */
.cta {
    background: var(--c-brand-deep);
    color: var(--c-on-brand);
}
.cta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    padding-block: var(--sp-6);
}
.cta h2 {
    font-size: var(--fs-h2);
    max-width: 26ch;
    margin-bottom: var(--sp-2);
}
.cta p { color: var(--c-on-brand-soft); }

/* --- 4.7 Footer ------------------------------------------------------- */
.site-footer {
    background: var(--c-brand-deep);
    color: var(--c-on-brand-soft);
    border-block-start: var(--hair) solid var(--c-on-brand-line);
    font-size: var(--fs-sm);
}
.site-footer__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-5);
    padding-block: var(--sp-6) var(--sp-4);
}
.site-footer h4 {
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-accent-soft);
    font-weight: 500;
    margin-bottom: var(--sp-3);
}
.site-footer li + li { margin-top: var(--sp-2); }
.site-footer a:hover { color: var(--c-on-brand); }
.site-footer__tagline {
    margin-top: var(--sp-3);
    max-width: 32ch;
}

.footer-note {
    border-block-start: var(--hair) solid var(--c-on-brand-line);
    padding-block: var(--sp-3);
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.06em;
}

/* واتساب: أخضر البراند الرسمي بتاعه، مقصود إنه برّا نظام الألوان */
.whatsapp-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    padding: 0.7em 1.2em;
    background: var(--c-whatsapp);
    color: var(--c-on-brand);
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: var(--fs-sm);
    transition: background var(--t-fast);
}
.whatsapp-btn:hover { background: var(--c-whatsapp-hover); color: var(--c-on-brand); }

/* --- 4.8 Section footer (e.g. "all projects" button) ------------------ */
.section-foot {
    display: flex;
    justify-content: center;
    margin-top: var(--sp-6);
}

/* --- 4.9 Filter bar (صفحة الأعمال) ------------------------------------ */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
}
.filter-bar__item {
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.06em;
    color: var(--c-ink-soft);
    padding: var(--sp-1) var(--sp-3);
}
.filter-bar__item:hover { border-color: var(--c-brand-tint); color: var(--c-ink); }
.filter-bar__item--active {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: var(--c-on-brand);
}

/* --- 4.10 Pagination ---------------------------------------------------- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    margin-top: var(--sp-6);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
}
.pagination__link:hover { border-color: var(--c-brand-tint); color: var(--c-brand-tint); }
.pagination__status { color: var(--c-ink-soft); }

/* --- 4.11 Empty state ---------------------------------------------------- */
.empty-state {
    display: grid;
    justify-items: center;
    gap: var(--sp-2);
    padding: var(--sp-7) var(--sp-4);
    text-align: center;
    background: var(--c-card);
    border: var(--hair) dashed var(--c-line);
    border-radius: var(--r-md);
}
.empty-state__title { font-size: var(--fs-h3); font-weight: 600; }
.empty-state__body { color: var(--c-ink-soft); margin-bottom: var(--sp-2); }

/* --- 4.12 Flash messages -------------------------------------------------- */
.messages { margin-block: var(--sp-4) 0; padding-block-start: var(--sp-4); }
.messages__item {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-sm);
    background: var(--c-brand);
    color: var(--c-on-brand);
    font-size: var(--fs-sm);
}
.messages__item + .messages__item { margin-top: var(--sp-2); }
.messages__item--success { background: var(--c-success); color: var(--c-on-brand); }
.messages__item--error   { background: var(--c-error);   color: var(--c-on-brand); }
.messages__item--warning { background: var(--c-warning); color: var(--c-on-brand); }

/* --- 4.13 Back link ------------------------------------------------------- */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--c-ink-soft);
    margin-bottom: var(--sp-5);
    transition: color var(--t-fast);
}
.back-link:hover { color: var(--c-brand); }

/* ==========================================================================
   5. PAGES
   ========================================================================== */

/* --- 5.1 About -------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose p { margin-bottom: var(--sp-4); color: var(--c-ink-soft); }

.capability-heading {
    font-size: var(--fs-h3);
    margin-top: var(--sp-6);
    margin-bottom: var(--sp-2);
}

.capability {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sp-4);
    margin-top: var(--sp-5);
}
.capability__item {
    background: var(--c-card);
    border: var(--hair) solid var(--c-line);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    border-inline-start: 3px solid var(--c-brand);
}
.capability__item h3 {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-h3);
    margin-bottom: var(--sp-2);
}
.capability__item h3 i { color: var(--c-brand-tint); font-size: var(--fs-lg); }
.capability__item p { font-size: var(--fs-sm); color: var(--c-ink-soft); }

/* --- 5.2 Contact ------------------------------------------------------ */
.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
}
.contact-form {
    display: grid;
    gap: var(--sp-3);
    background: var(--c-card);
    border: var(--hair) solid var(--c-line);
    border-radius: var(--r-md);
    padding: var(--sp-5);
}
.field { display: grid; gap: var(--sp-1); }
.field label {
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-ink-soft);
}
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.85em 1em;
    background: var(--c-paper);
    border: var(--hair) solid var(--c-line);
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: var(--fs-sm);
    color: var(--c-ink);
    transition: border-color var(--t-fast), background var(--t-fast);
}
.contact-form textarea { min-height: 170px; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    background: var(--c-card);
    border-color: var(--c-brand-tint);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--c-ink-faint); }

.contact-aside {
    background: var(--c-brand);
    color: var(--c-on-brand);
    border-radius: var(--r-md);
    padding: var(--sp-5);
}
.contact-aside h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-3); }
.contact-aside li {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding-block: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--c-on-brand-soft);
    border-block-end: var(--hair) solid var(--c-on-brand-line);
}
.contact-aside li:last-of-type { border-block-end: 0; }
.contact-aside li i { color: var(--c-accent-soft); inline-size: var(--fs-lg); }
.contact-aside a:hover { color: var(--c-on-brand); }

.field__error {
    font-size: var(--fs-eyebrow);
    color: var(--c-error);
}

/* --- 5.3 Project detail ------------------------------------------------- */
.project-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
}
.project-detail__viewer {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--c-paper);
    border: var(--hair) solid var(--c-line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.project-detail__viewer img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: opacity var(--t-fast);
}
.project-detail__viewer img.is-switching { opacity: 0; }

/* أسهم التنقل: geometry من .icon-btn، اللون/الموضع هنا بس */
.project-detail__nav {
    position: absolute;
    inset-block-start: 50%;
    transform: translateY(-50%);
    background: var(--c-card);
    color: var(--c-ink);
    border: var(--hair) solid var(--c-line);
    box-shadow: var(--shadow-card);
}
.project-detail__nav:hover {
    background: var(--c-brand);
    color: var(--c-on-brand);
    transform: translateY(-50%) scale(1.06);
}
.project-detail__nav--prev { inset-inline-start: var(--sp-3); }
.project-detail__nav--next { inset-inline-end: var(--sp-3); }

.project-detail__counter {
    position: absolute;
    inset-block-end: var(--sp-2);
    inset-inline-end: var(--sp-2);
    padding: 0.3em 0.7em;
    background: var(--c-brand-deep);
    color: var(--c-on-brand);
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.06em;
}

/* شريط الصور المصغّرة: صف واحد قابل للتمرير، الغلاف أول عنصر */
.project-detail__thumbs {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-block-end: var(--sp-1);
}
.project-detail__thumb {
    flex: 0 0 var(--size-thumb);
    aspect-ratio: 1 / 1;
    padding: 0;
    background: var(--c-paper);
    border: var(--hair) solid var(--c-line);
    border-radius: var(--r-sm);
    overflow: hidden;
    cursor: pointer;
    scroll-snap-align: start;
    transition: border-color var(--t-fast), transform var(--t-fast);
}
.project-detail__thumb:hover { border-color: var(--c-brand-tint); transform: translateY(-1px); }
.project-detail__thumb--active { border-color: var(--c-accent-deep); border-width: 2px; }
.project-detail__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.project-detail__body h1 {
    font-size: var(--fs-h2);
    margin-block: var(--sp-2) var(--sp-4);
}
.project-detail__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-5);
    margin: 0 0 var(--sp-5);
    padding-block: var(--sp-3);
    border-block: var(--hair) solid var(--c-line);
}
.project-detail__meta dt {
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-ink-soft);
    margin-bottom: var(--sp-1);
}
.project-detail__meta dd { margin: 0; font-weight: 600; }
.project-detail__body .prose { margin-bottom: var(--sp-5); }

/* ==========================================================================
   6. RESPONSIVE + MOTION
   ========================================================================== */
@media (max-width: 900px) {
    .contact-layout { grid-template-columns: 1fr; }
    .project-detail { grid-template-columns: 1fr; }
    .hero { padding-block-start: var(--sp-7); }
}

@media (max-width: 780px) {
    .nav-toggle { display: inline-flex; }

    .nav {
        position: fixed;
        inset-block-start: var(--header-h);
        inset-inline: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--c-brand-deep);
        border-block-end: var(--hair) solid var(--c-on-brand-line);
        padding: var(--sp-2);
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
    }
    .nav[data-open="true"] {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    .nav a { padding: var(--sp-3); font-size: var(--fs-base); }
    .nav a[aria-current="page"]::after { inset-inline: auto; }
    .nav__lang { align-self: flex-start; margin-top: var(--sp-2); }

    .section { padding-block: var(--sp-6); }
    .cta__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 720px) {
    .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .btn:hover, .work:hover { transform: none; }
}

/* دخول الهيرو: تتابع واحد منظم، مش حركات متفرقة */
@keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero .eyebrow,
.hero__title,
.hero__lead,
.hero .btn-row,
.ledger {
    animation: rise 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.hero__title  { animation-delay: 70ms; }
.hero__lead   { animation-delay: 140ms; }
.hero .btn-row{ animation-delay: 210ms; }
.ledger       { animation-delay: 280ms; }

/* ==========================================================================
   7. UTILITIES
   ========================================================================== */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.skip-link {
    position: absolute;
    inset-block-start: -60px;
    inset-inline-start: var(--sp-3);
    z-index: 200;
    background: var(--c-accent);
    color: var(--c-accent-ink);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    transition: inset-block-start var(--t-fast);
}
.skip-link:focus { inset-block-start: var(--sp-2); }