/* rsmlh.sa · service page (build template). Night ground, gold kept for decisions, the golden thread runs down the page. */
@font-face { font-family: "Thmanyah"; src: url(/assets/fonts/thmanyahserifdisplay-Black.woff2) format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Thmanyah"; src: url(/assets/fonts/thmanyahserifdisplay-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Readex"; src: url(/assets/fonts/readexpro-arabic.woff2) format("woff2"); font-weight: 200 700; unicode-range: U+0600-06FF, U+FB50-FDFF, U+FE70-FEFF; font-display: swap; }
@font-face { font-family: "Readex"; src: url(/assets/fonts/readexpro-latin.woff2) format("woff2"); font-weight: 200 700; unicode-range: U+0000-00FF, U+2190-21FF; font-display: swap; }
:root {
  --night: #060e12; --night-2: #0a141a; --night-3: #10202a; --hair: rgba(233,237,236,.1); --hair-2: rgba(233,237,236,.18);
  --moon: #e9edec; --dune: #9db1b6; --dune-2: #7f9499; --gold: #e7cd92; --gold-2: #caa45f;
  --gut: clamp(18px, 5vw, 64px); --max: 1180px; --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--night); color: var(--moon); font: 400 17px/1.85 Readex, Tahoma, sans-serif; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(var(--max), 100% - var(--gut) * 2); margin-inline: auto; }
h1, h2, h3 { text-wrap: balance; }
.k { display: inline-flex; align-items: center; gap: 10px; font-size: .85rem; letter-spacing: .02em; color: var(--gold); }
.h2 { font: 900 clamp(1.9rem, 4.2vw, 3rem)/1.2 Thmanyah, serif; margin-top: 8px; }
.h2 em, .h1 em { font-style: normal; color: var(--gold); }
.lead { color: var(--dune); max-width: 58ch; margin-top: 14px; text-wrap: pretty; }
.sec { position: relative; padding-block: clamp(70px, 10vw, 130px); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font-weight: 600; font-size: .98rem; white-space: nowrap; transition: transform .25s var(--ease), background .25s; }
.btn--gold { background: var(--gold); color: var(--night); }
.btn--gold:hover { background: #f0dba9; transform: translateY(-2px); }
.btn--line { border: 1.5px solid var(--hair-2); }
.btn--line:hover { border-color: var(--gold); color: var(--gold); }

/* header */
.bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 22px; padding: calc(12px + env(safe-area-inset-top, 0px)) var(--gut) 12px; background: rgba(6,14,18,.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--hair); }
.bar__logo { display: flex; align-items: center; gap: 10px; font: 900 1.4rem/1 Thmanyah, serif; }
.bar__logo svg { width: 40px; color: var(--gold); }
.bar nav { display: none; gap: 24px; font-size: .92rem; color: var(--dune); }
.bar nav a[aria-current] { color: var(--moon); }
.bar nav a:hover { color: var(--moon); }
.bar__cta { margin-inline-start: auto; }
.bar .btn { min-height: 42px; padding: 0 18px; font-size: .9rem; }
@media (min-width: 1000px) { .bar nav { display: flex; } }

/* the golden thread: a fine line down the page, with a node at each section */
.thread { position: absolute; top: 0; bottom: 0; inset-inline-start: max(10px, calc((100% - var(--max)) / 2 - 34px)); width: 2px; pointer-events: none; z-index: 1; }
.thread::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(231,205,146,.0), rgba(231,205,146,.14) 4%, rgba(231,205,146,.14)); }
.thread i { position: absolute; inset-inline: 0; top: 0; height: var(--p, 0%); background: linear-gradient(var(--gold-2), var(--gold)); box-shadow: 0 0 12px rgba(231,205,146,.45); }
.node { position: absolute; inset-inline-start: calc(max(10px, calc((100vw - var(--max)) / 2 - 34px)) - 4px); width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--gold); background: var(--night); transform: translateY(6px); z-index: 2; }
@media (max-width: 760px) { .thread { inset-inline-start: 8px; } .node { inset-inline-start: 4px; } }
main { position: relative; }

/* 1 · hero */
.hero { position: relative; padding-block: clamp(40px, 7vw, 90px) clamp(70px, 9vw, 110px); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; background: radial-gradient(closest-side, rgba(231,205,146,.09), transparent 70%); pointer-events: none; }
.hero__grid { position: relative; display: grid; gap: 44px; align-items: center; }
@media (min-width: 980px) { .hero__grid { grid-template-columns: 1.05fr .95fr; } }
.h1 { font: 900 clamp(2.6rem, 7vw, 5.2rem)/1.08 Thmanyah, serif; margin-top: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 22px; color: var(--dune); font-size: .9rem; }
.chips span { display: inline-flex; align-items: center; gap: 8px; }
.chips span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.hero .btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.guar { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; margin-top: 30px; padding: 18px 20px; border: 1px solid rgba(231,205,146,.35); border-radius: 18px; background: linear-gradient(135deg, rgba(231,205,146,.08), rgba(231,205,146,0)); max-width: 560px; }
.guar__seal { grid-row: span 2; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--gold); color: var(--gold); font: 900 1.05rem/1 Thmanyah, serif; }
.guar b { font-weight: 600; }
.guar span { color: var(--dune); font-size: .9rem; line-height: 1.7; }
.guar a { color: var(--gold); }
/* hero treatments */
.hv { display: none; }
body.h-a .hv-a { display: block; }
/* A · work strip: real project screens drift behind the headline */
body.h-a .hero { padding-block: clamp(90px, 13vw, 170px); }
body.h-a .hero__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
body.h-a .hero__copy { display: flex; flex-direction: column; align-items: center; max-width: 900px; }
body.h-a .chips, body.h-a .btns { justify-content: center; }
body.h-a .guar { text-align: start; }
.hv-a { position: absolute; inset: 0; overflow: hidden; display: none; flex-direction: column; justify-content: center; gap: 22px; opacity: .55; }
body.h-a .hv-a { display: flex; }
.hv-a::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 50%, rgba(6,14,18,.92) 30%, rgba(6,14,18,.55) 75%, rgba(6,14,18,.85) 100%); }
.strip { display: flex; gap: 22px; width: max-content; animation: drift 60s linear infinite; }
.strip--rev { animation-direction: reverse; animation-duration: 70s; }
.strip img { width: clamp(300px, 30vw, 440px); aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 16px; border: 1px solid var(--hair-2); }
@keyframes drift { to { transform: translateX(33.333%); } }
@media (prefers-reduced-motion: reduce) { .strip { animation: none; } }

/* 2 · types */
.types { display: grid; gap: 14px; margin-top: 40px; }
@media (min-width: 860px) { .types { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.type { padding: 28px; border-radius: 22px; background: var(--night-2); border: 1px solid var(--hair); transition: border-color .3s, transform .35s var(--ease); }
.type:hover { border-color: rgba(231,205,146,.4); transform: translateY(-4px); }
.type svg { width: 40px; height: 40px; color: var(--gold); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.type h3 { font: 700 1.45rem/1.3 Thmanyah, serif; margin-top: 16px; }
.type p { color: var(--dune); margin-top: 8px; font-size: .97rem; }
.also { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px; color: var(--dune); font-size: .95rem; }
.also a { color: var(--gold); border-bottom: 1px solid rgba(231,205,146,.35); padding-bottom: 2px; }

/* 3 · included */
.inc { display: grid; gap: 0; margin-top: 44px; border-top: 1px solid var(--hair); }
@media (min-width: 700px) { .inc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .inc { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.inc li { list-style: none; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 4px 14px; padding: 24px 6px 24px 18px; border-bottom: 1px solid var(--hair); }
html[dir="rtl"] .inc li { padding: 24px 18px 24px 6px; }
.inc svg { grid-row: span 2; width: 30px; height: 30px; color: var(--gold); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 4px; }
.inc b { font-weight: 600; font-size: 1.05rem; }
.inc span { color: var(--dune); font-size: .93rem; line-height: 1.75; }

/* 5 · work (rendered from projects.json) */
.work { display: grid; gap: 18px; margin-top: 44px; }
@media (min-width: 900px) { .work { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.proj { display: grid; grid-template-rows: auto 1fr; border-radius: 22px; overflow: hidden; background: var(--night-2); border: 1px solid var(--hair); transition: border-color .3s, transform .35s var(--ease); }
.proj:hover { border-color: rgba(231,205,146,.4); transform: translateY(-4px); }
.proj__shot { aspect-ratio: 16 / 10; overflow: hidden; background: var(--night-3); }
.proj__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s var(--ease); }
.proj:hover .proj__shot img { transform: scale(1.04); }
.proj__body { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 24px; }
.proj__sector { font-size: .82rem; color: var(--gold); }
.proj h3 { font: 700 1.35rem/1.3 Thmanyah, serif; }
.proj p { color: var(--dune); font-size: .94rem; }
.proj ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin-top: 4px; }
.proj li { font-size: .78rem; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--hair-2); color: var(--dune); }
.proj__link { margin-top: auto; padding-top: 12px; color: var(--gold); font-weight: 600; font-size: .92rem; }
.allwork { margin-top: 28px; }

/* 6 · process */
.steps { position: relative; display: grid; gap: 26px; margin-top: 50px; counter-reset: s; }
@media (min-width: 980px) { .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; } .steps::before { content: ""; position: absolute; inset-inline: 0; top: 19px; height: 1px; background: linear-gradient(90deg, rgba(231,205,146,.05), rgba(231,205,146,.5), rgba(231,205,146,.05)); } }
.steps li { position: relative; list-style: none; counter-increment: s; }
.steps li::before { content: counter(s, arabic-indic); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--gold); background: var(--night); color: var(--gold); font: 700 1rem/1 Thmanyah, serif; position: relative; }
.steps h3 { font: 700 1.3rem/1.3 Thmanyah, serif; margin-top: 14px; }
.steps p { color: var(--dune); font-size: .93rem; margin-top: 4px; }
.week { margin-top: 30px; color: var(--dune); }
.week b { color: var(--moon); font-weight: 600; }

/* 7 · promises */
.prom { display: grid; gap: 14px; margin-top: 44px; }
@media (min-width: 760px) { .prom { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .prom { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pr { padding: 26px; border-radius: 22px; border: 1px solid var(--hair); background: var(--night-2); }
.pr--main { border-color: rgba(231,205,146,.45); background: linear-gradient(135deg, rgba(231,205,146,.10), var(--night-2) 70%); }
@media (min-width: 1040px) { .pr--main { grid-row: span 2; display: flex; flex-direction: column; justify-content: center; } }
.pr small { color: var(--gold); font-size: .8rem; }
.pr h3 { font: 700 1.35rem/1.35 Thmanyah, serif; margin-top: 6px; }
.pr--main h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.pr p { color: var(--dune); font-size: .93rem; margin-top: 8px; }
.pr a { color: var(--gold); }

/* 8 · tools, 9 · after launch */
.cards3 { display: grid; gap: 14px; margin-top: 40px; }
@media (min-width: 860px) { .cards3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tool { display: flex; flex-direction: column; gap: 8px; padding: 26px; border-radius: 22px; border: 1px solid var(--hair); transition: border-color .3s; }
.tool:hover { border-color: rgba(231,205,146,.4); }
.tool svg { width: 34px; height: 34px; color: var(--gold); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tool h3 { font: 700 1.3rem/1.3 Thmanyah, serif; margin-top: 6px; }
.tool p { color: var(--dune); font-size: .93rem; }
.tool span { margin-top: auto; padding-top: 8px; color: var(--gold); font-weight: 600; font-size: .92rem; }
.after { display: grid; gap: 14px; margin-top: 40px; }
@media (min-width: 860px) { .after { grid-template-columns: 1fr 1fr; } }
.after a { display: block; padding: 30px; border-radius: 22px; background: var(--night-2); border: 1px solid var(--hair); transition: border-color .3s; }
.after a:hover { border-color: rgba(231,205,146,.4); }
.after b { font: 900 1.6rem/1.2 Thmanyah, serif; }
.after p { color: var(--dune); margin-top: 8px; font-size: .95rem; }
.quiet { display: inline-block; margin-top: 18px; color: var(--dune); font-size: .93rem; border-bottom: 1px solid var(--hair-2); }
.quiet:hover { color: var(--gold); }

/* 10 · faq */
.faq { margin-top: 40px; display: grid; gap: 10px; max-width: 900px; }
.faq details { border-radius: 18px; border: 1px solid var(--hair); background: var(--night-2); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 20px 22px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--hair-2); color: var(--gold); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 22px 20px; color: var(--dune); font-size: .95rem; max-width: 70ch; }
.faq a { color: var(--gold); }

/* 11 · articles */
.arts { display: grid; gap: 14px; margin-top: 40px; }
@media (min-width: 860px) { .arts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.art { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 22px; border: 1px solid var(--hair); min-height: 190px; transition: border-color .3s; }
.art:hover { border-color: rgba(231,205,146,.4); }
.art small { color: var(--gold); font-size: .8rem; }
.art h3 { font: 700 1.25rem/1.45 Thmanyah, serif; }
.art span { margin-top: auto; color: var(--dune); font-size: .9rem; }

/* 12 · quote */
.quote { display: grid; gap: 34px; padding: clamp(28px, 5vw, 60px); border-radius: 30px; background: radial-gradient(80% 120% at 85% 0%, rgba(231,205,146,.10), transparent 60%), var(--night-2); border: 1px solid var(--hair); }
@media (min-width: 960px) { .quote { grid-template-columns: .9fr 1.1fr; align-items: start; } }
.quote .contact { display: grid; gap: 10px; margin-top: 22px; color: var(--dune); }
.quote .contact a:hover { color: var(--gold); }
form { display: grid; gap: 12px; }
label { font-size: .88rem; color: var(--dune); }
input, textarea, select { width: 100%; font: inherit; color: var(--moon); background: var(--night); border: 1px solid var(--hair-2); border-radius: 14px; padding: 13px 16px; }
input:focus, textarea:focus { outline: none; border-color: var(--gold); }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opts input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opts label { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--hair-2); color: var(--moon); cursor: pointer; font-size: .9rem; }
.opts input:checked + label { border-color: var(--gold); background: rgba(231,205,146,.12); color: var(--gold); }
.opts input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 2px; }
.sent { display: none; color: var(--gold); }
.foot { padding: 40px var(--gut) 50px; border-top: 1px solid var(--hair); color: var(--dune-2); font-size: .88rem; text-align: center; }


/* ── quiet motion ── */
/* hero: the headline rises word by word, then one gold sheen passes over «يشتغل ويبيع» */
.h1 .w { display: inline-block; opacity: 0; transform: translateY(.45em); animation: wup .9s var(--ease) forwards; }
@keyframes wup { to { opacity: 1; transform: none; } }
.h1 em { background: linear-gradient(100deg, var(--gold) 0 40%, #fff6dc 50%, var(--gold) 60% 100%); background-size: 260% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
.h1 em.w { animation: wup .9s var(--ease) forwards, sheen 2.2s var(--ease) 1.4s forwards; }
@keyframes sheen { to { background-position: 0 0; } }
.hero__copy > :not(.h1) { opacity: 0; transform: translateY(16px); animation: wup .9s var(--ease) forwards; }
.hero__copy > .k { animation-delay: .1s; } .hero__copy > .lead { animation-delay: .75s; } .hero__copy > .chips { animation-delay: .9s; } .hero__copy > .btns { animation-delay: 1.05s; } .hero__copy > .guar { animation-delay: 1.2s; }
/* kickers: a short gold rule grows before the label */
.k.rv::before { content: ""; width: 0; height: 1.5px; background: var(--gold); transition: width .8s var(--ease) .2s; }
.k.rv.in::before { width: 22px; }
/* staggered grids */
.types > .rv, .inc > .rv, .work > .rv, .prom > .rv, .cards3 > .rv, .arts > .rv, .after > .rv, .faq > .rv { transition-delay: calc(var(--i, 0) * 90ms); }
/* gold light that follows the pointer on cards (desktop) */
.type, .proj, .pr, .tool, .after a, .art { position: relative; isolation: isolate; }
.type::after, .proj::after, .pr::after, .tool::after, .after a::after, .art::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .4s;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(231,205,146,.10), transparent 60%); }
@media (hover: hover) { .type:hover::after, .proj:hover::after, .pr:hover::after, .tool:hover::after, .after a:hover::after, .art:hover::after { opacity: 1; } }
/* work shots: the page scrolls slowly on hover to show more of the site */
.proj__shot img { object-position: 50% 0; transition: object-position 3.2s cubic-bezier(.4,0,.2,1); }
@media (hover: hover) { .proj:hover .proj__shot img { object-position: 50% 100%; transform: none; } }
/* process: the line draws, the circles arrive in order */
@media (min-width: 980px) { .steps::before { transform: scaleX(0); transform-origin: right; transition: transform 1.6s var(--ease) .2s; } .steps.in::before { transform: none; } }
.steps li::before { transform: scale(.4); opacity: 0; transition: transform .6s var(--ease), opacity .6s; transition-delay: calc(var(--i, 0) * 180ms + .3s); }
.steps.in li::before { transform: none; opacity: 1; }
/* guarantee: a slow gold glint travels round its border */
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.pr--main::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--a), rgba(231,205,146,.12), rgba(231,205,146,.9) 8%, rgba(231,205,146,.12) 16%, rgba(231,205,146,.12));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: glint 7s linear infinite; }
@keyframes glint { to { --a: 360deg; } }
.faq details p { overflow: hidden; }
/* thread nodes pulse as you reach them */
.node { transition: background .6s; }
.node.on { animation: pulse 1.6s var(--ease) 1; background: var(--gold); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(231,205,146,.6); } 100% { box-shadow: 0 0 0 14px rgba(231,205,146,0); } }
/* gold buttons: a soft sheen on hover */
.btn--gold { position: relative; overflow: hidden; }
.btn--gold::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(120%); transition: transform .8s var(--ease); }
@media (hover: hover) { .btn--gold:hover::after { transform: translateX(-120%); } }
@media (prefers-reduced-motion: reduce) {
  .h1 .w, .hero__copy > :not(.h1) { animation: none !important; opacity: 1; transform: none; }
  .h1 em { background: none; color: var(--gold); }
  .steps::before, .steps li::before { transform: none !important; opacity: 1 !important; transition: none; }
  .pr--main::before, .node.on { animation: none; }
  .proj__shot img { transition: none; }
}

/* ── golden branches: the thread reaches into the sections where a choice or a promise sits ── */
.twigs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.twigs path { fill: none; stroke: rgba(231,205,146,.42); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--ease), stroke .35s, stroke-width .35s; transition-delay: var(--d, 0s), 0s, 0s; }
.twigs circle { fill: var(--night); stroke: rgba(231,205,146,.6); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.3);
  transition: opacity .5s, transform .6s var(--ease), fill .35s; transition-delay: var(--d, 0s); }
.twigs.on path { stroke-dashoffset: 0; }
.twigs.on circle { opacity: 1; transform: none; }
.twigs .hot { stroke: var(--gold); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(231,205,146,.55)); }
.twigs circle.hot { fill: var(--gold); }
/* the process line is the thread itself once the branch reaches it */
@media (min-width: 980px) { .steps.wired::before { background: linear-gradient(90deg, rgba(231,205,146,.25), rgba(231,205,146,.75)); height: 1.5px; } }
@media (prefers-reduced-motion: reduce) { .twigs path, .twigs circle { transition: none; } }

/* reveal */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }


/* ───────── shared additions for the whole site ───────── */
/* nav: services dropdown */
.dd { position: relative; }
.dd > button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--dune); }
.dd > button:hover, .dd > button[aria-expanded="true"], .dd.cur > button { color: var(--moon); }
.dd > button:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 6px; }
.dd__panel { position: absolute; top: calc(100% + 18px); inset-inline-start: -24px; width: 620px; padding: 14px; border-radius: 20px; background: rgba(10,20,26,.98); border: 1px solid var(--hair-2);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.9); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .25s var(--ease), visibility 0s .25s; }
.dd__panel::before { content: ""; position: absolute; inset-inline: 0; top: -20px; height: 20px; }
.dd:hover .dd__panel, .dd:focus-within .dd__panel, .dd.open .dd__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dd__panel a { display: grid; grid-template-columns: 34px 1fr; gap: 2px 12px; align-items: center; padding: 12px; border-radius: 14px; color: var(--moon); }
.dd__panel a:hover { background: rgba(231,205,146,.07); }
.dd__panel svg { grid-row: span 2; width: 28px; height: 28px; color: var(--gold); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dd__panel b { font-weight: 600; font-size: .95rem; }
.dd__panel small { color: var(--dune-2); font-size: .78rem; line-height: 1.5; }
.dd__all { grid-column: 1 / -1; display: flex !important; justify-content: center; gap: 8px; border-top: 1px solid var(--hair); border-radius: 0 0 12px 12px !important; margin-top: 6px; color: var(--gold) !important; font-weight: 600; }
.bar nav { align-items: center; }
.bar__menu { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--hair-2); background: none; color: var(--moon); cursor: pointer; }
.bar__menu span { display: block; width: 18px; height: 1.5px; background: currentColor; box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor; }
@media (min-width: 1000px) { .bar__menu { display: none; } }
@media (max-width: 999px) { .bar__cta { display: none; } .bar { justify-content: space-between; } }
.drawer { position: fixed; inset: 0; z-index: 60; background: var(--night); padding: calc(18px + env(safe-area-inset-top, 0px)) var(--gut) 40px; overflow: auto; display: none; }
.drawer.open { display: block; }
.drawer__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.drawer__close { all: unset; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--hair-2); font-size: 1.4rem; }
.drawer h4 { color: var(--gold); font-size: .82rem; font-weight: 500; margin: 18px 0 6px; }
.drawer a { display: block; padding: 11px 0; font: 700 1.35rem/1.4 Thmanyah, serif; border-bottom: 1px solid var(--hair); }
.drawer .svcs a { font: 500 1.02rem/1.5 Readex, sans-serif; color: var(--dune); }
.drawer .btn { margin-top: 26px; width: 100%; font: 600 1rem Readex, sans-serif; border: 0; }

/* fixed bar on phones: quote + WhatsApp, after the hero */
.mbar { position: fixed; z-index: 40; inset-inline: 0; bottom: 0; display: none; gap: 10px; padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(6,14,18,.92); backdrop-filter: blur(12px); border-top: 1px solid var(--hair);
  transform: translateY(110%); transition: transform .45s var(--ease); }
.mbar.on { transform: none; }
.mbar .btn { flex: 1; min-height: 48px; padding: 0 12px; font-size: .92rem; }
@media (max-width: 999px) { .mbar { display: flex; } body { padding-bottom: 0; } }

/* footer */
.foot { text-align: start; padding: 64px var(--gut) 40px; }
.foot__in { width: min(var(--max), 100%); margin-inline: auto; display: grid; gap: 34px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .foot__in { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot__brand p { color: var(--dune); margin-top: 12px; max-width: 36ch; }
.foot h4 { color: var(--moon); font-weight: 600; font-size: .95rem; margin-bottom: 12px; }
.foot nav { display: grid; gap: 8px; color: var(--dune); font-size: .9rem; }
.foot nav a:hover { color: var(--gold); }
.foot__legal { width: min(var(--max), 100%); margin: 40px auto 0; padding-top: 22px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; justify-content: space-between; color: var(--dune-2); font-size: .84rem; }
.foot__sbc { display: inline-flex; align-items: center; gap: 12px; color: var(--dune); }
.foot__sbc img { height: 34px; width: auto; }
.foot__logo { display: flex; align-items: center; gap: 10px; font: 900 1.4rem/1 Thmanyah, serif; }
.foot__logo svg { width: 40px; color: var(--gold); }

/* page head for hub pages (services, work, tools, about, contact) */
.ph { position: relative; padding-block: clamp(60px, 9vw, 120px) clamp(30px, 5vw, 60px); overflow: hidden; }
.ph::before { content: ""; position: absolute; inset: -30% auto auto -10%; width: 60vw; height: 60vw; background: radial-gradient(closest-side, rgba(231,205,146,.08), transparent 70%); pointer-events: none; }
.ph .h1 { font-size: clamp(2.3rem, 6vw, 4.4rem); max-width: 18ch; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; color: var(--dune-2); font-size: .85rem; margin-bottom: 14px; }
.crumbs a:hover { color: var(--gold); }

/* service hero without screenshots: a large faint mark of the service behind the text */
.shero { position: relative; padding-block: clamp(70px, 11vw, 150px) clamp(60px, 8vw, 110px); overflow: hidden; }
.shero__mark { position: absolute; inset-inline-end: -6vw; top: 50%; width: min(56vw, 640px); height: auto; transform: translateY(-50%); color: rgba(231,205,146,.07); fill: none; stroke: currentColor; stroke-width: .7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.shero .hero__copy { position: relative; max-width: 760px; }
@media (max-width: 760px) { .shero__mark { width: 90vw; inset-inline-end: -30vw; opacity: .7; } }

/* home: falcon film hero */
.fhero { position: relative; height: 430vh; }
@media (orientation: portrait) { .fhero { height: 370vh; } }
.fstage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--night); }
#film { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fvig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 50%, rgba(6,14,18,0) 55%, rgba(6,14,18,.85) 100%); }
.fdim { position: absolute; inset: 0; background: var(--night); opacity: 0; pointer-events: none; }
.fintro { position: absolute; inset-inline: 0; bottom: calc(9vh + env(safe-area-inset-bottom, 0px)); text-align: center; pointer-events: none; color: var(--dune); }
.cue { width: 22px; height: 36px; margin: 14px auto 0; border: 1.5px solid rgba(233,237,236,.5); border-radius: 12px; position: relative; }
.cue::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--gold); animation: cue 1.6s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(10px); opacity: 0; } }
#fmark { position: absolute; left: 0; top: 0; overflow: visible; color: var(--gold); pointer-events: none; opacity: 0; transform-origin: 0 0; }
#fmark .almond { stroke-dasharray: 300; stroke-dashoffset: 300; stroke-linejoin: round; stroke-linecap: round; }
.fhead { position: absolute; inset-inline: 0; top: 52%; text-align: center; padding-inline: 20px; opacity: 0; pointer-events: none; }
.fhead .h1 { font-size: clamp(2.4rem, 6.6vw, 5.4rem); max-width: 16ch; margin-inline: auto; }
.fhead .lead { margin-inline: auto; max-width: 48ch; }
.fhead .btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; pointer-events: auto; }

/* services grid (home + services hub): journey order, numbered because the order is the story */
.svc { display: grid; gap: 14px; margin-top: 44px; counter-reset: v; }
@media (min-width: 700px) { .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .svc { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.svc a { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 230px; padding: 26px; border-radius: 22px; background: var(--night-2); border: 1px solid var(--hair); transition: border-color .3s, transform .35s var(--ease); counter-increment: v; isolation: isolate; }
.svc a:hover { border-color: rgba(231,205,146,.4); transform: translateY(-4px); }
.svc svg { width: 34px; height: 34px; color: var(--gold); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.svc h3 { font: 700 1.4rem/1.3 Thmanyah, serif; margin-top: 4px; }
.svc p { color: var(--dune); font-size: .93rem; }
.svc span { margin-top: auto; color: var(--gold); font-weight: 600; font-size: .9rem; }
.svc a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(231,205,146,.10), transparent 60%); }
@media (hover: hover) { .svc a:hover::after { opacity: 1; } }
.unsure { margin-top: 22px; color: var(--dune); }
.unsure a { color: var(--gold); border-bottom: 1px solid rgba(231,205,146,.35); }

/* process toggle (home) */
.tog { display: inline-flex; gap: 4px; padding: 4px; margin-top: 26px; border-radius: 999px; border: 1px solid var(--hair-2); }
.tog button { all: unset; cursor: pointer; padding: 9px 18px; border-radius: 999px; font-size: .92rem; color: var(--dune); }
.tog button[aria-pressed="true"] { background: var(--gold); color: var(--night); font-weight: 600; }
.tog button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.steps[hidden] { display: none !important; }

/* special sections */
.cmp { display: grid; gap: 14px; margin-top: 40px; }
@media (min-width: 860px) { .cmp { grid-template-columns: 1fr 1fr; } }
.cmp > div { padding: 28px; border-radius: 22px; border: 1px solid var(--hair); background: var(--night-2); }
.cmp h3 { font: 900 1.6rem/1.2 Thmanyah, serif; color: var(--gold); }
.cmp ul { list-style: none; margin-top: 16px; display: grid; gap: 10px; }
.cmp li { display: flex; gap: 10px; color: var(--dune); }
.cmp li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 11px; border-radius: 50%; background: var(--gold); }
.flows { display: grid; gap: 12px; margin-top: 40px; }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--hair); background: var(--night-2); }
.flow span { padding: 8px 14px; border-radius: 12px; background: var(--night-3); font-size: .95rem; }
.flow i { font-style: normal; color: var(--gold); }
.plats { display: grid; gap: 12px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.plats div { padding: 22px; border-radius: 18px; border: 1px solid var(--hair); background: var(--night-2); }
.plats b { display: block; font: 700 1.3rem/1.3 Thmanyah, serif; }
.plats span { color: var(--dune); font-size: .9rem; }
.note-box { margin-top: 34px; padding: 26px 28px; border-radius: 22px; border: 1px solid rgba(231,205,146,.3); background: linear-gradient(135deg, rgba(231,205,146,.07), transparent); color: var(--dune); max-width: 860px; }
.bsteps { display: grid; gap: 14px; margin-top: 40px; counter-reset: b; }
@media (min-width: 860px) { .bsteps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bsteps li { list-style: none; counter-increment: b; padding: 24px; border-radius: 20px; border: 1px solid var(--hair); background: var(--night-2); }
.bsteps li::before { content: counter(b, arabic-indic); color: var(--gold); font: 700 1.1rem Thmanyah, serif; }
.bsteps h3 { font: 700 1.25rem/1.3 Thmanyah, serif; margin-top: 6px; }
.bsteps p { color: var(--dune); font-size: .92rem; margin-top: 4px; }

/* project page */
.facts { display: grid; gap: 12px; margin-top: 30px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); max-width: 820px; }
.facts div { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--hair); background: var(--night-2); }
.facts small { display: block; color: var(--dune-2); font-size: .8rem; }
.facts b { font: 700 1.2rem/1.4 Thmanyah, serif; }
.gal { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 900px) { .gal { grid-template-columns: 1fr 1fr; } }
.gal figure { border-radius: 18px; overflow: hidden; border: 1px solid var(--hair-2); background: var(--night-2); }
.gal img { width: 100%; height: auto; }
.gal figcaption { padding: 12px 16px; color: var(--dune); font-size: .88rem; }
.phones { display: flex; gap: 16px; margin-top: 30px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.phones figure { flex: 0 0 auto; width: min(220px, 60vw); border-radius: 22px; overflow: hidden; border: 1px solid var(--hair-2); scroll-snap-align: start; }
.built { list-style: none; display: grid; gap: 10px; margin-top: 24px; max-width: 760px; }
.built li { display: flex; gap: 12px; padding: 14px 18px; border-radius: 14px; background: var(--night-2); border: 1px solid var(--hair); }
.built li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 6px; border-radius: 50%; background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23060e12' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.proj__links { display: flex; gap: 14px; margin-top: auto; padding-top: 12px; }
.proj__links a { color: var(--gold); font-weight: 600; font-size: .92rem; }
.proj__links a + a { color: var(--dune); }

/* about + contact */
.story { display: grid; gap: 30px; margin-top: 30px; }
@media (min-width: 900px) { .story { grid-template-columns: 1fr 1fr; gap: 60px; } }
.story p { color: var(--dune); }
.verify { display: grid; gap: 12px; margin-top: 30px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.verify div { padding: 20px; border-radius: 18px; border: 1px solid var(--hair); background: var(--night-2); }
.verify small { color: var(--dune-2); font-size: .82rem; display: block; }
.verify b { font-weight: 600; direction: ltr; unicode-bidi: isolate; }
.cinfo { display: grid; gap: 12px; margin-top: 26px; }
.cinfo a, .cinfo div { display: grid; gap: 2px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--hair); background: var(--night-2); }
.cinfo small { color: var(--dune-2); font-size: .8rem; }
.cinfo b { font-weight: 600; }
.cinfo a:hover { border-color: rgba(231,205,146,.4); }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ── launch layer: live forms, English, phone-first fixes from the four reviews ── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sr-only:focus { position: fixed; top: 8px; inset-inline-start: 8px; width: auto; height: auto; clip: auto; z-index: 99; background: var(--gold); color: var(--night); padding: 8px 14px; border-radius: 10px; }
button { font: inherit; color: inherit; }
.ltr { direction: ltr; unicode-bidi: isolate; }

/* western digits everywhere, one system */
.steps li::before { content: counter(s); }
.bsteps li::before { content: counter(b); }

/* web-design hero: the wall of work stays behind the words */
.hero--strip { padding-block: clamp(90px, 13vw, 170px); }
.hero--strip .hero__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.hero--strip .hv-a { display: flex; opacity: .2; filter: blur(2px) saturate(.6); -webkit-mask-image: radial-gradient(75% 80% at 50% 50%, transparent 25%, #000 75%); mask-image: radial-gradient(75% 80% at 50% 50%, transparent 25%, #000 75%); }
.hero__copy--c { display: flex; flex-direction: column; align-items: center; max-width: 900px; }
.hero__copy--c .chips, .hero__copy--c .btns { justify-content: center; }
.hero__copy--c .guar { text-align: start; }

/* home film: the first frame says what we do, and offers the way in */
.fintro { text-shadow: 0 2px 18px rgba(6,14,18,.95), 0 0 2px rgba(6,14,18,.9); padding-inline: 20px; }
.fintro::before { content: ""; position: absolute; inset: -40px -10vw -30px; z-index: -1; background: radial-gradient(60% 70% at 50% 60%, rgba(6,14,18,.72), transparent 75%); }
.fintro__big { font: 900 clamp(1.5rem, 3.6vw, 2.4rem)/1.3 Thmanyah, serif; color: var(--moon); }
.fintro__what { margin: 6px auto 0; max-width: 40ch; color: var(--moon); opacity: .86; font-size: clamp(.92rem, 1.6vw, 1.05rem); }
.fintro__btn { pointer-events: auto; margin-top: 18px; min-height: 46px; text-shadow: none; }
.fhead .k { justify-content: center; }
html:not(.js) .fhead { opacity: 1; pointer-events: auto; }
.fhero { height: 100vh; height: 100svh; min-height: 520px; }
#film { object-fit: cover; background: var(--night); }
.fstill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.fstill.on { opacity: 1; }
.fhead .cue { margin-top: 30px; }
@media (orientation: landscape) { .fhead { top: 39%; } .fhead .cue { margin-top: 22px; } }
@media (max-width: 999px) { .fintro { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 480px) { .fhead { top: 44%; } .fhead .h1 { font-size: clamp(2rem, 9.4vw, 3rem); max-width: none; } .fhead .lead { font-size: .95rem; } .fhead .btns .btn { min-height: 46px; padding: 0 20px; } }

/* inner page heads: copy and a visual, so wide screens are not half empty */
.ph--vis .wrap { display: grid; gap: 34px; align-items: center; }
@media (min-width: 960px) { .ph--vis .wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 60px; } }
.ph__vis { min-width: 0; }
.ph__icons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ph__icons span { display: grid; justify-items: center; gap: 8px; padding: 18px 8px; border-radius: 18px; border: 1px solid var(--hair); background: var(--night-2); text-align: center; }
.ph__icons svg { width: 30px; height: 30px; color: var(--gold); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ph__icons b { font-weight: 500; font-size: .8rem; color: var(--dune); line-height: 1.4; }
.ph__stack { position: relative; aspect-ratio: 16 / 12; }
.ph__stack img { position: absolute; width: 78%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 16px; border: 1px solid var(--hair-2); box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); }
.ph__stack img:nth-child(1) { inset-inline-end: 0; top: 0; }
.ph__stack img:nth-child(2) { inset-inline-start: 0; top: 22%; }
.ph__stack img:nth-child(3) { inset-inline-end: 10%; top: 44%; }
.ph__mark { display: grid; place-items: center; }
.ph__mark svg { width: min(100%, 340px); color: var(--gold); opacity: .9; filter: drop-shadow(0 0 40px rgba(231,205,146,.18)); }
.ph__shot { width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--hair-2); box-shadow: 0 30px 70px -24px rgba(0,0,0,.75); }
.ph--proj .facts { grid-column: 1 / -1; max-width: none; margin-top: 6px; }
.ph--proj .btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
@media (max-width: 959px) { .ph__icons, .ph__stack, .ph__mark { display: none; } .ph--vis .ph__vis:not(:has(.ph__shot)) { display: none; } }

/* tools */
.cards3--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tool__lang { color: var(--dune-2); font-size: .78rem; }

/* quote block: what happens next, how to reach us, and the form */
.nxt { margin-top: 26px; padding: 20px 22px; border-radius: 20px; border: 1px solid var(--hair); background: rgba(6,14,18,.4); }
.nxt__t { color: var(--gold); font-size: .88rem; margin-bottom: 10px; }
.nxt ol { list-style: none; display: grid; gap: 10px; counter-reset: n; }
.nxt li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0 10px; counter-increment: n; font-size: .9rem; line-height: 1.6; }
.nxt li::before { content: counter(n); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(231,205,146,.5); color: var(--gold); display: grid; place-items: center; font-size: .8rem; }
.nxt b { font-weight: 600; }
.nxt span { color: var(--dune); }
.reach { display: grid; gap: 8px; margin-top: 18px; }
.reach a { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--moon); }
.reach a:hover { color: var(--gold); }
.reach svg { width: 22px; height: 22px; flex: none; color: var(--gold); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.trust { margin-top: 14px; color: var(--dune-2); font-size: .82rem; }
.lead .fld, form.lead .fld { display: grid; gap: 6px; min-width: 0; }
form.lead { gap: 14px; }
.f2 { display: grid; gap: 14px; }
@media (min-width: 560px) { .f2 { grid-template-columns: 1fr 1fr; } }
form.lead input::placeholder, form.lead textarea::placeholder { color: var(--dune-2); opacity: .7; }
.fld.bad input { border-color: #e39a8a; }
.fld .err { color: #eeb0a3; font-size: .82rem; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.fbtns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.fbtns .btn { flex: 1 1 200px; }
.fbtns .btn[disabled] { opacity: .6; pointer-events: none; }
.consent { color: var(--dune-2); font-size: .8rem; }
.consent a { color: var(--gold); }
.fstatus { color: var(--gold); font-size: .9rem; min-height: 1em; }
.fstatus:empty { display: none; }

/* contact page: talk first, then the form */
.sec--tight { padding-top: 10px; }
.cbtns { display: flex; flex-wrap: wrap; gap: 10px; }
.cbtns .btn { flex: 1 1 180px; }
.cbtns svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* privacy */
.prose { max-width: 72ch; }
.prose h2 { font: 700 1.4rem/1.4 Thmanyah, serif; margin-top: 34px; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--dune); margin-top: 10px; }

/* chrome */
.bar nav .lang { color: var(--dune); }
.bar__logo { gap: 12px; }
.drawer { opacity: 0; transition: opacity .25s ease; }
.drawer.open { opacity: 1; }
.drawer__end { position: sticky; bottom: calc(-40px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 10px; padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0px)); margin-top: 18px; background: var(--night); }
.drawer__end .btn { margin-top: 0; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: 0 22px; border-bottom: 0; }
.drawer .drawer__lang { border: 0; text-align: center; font: 500 1rem Readex, sans-serif; color: var(--dune); padding: 8px 0; }
.mbar .mbar__call { flex: 0 0 52px; padding: 0; }
.mbar__call svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 999px) { body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } }
.foot nav a { padding-block: 5px; }
.foot__reach { display: grid; gap: 4px; margin-top: 14px; }
.foot__reach a { color: var(--moon); padding-block: 4px; }
.foot__reach a:hover, .foot nav a:hover { color: var(--gold); }
.crumbs a { padding-block: 8px; }
@media (max-width: 700px) {
  .foot__in { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
  .foot__sbc { flex-direction: column; align-items: flex-start; }
}

/* phones: compact, app-like */
@media (max-width: 760px) { .thread, .node { display: none; } }
@media (max-width: 700px) {
  .sec { padding-block: clamp(48px, 12vw, 90px); }
  .svc { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
  .svc a { min-height: 0; padding: 18px 14px; gap: 8px; }
  .svc a p, .svc a span { display: none; }
  .svc a h3 { font-size: 1.05rem; line-height: 1.35; }
  .svc svg { width: 28px; height: 28px; }
  .prom, .arts { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 8px; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scrollbar-width: none; }
  .prom > *, .arts > * { flex: 0 0 82%; scroll-snap-align: start; }
  .prom::-webkit-scrollbar, .arts::-webkit-scrollbar { display: none; }
  .hero--strip { padding-block: 70px 60px; }
  .hero--strip .chips { justify-content: flex-start; text-align: start; }
  .quote { padding: 22px 18px; border-radius: 22px; }
}

/* left-to-right numbers inside right-to-left grids keep to the start edge */
.foot__reach a, .cinfo .ltr, .verify b { justify-self: start; }

/* headings one step quieter (Omar, 2026-10-12: «خط العناوين كبير شوي») */
.h1 { font-size: clamp(2.15rem, 5.4vw, 4.1rem); line-height: 1.12; }
.ph .h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.h2 { font-size: clamp(1.6rem, 3.3vw, 2.45rem); }
.fhead .h1 { font-size: clamp(2.1rem, 5.2vw, 4.3rem); }
.pr--main h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.after b { font-size: 1.4rem; }
@media (max-width: 480px) { .fhead .h1 { font-size: clamp(1.85rem, 8.4vw, 2.6rem); } }


/* ── direction A (2026-10-12): a frame of our falcon film behind every inner page head ── */
.fh { position: relative; overflow: hidden; isolation: isolate; min-height: min(78vh, 760px); display: flex; align-items: flex-end; padding-block: clamp(120px, 15vw, 180px) clamp(48px, 6vw, 80px); }
.fh::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to top, var(--night) 0%, rgba(6,14,18,0) 42%), linear-gradient(to bottom, rgba(6,14,18,.65) 0%, rgba(6,14,18,0) 22%); }
.fh .wrap { position: relative; }
.fh__img { position: absolute; inset-block: 0; inset-inline-end: 0; width: 74%; z-index: -2; -webkit-mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,.55) 26%, #000 52%); mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,.55) 26%, #000 52%); }
[dir="ltr"] .fh__img { -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 26%, #000 52%); mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 26%, #000 52%); }
.fh__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; animation: fhkb 28s ease-in-out infinite alternate; }
@keyframes fhkb { from { transform: scale(1.02); } to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .fh__img img { animation: none; } }
.fh .hero__copy, .fh .ph__copy { max-width: 640px; }
.fh .lead { color: #b6c6ca; }
.ph.fh { padding-block: clamp(120px, 15vw, 180px) clamp(40px, 5vw, 64px); }
.ph.fh::before { width: auto; height: auto; inset: 0; border-radius: 0; }
@media (max-width: 760px) {
  .fh, .ph.fh { display: block; min-height: 0; padding: 0 0 clamp(36px, 9vw, 56px); }
  .fh__img { position: relative; display: block; width: 100%; height: 68vw; max-height: 420px; inset: auto; -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 45%); mask-image: linear-gradient(to top, transparent 0%, #000 45%); }
  [dir="ltr"] .fh__img { -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 45%); mask-image: linear-gradient(to top, transparent 0%, #000 45%); }
  .fh__img img { object-position: 50% 35%; }
  .fh .wrap { margin-top: -16vw; }
  .fh::before { display: none; }
}
/* text side stays readable even when a tool or a long lead runs over the frame */
.fh::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to left, rgba(6,14,18,.82) 0%, rgba(6,14,18,.55) 38%, rgba(6,14,18,0) 66%); }
[dir="ltr"] .fh::after { background: linear-gradient(to right, rgba(6,14,18,.82) 0%, rgba(6,14,18,.55) 38%, rgba(6,14,18,0) 66%); }
@media (max-width: 760px) { .fh::after { display: none; } }

/* every button row breathes away from what sits above it (the film heads lost the old .hero rule) */
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.fh .guar { margin-top: 26px; max-width: 560px; }

/* four projects: two by two on wide screens, so none sits alone on a row */
@media (min-width: 900px) { .work:not(.work--rail):has(> .proj:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* mobile or email: one group, one hint */
.reachby { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 8px; }
.reachby legend { padding: 0; margin-bottom: 8px; font-size: .88rem; color: var(--moon); font-weight: 600; }
.reachby__hint { color: var(--dune-2); font-size: .8rem; }
.reachby__hint.bad { color: #eeb0a3; }

/* buttons drawn as buttons never take the browser default fill */
button { background: none; border: 0; }
button.btn--line, .btn--line { background: transparent; color: var(--moon); border: 1.5px solid var(--hair-2); }
button.btn--line:hover, .btn--line:hover { border-color: var(--gold); color: var(--gold); }
.fbtns [data-wa] { border-color: rgba(231,205,146,.45); }

/* work rail on the service pages: slides sideways, loops, pauses when touched */
.work.work--rail { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scroll-padding-inline: var(--gut); padding-bottom: 6px; scrollbar-width: none; }
.work--rail::-webkit-scrollbar { display: none; }
.work--rail > .proj { scroll-snap-align: start; }
.work--rail > .proj:hover { transform: none; }
@media (min-width: 700px) { .work.work--rail { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (min-width: 1000px) { .work.work--rail { grid-auto-columns: calc((100% - 32px) / 3); margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; } }
.rail__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; }
.rail__nav { display: flex; gap: 10px; }
.rail__btn { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--hair-2); color: var(--moon); font-size: 1.1rem; display: grid; place-items: center; cursor: pointer; transition: border-color .25s, color .25s; }
.rail__btn:hover { border-color: var(--gold); color: var(--gold); }
.more { color: var(--gold); border-bottom: 1px solid rgba(231,205,146,.35); padding-bottom: 2px; font-size: .95rem; }
.more:hover { border-bottom-color: var(--gold); }

/* gold gradient words: text clipped to the background box lost the tops and tails of Arabic letters; give the box room without moving the line */
.h1 em { padding: .16em .06em .22em; margin: -.16em -.06em -.22em; }
.h1 em.w, .h1 .w { padding-block: .16em .22em; margin-block: -.16em -.22em; }

/* the work page: every project in two columns with room for the screenshots */
@media (min-width: 900px) { .work:not(.work--rail) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* English pages mirror every frame so the subject stays clear of the text */
.fh__img:is([data-s="land"], [data-s="perch"], [data-s="back"], [data-s="dive"], [data-s="pair"], [data-s="takeoff"], [data-s="gaze"], [data-s="peak"], [data-s="preen"], [data-s="wakir"], [data-s="profile"], [data-s="glove"]) img { object-position: 12% 45%; }
[dir="ltr"] .fh__img img { animation-name: fhkbr; }
@keyframes fhkbr { from { transform: scale(-1.02, 1.02); } to { transform: scale(-1.08, 1.08); } }
@media (prefers-reduced-motion: reduce) { [dir="ltr"] .fh__img img { animation: none; transform: scaleX(-1); } }

/* project screens: two rails that slide and loop, desktop then phone */
.gal.gal--rail { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 88%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scroll-padding-inline: var(--gut); padding-bottom: 4px; }
.gal--rail::-webkit-scrollbar, .phones--rail::-webkit-scrollbar { display: none; }
.gal--rail > figure { scroll-snap-align: start; }
@media (min-width: 900px) { .gal.gal--rail { grid-auto-columns: calc((100% - 16px) / 2); margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; } }
.phones.phones--rail { margin-top: 34px; scroll-behavior: smooth; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
@media (min-width: 900px) { .phones.phones--rail { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; } }
.phones--rail figure { width: min(250px, 62vw); background: var(--night-2); }
.phones--rail figcaption { padding: 10px 14px; color: var(--dune); font-size: .85rem; border-top: 1px solid var(--hair); }

/* images keep their proportions: the width/height attributes reserve space, they must never stretch a picture (this squashed the phone screens) */
img { height: auto; }
.phones img { width: 100%; height: auto; aspect-ratio: 780 / 1688; object-fit: cover; object-position: top; }


/* page-head effect «ب» (html.fx-b, set by script; reduced motion gets none) */
@keyframes fxIn { from { opacity: 0; filter: brightness(.35) blur(6px); } to { opacity: 1; filter: none; } }
@keyframes fxUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
:is(.fx-a, .fx-b) .fh .fh__img { animation: fxIn 1.6s cubic-bezier(.2,.7,.2,1) both; }
:is(.fx-a, .fx-b) .fh .wrap { animation: fxUp .9s cubic-bezier(.2,.7,.2,1) .35s both; }
@media (min-width: 761px) {
  .fx-b .fh .fh__img { inset-block-start: -16%; transform: translate3d(0, var(--fx-img, 0), 0); will-change: transform; }
  .fx-b .fh .wrap > * { transform: translate3d(0, var(--fx-txt, 0), 0); }
}

/* footer: brand + two link columns (the third column was removed 2026-10-13) */
@media (min-width: 900px) { .foot__in { grid-template-columns: 1.6fr 1fr 1fr; } }

/* phone bar: the quote button keeps its full label (it was squeezed to an equal share and clipped at 320–375px) */
.mbar .btn { min-width: 0; white-space: nowrap; }
.mbar .btn--gold { flex: 0 0 auto; padding: 0 18px; }
.mbar .btn--line:not(.mbar__call) { flex: 1 1 0; padding: 0 10px; }
.mbar:not(:has(.mbar__call)) .btn { flex: 1 1 0; }   /* contact page: two equal buttons */
@media (max-width: 360px) {
  .mbar { gap: 8px; }
  .mbar .btn { font-size: .86rem; }
  .mbar .btn--gold { padding: 0 14px; }
  .mbar .mbar__call { flex-basis: 48px; }
}