/* ============================================================
   10 عشرة — shared design system  (Level 3 redesign, 2026-06-10)
   Kernel: 1 = solid mass · 0 = carved void
   Editorial restraint · one accent · deep whitespace · bilingual
   ============================================================ */

/* ---- Dubai font (self-hosted, free license — Dubai Government) ---- */
@font-face { font-family: 'Dubai'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Dubai-Light.woff') format('woff'); }
@font-face { font-family: 'Dubai'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Dubai-Regular.woff') format('woff'); }
@font-face { font-family: 'Dubai'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Dubai-Medium.woff') format('woff'); }
@font-face { font-family: 'Dubai'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Dubai-Bold.woff') format('woff'); }

:root {
  /* Locked palette (color_system.md v1.3) */
  --lime:   #EDE3D2;   /* off-white render */
  --coral:  #C9B89A;   /* Mangabi pale */
  --verd:   #7A9B8E;   /* Faded Verdigris — signature accent */
  --bronze: #7A5C3F;
  --walnut: #4A3220;
  --ink:    #2A1C10;

  --paper:  #F2EBDD;   /* a touch lighter than lime for big fields */

  /* Type (type_system.md) */
  --serif:  'PP Editorial New', 'EB Garamond', Georgia, serif;
  --arabic: 'Dubai', 'Noto Naskh Arabic', 'Traditional Arabic', 'Tahoma', sans-serif;
  --mono:   'JetBrains Mono', 'SF Mono', 'Courier New', monospace;

  --gut: clamp(1.25rem, 4vw, 5rem);
  --maxw: 1240px;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--serif);
  background: var(--lime);
  color: var(--walnut);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'kern' 1, 'liga' 1, 'onum' 1;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--verd); color: var(--lime); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }

/* ---- Bilingual (EN default in DOM; JS swaps to AR) ---------- */
[dir="rtl"] body, body[data-lang="ar"] { font-family: var(--arabic); }
body[data-lang="ar"] .mono-keep { font-family: var(--mono); }   /* keep mono labels LTR-ish */
/* the numeric "10" mark always keeps the editorial serif, even in AR */
.hero-mark, .nav-brand, .foot-mark { font-family: var(--serif); }
.ar-only { display: none; }
body[data-lang="ar"] .en-only { display: none; }
body[data-lang="ar"] .ar-only { display: revert; }

/* ---- Micro label (mono) ------------------------------------ */
.kicker, .label {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bronze);
}
body[data-lang="ar"] .kicker, body[data-lang="ar"] .label { letter-spacing: .08em; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem var(--gut);
  background: color-mix(in oklab, var(--lime) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in oklab, var(--bronze) 16%, transparent);
  transition: background .3s var(--ease);
}
.nav.solid { background: color-mix(in oklab, var(--lime) 98%, transparent); }
.nav-brand { display: flex; align-items: center; gap: .55rem; font-size: 1.1rem; }
.nav-brand .ar-mark { font-family: var(--arabic); color: var(--bronze); font-size: .9em; }
.nav-links { margin-inline-start: auto; display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.8rem); }
.nav-links a { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--walnut); opacity: .8; transition: opacity .2s, color .2s; }
.nav-links a:hover { opacity: 1; color: var(--verd); }
.nav-cta { border: 1px solid var(--bronze); padding: .5rem .85rem; border-radius: 0; }
.nav-cta:hover { background: var(--verd); border-color: var(--verd); color: var(--lime) !important; opacity: 1 !important; }
.lang-btn {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  border: 1px solid color-mix(in oklab, var(--bronze) 35%, transparent);
  padding: .42rem .7rem; transition: all .2s;
}
.lang-btn:hover { border-color: var(--verd); color: var(--verd); }
.nav-burger { display: none; }
@media (max-width: 820px) {
  .nav-links { position: fixed; inset: 0 0 auto 0; top: 0; flex-direction: column; align-items: flex-start;
    gap: 1.4rem; padding: 5rem var(--gut) 2.5rem; background: var(--lime);
    transform: translateY(-110%); transition: transform .4s var(--ease); margin: 0; }
  .nav-links.open { transform: translateY(0); box-shadow: 0 20px 50px -20px rgba(42,28,16,.4); }
  .nav-links a { font-size: 1rem; }
  .nav-burger { display: block; margin-inline-start: auto; z-index: 101; width: 26px; height: 18px; position: relative; }
  .nav-burger span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--walnut); transition: .3s var(--ease); }
  .nav-burger span:nth-child(1) { top: 0; } .nav-burger span:nth-child(2) { top: 8px; } .nav-burger span:nth-child(3) { top: 16px; }
  .nav-burger.x span:nth-child(1) { top: 8px; transform: rotate(45deg); }
  .nav-burger.x span:nth-child(2) { opacity: 0; }
  .nav-burger.x span:nth-child(3) { top: 8px; transform: rotate(-45deg); }
}

/* ============================================================
   SALASIL band (recursive 1010)
   ============================================================ */
.salasil { height: 26px; background: var(--walnut); display: flex; align-items: center; gap: 8px; overflow: hidden; padding: 0 12px; }
.salasil.inv { background: var(--lime); }
.salasil i { flex: none; }
.salasil .b1 { width: 4px; height: 13px; background: var(--lime); }
.salasil .b0 { width: 13px; height: 13px; border: 2px solid var(--lime); border-radius: 50%; }
.salasil.inv .b1 { background: var(--walnut); }
.salasil.inv .b0 { border-color: var(--walnut); }

/* ============================================================
   HERO — the kernel assembles into a building
   ============================================================ */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; padding-top: 6rem; overflow: hidden; }
/* content reserves the grid's exact height (set by JS as --gridH),
   so text/buttons can never sit on the animation */
.hero-content { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; padding-bottom: calc(var(--gridH, 320px) + 1.5rem); }
.hero-grid {
  position: absolute; inset: auto 0 0 0; z-index: 0;
  display: grid; gap: clamp(4px, .7vw, 10px);
  align-content: end; justify-content: center;
  padding: 0 var(--gut) 5vh; opacity: .9;
  pointer-events: none;
}
.cell { position: relative; opacity: 0; transform: translateY(40px) scale(.6); }
.cell.in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .9s var(--ease); }
.cell .one { width: 100%; height: 100%; background: color-mix(in oklab, var(--bronze) 78%, var(--walnut)); }
.cell .zero { width: 100%; height: 100%; border: clamp(2px, .35vw, 5px) solid color-mix(in oklab, var(--verd) 85%, var(--walnut)); border-radius: 50%; background: transparent; }
.cell.sky { opacity: 0 !important; }
.hero-veil { display: none; }
.hero-mark { font-size: clamp(5rem, 22vw, 18rem); line-height: .82; letter-spacing: -.04em; font-weight: 400; color: var(--walnut); display: flex; align-items: baseline; gap: .12em; }
.hero-mark .ar-mark { font-family: var(--arabic); font-size: .42em; color: var(--bronze); letter-spacing: 0; }
.hero-h1 { font-size: clamp(1.6rem, 4.5vw, 3.4rem); font-weight: 400; line-height: 1.04; letter-spacing: -.02em; max-width: 18ch; margin-top: .4rem; text-wrap: balance; }
.hero-h1 em { font-style: normal; color: var(--verd); }
.hero-sub { font-size: clamp(1rem, 1.6vw, 1.2rem); max-width: 48ch; margin-top: 1.2rem; color: color-mix(in oklab, var(--walnut) 80%, var(--lime)); text-wrap: pretty; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.hero-foot { position: absolute; z-index: 2; inset: auto var(--gut) 1.6rem var(--gut); display: flex; justify-content: space-between; align-items: end; gap: 1rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze); }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; padding: 1rem 1.5rem; transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s; }
.btn.solid { background: var(--verd); color: var(--lime); }
.btn.solid:hover { background: color-mix(in oklab, var(--verd) 80%, black); transform: translateY(-3px); }
.btn.ghost { border: 1px solid color-mix(in oklab, var(--bronze) 45%, transparent); }
.btn.ghost:hover { border-color: var(--verd); color: var(--verd); transform: translateY(-3px); }

/* ============================================================
   SECTIONS
   ============================================================ */
.sec { padding: clamp(3.5rem, 9vw, 7rem) 0; }
.sec-dark { background: var(--walnut); color: var(--lime); }
.sec-coral { background: var(--coral); color: var(--walnut); }
.sec-paper { background: var(--paper); }
.h2 { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.03; text-wrap: balance; }
.h2 em { font-style: normal; color: var(--verd); }
.sec-dark .h2 em { color: var(--coral); }
.lede { max-width: 60ch; font-size: clamp(1.05rem, 1.5vw, 1.2rem); margin-top: 1rem; color: color-mix(in oklab, currentColor 85%, transparent); text-wrap: pretty; }

/* Two-statement band */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; gap: 2.5rem; } }
.duo .big { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 400; line-height: 1.15; letter-spacing: -.01em; }
.duo .big em { font-style: normal; color: var(--verd); }
.duo p { margin-top: .9rem; color: color-mix(in oklab, var(--walnut) 75%, var(--lime)); max-width: 44ch; }

/* ============================================================
   WORK — numbered projects, color-block image load
   ============================================================ */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); margin-top: 2.5rem; }
@media (max-width: 900px) { .work-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .work-grid { grid-template-columns: 1fr; } }
.proj { display: block; transition: transform .45s var(--ease); }
.proj:hover { transform: translateY(-6px); }
.proj-fig { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--coral); }
.proj-fig.swatch-verd { background: var(--verd); }
.proj-fig.swatch-bronze { background: var(--bronze); }
.proj-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.proj-fig img.loaded { opacity: 1; transform: scale(1); }
.proj:hover .proj-fig img.loaded { transform: scale(1.06); }
.proj-num { position: absolute; top: .8rem; inset-inline-start: .9rem; z-index: 2; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: var(--lime); mix-blend-mode: difference; }
.proj-meta { padding-top: 1rem; }
.proj-title { display: block; font-size: 1.25rem; line-height: 1.2; }
.proj-tag { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze); margin-top: .35rem; }
.proj-read { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; color: var(--verd); margin-top: .5rem; }

/* ============================================================
   KERNEL explainer
   ============================================================ */
.kernel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
@media (max-width: 820px) { .kernel-grid { grid-template-columns: 1fr; } }
.kd-row { display: flex; gap: 1.2rem; align-items: center; padding: 1.1rem 0; border-top: 1px solid color-mix(in oklab, var(--bronze) 18%, transparent); transition: transform .35s var(--ease); }
.kd-row:hover { transform: translateX(6px); }
.kd-sym { flex: none; width: 60px; height: 60px; display: grid; place-items: center; }
.kd-sym .m { width: 16px; height: 54px; background: var(--walnut); }
.kd-sym .v { width: 48px; height: 48px; border: 4px solid var(--verd); border-radius: 50%; }
.kd-title { font-size: 1.15rem; }
.kd-desc { font-size: .92rem; color: color-mix(in oklab, var(--walnut) 72%, var(--lime)); margin-top: .2rem; }

/* ============================================================
   FACTS strip
   ============================================================ */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.4rem; }
.fact { border-inline-start: 1px solid color-mix(in oklab, currentColor 25%, transparent); padding-inline-start: 1rem; }
.fact-n { font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1; color: var(--coral); font-variant-numeric: tabular-nums; }
.sec-dark .fact-n { color: var(--coral); }
.fact-l { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; opacity: .6; margin-top: .4rem; }

/* ============================================================
   SERVICES / steps list
   ============================================================ */
.svc { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem 1.6rem; padding: 1.6rem 0; border-top: 1px solid color-mix(in oklab, var(--bronze) 18%, transparent); transition: transform .35s var(--ease); }
.svc:hover { transform: translateX(8px); }
.svc-n { font-family: var(--mono); font-size: 1rem; color: var(--bronze); transition: color .3s; }
.svc:hover .svc-n { color: var(--verd); }
.svc-t { font-size: 1.35rem; line-height: 1.2; }
.svc-d { margin-top: .5rem; color: color-mix(in oklab, var(--walnut) 75%, var(--lime)); max-width: 56ch; }
.svc-list { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: .8rem; }
.svc-list span { font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; color: var(--bronze); }
.svc-list span::before { content: '↳ '; color: var(--verd); }

/* ============================================================
   PRICING
   ============================================================ */
.pkgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2.5rem; }
@media (max-width: 880px) { .pkgs { grid-template-columns: 1fr; } }
.pkg { background: color-mix(in oklab, var(--lime) 60%, white); border: 1px solid color-mix(in oklab, var(--bronze) 18%, transparent); padding: 1.6rem; transition: transform .4s var(--ease), box-shadow .4s; }
.pkg:hover { transform: translateY(-8px); box-shadow: 0 22px 48px -22px rgba(42,28,16,.35); }
.pkg.feat { background: var(--walnut); color: var(--lime); }
.pkg-l { font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--verd); }
.pkg-name { font-size: 1.5rem; margin: .3rem 0 .8rem; }
.pkg-price { font-size: 1.7rem; color: var(--bronze); }
.pkg.feat .pkg-price { color: var(--coral); }
.pkg-basis { font-family: var(--mono); font-size: .68rem; color: color-mix(in oklab, currentColor 60%, transparent); margin-bottom: 1rem; }
.pkg ul { list-style: none; }
.pkg li { font-size: .92rem; padding-block: .35rem; padding-inline-start: 1.1rem; padding-inline-end: 0; position: relative; }
.pkg li::before { content: ''; position: absolute; inset-inline-start: 0; top: .7em; width: 7px; height: 7px; border: 2px solid var(--verd); border-radius: 50%; }
.pkg-time { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; margin-top: 1rem; opacity: .65; }

/* ============================================================
   CONTACT FORM
   ============================================================ */
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem 1.8rem; margin-top: 2rem; }
@media (max-width: 700px) { .cf-grid { grid-template-columns: 1fr; } }
.cf { display: flex; flex-direction: column; gap: .45rem; }
.cf.full { grid-column: 1 / -1; }
.cf label { font-family: var(--mono); font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); }
.cf input, .cf select, .cf textarea { font-family: var(--serif); font-size: 1rem; color: var(--walnut); background: color-mix(in oklab, var(--lime) 50%, white); border: 1px solid color-mix(in oklab, var(--bronze) 30%, transparent); padding: .85rem 1rem; border-radius: 0; transition: border-color .25s, background .25s; }
body[data-lang="ar"] .cf input, body[data-lang="ar"] .cf select, body[data-lang="ar"] .cf textarea { font-family: var(--arabic); }
.cf select { appearance: none; cursor: pointer; }
.cf textarea { resize: vertical; min-height: 110px; }
.cf input:focus, .cf select:focus, .cf textarea:focus { outline: none; border-color: var(--verd); background: white; }
.cf-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.cf-note { font-family: var(--mono); font-size: .68rem; color: var(--bronze); }
.cf-status { grid-column: 1 / -1; font-family: var(--mono); font-size: .75rem; color: var(--verd); min-height: 1.2em; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { background: var(--ink); color: color-mix(in oklab, var(--lime) 60%, transparent); padding: 2.4rem var(--gut); }
.foot-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.foot-mark { display: flex; align-items: center; gap: .6rem; font-size: 1.1rem; color: var(--lime); }
.foot-mark .ar-mark { font-family: var(--arabic); color: var(--coral); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.foot-nav a { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--coral); }
.foot-copy { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; margin-top: 2rem; opacity: .7; }

/* ============================================================
   REVEAL on scroll
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   CASE STUDY pages
   ============================================================ */
.case-hero { position: relative; min-height: 84svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--walnut); }
.case-hero .bg { position: absolute; inset: 0; }
.case-hero .bg img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 24s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
.case-hero .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42,28,16,.12) 30%, rgba(42,28,16,.8) 100%); }
.case-hero .inner { position: relative; z-index: 2; width: 100%; padding: 0 var(--gut) clamp(2.5rem,6vw,4.5rem); color: var(--lime); }
.case-hero .kicker { color: var(--coral); }
.case-hero h1 { font-size: clamp(2.4rem,6vw,4.6rem); font-weight: 400; line-height: 1.02; letter-spacing: -.02em; max-width: 16ch; margin-top: .8rem; }
.case-hero p { margin-top: 1rem; max-width: 52ch; color: color-mix(in oklab, var(--lime) 85%, transparent); }
.case-story p { max-width: 64ch; margin-bottom: 1.1rem; font-size: clamp(1.02rem,1.4vw,1.15rem); color: color-mix(in oklab, var(--walnut) 84%, var(--lime)); }
.case-story em { font-style: normal; color: var(--bronze); font-weight: 600; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.2rem; margin-top: 2rem; }
.shot { position: relative; overflow: hidden; background: var(--walnut); }
.shot img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: transform .8s var(--ease); opacity: 0; }
.shot img.loaded { opacity: 1; }
.shot:hover img.loaded { transform: scale(1.05); }
.shot.wide { grid-column: 1 / -1; }
.shot.wide img { aspect-ratio: 21/9; }
.shot cap, .shot figcaption { position: absolute; inset: auto 0 0 0; padding: 2rem 1rem .8rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); background: linear-gradient(transparent, rgba(42,28,16,.78)); }
.del-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .9rem; margin-top: 1.4rem; }
.del { display: flex; gap: .7rem; align-items: baseline; font-size: .98rem; color: color-mix(in oklab, var(--walnut) 80%, var(--lime)); }
.del::before { content: ''; flex: none; width: 9px; height: 9px; border: 2px solid var(--verd); border-radius: 50%; transform: translateY(1px); }

/* ============================================================
   BUILDER tool
   ============================================================ */
.bld-hero { max-width: 760px; margin: 0 auto; text-align: center; padding: clamp(4rem,12vh,9rem) var(--gut) 4rem; }
.bld-hero h1 { font-size: clamp(2.2rem,5.5vw,4rem); font-weight: 400; line-height: 1.05; letter-spacing: -.02em; margin: .8rem 0 1.2rem; }
.bld-hero h1 em { font-style: normal; color: var(--verd); }
.bld-hero p { font-size: 1.1rem; color: color-mix(in oklab,var(--walnut) 78%,var(--lime)); max-width: 52ch; margin: 0 auto 2rem; text-wrap: pretty; }
.bld-trust { margin-top: 1.4rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze); opacity: .8; }

.bld-wrap { max-width: 760px; margin: 0 auto; padding: clamp(5.5rem,9vh,7rem) var(--gut) 4rem; }
.bld-prog { display: flex; gap: .4rem; margin-bottom: 1.6rem; }
.bld-prog-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .3rem; opacity: .4; transition: opacity .3s; }
.bld-prog-step.active, .bld-prog-step.done { opacity: 1; }
.bld-prog-n { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--bronze); font-family: var(--mono); font-size: .72rem; }
.bld-prog-step.active .bld-prog-n { background: var(--verd); border-color: var(--verd); color: var(--lime); }
.bld-prog-step.done .bld-prog-n { background: var(--bronze); border-color: var(--bronze); color: var(--lime); }
.bld-prog-l { font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bronze); }

.bld-card { background: color-mix(in oklab,var(--lime) 55%,white); border: 1px solid color-mix(in oklab,var(--bronze) 16%,transparent); padding: clamp(1.4rem,4vw,2.4rem); }
.bld-card h2 { font-size: clamp(1.5rem,3.4vw,2.2rem); font-weight: 400; letter-spacing: -.02em; margin-bottom: 1.4rem; }
.bld-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1.6rem; }
@media (max-width:560px){ .bld-grid { grid-template-columns: 1fr; } }
.bld-f { display: flex; flex-direction: column; gap: .4rem; }
.bld-f > span { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze); }
.bld-f input, .bld-f select, .bld-f textarea { font-family: var(--serif); font-size: 1rem; color: var(--walnut); background: white; border: 1px solid color-mix(in oklab,var(--bronze) 28%,transparent); padding: .8rem .9rem; border-radius: 0; }
body[data-lang="ar"] .bld-f input, body[data-lang="ar"] .bld-f select, body[data-lang="ar"] .bld-f textarea { font-family: var(--arabic); }
.bld-f select { appearance: none; cursor: pointer; }
.bld-f textarea { resize: vertical; min-height: 80px; }
.bld-f input:focus, .bld-f select:focus, .bld-f textarea:focus { outline: none; border-color: var(--verd); }
.bld-hint { font-size: .9rem; color: color-mix(in oklab,var(--walnut) 65%,var(--lime)); margin-top: 1.2rem; }
.bld-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }

.bld-slider { margin: 1.5rem 0 1rem; }
.bld-slider input[type=range] { width: 100%; accent-color: var(--verd); height: 6px; }
.bld-slider-val { font-family: var(--mono); font-size: .9rem; color: var(--bronze); margin-top: .6rem; }
.bld-slider-val span { font-size: 1.6rem; color: var(--verd); }
.bld-tier { font-family: var(--mono); font-size: .85rem; letter-spacing: .06em; color: var(--bronze); padding: .8rem 1rem; border: 1px dashed color-mix(in oklab,var(--bronze) 30%,transparent); text-align: center; }
.bld-tier.on { color: var(--verd); border-color: var(--verd); border-style: solid; }

.bld-res-head { margin-bottom: 1.6rem; }
.bld-res-head h2 { font-size: clamp(1.7rem,4vw,2.6rem); font-weight: 400; letter-spacing: -.02em; }
.bld-vgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width:620px){ .bld-vgrid { grid-template-columns: 1fr; } }
.bld-vcard { background: white; border-inline-start: 4px solid var(--verd); padding: 1.1rem 1.2rem; }
.bld-vcard.fail { border-inline-start-color: var(--bad,#A85B43); }
.bld-vcard.warn { border-inline-start-color: var(--warn,#C2913E); }
.bld-vk { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze); }
.bld-vv { font-size: 1.12rem; line-height: 1.25; margin: .3rem 0; }
.bld-vx { font-size: .88rem; color: color-mix(in oklab,var(--walnut) 70%,var(--lime)); }
.bld-costbox { background: var(--walnut); color: var(--lime); padding: 1.6rem; margin-top: 1.4rem; }
.bld-costbig { font-size: clamp(1.8rem,5vw,2.8rem); color: var(--coral); line-height: 1; }
.bld-costbig span { display: block; font-size: .8rem; font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in oklab,var(--lime) 65%,transparent); margin-top: .4rem; }
.bld-costsub { font-family: var(--mono); font-size: .76rem; color: color-mix(in oklab,var(--lime) 70%,transparent); margin: .6rem 0 1rem; }
.bld-costrow { display: flex; justify-content: space-between; padding: .5rem 0; border-top: 1px solid color-mix(in oklab,var(--lime) 14%,transparent); font-size: .95rem; }
.bld-costrow b { color: var(--coral); }
.bld-reality { margin-top: 1.4rem; border: 1px solid color-mix(in oklab,var(--bronze) 18%,transparent); }
.bld-reality summary { cursor: pointer; padding: 1rem 1.2rem; font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; }
.bld-reality > p, .bld-roi { margin: 0 1.2rem 1.2rem; }
.bld-roi { width: calc(100% - 2.4rem); border-collapse: collapse; font-size: .85rem; }
.bld-roi th, .bld-roi td { padding: .5rem .6rem; border: 1px solid color-mix(in oklab,var(--bronze) 16%,transparent); text-align: center; font-family: var(--mono); }
.bld-roi th { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bronze); }
.bld-roi td.pos { color: #4f7a63; } .bld-roi td.neg { color: #a85b43; }
.bld-cta { text-align: center; margin-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.bld-disc { font-size: .82rem; color: color-mix(in oklab,var(--walnut) 60%,var(--lime)); max-width: 50ch; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
  .cell { opacity: 1 !important; transform: none !important; }
  .proj-fig img, .shot img { opacity: 1 !important; transform: none !important; }
  .case-hero .bg img { animation: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
}