/* Hallmark · macrostructure: Long Document (craft house) · tone: warm-artisanal · anchor hue: gold 78
 * theme: custom (vibe: "lit loom in the dark, wool gold, maroon thread, Saudi Sadu"
 * paper oklch(16% 0.012 60) · accent oklch(78% 0.11 78) gold · Rubik display + Tajawal body)
 * nav: N1b inline · footer: Ft5 statement
 * نَوْل — تصور مفاهيمي، استوديو رسملة */

:root {
  --dark:    oklch(16% 0.012 60);
  --dark-2:  oklch(20% 0.014 62);
  --panel:   oklch(24% 0.016 65);
  --line:    oklch(32% 0.018 68);
  --gold:    oklch(78% 0.11 78);
  --gold-2:  oklch(66% 0.12 72);
  --wine:    oklch(48% 0.12 20);
  --cream:   oklch(94% 0.014 80);
  --sand:    oklch(74% 0.028 78);

  --disp: "Rubik", sans-serif;
  --body: "Tajawal", sans-serif;

  --xs: 8px; --sm: 14px; --md: 24px; --lg: 40px; --xl: 64px; --xxl: 104px;
  --ease: cubic-bezier(.22,.8,.24,1);
  --dur: 520ms; --fast: 200ms;
  --rule: 1px solid var(--line);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body {
  font-family: var(--body); font-weight: 300;
  background: var(--dark); color: var(--cream); line-height: 1.9;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3 { font-family: var(--disp); font-weight: 800; font-style: normal; line-height: 1.35; overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: clamp(3.4rem, 11vw, 8rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); }
::selection { background: var(--gold); color: var(--dark); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.wrap { max-width: 1180px; margin-inline: auto; padding-inline: clamp(18px, 4vw, 44px); }
.kick { font-size: .78rem; font-weight: 500; letter-spacing: .18em; color: var(--gold); margin-bottom: var(--sm); }
.sechead { max-width: 52ch; margin-bottom: var(--xl); }
.sechead--start { margin-inline: 0; }
.sechead__sub { color: var(--sand); margin-top: var(--sm); }
section { padding-block: var(--xxl); }

.rv { opacity: 0; transform: translateY(16px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 500; font-size: .95rem;
  background: var(--gold); color: var(--dark);
  border: 1px solid var(--gold); border-radius: 2px; padding: 13px 32px; cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.btn:hover { background: var(--gold-2); border-color: var(--gold-2); }

/* ═══ ناف ═══ */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  background: linear-gradient(to bottom, oklch(16% .012 60 / .9), transparent);
  transition: background var(--fast);
}
.nav.solid { background: oklch(16% .012 60 / .96); border-bottom: var(--rule); backdrop-filter: blur(10px); }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: var(--md); height: 88px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--disp); font-weight: 800; font-size: 1.35rem; }
.brand__m { width: 26px; color: var(--gold); }
.nav__links { display: flex; gap: clamp(12px, 2vw, 26px); font-size: .86rem; color: var(--sand); }
.nav__links a { transition: color var(--fast); white-space: nowrap; }
.nav__links a:hover { color: var(--gold); }
.nav__cta {
  font-size: .82rem; border: 1px solid var(--gold); color: var(--gold);
  border-radius: 100px; padding: .42rem 1.2rem; white-space: nowrap;
  transition: background var(--fast), color var(--fast);
}
.nav__cta:hover { background: var(--gold); color: var(--dark); }
@media (max-width: 900px) { .nav__links { display: none; } }

/* ═══ ١ الهيرو ═══ */
.loomhero { height: 420vh; position: relative; padding: 0; }
.loomhero__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
#loomCanvas, .loomhero__fb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#loomCanvas { display: none; }
body.scrub-on #loomCanvas { display: block; }
body.scrub-on .loomhero__fb { display: none; }
.loomhero__veil {
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 55%, transparent 30%, oklch(16% .012 60 / .55)),
              linear-gradient(to bottom, oklch(16% .012 60 / .45), transparent 30%, oklch(16% .012 60 / .6));
}
.lh {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  padding: var(--md); opacity: 0; visibility: hidden;
}
.lh h1 { text-shadow: 0 4px 60px oklch(16% .012 60 / .8); }
.lh h2 { font-size: clamp(1.8rem, 5vw, 3.6rem); text-shadow: 0 4px 40px oklch(16% .012 60 / .8); }
.lh p { font-size: clamp(1rem, 2vw, 1.3rem); letter-spacing: .1em; color: var(--sand); margin-top: .5rem; }
.loomhero__cue {
  position: absolute; inset-inline-start: 50%; transform: translateX(50%); bottom: 5vh;
  font-size: .74rem; letter-spacing: .3em; color: var(--sand);
  display: grid; justify-items: center; gap: .7rem;
}
.loomhero__cue span {
  width: 1px; height: 40px; background: var(--line); position: relative; overflow: hidden; display: block;
}
.loomhero__cue span::after {
  content: ""; position: absolute; inset-inline: 0; top: -100%; height: 100%;
  background: var(--gold); animation: cue 2s var(--ease) infinite;
}
@keyframes cue { to { top: 100%; } }
body.no-scrub .loomhero { height: auto; }
body.no-scrub .loomhero__stage { position: relative; }
body.no-scrub .lh { position: relative; opacity: 1 !important; visibility: visible !important; padding-block: var(--xl); }

/* ═══ ٢ البيان ═══ */
.creed { background: var(--dark-2); border-block: var(--rule); }
.creed__in { max-width: 48rem; margin-inline: auto; text-align: center; }
.creed__line { font-family: var(--disp); font-weight: 400; font-size: clamp(1.15rem, 2.4vw, 1.6rem); line-height: 2.1; }

/* ═══ ٣ قراءة النقش ═══ */
.motif__grid { display: grid; grid-template-columns: 1fr .9fr; gap: clamp(24px, 4vw, 60px); align-items: start; }
.motif__weave { border: var(--rule); background: var(--dark-2); padding: var(--md); }
#motifSvg { width: 100%; height: auto; display: block; }
.wv line { stroke: var(--line); stroke-width: .6; opacity: .5; }
.wv .weft { opacity: .28; }
.mot { cursor: pointer; }
.mot__hit { fill: transparent; }
.mot__p {
  fill: none; stroke: var(--sand); stroke-width: 2.4;
  stroke-linecap: square; stroke-linejoin: miter;
  transition: stroke var(--fast) var(--ease), stroke-width var(--fast) var(--ease);
}
.mot:hover .mot__p, .mot:focus-visible .mot__p, .mot.is-on .mot__p { stroke: var(--gold); stroke-width: 3.4; }
.mot.is-on .mot__hit { fill: oklch(78% .11 78 / .05); }

.motif__read { position: sticky; top: 100px; }
.motif__hint { color: var(--sand); }
.motif__k { font-size: .76rem; letter-spacing: .16em; color: var(--gold); }
.motif__read h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: .2rem 0 var(--sm); }
.motif__mean { color: var(--sand); }
.motif__where { font-size: .84rem; color: var(--gold-2); margin-top: var(--sm); }
.motif__list { display: flex; flex-wrap: wrap; gap: var(--xs); margin-top: var(--lg); }
.motif__list li {
  font-size: .82rem; color: var(--sand); border: var(--rule); border-radius: 100px;
  padding: .38rem 1rem; cursor: pointer;
  transition: border-color var(--fast), color var(--fast);
}
.motif__list li:hover, .motif__list li.is-on { border-color: var(--gold); color: var(--gold); }
@media (max-width: 900px) { .motif__grid { grid-template-columns: 1fr; } .motif__read { position: static; } }

/* ═══ ٤ المجموعات ═══ */
.coll { background: var(--dark-2); border-block: var(--rule); }
.coll__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--md); }
.cc figure { border: var(--rule); overflow: hidden; margin-bottom: var(--sm); }
.cc img { aspect-ratio: 4/5; object-fit: cover; width: 100%; transition: transform 1s var(--ease); }
.cc:hover img { transform: scale(1.04); }
.cc h3 { font-size: 1.3rem; }
.cc p { color: var(--sand); font-size: .9rem; margin-top: 4px; }
.cc__meta { display: block; font-size: .8rem; color: var(--gold); margin-top: var(--xs); }
@media (max-width: 1000px) { .coll__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .coll__grid { grid-template-columns: 1fr; } }

/* ═══ ٥ الرحلة ═══ */
.proc__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: var(--rule); }
.proc__steps li { padding: var(--lg) var(--md); }
.proc__steps li + li { border-inline-start: var(--rule); }
.proc__n { font-family: var(--disp); font-weight: 800; font-size: 1.6rem; color: var(--gold); display: block; }
.proc__steps h3 { font-size: 1.15rem; margin: var(--xs) 0 4px; }
.proc__steps p { font-size: .88rem; color: var(--sand); }
.proc__d { display: block; font-size: .78rem; color: var(--gold-2); margin-top: var(--sm); border-top: var(--rule); padding-top: var(--xs); }
.proc__media { margin-top: var(--lg); border: var(--rule); }
.proc__media img { aspect-ratio: 16/7; object-fit: cover; width: 100%; }
@media (max-width: 900px) {
  .proc__steps { grid-template-columns: 1fr 1fr; }
  .proc__steps li:nth-child(odd) { border-inline-start: 0; }
  .proc__steps li:nth-child(n+3) { border-top: var(--rule); }
}
@media (max-width: 520px) {
  .proc__steps { grid-template-columns: 1fr; }
  .proc__steps li + li { border-inline-start: 0; border-top: var(--rule); }
}

/* ═══ ٦ الحرفيات ═══ */
.makers { background: var(--dark-2); border-block: var(--rule); }
.makers__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--md); }
.mk { border: var(--rule); border-top: 2px solid var(--gold); padding: var(--lg) var(--md); background: var(--dark); }
.mk__region { font-size: .76rem; letter-spacing: .16em; color: var(--gold); }
.mk h3 { font-size: 1.4rem; margin: 4px 0 var(--xs); }
.mk__t { color: var(--sand); font-size: .9rem; }
.mk__n { display: block; font-size: .8rem; color: var(--gold-2); margin-top: var(--md); border-top: var(--rule); padding-top: var(--xs); }
.makers__note { font-size: .76rem; color: var(--sand); opacity: .7; margin-top: var(--md); }
@media (max-width: 860px) { .makers__grid { grid-template-columns: 1fr; } }

/* ═══ ٧ حاسبة البساط ═══ */
.sz { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(20px, 3vw, 48px); align-items: start; }
.sz__inputs { border: var(--rule); background: var(--dark-2); padding: var(--lg) var(--md); }
.szrow { display: grid; gap: .5rem; margin-bottom: var(--lg); }
.szrow > span { font-size: .9rem; font-weight: 500; }
.szrow output { font-family: var(--disp); font-size: 1.1rem; color: var(--gold); }
.szrow input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 36px;
  background: transparent; cursor: pointer; touch-action: pan-y;
}
.szrow input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--line); border-radius: 2px; }
.szrow input[type="range"]::-moz-range-track { height: 2px; background: var(--line); border-radius: 2px; }
.szrow input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -8px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold); border: 3px solid var(--dark-2); cursor: grab;
}
.szrow input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--gold); border: 3px solid var(--dark-2); }
.szrow select {
  font: inherit; font-size: .9rem; color: var(--cream);
  background: var(--panel); border: var(--rule); border-radius: 2px; padding: .7rem .9rem;
}
.szrow select option { background: var(--panel); }
.sz__assump { font-size: .78rem; color: var(--sand); opacity: .75; line-height: 1.9; }

.sz__out { display: grid; gap: var(--md); }
.sz__stage { border: var(--rule); background: var(--dark-2); padding: var(--md); }
#szSvg { width: 100%; height: auto; display: block; }
.sz__room { fill: oklch(24% .016 65); stroke: var(--line); stroke-width: 1.4; }
.sz__rug { fill: oklch(78% .11 78 / .22); stroke: var(--gold); stroke-width: 1.6; }
.sz__motif { fill: none; stroke: var(--gold); stroke-width: 1.4; opacity: .7; }
.sz__lbl { font-family: var(--body); font-size: 10px; fill: var(--sand); text-anchor: middle; }
.sz__lbl--v { dominant-baseline: middle; }
.sz__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: var(--rule); }
.sz__stats > div { background: var(--dark); padding: var(--sm) var(--md); }
.sz__stats b { display: block; font-family: var(--disp); font-weight: 700; font-size: clamp(1.1rem, 2.2vw, 1.5rem); color: var(--gold); }
.sz__stats span { font-size: .74rem; color: var(--sand); }
.sz__cta { display: block; text-align: center; border: var(--rule); padding: 14px; color: var(--gold); font-size: .9rem; transition: background var(--fast); }
.sz__cta:hover { background: var(--dark-2); }
@media (max-width: 900px) { .sz { grid-template-columns: 1fr; } .sz__stats { grid-template-columns: 1fr 1fr; } }

/* ═══ ٨ الطلب الخاص ═══ */
.custom { background: var(--dark-2); border-block: var(--rule); }
.custom__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.custom__copy p { color: var(--sand); margin-top: var(--sm); max-width: 44ch; }
.custom__steps { margin: var(--lg) 0; display: grid; gap: var(--sm); counter-reset: c; }
.custom__steps li {
  counter-increment: c; position: relative; padding-inline-start: 40px; font-size: .92rem; color: var(--sand);
}
.custom__steps li b { color: var(--cream); font-weight: 500; }
.custom__steps li::before {
  content: counter(c, arabic-indic); position: absolute; inset-inline-start: 0; top: 0;
  width: 26px; height: 26px; border: var(--rule); border-radius: 50%;
  display: grid; place-content: center; font-size: .78rem; color: var(--gold);
}
.custom__min { font-size: .84rem; color: var(--gold-2) !important; margin-bottom: var(--md) !important; }
.custom__media { border: var(--rule); }
.custom__media img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
@media (max-width: 860px) { .custom__grid { grid-template-columns: 1fr; } }

/* ═══ ٩ شريط النقوش ═══ */
.strip { padding: var(--lg) 0; overflow: hidden; border-block: var(--rule); }
.strip__row { display: flex; gap: var(--lg); width: max-content; animation: slide 60s linear infinite; }
@keyframes slide { to { transform: translateX(50%); } }
.stm { width: 44px; height: 44px; flex-shrink: 0; }
.stm path { fill: none; stroke: var(--line); stroke-width: 3; }
@media (prefers-reduced-motion: reduce) { .strip__row { animation: none; } }

/* ═══ ١٠ آراء ═══ */
.says__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--md); }
.says blockquote { border: var(--rule); padding: var(--lg) var(--md); background: var(--dark-2); }
.says p { font-size: .95rem; }
.says footer { font-size: .84rem; color: var(--gold); margin-top: var(--md); }
@media (max-width: 860px) { .says__grid { grid-template-columns: 1fr; } }

/* ═══ ١١ الأسئلة ═══ */
.faq { background: var(--dark-2); border-block: var(--rule); }
.faq__grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(24px, 4vw, 60px); align-items: start; }
.faq__list details { border-bottom: var(--rule); }
.faq__list summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: var(--md); padding-block: var(--md); font-family: var(--disp); font-weight: 500; font-size: 1.02rem;
  transition: color var(--fast);
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary:hover { color: var(--gold); }
.faq__list summary i {
  width: 26px; height: 26px; border: var(--rule); flex-shrink: 0; position: relative;
  transition: transform .35s var(--ease), border-color var(--fast);
}
.faq__list summary i::before, .faq__list summary i::after {
  content: ""; position: absolute; inset: 0; margin: auto; background: var(--gold);
}
.faq__list summary i::before { width: 11px; height: 1.6px; }
.faq__list summary i::after { width: 1.6px; height: 11px; transition: opacity var(--fast); }
.faq__list details[open] summary i { transform: rotate(90deg); border-color: var(--gold); }
.faq__list details[open] summary i::after { opacity: 0; }
.faq__list details p { padding-bottom: var(--md); color: var(--sand); font-size: .92rem; max-width: 60ch; }
@media (max-width: 900px) { .faq__grid { grid-template-columns: 1fr; } }

/* ═══ ١٢ تواصل ═══ */
.contact__in { text-align: center; }
.contact__lead { color: var(--sand); margin-top: var(--sm); }
.contact__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--md); margin-top: var(--xl); }
.ct { border: var(--rule); padding: var(--md); display: grid; gap: 4px; transition: border-color var(--fast); }
a.ct:hover { border-color: var(--gold); }
.ct b { font-family: var(--disp); font-size: .95rem; color: var(--gold); }
.ct span { font-size: .88rem; color: var(--sand); }
@media (max-width: 860px) { .contact__cards { grid-template-columns: 1fr 1fr; } }

/* ═══ الفوتر ═══ */
.ft { border-top: var(--rule); padding-block: var(--xl); background: var(--dark-2); }
.ft__in { display: grid; justify-items: center; gap: var(--sm); text-align: center; }
.ft__reg, .ft__note, .ft__credit { font-size: .78rem; color: var(--sand); }
.ft__reg { opacity: .8; }
.ft__note { opacity: .7; max-width: 52ch; }
.ft__credit a { color: var(--gold); }

/* توازن قسم النقش */
.motif .sechead { max-width: 46ch; }
.motif__weave { padding: var(--lg) var(--md); }

/* منع كسر المقاس + ضبط ارتفاع البطاقات */
.sz__stats b { white-space: nowrap; font-size: clamp(1rem, 1.9vw, 1.35rem); }
.sz__stats > div { display: grid; align-content: start; gap: 2px; }
.cc figure { background: var(--dark); }
.cc img { object-position: center; }

/* الشعار المعتمد — كوفي مربّع بمعينات الفراغ */
.brand__logo { height: 60px; width: auto; display: block; }
.brand__logo--lg { height: 76px; }

/* ═══ الشعار الطائر: من وسط الهيرو إلى الهيدر ═══ */
.flyer {
  position: fixed; z-index: 60;
  top: 0; left: 0;
  transform-origin: top left;
  will-change: transform;
  pointer-events: none;
  opacity: 0;
}
.flyer.ready { opacity: 1; }
.brand__slot { display: block; width: 96px; height: 60px; }
body.no-fly .flyer { display: none; }
body.no-fly .brand__slot { background: url("../assets/img/logo-nawl-white.png") center/contain no-repeat; }
/* سطر التموضع بالهيرو أسفل الشعار الكبير */
.lh-1 { align-content: end; padding-bottom: 22vh; }
.lh__sub {
  font-size: clamp(1rem, 2vw, 1.3rem); letter-spacing: .1em; color: var(--cream);
  text-shadow: 0 2px 24px rgba(0,0,0,.8);
}
@media (prefers-reduced-motion: reduce) {
  .flyer { display: none; }
  .brand__slot { background: url("../assets/img/logo-nawl-white.png") center/contain no-repeat; }
  .lh__sub { margin-top: 0; }
}