@charset "UTF-8";
/* ==========================================================================
   خطاط روعة التصاميم ,, مجد ,,  —  RD AMAZING
   style.css  ·  shared stylesheet  ·  hand-written, no framework
   --------------------------------------------------------------------------
   TABLE OF CONTENTS
   00 · Design tokens (light / dark)
   01 · Reset & document base
   02 · Paper texture
   03 · Typography primitives
   04 · Layout : container / section / section head
   05 · Ornaments : rule, lozenge, crop-marks
   06 · Icons
   07 · Buttons, chips & arrow links
   08 · Image slots (frames)
   09 · Preloader
   10 · Reading progress
   11 · Header & brand
   12 · Burger & side drawer
   13 · Hero + stats
   14 · Products : finder, categories, cards
   15 · Vision 2030 panel
   16 · Clients
   17 · Purpose : pillars, values, final word
   18 · About
   19 · Why us
   20 · Contact : map, hours, reach cards, form
   21 · Footer
   22 · Floating action buttons
   23 · Lightbox
   24 · Work page
   25 · Gallery pages
   26 · Scroll reveal
   27 · Responsive
   28 · Reduced motion & print
   ========================================================================== */


/* ==========================================================================
   00 · DESIGN TOKENS
   ========================================================================== */
:root{
  /* — brand palette (light) — */
  --bg:            #F7F2E9;
  --surface:       #EFE7D8;
  --ink:           #241A10;
  --gold:          #C09A5B;

  /* — derived ink tints — */
  --ink-70:        rgba(36,26,16,.72);
  --ink-55:        rgba(36,26,16,.56);
  --ink-35:        rgba(36,26,16,.36);
  --line:          rgba(36,26,16,.13);
  --line-2:        rgba(36,26,16,.24);
  --gold-12:       rgba(192,154,91,.12);
  --gold-24:       rgba(192,154,91,.26);

  /* — open / closed badge, brand-tuned (no green anywhere) — */
  --open-ink:      #8A6420;
  --open-bg:       rgba(192,154,91,.16);
  --open-line:     rgba(192,154,91,.45);
  --closed-ink:    #4A3521;
  --closed-bg:     rgba(74,53,33,.09);
  --closed-line:   rgba(74,53,33,.28);

  /* — inverted panel (kept dark in both themes) — */
  --panel:         #241A10;
  --panel-2:       #2E2115;
  --on-panel:      #F4EDE0;
  --on-panel-70:   rgba(244,237,224,.74);

  /* — image slot — */
  --slot:          #E8DECB;
  --slot-hatch:    rgba(36,26,16,.05);

  /* — elevation — */
  --sh-1: 0 1px 1px rgba(36,26,16,.04), 0 10px 26px -18px rgba(36,26,16,.45);
  --sh-2: 0 24px 60px -34px rgba(36,26,16,.55);
  --sh-head: 0 1px 0 var(--line), 0 14px 34px -26px rgba(36,26,16,.55);

  /* — type — */
  --f-head:  "Changa", "Segoe UI", Tahoma, sans-serif;
  --f-body:  "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --f-num:   "Marcellus", "Times New Roman", serif;

  --fs-xs:   .78rem;
  --fs-sm:   .875rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   clamp(1.1rem, 1.1rem + .5vw, 1.35rem);
  --fs-h4:   clamp(1.05rem, 1rem + .5vw, 1.22rem);
  --fs-h3:   clamp(1.3rem, 1.1rem + 1.1vw, 1.8rem);
  --fs-h2:   clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
  --fs-h1:   clamp(2.2rem, 1.5rem + 3.6vw, 4rem);

  /* — spacing — */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;
  --gutter: clamp(1.15rem, 4vw, 2.75rem);
  --section-y: clamp(3.75rem, 7vw, 7rem);

  /* — radii — */
  --r-xs: 3px; --r-sm: 6px; --r-md: 10px; --r-lg: 18px; --r-pill: 999px;

  /* — chrome — */
  --h-header: 76px;
  --ease: cubic-bezier(.22,.72,.28,1);
  --dur: .42s;
}

html[data-theme="dark"]{
  --bg:            #171009;
  --surface:       #2B1D12;
  --ink:           #F2EAD9;
  --gold:          #D2A967;

  --ink-70:        rgba(242,234,217,.76);
  --ink-55:        rgba(242,234,217,.58);
  --ink-35:        rgba(242,234,217,.34);
  --line:          rgba(242,234,217,.13);
  --line-2:        rgba(242,234,217,.22);
  --gold-12:       rgba(210,169,103,.12);
  --gold-24:       rgba(210,169,103,.28);

  --panel:         #100B05;
  --panel-2:       #1B120A;
  --on-panel:      #F2EAD9;
  --on-panel-70:   rgba(242,234,217,.72);

  --slot:          #241810;
  --slot-hatch:    rgba(242,234,217,.05);

  --open-ink:      #E2BE81;
  --open-bg:       rgba(210,169,103,.16);
  --open-line:     rgba(210,169,103,.45);
  --closed-ink:    #B99878;
  --closed-bg:     rgba(185,152,120,.12);
  --closed-line:   rgba(185,152,120,.3);

  --sh-1: 0 1px 1px rgba(0,0,0,.3), 0 12px 30px -20px rgba(0,0,0,.9);
  --sh-2: 0 26px 64px -34px rgba(0,0,0,.95);
  --sh-head: 0 1px 0 var(--line), 0 16px 36px -28px rgba(0,0,0,.95);
}

/* English mode swaps the display face; Plex Arabic covers Latin body text */
html[lang="en"]{ --f-head: "Marcellus", "Times New Roman", serif; }


/* ==========================================================================
   01 · RESET & DOCUMENT BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scrollbar-color: var(--gold) transparent;
}

body{
  min-height:100vh;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:var(--fs-base);
  font-weight:400;
  line-height:1.85;
  letter-spacing:0;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
html[lang="en"] body{ line-height:1.72; }

img,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; }
address{ font-style:normal; }
::selection{ background:var(--gold); color:var(--panel); }

/* focus ring — visible, gold, never removed */
:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

/* smooth theme cross-fade, applied only while switching */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after{
  transition: background-color .45s var(--ease),
              border-color .45s var(--ease),
              color .45s var(--ease),
              fill .45s var(--ease) !important;
}

/* scroll offset so anchors never hide under the sticky header */
section[id], [id^="cat-"]{ scroll-margin-top: calc(var(--h-header) + 18px); }

.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
[hidden]{ display:none!important; }
body.is-locked{ overflow:hidden; }


/* ==========================================================================
   02 · PAPER TEXTURE  (a whisper of press grain, never a pattern)
   ========================================================================== */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:0; pointer-events:none;
  background-image:radial-gradient(currentColor 1px, transparent 1.1px);
  background-size:3px 3px;
  color:var(--ink);
  opacity:.035;
}
html[data-theme="dark"] body::before{ opacity:.05; }


/* ==========================================================================
   03 · TYPOGRAPHY PRIMITIVES
   ========================================================================== */
h1,h2,h3,h4{
  font-family:var(--f-head);
  font-weight:700;
  line-height:1.24;
  letter-spacing:-.01em;
}
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4{ font-weight:400; letter-spacing:.005em; }

p{ text-wrap:pretty; }

.eyebrow{
  font-family:var(--f-body);
  font-size:var(--fs-sm);
  font-weight:600;
  letter-spacing:.14em;
  color:var(--gold);
  text-transform:none;
  margin-bottom:var(--s-3);
}
html[lang="en"] .eyebrow{ text-transform:uppercase; letter-spacing:.22em; font-size:var(--fs-xs); }
.eyebrow--on-dark{ color:var(--gold); }


/* ==========================================================================
   04 · LAYOUT
   ========================================================================== */
.container{
  width:min(1200px, 100%);
  margin-inline:auto;
  padding-inline:var(--gutter);
  position:relative;
  z-index:1;
}

.section{
  padding-block:var(--section-y);
  position:relative;
}
.section--surface{
  background:var(--surface);
  border-block:1px solid var(--line);
}

/* section heading block — eyebrow, title and lead all centred as one stack */
.sec-head{
  position:relative;
  max-width:62ch;
  margin-inline:auto;
  margin-bottom:clamp(2.25rem,4.5vw,3.5rem);
  text-align:center;
}
.sec-head__title{
  font-size:var(--fs-h2);
  margin-bottom:var(--s-4);
}
.sec-head__title::after{
  content:"";
  display:block;
  width:64px; height:2px;
  margin:var(--s-4) auto 0;
  background:var(--gold);
}
.sec-head__lead{
  font-size:var(--fs-lg);
  font-weight:300;
  color:var(--ink-70);
  max-width:56ch;
  margin-inline:auto;
}


/* ==========================================================================
   05 · ORNAMENTS
   ========================================================================== */
.orn{
  display:flex; align-items:center; justify-content:center;
  gap:var(--s-3);
  width:min(240px,70%);
  margin:var(--s-5) auto;
}
.orn::before,.orn::after{
  content:""; height:1px; flex:1;
  background:linear-gradient(to var(--orn-dir,right), transparent, var(--gold-24));
}
.orn::after{ --orn-dir:left; }
.orn i{
  width:7px; height:7px;
  border:1px solid var(--gold);
  transform:rotate(45deg);
  flex:none;
}
.orn--start{ margin-inline:0 auto; justify-content:flex-start; width:170px; }
.orn--on-dark::before,.orn--on-dark::after{
  background:linear-gradient(to var(--orn-dir,right), transparent, var(--gold));
  opacity:.5;
}

/* registration / crop marks — a printer's signature detail */
.marks{ position:relative; }
.marks::before,.marks::after{
  content:"";
  position:absolute;
  width:18px; height:18px;
  border:1px solid var(--gold);
  opacity:.5;
  pointer-events:none;
}
.marks::before{
  inset-block-start:-7px; inset-inline-start:-7px;
  border-inline-end-color:transparent; border-block-end-color:transparent;
}
.marks::after{
  inset-block-end:-7px; inset-inline-end:-7px;
  border-inline-start-color:transparent; border-block-start-color:transparent;
}


/* ==========================================================================
   06 · ICONS  (sprite injected by script.js)
   ========================================================================== */
.icon-sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ico{
  width:22px; height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none;
}
.ico--sm{ width:16px; height:16px; stroke-width:1.7; }
.ico--lg{ width:32px; height:32px; stroke-width:1.25; }
/* arrows point along the reading direction */
html[dir="rtl"] .ico--flip,
html[dir="rtl"] .link-arrow .ico,
html[dir="rtl"] .reach__go{ transform:scaleX(-1); }


/* ==========================================================================
   07 · BUTTONS, CHIPS, ARROW LINKS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.9rem 1.9rem;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  font-family:var(--f-head);
  font-size:var(--fs-sm);
  font-weight:600;
  letter-spacing:.02em;
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .3s var(--ease), background-color .3s var(--ease),
             color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
html[lang="en"] .btn{ letter-spacing:.08em; text-transform:uppercase; font-size:var(--fs-xs); }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--gold{
  background:var(--gold); color:#241A10;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}
.btn--gold:hover{ background:#B08947; box-shadow:inset 0 1px 0 rgba(255,255,255,.3), var(--sh-1); }
html[data-theme="dark"] .btn--gold:hover{ background:#E0B979; }

.btn--ink{ background:var(--panel); color:var(--on-panel); }
.btn--ink:hover{ background:var(--panel-2); box-shadow:var(--sh-1); }

.btn--ghost{ border-color:var(--line-2); color:var(--ink); background:transparent; }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); }

.btn--sm{ padding:.65rem 1.25rem; font-size:var(--fs-xs); border-radius:var(--r-pill); }
.btn--wide{ width:100%; padding-block:1.05rem; }

.icon-btn{
  display:inline-grid; place-items:center;
  width:42px; height:42px;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--ink);
  transition:border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease);
}
.icon-btn:hover{ border-color:var(--gold); color:var(--gold); }

/* the "our work for X" link is a button too — pill outline, gold on hover */
.link-arrow{
  display:inline-flex; align-items:center; gap:.45em;
  font-family:var(--f-head);
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--ink-70);
  padding:.65rem 1.25rem;
  border:1px solid var(--line-2);
  border-radius:var(--r-pill);
  transition:color .3s var(--ease), border-color .3s var(--ease),
             gap .3s var(--ease), background-color .3s var(--ease);
}
.link-arrow:hover{ color:var(--gold); border-color:var(--gold); background:var(--gold-12); gap:.8em; }

.chips{
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s-2);
  margin-top:var(--s-4);
}
.chip{
  padding:.5rem 1rem;
  border:1px solid var(--line-2);
  border-radius:var(--r-pill);
  font-size:var(--fs-sm);
  color:var(--ink-70);
  background:transparent;
  transition:all .3s var(--ease);
}
.chip:hover{ border-color:var(--gold); color:var(--gold); background:var(--gold-12); }


/* ==========================================================================
   08 · IMAGE SLOTS
   Every <img> ships empty; the frame draws a refined placeholder until the
   owner pastes a real src.  Filled images fade in over the hatch.
   ========================================================================== */
/* Content images are shown WHOLE — never cropped. The container carries a
   brand surface and a minimum height (so empty slots and portrait/landscape
   mixes still sit in a tidy grid), while the image keeps its true ratio and
   is centred inside whatever space is left.                                 */
.frame,
.client__logo,
.gal-item,
.gal-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surface);
}

/* Logo circles carry no surface of their own — the mark fills them edge to
   edge, so no ring, halo, padding or backing disc ever shows around it.     */
.brand__mark,
.fbrand__mark,
.hero__logo,
.about__art{
  position:relative;
  overflow:hidden;
  border-radius:50%;
  background:none;
}
.brand__mark img,
.fbrand__mark img,
.hero__logo img,
.about__art img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:50%;
  padding:0;
}
.frame{
  min-height:200px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
}

/* the hatch + lozenge placeholder belongs to EMPTY slots only, so it never
   shows through the letterbox margins of a real photograph
   (script.js tags a container .is-empty while its slot has no src)          */
.frame.is-empty,
.client__logo.is-empty,
.gal-item.is-empty,
.gal-hero.is-empty{ background:var(--slot); }

.frame.is-empty::before,
.client__logo.is-empty::before,
.gal-item.is-empty::before,
.gal-hero.is-empty::before{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(
      -45deg, transparent 0 9px, var(--slot-hatch) 9px 10px);
}
.frame.is-empty::after,
.client__logo.is-empty::after,
.gal-item.is-empty::after,
.gal-hero.is-empty::after{
  content:"";
  position:absolute; inset-block-start:50%; inset-inline-start:50%;
  width:14px; height:14px;
  margin:-7px 0 0 -7px;
  border:1px solid var(--gold);
  opacity:.45;
  transform:rotate(45deg);
}

/* True proportions everywhere: the width leads, the height follows, and no
   container ever clips. Whatever room is left over shows the brand surface. */
.frame img, .client__logo img, .gal-item img, .gal-hero img{
  position:relative;
  height:auto;
  max-width:100%;
  object-fit:contain;
  transition:opacity .5s var(--ease);
}

/* grid tiles: the photo spans its column, height follows the true ratio     */
.frame img, .gal-item img{ width:100%; }

/* logos and the gallery hero are never stretched past their own pixels, and
   the hero is bounded in height so a tall portrait cannot swallow the page  */
.client__logo img, .gal-hero img{ width:auto; }
.gal-hero img{ max-height:min(70vh, 640px); }
/* empty slots stay invisible (no broken-image glyph, no alt text bleeding) */
img[src=""], img:not([src]){ opacity:0; }
img[src=""]{ min-height:1px; }

/* a filled slot advertises the lightbox; brand marks keep the link cursor */
img[src]:not([src=""]){ cursor:zoom-in; }
.brand img, .fbrand img{ cursor:pointer; }


/* ==========================================================================
   09 · PRELOADER
   ========================================================================== */
.preloader{
  position:fixed; inset:0;
  z-index:200;
  display:grid; place-items:center;
  background:var(--bg);
  transition:opacity .7s var(--ease), visibility .7s var(--ease);
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__art{ text-align:center; padding-inline:var(--gutter); }
.preloader__logo{ width:min(420px,78vw); height:auto; overflow:visible; }
.preloader__word{
  font-family:var(--f-num);
  font-size:52px;
  letter-spacing:.16em;
  fill:transparent;
  stroke:var(--gold);
  stroke-width:.7;
  stroke-dasharray:340;
  stroke-dashoffset:340;
  animation:draw 1.7s var(--ease) forwards, ink .7s ease 1.35s forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes ink{ to{ fill:var(--gold); } }
.preloader__rule{
  display:block; width:0; height:1px;
  background:var(--gold-24);
  margin:var(--s-4) auto var(--s-3);
  animation:ruleGrow 1.5s var(--ease) .45s forwards;
}
@keyframes ruleGrow{ to{ width:min(300px,60vw); } }
.preloader__cap{
  display:block;
  font-size:var(--fs-xs);
  letter-spacing:.2em;
  color:var(--ink-35);
  opacity:0;
  animation:fadeIn .8s ease .9s forwards;
}
@keyframes fadeIn{ to{ opacity:1; } }


/* ==========================================================================
   10 · READING PROGRESS
   ========================================================================== */
.progress{
  position:fixed; inset-block-start:0; inset-inline:0;
  height:3px; z-index:120;
  background:transparent; pointer-events:none;
}
.progress span{
  display:block; height:100%; width:0;
  background:linear-gradient(to var(--prog-dir,left), var(--gold), rgba(192,154,91,.35));
  box-shadow:0 0 12px var(--gold-24);
}
html[dir="ltr"] .progress span{ --prog-dir:right; }


/* ==========================================================================
   11 · HEADER & BRAND
   ========================================================================== */
.site-header{
  position:sticky; inset-block-start:0;
  z-index:100;
  background:var(--bg);
  border-block-end:1px solid transparent;
  transition:box-shadow .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
}
.site-header.is-stuck{ box-shadow:var(--sh-head); border-block-end-color:var(--line); }
.site-header__inner{
  min-height:var(--h-header);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
}

.brand{ display:flex; align-items:center; gap:.8rem; min-width:0; }
.brand__mark{
  width:48px; height:48px;
  flex:none;
  display:block;
}
.brand__id{ display:flex; flex-direction:column; min-width:0; }
.brand__name{
  font-family:var(--f-head);
  font-size:1.02rem; font-weight:700; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
html[lang="en"] .brand__name{ font-size:.98rem; letter-spacing:.02em; }
.brand__sub{
  font-family:var(--f-num);
  font-size:.66rem; letter-spacing:.34em;
  color:var(--gold);
  line-height:1.4;
}


/* ==========================================================================
   12 · BURGER & SIDE DRAWER
   ========================================================================== */
.burger{
  width:46px; height:46px;
  display:grid; align-content:center; justify-items:center; gap:5px;
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  flex:none;
  transition:border-color .3s var(--ease);
}
.burger:hover{ border-color:var(--gold); }
.burger span{
  display:block; height:1.5px; width:20px;
  background:var(--ink);
  transition:transform .35s var(--ease), opacity .25s var(--ease), width .35s var(--ease);
}
.burger span:nth-child(2){ width:14px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); width:20px; }

.drawer-veil{
  position:fixed; inset:0; z-index:130;
  background:rgba(23,16,9,.55);
  opacity:0;
  transition:opacity var(--dur) var(--ease);
}
.drawer-veil.is-on{ opacity:1; }

.drawer{
  position:fixed;
  inset-block:0;
  inset-inline-end:0;              /* left in Arabic (RTL), right in English */
  z-index:140;
  width:min(370px, 88vw);
  display:flex; flex-direction:column;
  gap:var(--s-5);
  padding:var(--s-5) var(--s-5) var(--s-6);
  background:var(--surface);
  border-inline-start:1px solid var(--line);
  box-shadow:var(--sh-2);
  overflow-y:auto;
  overscroll-behavior:contain;
  transform:translateX(var(--drawer-x,100%));
  transition:transform var(--dur) var(--ease);
}
/* The closed offset is direction-aware. It MUST be scoped to :not(.is-open):
   a bare `html[dir="rtl"] .drawer` rule outranks `.drawer.is-open` on
   specificity and would pin the panel off-screen no matter what JS does.    */
html[dir="rtl"] .drawer:not(.is-open){ --drawer-x:-100%; }
html[dir="ltr"] .drawer:not(.is-open){ --drawer-x:100%; }
.drawer.is-open{ --drawer-x:0; }

.drawer__top{ display:flex; align-items:center; justify-content:space-between; }
.drawer__wordmark{
  font-family:var(--f-num);
  font-size:.82rem; letter-spacing:.32em; color:var(--gold);
}

.drawer__switches{ display:grid; gap:var(--s-2); }
.switch{
  display:flex; align-items:center; gap:.7rem;
  width:100%;
  padding:.75rem .9rem;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--bg);
  font-size:var(--fs-sm);
  text-align:start;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.switch:hover{ border-color:var(--gold); }
.switch__ico{ color:var(--gold); display:flex; }
.switch__label{ flex:1; }
.switch__track{
  width:40px; height:22px; flex:none;
  border-radius:var(--r-pill);
  background:var(--line-2);
  position:relative;
  transition:background-color .3s var(--ease);
}
.switch__track i{
  position:absolute; inset-block-start:3px; inset-inline-start:3px;
  width:16px; height:16px; border-radius:50%;
  background:var(--bg);
  transition:transform .32s var(--ease);
}
.switch[aria-pressed="true"] .switch__track{ background:var(--gold); }
html[dir="rtl"] .switch[aria-pressed="true"] .switch__track i{ transform:translateX(-18px); }
html[dir="ltr"] .switch[aria-pressed="true"] .switch__track i{ transform:translateX(18px); }
.switch__pill{
  font-family:var(--f-num);
  font-size:.72rem; letter-spacing:.16em;
  padding:.25rem .55rem;
  border:1px solid var(--gold-24);
  border-radius:var(--r-xs);
  color:var(--gold);
}

.drawer__nav{ display:grid; }
.drawer__nav a{
  display:block;
  padding:.72rem 0;
  border-block-end:1px solid var(--line);
  font-family:var(--f-head);
  font-size:1.05rem; font-weight:600;
  position:relative;
  transition:color .3s var(--ease), padding-inline-start .3s var(--ease);
}
.drawer__nav a::before{
  content:"";
  position:absolute; inset-block-start:50%; inset-inline-start:0;
  width:0; height:1px; background:var(--gold);
  transition:width .35s var(--ease);
}
.drawer__nav a:hover{ color:var(--gold); padding-inline-start:22px; }
.drawer__nav a:hover::before{ width:14px; }
.drawer__nav a.is-page{ color:var(--gold); }

.drawer__contact{ display:grid; gap:.25rem; }
.drawer__label{
  font-size:var(--fs-xs); letter-spacing:.16em; color:var(--ink-35);
  margin-bottom:var(--s-2);
}
.drawer__contact a{
  display:flex; align-items:center; gap:.65rem;
  padding:.55rem 0;
  font-size:var(--fs-sm);
  color:var(--ink-70);
  transition:color .3s var(--ease);
}
.drawer__contact a svg{ color:var(--gold); }
.drawer__contact a:hover{ color:var(--gold); }
.drawer__foot{
  margin-block-start:auto;
  font-size:var(--fs-xs);
  color:var(--ink-35);
  letter-spacing:.06em;
}


/* ==========================================================================
   13 · HERO
   ========================================================================== */
.hero{
  padding-block:clamp(3rem,7vw,5.5rem) clamp(3.5rem,7vw,6rem);
  text-align:center;
  overflow:hidden;
}
.hero__grain{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--gold-12), transparent 62%),
    linear-gradient(to bottom, transparent 70%, var(--surface));
  pointer-events:none;
}
.hero__inner{ display:flex; flex-direction:column; align-items:center; }

.hero__logo{
  width:clamp(146px,23vw,196px);
  aspect-ratio:1;
  margin-bottom:var(--s-5);
  animation:float 7s ease-in-out infinite;
}
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-12px); }
}

/* The company name is one indivisible unit — «مجد» never drops to line two.
   Sized off the viewport so it holds on a 320px phone and still reads as a
   display heading on a wide desktop.                                        */
.hero__title{
  font-size:clamp(1.12rem, 5.4vw, 3.9rem);
  font-weight:800;
  white-space:nowrap;
  max-width:100%;
}
html[lang="en"] .hero__title{ font-weight:400; font-size:clamp(1rem, 4.9vw, 3.6rem); }
.hero__lead{
  max-width:58ch;
  font-size:var(--fs-lg);
  font-weight:300;
  color:var(--ink-70);
}
.hero__cta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s-3);
  margin-block-start:var(--s-6);
}

.stats{
  display:flex; align-items:stretch; justify-content:center;
  flex-wrap:wrap;
  gap:clamp(1.5rem,5vw,4rem);
  margin-block-start:clamp(3rem,6vw,4.5rem);
  padding:var(--s-5) clamp(1rem,4vw,3rem);
  border-block:1px solid var(--line);
  width:min(920px,100%);
}
.stat{ display:flex; flex-direction:column; align-items:center; gap:.2rem; min-width:120px; }
.stat__val{
  font-family:var(--f-num);
  font-size:clamp(2.4rem,6vw,3.4rem);
  line-height:1;
  color:var(--gold);
  display:inline-flex; align-items:baseline;
}
.stat__val i{ font-style:normal; font-size:.62em; margin-inline-start:.06em; }
.stat__lbl{ font-size:var(--fs-sm); color:var(--ink-55); }
.stat__sep{ width:1px; background:var(--line); align-self:stretch; }


/* ==========================================================================
   14 · PRODUCTS
   ========================================================================== */
.section--products{ background:var(--surface); border-block:1px solid var(--line); }

.finder{ margin-bottom:clamp(2.5rem,5vw,4rem); text-align:center; }
.field--search{
  display:flex; align-items:center; gap:.7rem;
  padding:.9rem 1.5rem;
  background:var(--bg);
  border:1px solid var(--line-2);
  border-radius:var(--r-pill);
  max-width:520px;
  margin-inline:auto;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field--search:focus-within{ border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-12); }
.field--search svg{ color:var(--gold); }
.field--search input{
  flex:1; min-width:0;
  border:0; background:transparent;
  font-size:var(--fs-base);
  outline:none;
}
.field--search input::-webkit-search-cancel-button{ display:none; }
.field__clear{
  display:grid; place-items:center;
  width:26px; height:26px;
  color:var(--ink-35);
  border-radius:50%;
  transition:color .25s var(--ease), background-color .25s var(--ease);
}
.field__clear:hover{ color:var(--ink); background:var(--line); }
.finder__empty{
  margin-block-start:var(--s-4);
  color:var(--ink-55);
  font-size:var(--fs-sm);
}

.cat{ margin-block-start:clamp(2.5rem,5vw,4rem); }
.cat[hidden]{ display:none; }
/* category title sits centred between two hairlines */
.cat__head{
  display:flex; align-items:center; justify-content:center; gap:var(--s-4);
  margin-bottom:var(--s-5);
}
.cat__head::before,
.cat__head::after{
  content:"";
  height:1px; flex:1; max-width:190px;
  background:linear-gradient(to right, transparent, var(--line-2));
}
.cat__head::after{ background:linear-gradient(to left, transparent, var(--line-2)); }
.cat__title{ font-size:var(--fs-h3); text-align:center; }

.grid{ display:grid; gap:clamp(1.15rem,2.4vw,1.9rem); }
.grid--products{ grid-template-columns:repeat(auto-fill, minmax(268px,1fr)); }

.product{
  display:flex; flex-direction:column;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.product[hidden]{ display:none; }
.product:hover{ transform:translateY(-5px); border-color:var(--gold-24); box-shadow:var(--sh-1); }
.product .frame{ border:0; border-radius:0; border-block-end:1px solid var(--line); }
.product__body{ padding:var(--s-5) var(--s-5) var(--s-3); flex:1; }
.product__name{
  font-size:var(--fs-h4);
  font-weight:600;
  margin-bottom:.5rem;
  position:relative;
  padding-block-end:.55rem;
}
.product__name::after{
  content:"";
  position:absolute; inset-block-end:0; inset-inline-start:0;
  width:26px; height:2px; background:var(--gold);
  transition:width .4s var(--ease);
}
.product:hover .product__name::after{ width:52px; }
.product__desc{
  font-size:var(--fs-sm);
  font-weight:300;
  color:var(--ink-70);
  line-height:1.9;
}
.product__actions{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  flex-wrap:wrap;
  padding:var(--s-4) var(--s-5) var(--s-5);
  border-block-start:1px solid var(--line);
  margin-block-start:var(--s-3);
}


/* ==========================================================================
   15 · VISION 2030
   ========================================================================== */
.v2030{
  background:var(--panel);
  color:var(--on-panel);
  overflow:hidden;
  text-align:center;
}
.v2030__watermark{
  position:absolute;
  inset-block-start:50%; inset-inline-start:50%;
  transform:translate(-50%,-50%);
  font-family:var(--f-num);
  font-size:clamp(9rem,34vw,26rem);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(210,169,103,.16);
  pointer-events:none; user-select:none;
  white-space:nowrap;
}
.v2030__inner{ max-width:74ch; text-align:center; }
.v2030__title{
  font-size:var(--fs-h2);
  color:var(--on-panel);
}
.v2030__body{
  font-size:var(--fs-lg);
  font-weight:300;
  line-height:2.1;
  color:var(--on-panel-70);
}


/* ==========================================================================
   16 · CLIENTS
   ========================================================================== */
.grid--clients{
  grid-template-columns:repeat(auto-fill, minmax(168px,1fr));
  gap:var(--s-4);
}
.client{
  display:flex; flex-direction:column; align-items:center; gap:var(--s-3);
  padding:var(--s-4);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  text-align:center;
  transition:border-color .4s var(--ease), transform .4s var(--ease), background-color .4s var(--ease);
}
.client:hover{ border-color:var(--gold-24); transform:translateY(-3px); }
.client__logo{
  width:100%;
  min-height:112px;
  border-radius:var(--r-xs);
  background:var(--bg);
  padding:8%;
}
.client__logo.is-empty{ padding:0; }
.client figcaption{
  font-size:var(--fs-sm);
  font-weight:500;
  line-height:1.6;
  color:var(--ink-70);
}
.client--soon figcaption{ color:var(--ink-35); font-weight:300; }
.client--soon{ border-style:dashed; }

.clients__note{
  margin-block-start:clamp(2rem,4vw,3rem);
  text-align:center;
  font-family:var(--f-head);
  font-size:var(--fs-lg);
  font-weight:500;
  color:var(--gold);
}


/* ==========================================================================
   17 · PURPOSE : pillars, values, final word
   ========================================================================== */
.purpose{
  display:grid;
  gap:var(--s-5);
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
}
.pillar{
  display:flex; flex-direction:column; align-items:center; gap:var(--s-3);
  padding:var(--s-6) var(--s-5);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  border-block-start:2px solid var(--gold);
  text-align:center;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.pillar:hover{ transform:translateY(-4px); box-shadow:var(--sh-1); }
.pillar__icon{
  display:grid; place-items:center;
  width:64px; height:64px;
  border-radius:50%;
  background:var(--gold-12);
  border:1px solid var(--gold-24);
  color:var(--gold); flex:none;
}
.pillar__title{ font-size:var(--fs-h4); margin-bottom:.5rem; }
.pillar__body{ font-size:var(--fs-sm); font-weight:300; color:var(--ink-70); line-height:1.95; }

.values__title,
.gal-more{
  font-size:var(--fs-h3);
  margin-block:clamp(2.5rem,5vw,3.5rem) var(--s-5);
  text-align:center;
}
.values__title::after,
.gal-more::after{
  content:""; display:block; width:44px; height:2px;
  background:var(--gold); margin:var(--s-3) auto 0;
}
.values{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(186px, 1fr));
  gap:clamp(1rem, 2vw, 1.5rem);
}
.value{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s-3);
  padding:clamp(1.5rem,3vw,2.1rem) var(--s-4);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  font-family:var(--f-head);
  font-size:1.1rem;
  font-weight:600;
  text-align:center;
  box-shadow:var(--sh-1);
  transition:border-color .35s var(--ease), color .35s var(--ease),
             transform .35s var(--ease), box-shadow .35s var(--ease);
}
.value svg{
  color:var(--gold);
  width:38px; height:38px;
  stroke-width:1.25;
}
.value:hover{
  border-color:var(--gold);
  transform:translateY(-4px);
  box-shadow:var(--sh-2);
}

.final{
  margin-block-start:clamp(3rem,6vw,4.5rem);
  padding:clamp(1.75rem,4vw,3rem);
  background:var(--bg);
  border:1px solid var(--gold-24);
  border-radius:var(--r-md);
  max-width:78ch;
  margin-inline:auto;
  text-align:center;
}
.final__title{
  font-size:var(--fs-h3);
  color:var(--gold);
  margin-bottom:var(--s-4);
}
.final__body{ font-size:var(--fs-md); font-weight:300; color:var(--ink-70); line-height:2.05; }


/* ==========================================================================
   18 · ABOUT
   ========================================================================== */
.about{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:center;
  gap:clamp(2rem,6vw,5rem);
}
.about__art{
  aspect-ratio:1;
  width:min(360px,100%);
  margin-inline:auto;
  animation:float 8s ease-in-out infinite;
}
.about__title{
  font-size:clamp(1.08rem, 5vw, 2.7rem);
  white-space:nowrap;
  max-width:100%;
}
html[lang="en"] .about__title{ font-size:clamp(.96rem, 4.4vw, 2.5rem); }
.about__body{
  font-size:var(--fs-md);
  font-weight:300;
  color:var(--ink-70);
  line-height:2.15;
}
.about__cta{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--s-5);
  margin-block-start:var(--s-6);
}


/* ==========================================================================
   19 · WHY US
   ========================================================================== */
/* six standalone cards — generous gaps, no shared edges */
.why{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(1.25rem, 2.6vw, 2.25rem);
}
.why__item{
  position:relative;
  overflow:hidden;
  padding:clamp(1.9rem,3.5vw,2.6rem);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  transition:transform .45s var(--ease), border-color .45s var(--ease),
             box-shadow .45s var(--ease);
}
/* a hairline of gold across the head of every card */
.why__item::before{
  content:"";
  position:absolute;
  inset-block-start:0; inset-inline:0;
  height:2px;
  background:linear-gradient(to right, transparent, var(--gold), transparent);
  opacity:.6;
  transition:opacity .45s var(--ease);
}
.why__item:hover{
  transform:translateY(-6px);
  border-color:var(--gold-24);
  box-shadow:var(--sh-2);
}
.why__item:hover::before{ opacity:1; }
.why__icon{
  display:grid; place-items:center;
  width:66px; height:66px;
  border-radius:50%;
  background:var(--gold-12);
  border:1px solid var(--gold-24);
  color:var(--gold);
  margin-bottom:var(--s-5);
  transition:background-color .45s var(--ease), color .45s var(--ease);
}
.why__item:hover .why__icon{ background:var(--gold); color:var(--panel); }
.why__title{ font-size:var(--fs-h4); margin-bottom:.65rem; }
.why__body{ font-size:var(--fs-sm); font-weight:300; color:var(--ink-70); line-height:1.95; }


/* ==========================================================================
   20 · CONTACT
   ========================================================================== */
.contact-top{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,2.75rem);
  align-items:stretch;
}
.map{ display:flex; }
.map__frame{
  flex:1;
  height:100%; min-height:320px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  position:relative;
}
/* the embed sits above the placeholder, so the fallback disappears on its own */
.map__frame iframe{
  position:relative; z-index:1;
  width:100%; height:100%; min-height:320px; border:0; display:block; filter:saturate(.85);
}
html[data-theme="dark"] .map__frame iframe{ filter:invert(.9) hue-rotate(180deg) saturate(.6); }
.map__ph{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s-3);
  color:var(--ink-35);
  font-size:var(--fs-sm);
  text-align:center;
  padding:var(--s-5);
  background-image:repeating-linear-gradient(-45deg, transparent 0 11px, var(--slot-hatch) 11px 12px);
}
.map__ph svg{ color:var(--gold); }
.map__frame:has(iframe) .map__ph{ display:none; }

.hours{
  padding:clamp(1.5rem,3vw,2rem);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  display:flex; flex-direction:column;
}
.hours__head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  flex-wrap:wrap;
  padding-block-end:var(--s-4);
  border-block-end:1px solid var(--line);
}
.hours__title{ font-size:var(--fs-h4); }
.badge{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.35rem .8rem;
  border-radius:var(--r-pill);
  font-size:var(--fs-xs);
  font-weight:600;
  border:1px solid;
}
.badge i{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.badge[data-state="open"]{ color:var(--open-ink); border-color:var(--open-line); background:var(--open-bg); }
.badge[data-state="open"] i{ animation:pulse 2.4s ease-in-out infinite; }
.badge[data-state="closed"]{ color:var(--closed-ink); border-color:var(--closed-line); background:var(--closed-bg); }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

.hours__list{ margin-block:var(--s-4); display:grid; gap:.1rem; flex:1; }
.hours__list li{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  padding-block:.7rem;
  border-block-end:1px dashed var(--line);
  font-size:var(--fs-sm);
  color:var(--ink-70);
}
.hours__list li:last-child{ border-block-end:0; }
.hours__list strong{ font-weight:600; color:var(--ink); }
.hours__tz{ font-size:var(--fs-xs); color:var(--ink-35); }

.reach{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:var(--s-3);
  margin-block:clamp(1.5rem,4vw,2.75rem);
}
.reach__card{
  display:flex; align-items:center; gap:var(--s-4);
  padding:.7rem;
  padding-inline-end:var(--s-5);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  box-shadow:var(--sh-1);
  transition:border-color .35s var(--ease), transform .35s var(--ease),
             background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.reach__card:hover{
  border-color:var(--gold);
  transform:translateY(-3px);
  box-shadow:var(--sh-2);
}
.reach__icon{
  display:grid; place-items:center;
  width:54px; height:54px; flex:none;
  border:1px solid var(--gold-24);
  background:var(--gold-12);
  border-radius:50%;
  color:var(--gold);
  transition:background-color .35s var(--ease), color .35s var(--ease);
}
.reach__card:hover .reach__icon{ background:var(--gold); color:var(--panel); }
.reach__txt{ display:flex; flex-direction:column; min-width:0; flex:1; }
.reach__txt strong{ font-family:var(--f-head); font-size:var(--fs-base); font-weight:600; }
.reach__txt span{ font-size:var(--fs-sm); color:var(--ink-55); overflow:hidden; text-overflow:ellipsis; }
.reach__go{ color:var(--ink-35); transition:color .3s var(--ease), transform .3s var(--ease); }
.reach__card:hover .reach__go{ color:var(--gold); }

.form-wrap{
  max-width:840px; margin-inline:auto;
  padding:clamp(1.5rem,4vw,3rem);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
}
.form__title{ font-size:var(--fs-h3); text-align:center; margin-bottom:var(--s-5); }
.form{ display:grid; gap:var(--s-4); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); }
.field{ display:grid; gap:.4rem; }
.field__lbl{ font-size:var(--fs-sm); font-weight:500; color:var(--ink-70); }
.form input, .form textarea{
  width:100%;
  padding:.85rem 1rem;
  background:var(--bg);
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  font-size:var(--fs-base);
  outline:none;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
  resize:vertical;
}
.form input:focus, .form textarea:focus{ border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-12); }
.form input.is-bad, .form textarea.is-bad{ border-color:#9A3B3B; }
.form__err{ color:#9A3B3B; font-size:var(--fs-sm); }
/* the same slot, in the affirmative — used after the message reaches the studio */
.form__ok{
  color:var(--open-ink);
  font-size:var(--fs-sm);
  display:flex; align-items:center; gap:.45rem;
}
/* the submit button while the message is on its way */
.form button[disabled]{ opacity:.6; pointer-events:none; }
.form__note{ text-align:center; font-size:var(--fs-xs); color:var(--ink-35); }


/* ==========================================================================
   21 · FOOTER
   ========================================================================== */
.site-footer{
  background:var(--panel);
  color:var(--on-panel);
  padding-block-start:clamp(3rem,6vw,5rem);
  position:relative;
}
.site-footer__grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);
  padding-block-end:clamp(2.5rem,5vw,4rem);
}
.fbrand{ display:flex; align-items:center; gap:.8rem; margin-bottom:var(--s-4); }
.fbrand__mark{ width:56px; height:56px; flex:none; }
.fbrand__id{ display:flex; flex-direction:column; }
.fbrand__id strong{ font-family:var(--f-head); font-size:1rem; font-weight:700; }
.fbrand__id small{ font-family:var(--f-num); font-size:.66rem; letter-spacing:.32em; color:var(--gold); }
.fblurb{ font-size:var(--fs-sm); font-weight:300; color:var(--on-panel-70); line-height:2; max-width:44ch; }

.fcol__title{
  font-size:var(--fs-base);
  color:var(--gold);
  margin-bottom:var(--s-4);
  letter-spacing:.04em;
}
.fcol--links ul{ display:grid; gap:.55rem; }
.fcol--links a{
  font-size:var(--fs-sm);
  color:var(--on-panel-70);
  transition:color .3s var(--ease), padding-inline-start .3s var(--ease);
}
.fcol--links a:hover{ color:var(--gold); padding-inline-start:6px; }

.fbtns{ display:flex; gap:var(--s-3); margin-bottom:var(--s-5); }
.fbtn{
  display:grid; place-items:center;
  width:46px; height:46px;
  border:1px solid rgba(210,169,103,.3);
  border-radius:50%;
  color:var(--gold);
  transition:background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.fbtn:hover{ background:var(--gold); color:var(--panel); transform:translateY(-3px); }
.faddr{ display:grid; gap:.5rem; font-size:var(--fs-sm); color:var(--on-panel-70); }
.faddr a:hover{ color:var(--gold); }

.site-footer__bar{
  border-block-start:1px solid rgba(210,169,103,.18);
  padding-block:var(--s-5);
  text-align:center;
  font-size:var(--fs-sm);
  color:var(--on-panel-70);
}
.credit{
  color:var(--gold);
  font-family:var(--f-num);
  letter-spacing:.08em;
  padding-inline:.25rem;
  transition:text-shadow .35s var(--ease), color .35s var(--ease);
}
.credit:hover, .credit:focus-visible, .credit:active{
  color:#F0D9AE;
  text-shadow:0 0 12px rgba(210,169,103,.85), 0 0 34px rgba(210,169,103,.45);
}


/* ==========================================================================
   22 · FLOATING ACTION BUTTONS  (same physical corners in both languages)
   ========================================================================== */
.fab{
  position:fixed;
  z-index:110;
  display:grid; place-items:center;
  width:52px; height:52px;
  border-radius:50%;
  background:var(--bg);
  border:1px solid var(--gold-24);
  color:var(--gold);
  box-shadow:var(--sh-1);
  transition:transform .35s var(--ease), background-color .35s var(--ease),
             color .35s var(--ease), opacity .35s var(--ease);
}
.fab:hover{ background:var(--gold); color:var(--panel); transform:translateY(-3px) scale(1.04); }
.fab--wa{ top:calc(var(--h-header) + 16px); right:clamp(12px,3vw,22px); }
.fab--wa::after{
  content:"";
  position:absolute; inset:-6px;
  border:1px solid var(--gold-24);
  border-radius:50%;
  animation:ring 3.2s ease-out infinite;
}
@keyframes ring{
  0%  { transform:scale(.9); opacity:.9; }
  70% { transform:scale(1.25); opacity:0; }
  100%{ transform:scale(1.25); opacity:0; }
}
.fab--call{ bottom:clamp(12px,3vw,22px); right:clamp(12px,3vw,22px); }
.fab--top{ bottom:clamp(12px,3vw,22px); left:clamp(12px,3vw,22px); opacity:0; pointer-events:none; }
.fab--top.is-on{ opacity:1; pointer-events:auto; }


/* ==========================================================================
   23 · LIGHTBOX
   ========================================================================== */
.lightbox{
  position:fixed; inset:0;
  z-index:180;
  display:grid; place-items:center;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(16,11,5,.94);
  opacity:0;
  transition:opacity .35s var(--ease);
}
.lightbox.is-on{ opacity:1; }
.lightbox__stage{
  max-width:min(1200px,94vw);
  display:flex; flex-direction:column; align-items:center; gap:var(--s-4);
}
.lightbox__stage img{
  max-width:94vw;
  max-height:80vh;
  width:auto; height:auto;
  object-fit:contain;                 /* الصورة كاملة دائماً — بلا قص ولا تكبير */
  opacity:1;
  border:1px solid rgba(210,169,103,.25);
  background:#100B05;
  transform:scale(.97);
  transition:transform .4s var(--ease);
}
.lightbox.is-on .lightbox__stage img{ transform:scale(1); }
.lightbox__stage figcaption{
  color:rgba(244,237,224,.7);
  font-size:var(--fs-sm);
  text-align:center;
  max-width:70ch;
}
.lightbox__close{
  position:absolute;
  inset-block-start:clamp(.75rem,3vw,1.5rem);
  inset-inline-end:clamp(.75rem,3vw,1.5rem);
  display:grid; place-items:center;
  width:46px; height:46px;
  border:1px solid rgba(210,169,103,.4);
  border-radius:50%;
  color:#F4EDE0;
  transition:background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.lightbox__close:hover{ background:var(--gold); color:#100B05; transform:rotate(90deg); }


/* ==========================================================================
   24 · WORK PAGE
   ========================================================================== */
.page-head{
  padding-block:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,4vw,2.5rem);
  text-align:center;
  background:var(--surface);
  border-block-end:1px solid var(--line);
}
.page-head h1{ font-size:var(--fs-h1); }
.page-head p{
  max-width:56ch; margin-inline:auto;
  font-size:var(--fs-lg); font-weight:300; color:var(--ink-70);
}
.crumbs{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  font-size:var(--fs-xs); color:var(--ink-35);
  margin-bottom:var(--s-4);
}
.crumbs a:hover{ color:var(--gold); }
.crumbs span{ color:var(--gold-24); }

.grid--work{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); align-items:start; }
.gal-item{
  min-height:220px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  cursor:zoom-in;
  transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.gal-item:hover{ transform:translateY(-4px); border-color:var(--gold-24); box-shadow:var(--sh-1); }


/* ==========================================================================
   25 · GALLERY PAGES
   ========================================================================== */
/* the hero frame hugs whatever ratio the owner uploads instead of stranding
   a portrait between two wide bars — an empty slot keeps the full width     */
.gal-hero{
  width:fit-content;
  max-width:min(880px,100%);
  margin-inline:auto;
  min-height:280px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  cursor:zoom-in;
}
.gal-hero.is-empty{ width:min(880px,100%); }
.gal-note{
  text-align:center;
  font-size:var(--fs-sm);
  color:var(--ink-35);
  margin-block-start:var(--s-4);
}
.grid--gallery{ grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); margin-block-start:clamp(2rem,4vw,3rem); }
.gal-cta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s-3);
  margin-block-start:clamp(2.5rem,5vw,3.5rem);
}


/* ==========================================================================
   26 · SCROLL REVEAL
   ========================================================================== */
.js [data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  will-change:opacity, transform;
}
.js [data-reveal].is-in{ opacity:1; transform:none; }


/* ==========================================================================
   27 · RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px){
  .about{ grid-template-columns:1fr; text-align:center; }
  .about__art{ order:-1; width:min(280px,70%); }
  .orn--start{ margin-inline:auto; }
  .about__cta{ justify-content:center; }
  .about__body{ margin-inline:auto; max-width:62ch; }
  .contact-top{ grid-template-columns:1fr; }
  .site-footer__grid{ grid-template-columns:1fr 1fr; }
  .fcol--brand{ grid-column:1 / -1; }
}

@media (max-width: 720px){
  :root{ --h-header:64px; }
  .brand__mark{ width:40px; height:40px; }
  .brand__name{ font-size:.9rem; max-width:52vw; }
  .hero__cta .btn{ flex:1 1 auto; }
  .stats{ gap:var(--s-5) var(--s-6); }
  .stat__sep{ display:none; }
  .stat{ flex:1 1 40%; }
  .form__row{ grid-template-columns:1fr; }
  .site-footer__grid{ grid-template-columns:1fr; }
  .grid--clients{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
  .fab{ width:48px; height:48px; }
  .values{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
  .cat__head{ gap:var(--s-3); }
  .cat__head::before,.cat__head::after{ max-width:60px; }
  .reach__card{ padding-inline-end:var(--s-4); }
}

@media (max-width: 420px){
  .product__actions{ flex-direction:column; align-items:stretch; }
  .product__actions .btn{ width:100%; }
  .link-arrow{ justify-content:center; }
}


/* ==========================================================================
   28 · REDUCED MOTION & PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .js [data-reveal]{ opacity:1; transform:none; }
  .hero__logo, .about__art{ animation:none; }
}

@media print{
  .preloader,.progress,.fab,.drawer,.drawer-veil,.burger,.lightbox{ display:none!important; }
  body{ background:#fff; color:#000; }
  .site-header{ position:static; }
}