/* ============================================================
   Flint Production — Compact Editorial
   Light, modern sans, TIGHT spacing, minimal scrolling.
   Bilingual (Arabic-first RTL + English LTR).
   ============================================================ */

:root{
  --paper:#ffffff;              /* paper white */
  --paper-2:#f2f1ee;            /* faint grey alt */
  --ink:#191817;
  --ink-soft:#6a675f;
  --line:rgba(20,19,17,.15);
  --line-soft:rgba(20,19,17,.08);
  --accent:#863E00;
  --dark:#141210;               /* dark sections (constant) */
  --dark-soft:#a49a89;
  --on-dark:#f5f4f1;            /* light text on dark (constant) */
  --card:#ffffff;
  --nav-bg:rgba(255,255,255,.9);
  --maxw:1360px;
  --nav-h:64px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --f-ar:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-en:"IBM Plex Sans",system-ui,sans-serif;
  --font:var(--f-ar);
}
html[lang="en"]{--font:var(--f-en);}

/* Auto dark mode — follows the device's light/dark setting */
@media (prefers-color-scheme: dark){
  :root{
    --paper:#141210;
    --paper-2:#1c1915;
    --ink:#f2efe8;
    --ink-soft:#a7a094;
    --line:rgba(255,255,255,.15);
    --line-soft:rgba(255,255,255,.07);
    --dark:#0f0d0b;
    --card:#1c1915;
    --nav-bg:rgba(20,18,15,.9);
    --accent:#cf8338;
  }
  .brand__word{filter:invert(1) brightness(1.7);}   /* dark wordmark → light */
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  font-size:15.5px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(18px,4vw,54px)}
.brand__word,.footer__word{direction:ltr;unicode-bidi:isolate}

/* Headings: modern sans, bold, tight */
.hero__title,.section__title,.detail-hero__title{
  font-weight:700;line-height:1.06;letter-spacing:-.02em;
}
html[lang="ar"] .hero__title,
html[lang="ar"] .section__title,
html[lang="ar"] .detail-hero__title{font-weight:700;letter-spacing:0;line-height:1.2}

/* small labels: EN tracked, AR plain */
.kicker,.marquee__track,.work-item__cat,.lang-toggle,.stat__label,.footer__copy{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-family:var(--f-en);
}
html[lang="ar"] .kicker,
html[lang="ar"] .work-item__cat,
html[lang="ar"] .stat__label{font-family:var(--f-ar);letter-spacing:0;text-transform:none;font-weight:700;font-size:.82rem}
/* Arabic must never get letter-spacing (breaks joining) nor a Latin-only font */
html[lang="ar"] .marquee__track,
html[lang="ar"] .footer__copy{font-family:var(--f-ar);letter-spacing:0;text-transform:none}

/* ===== Navbar ===== */
.nav{position:fixed;inset-block-start:0;inset-inline:0;z-index:60;
  transition:background .35s var(--ease),border-color .35s;border-block-end:1px solid transparent}
.nav.scrolled{background:var(--nav-bg);backdrop-filter:blur(12px);border-block-end-color:var(--line-soft)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--nav-h)}
.brand__word{height:17px;width:auto}
.nav__links{display:flex;gap:26px;font-size:.85rem}
.nav__links a{color:var(--ink-soft);transition:color .25s}
.nav__links a:hover{color:var(--ink)}
.nav__actions{display:flex;align-items:center;gap:14px}
.btn-profile{font-size:.75rem;color:var(--ink);border:1px solid var(--line);padding:8px 16px;white-space:nowrap;transition:background .3s,color .3s}
html[lang="ar"] .btn-profile{font-weight:700}
.btn-profile:hover{background:var(--ink);color:var(--paper)}
.lang-toggle{background:transparent;border:0;color:var(--ink);cursor:pointer;padding:6px;font-weight:600;font-size:.7rem;letter-spacing:0;font-family:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,sans-serif}
.lang-toggle:hover{color:var(--accent)}
html[lang="ar"] .lang-toggle [data-lang-label="ar"]{display:none}
html[lang="en"] .lang-toggle [data-lang-label="en"]{display:none}
@media(max-width:860px){.nav__links,.btn-profile{display:none}}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-size:.86rem;font-weight:600;transition:background .3s,color .3s,border-color .3s}
html[lang="ar"] .btn{font-weight:700}
.btn--primary{background:var(--ink);color:var(--paper);padding:12px 26px;border:1px solid var(--ink)}
.btn--primary:hover{background:transparent;color:var(--ink)}
.btn--ghost{color:var(--ink);padding:12px 4px;border-block-end:1px solid var(--ink)}
.btn--ghost:hover{color:var(--accent);border-block-end-color:var(--accent)}
.ig{width:16px;height:16px;fill:currentColor;flex:0 0 auto}

/* ===== Hero (two-column, ~one screen) ===== */
.hero{min-height:calc(82vh - var(--nav-h));display:flex;align-items:center;padding-block:calc(var(--nav-h) + 10px) 18px}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center;width:100%}
.hero__eyebrow{color:var(--accent);font-size:.82rem;margin-block-end:18px;display:flex;align-items:center;gap:12px;font-weight:600}
html[lang="ar"] .hero__eyebrow{font-weight:700}
.hero__eyebrow::before{content:"";width:34px;height:1px;background:var(--accent)}
.hero__title{font-size:clamp(2.1rem,4.6vw,4.1rem)}
.hero__title span{display:block}
.hero__title .accent{color:var(--accent)}
.hero__sub{font-size:clamp(.98rem,1.2vw,1.1rem);color:var(--ink-soft);max-width:520px;margin-block:20px 26px;line-height:1.65}
.hero__sub strong{color:var(--ink);font-family:var(--f-en);font-weight:600}
.hero__cta{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.hero__media{height:clamp(300px,54vh,470px);overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover}
@media(max-width:820px){
  .hero{min-height:0;padding-block:calc(var(--nav-h) + 26px) 26px}
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__media{height:clamp(240px,42vh,340px)}
}

/* ===== Marquee ===== */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:14px;background:var(--paper)}
.marquee__track{display:flex;gap:26px;white-space:nowrap;width:max-content;animation:scroll 40s linear infinite;color:var(--ink-soft)}
html[dir="rtl"] .marquee__track{animation-direction:reverse}
.marquee__track span:nth-child(even){color:var(--accent)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ===== Section scaffold (tight) ===== */
.section{padding-block:clamp(34px,4vw,56px)}
.section--alt{background:var(--paper-2)}
.section__head{margin-block-end:clamp(24px,3vw,40px);display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.kicker{display:inline-flex;align-items:center;gap:10px;color:var(--accent)}
.kicker::before{content:"";width:22px;height:1px;background:var(--accent)}
.section__title{font-size:clamp(1.5rem,3vw,2.5rem)}
.lead{font-size:clamp(1rem,1.4vw,1.18rem);color:var(--ink-soft);line-height:1.6;max-width:720px}
.lead strong{color:var(--ink);font-family:var(--f-en);font-weight:600}

/* ===== About (compact) ===== */
.about__intro{margin-block-end:34px;max-width:820px}
.about__intro .section__title{margin-block:12px 16px}
.about__intro .section__head{display:block}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-block-start:1px solid var(--line)}
.pillar{padding:24px 0;border-block-end:1px solid var(--line-soft)}
.pillar:not(:last-child){border-inline-end:1px solid var(--line-soft);padding-inline-end:28px}
.pillar:not(:first-child){padding-inline-start:28px}
.pillar h3{font-weight:700;font-size:1.15rem;margin-block-end:8px}
.pillar p{color:var(--ink-soft);font-size:.92rem}
.values{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px}
.values li{color:var(--ink);font-size:.95rem}
.values li:not(:last-child)::after{content:"·";margin-inline-start:18px;color:var(--accent)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-block-start:34px;padding-block-start:28px;border-block-start:1px solid var(--line)}
.stat{text-align:start}
.stat__num{display:block;font-weight:700;font-size:clamp(1.9rem,3.4vw,2.9rem);color:var(--ink);line-height:1;letter-spacing:-.02em;direction:ltr;unicode-bidi:isolate}
.stat__label{display:block;margin-block-start:8px;color:var(--ink-soft)}

/* ===== Services (compact rows) ===== */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-block-start:1px solid var(--line)}
.service{padding:26px 0;border-block-end:1px solid var(--line-soft)}
.service:not(:last-child){border-inline-end:1px solid var(--line-soft);padding-inline-end:26px}
.service:not(:first-child){padding-inline-start:26px}
.service__num{font-size:.78rem;color:var(--accent);font-weight:600;letter-spacing:.1em}
.service h3{font-weight:700;font-size:1.3rem;margin-block:6px 10px}
.service p{color:var(--ink-soft);margin-block-end:14px;font-size:.95rem}
.service ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.service li{color:var(--ink);font-size:.9rem;padding-inline-start:16px;position:relative}
.service li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.62em;width:6px;height:1px;background:var(--accent)}
@media(max-width:720px){.services{grid-template-columns:1fr}.service{border-inline-end:0 !important;padding-inline:0 !important}}

/* ===== Work (dense 4-up) ===== */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 16px}
.work-item{display:block}
.work-item__frame{display:block;overflow:hidden;aspect-ratio:4/5;background:var(--paper-2)}
.work-item__img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.work-item:hover .work-item__img{transform:scale(1.05)}
.work-item__meta{display:flex;flex-direction:column;gap:3px;padding-block-start:11px}
.work-item__cat{color:var(--accent);display:flex;align-items:center;gap:8px}
.work-item__num{color:var(--ink-soft);opacity:.6}
.work-item__t{font-weight:700;font-size:1rem;color:var(--ink);line-height:1.25}
.work-item:hover .work-item__t{color:var(--accent)}
.card--filtered{display:none !important}
@media(max-width:900px){.gallery{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.gallery{grid-template-columns:repeat(2,1fr);gap:16px 12px}}

/* ===== Why (compact grid) ===== */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-block-start:1px solid var(--line)}
.why__item{padding:22px 0;border-block-end:1px solid var(--line-soft)}
.why__item:not(:nth-child(3n)){border-inline-end:1px solid var(--line-soft);padding-inline-end:28px}
.why__item:not(:nth-child(3n+1)){padding-inline-start:28px}
.why__item h3{font-weight:700;font-size:1.05rem;margin-block-end:7px}
.why__item p{color:var(--ink-soft);font-size:.9rem}
@media(max-width:760px){.why{grid-template-columns:1fr 1fr}.why__item{border-inline-end:0 !important;padding-inline:0 !important}}
@media(max-width:480px){.why{grid-template-columns:1fr}}

/* ===== Contact (dark, compact) ===== */
.contact{background:var(--dark);color:var(--on-dark);text-align:center}
.contact .section__head{display:block}
.contact .kicker{color:var(--accent);justify-content:center}
.contact .section__title{color:var(--on-dark);margin-block:12px 14px;font-size:clamp(1.7rem,4vw,3rem)}
.contact .lead{color:var(--dark-soft);margin-inline:auto}
.contact__inner{max-width:760px;margin-inline:auto}
.contact__actions{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-block-start:26px}
.contact .btn--primary{background:var(--on-dark);color:var(--dark);border-color:var(--on-dark)}
.contact .btn--primary:hover{background:transparent;color:var(--on-dark)}
.contact .btn--ghost{color:var(--on-dark);border-block-end-color:var(--on-dark)}
.contact .btn--ghost:hover{color:var(--accent);border-block-end-color:var(--accent)}

/* ===== Footer ===== */
.footer{background:var(--dark);color:var(--dark-soft);padding-block:40px 28px;border-block-start:1px solid rgba(255,255,255,.08)}
.footer__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px}
.footer__word{height:30px;width:auto;opacity:.95}
.footer__contact{display:flex;gap:24px;flex-wrap:wrap;font-family:var(--f-en);font-size:.86rem}
.footer__contact a{color:var(--dark-soft);display:inline-flex;align-items:center;gap:7px;transition:color .25s}
.footer__contact a:hover{color:var(--paper)}
.footer__copy{color:var(--dark-soft);width:100%;border-block-start:1px solid rgba(255,255,255,.08);padding-block-start:18px;margin-block-start:6px;letter-spacing:.08em}
html[lang="ar"] .footer__copy{letter-spacing:0;font-family:var(--f-ar)}

/* ===== Reveal (subtle) ===== */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ===== Project detail ===== */
.detail-hero{padding-block:calc(var(--nav-h) + 34px) 0}
.detail-back{display:inline-block;color:var(--ink-soft);margin-block-end:20px;font-size:.9rem;transition:color .25s}
.detail-back:hover{color:var(--accent)}
.detail-hero__title{font-size:clamp(1.9rem,4.4vw,3.4rem);margin-block:8px 0}
.detail-meta{list-style:none;display:flex;flex-wrap:wrap;gap:12px 44px;margin-block-start:24px;padding-block-start:20px;border-block-start:1px solid var(--line)}
.detail-meta li{display:flex;flex-direction:column;gap:3px}
.detail-meta__k{color:var(--accent);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--f-en)}
html[lang="ar"] .detail-meta__k{font-family:var(--f-ar);letter-spacing:0;text-transform:none;font-weight:700}
.detail-meta__v{font-size:1.02rem}
.detail-body{padding-block:clamp(36px,5vw,64px)}
.detail-body .lead{margin-block-end:18px;color:var(--ink)}
.detail-text{max-width:700px;color:var(--ink-soft);font-size:1rem}
.detail-text p{margin-block-end:12px}
.detail-block{margin-block-start:clamp(32px,4vw,54px)}
.detail-h2{font-weight:700;font-size:clamp(1.3rem,2.4vw,1.9rem);margin-block-end:20px}
.detail-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.detail-gallery__item{overflow:hidden;background:var(--paper-2);aspect-ratio:3/2}
.detail-gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.detail-gallery__item:hover img{transform:scale(1.05)}
.detail-videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:18px}
.detail-video{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.detail-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:560px){.detail-gallery{grid-template-columns:1fr 1fr}.detail-videos{grid-template-columns:1fr}}

/* ===== Admin (light skin, unchanged logic) ===== */
.admin-body{background:var(--paper);min-height:100vh;font-family:var(--f-en)}
.admin-top{display:flex;align-items:center;gap:14px;padding:16px clamp(18px,4vw,40px);border-block-end:1px solid var(--line)}
.admin-top .brand__word{height:16px}
.admin-tag{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);padding:3px 9px}
.admin-top__right{margin-inline-start:auto;display:flex;align-items:center;gap:12px}
.admin-who{color:var(--ink-soft);font-size:.86rem}
.admin-main{padding-block:34px;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(18px,4vw,40px)}
.admin-card{max-width:500px;margin:34px auto;background:var(--card);border:1px solid var(--line);padding:32px}
.admin-card h1{font-size:1.4rem;font-weight:700;margin-block-end:12px}
.muted{color:var(--ink-soft)}
.admin-card code{background:var(--paper-2);padding:2px 6px;color:var(--accent);font-size:.88em}
.admin-login form{display:flex;flex-direction:column;gap:14px;margin-block-start:8px}
label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;color:var(--ink-soft)}
input,select,textarea{font-family:inherit;font-size:.92rem;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:0;padding:10px 12px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
textarea{resize:vertical;line-height:1.5}
.admin-error{color:#b23b2e;font-size:.88rem}
.admin-head{display:flex;align-items:center;justify-content:space-between;margin-block-end:22px;gap:16px}
.admin-head h1{font-size:1.6rem;font-weight:700}
.admin-list{display:flex;flex-direction:column;gap:9px}
.al-row{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);padding:11px 13px}
.al-thumb{width:60px;height:44px;background:var(--paper-2) center/cover no-repeat;flex:0 0 auto}
.al-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.al-meta strong{font-size:.98rem;font-weight:600}
.al-meta .muted{font-size:.8rem}
.al-actions{margin-inline-start:auto;display:flex;gap:8px}
.al-actions button{background:var(--paper);border:1px solid var(--line);color:var(--ink);padding:7px 14px;cursor:pointer;font-size:.83rem;transition:border-color .2s,color .2s}
.al-edit:hover{border-color:var(--accent);color:var(--accent)}
.al-del:hover{border-color:#b23b2e;color:#b23b2e}
.admin-editor{position:fixed;inset:0;z-index:100;background:rgba(22,19,15,.55);display:flex;justify-content:center;align-items:flex-start;overflow:auto;padding:28px 16px}
.admin-editor__panel{background:var(--paper);border:1px solid var(--line);width:100%;max-width:740px;padding:28px}
.admin-editor__head{display:flex;align-items:center;justify-content:space-between;margin-block-end:18px}
.admin-editor__head h2{font-size:1.3rem;font-weight:700}
.admin-form{display:flex;flex-direction:column;gap:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}
.upl{display:flex;gap:10px;align-items:center}
.upl input[type=file]{padding:6px;font-size:.8rem}
.cover-prev img{max-height:110px;border:1px solid var(--line)}
.check{flex-direction:row;align-items:center;gap:10px}
.check input{width:auto}
.admin-form__actions{display:flex;align-items:center;gap:16px;margin-block-start:6px}
.admin-body .btn--primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ===== Responsive ===== */
@media(max-width:620px){
  .pillars{grid-template-columns:1fr}
  .pillar{border-inline-end:0 !important;padding-inline:0 !important}
  .stats{grid-template-columns:1fr 1fr;gap:22px}
  .footer__inner{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .reveal{opacity:1;transform:none}
}