@font-face{
  font-family:'Salma Arabic';
  src: url('../fonts/SalmaArabic-Black.otf') format('opentype');
  font-weight:900;
  font-style:normal;
  font-display:swap;
}

:root{
  --font-display:'Salma Arabic','IBM Plex Sans Arabic','IBM Plex Sans', sans-serif;
  --bg-0:#0a0e1a;
  --bg-1:#10162a;
  --bg-2:#141b33;
  --paper:#f0ece1;
  --paper-2:#e6dfcd;
  --ink:#eef1f7;
  --ink-dim:#9aa3b8;
  --ink-dark:#131a2c;
  --ink-dark-dim:#5b6275;
  --brass:#c9a35f;
  --brass-light:#e3c383;
  --brass-dim:#8f764a;
  --line:#232a42;
  --line-paper:#d8c69f;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg-0);
  color:var(--ink);
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans', sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--brass); color:var(--bg-0); }

h1,h2,h3,h4,
.brand strong,
.footer-brand strong,
.service-name-ar{
  font-family: var(--font-display);
  font-weight:900;
}

a:focus-visible, button:focus-visible{
  outline:1px solid var(--brass);
  outline-offset:4px;
}

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding-inline: clamp(24px, 6vw, 72px);
}

/* ---------- page transition overlay ---------- */
.page-transition{
  position:fixed;
  inset:0;
  background:var(--bg-0);
  z-index:9999;
  opacity:1;
  pointer-events:none;
  transition:opacity .7s var(--ease-soft), transform .8s var(--ease-soft), filter .7s var(--ease-soft);
  transform:scale(1.02);
  filter:blur(0px);
}
.page-transition.is-hidden{ opacity:0; transform:scale(1); filter:blur(6px); }
.page-transition.is-leaving{ opacity:1; transform:scale(1.02); filter:blur(0px); pointer-events:auto; }

/* ---------- reveal utility ---------- */
.reveal{ opacity:0; transform:translateY(28px) scale(.985); }
.reveal.is-in{
  opacity:1; transform:translateY(0) scale(1);
  transition:opacity .9s var(--ease-soft), transform .9s var(--ease-soft);
}
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

.reveal-clip{
  clip-path: inset(0 0 0 100%);
  transform: scale(1.03);
  transition: clip-path 1.05s var(--ease-soft), transform 1.05s var(--ease-soft);
}
.reveal-clip.is-in{ clip-path: inset(0 0 0 0%); transform: scale(1); }
@media (prefers-reduced-motion: reduce){ .reveal-clip{ clip-path: inset(0 0 0 0%); transform:none; } }

/* ---------- NAV ---------- */
header.site-nav{
  position:fixed;
  inset-inline:0;
  top:0;
  z-index:100;
  padding: clamp(18px,3vw,28px) clamp(24px,6vw,72px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  transition: background-color .5s var(--ease), backdrop-filter .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
header.site-nav.scrolled{
  background-color: rgba(10,14,26,.72);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-color: var(--line);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:.98rem;
  letter-spacing:.02em;
  color:var(--ink);
  display:flex;
  flex-direction:column;
  line-height:1.3;
}
.brand strong{ font-weight:600; font-size:1.02rem; }
.brand span{ color:var(--ink-dim); font-size:.72rem; font-weight:300; }

nav.links{
  display:flex;
  align-items:center;
  gap: clamp(18px,2.6vw,36px);
  font-size:.92rem;
  font-weight:400;
  letter-spacing:.01em;
  color:var(--ink-dim);
}
nav.links a{
  position:relative;
  padding-bottom:4px;
  transition:color .35s var(--ease);
}
nav.links a::after{
  content:'';
  position:absolute;
  inset-inline:0; bottom:0;
  height:1px;
  background:var(--brass);
  transform:scaleX(0);
  transform-origin:inline-start;
  transition:transform .45s var(--ease);
}
nav.links a:hover{ color:var(--ink); }
nav.links a:hover::after{ transform:scaleX(1); }

.lang-btn{
  background:none;
  border:1px solid var(--line);
  color:var(--ink-dim);
  font-size:.78rem;
  letter-spacing:.06em;
  padding:6px 14px;
  border-radius:999px;
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.lang-btn:hover{ border-color:var(--brass); color:var(--brass-light); }

.menu-btn{
  display:none;
  background:none;
  border:none;
  width:44px;
  height:44px;
  position:relative;
  flex-shrink:0;
  padding:0;
}
.menu-btn span{
  position:absolute;
  inset-inline:11px;
  height:1px;
  background:var(--ink);
  transition: transform .4s var(--ease), opacity .3s var(--ease), top .4s var(--ease);
}
.menu-btn span:nth-child(1){ top:15px; }
.menu-btn span:nth-child(2){ top:22px; }
.menu-btn span:nth-child(3){ top:29px; }
.menu-btn.open span:nth-child(1){ top:22px; transform:rotate(45deg); }
.menu-btn.open span:nth-child(2){ opacity:0; }
.menu-btn.open span:nth-child(3){ top:22px; transform:rotate(-45deg); }

.mobile-menu{
  position:fixed;
  inset:0;
  background:var(--bg-0);
  z-index:90;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:30px;
  opacity:0;
  visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s var(--ease);
}
.mobile-menu.open{ opacity:1; visibility:visible; }
.mobile-menu a{
  font-size:1.6rem;
  font-weight:500;
  color:var(--ink);
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.mobile-menu.open a{ opacity:1; transform:translateY(0); }
.mobile-menu.open a:nth-child(1){ transition-delay:.05s; }
.mobile-menu.open a:nth-child(2){ transition-delay:.11s; }
.mobile-menu.open a:nth-child(3){ transition-delay:.17s; }
.mobile-menu.open a:nth-child(4){ transition-delay:.23s; }
.mobile-menu .lang-btn{ margin-top:10px; }
@media (prefers-reduced-motion: reduce){
  .mobile-menu a{ opacity:1; transform:none; transition:none; }
}

@media (max-width:820px){
  nav.links > a{ display:none; }
  .menu-btn{ display:block; }
  .lang-btn{ padding:9px 16px; }
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 12%, #1c2440 0%, var(--bg-0) 62%),
    var(--bg-0);
}
.hero-photo{ position:absolute; inset:0; overflow:hidden; }
.hero-photo img{
  width:100%; height:100%; object-fit:cover;
  object-position:50% 30%;
  filter: grayscale(1) contrast(1.15) brightness(.55);
  transform: scale(1.04);
  transition: transform .5s var(--ease-soft);
  will-change:transform;
}
.hero-photo::after{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,14,26,.55) 0%, rgba(10,14,26,.4) 32%, var(--bg-0) 92%),
    radial-gradient(65% 55% at 50% 8%, rgba(201,163,95,.14), transparent 70%),
    linear-gradient(120deg, rgba(201,163,95,.1), transparent 55%);
}
.hero-noise{ position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay; pointer-events:none; }
.hero-glow{
  position:absolute;
  inset-inline:0;
  top:-10%;
  height:70%;
  background: radial-gradient(50% 60% at 50% 0%, rgba(201,163,95,.16), transparent 70%);
  pointer-events:none;
  will-change:transform;
}
.hero-waves{
  position:absolute;
  bottom:0; inset-inline:0;
  height:34vh;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap: clamp(3px,.6vw,7px);
  opacity:.5;
  pointer-events:none;
}
.hero-waves span{
  width: clamp(2px,.5vw,4px);
  background: linear-gradient(to top, var(--brass-dim), transparent 92%);
  border-radius:2px;
  transform-origin:bottom;
  animation: wave-breathe 5.5s ease-in-out infinite;
}
@keyframes wave-breathe{ 0%,100%{ transform:scaleY(.5); } 50%{ transform:scaleY(1); } }
@media (prefers-reduced-motion: reduce){ .hero-waves span{ animation:none; transform:scaleY(.75); } }

.hero-inner{ position:relative; z-index:2; text-align:center; padding: 0 24px; }
.hero-kicker{
  display:block;
  font-size: clamp(.95rem,1.4vw,1.15rem);
  color:var(--brass);
  font-weight:400;
  margin-bottom: clamp(18px,3vw,28px);
  letter-spacing:.01em;
}
.hero-title{
  font-size: clamp(2.6rem, 6.4vw + .6rem, 6.1rem);
  line-height:1.14;
  letter-spacing:-.015em;
  font-weight:700;
  margin:0;
  color:var(--ink);
  max-width:20ch;
  margin-inline:auto;
}
.hero-sub{
  margin: clamp(22px,3vw,32px) auto 0;
  max-width:46ch;
  font-size: clamp(1rem,1.1vw + .6rem,1.25rem);
  font-weight:300;
  color:var(--ink-dim);
  line-height:1.75;
}
.hero-name-mark{
  position:absolute;
  top: clamp(20px,4vw,34px);
  inset-inline:0;
  z-index:3;
  text-align:center;
  font-size: clamp(.78rem,1vw,.9rem);
  color:var(--ink-dim);
  letter-spacing:.02em;
  pointer-events:none;
}
.scroll-cue{
  position:absolute;
  bottom: clamp(24px,4vw,42px);
  inset-inline:0;
  display:flex;
  justify-content:center;
  z-index:2;
}
.scroll-cue .line{
  width:1px; height:52px;
  background: linear-gradient(to bottom, transparent, var(--ink-dim) 40%, transparent);
  animation: cue-move 2.6s ease-in-out infinite;
}
@keyframes cue-move{ 0%{ opacity:0; transform:translateY(-6px); } 35%{ opacity:1; } 100%{ opacity:0; transform:translateY(14px); } }
@media (prefers-reduced-motion: reduce){ .scroll-cue .line{ animation:none; opacity:.5; } }

/* ---------- compact page hero (services / detail pages) ---------- */
.page-hero{
  position:relative;
  padding: clamp(150px,20vw,220px) 0 clamp(70px,9vw,110px);
  background:
    radial-gradient(120% 90% at 50% 0%, #1c2440 0%, var(--bg-0) 60%),
    var(--bg-0);
  overflow:hidden;
}
.page-hero .hero-waves{ opacity:.28; height:24vh; }
.page-hero-eyebrow{
  display:block;
  font-size:.85rem;
  color:var(--brass);
  margin-bottom:16px;
  letter-spacing:.02em;
}
.page-hero h1{
  font-size: clamp(2.1rem, 4.6vw + .4rem, 4.2rem);
  line-height:1.2;
  letter-spacing:-.01em;
  font-weight:700;
  margin:0 0 22px;
  max-width:18ch;
  color:var(--ink);
}
.page-hero .lang-tag{
  display:block;
  font-size:.85rem;
  font-weight:300;
  color:var(--ink-dim);
  margin:-14px 0 22px;
  letter-spacing:.02em;
}
.page-hero p.lede{
  font-size: clamp(1rem,1vw + .5rem,1.2rem);
  font-weight:300;
  color:var(--ink-dim);
  line-height:1.85;
  max-width:56ch;
  margin:0;
}

/* ---------- PAGE HERO PHOTO (service detail pages) ---------- */
.page-hero-photo{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.page-hero-photo img{
  width:100%; height:100%; object-fit:cover;
  object-position:50% 35%;
  filter: grayscale(1) contrast(1.15) brightness(.4);
  transform:scale(1.04);
}
.page-hero-photo::after{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,14,26,.35) 0%, rgba(10,14,26,.55) 55%, var(--bg-0) 96%),
    radial-gradient(60% 55% at 50% 0%, rgba(201,163,95,.16), transparent 70%);
}
.page-hero .wrap{ position:relative; z-index:1; }

/* ---------- SECTION 2 : light contrast ---------- */
.section-light{
  background: var(--paper);
  color: var(--ink-dark);
  position:relative;
  overflow:hidden;
  padding: clamp(120px,16vw,190px) 0;
}
.section-light .waveform-bg{
  position:absolute;
  inset-inline:0;
  bottom:6%;
  height:40%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap: clamp(4px,.8vw,9px);
  opacity:.35;
  pointer-events:none;
}
.section-light .waveform-bg span{
  width: clamp(2px,.6vw,5px);
  background: var(--line-paper);
  border-radius:2px;
}
.idea-copy{ position:relative; z-index:1; text-align:center; }
.idea-copy h2{
  font-size: clamp(2.1rem, 4.4vw + .4rem, 4.4rem);
  line-height:1.22;
  letter-spacing:-.01em;
  font-weight:700;
  margin:0 auto;
  max-width:18ch;
  color:var(--ink-dark);
}
.idea-copy p{
  margin: clamp(24px,3vw,34px) auto 0;
  max-width:44ch;
  font-size: clamp(1rem,1vw + .55rem,1.2rem);
  font-weight:300;
  color:var(--ink-dark-dim);
  line-height:1.8;
}

/* ---------- generic dark section ---------- */
.section-dark{ background: var(--bg-1); padding: clamp(100px,14vw,160px) 0; position:relative; }
.section-head{
  display:grid;
  grid-template-columns: 100px 1fr;
  gap: clamp(20px,3vw,40px);
  max-width:none;
}
.section-head .head-mark{
  padding-top:.4em;
  font-size:.85rem;
  color:var(--brass);
  border-inline-start:1px solid var(--line);
  padding-inline-start: clamp(16px,2vw,24px);
}
.section-head .head-body{ max-width:56ch; }
.section-head h2{
  font-size: clamp(1.9rem, 3.4vw + .4rem, 3.4rem);
  line-height:1.24;
  letter-spacing:-.01em;
  font-weight:700;
  margin:0 0 20px;
  color:var(--ink);
}
@media (max-width:640px){
  .section-head{ grid-template-columns:1fr; }
  .section-head .head-mark{ border-inline-start:none; padding-inline-start:0; }
}
.section-head p{
  font-size: clamp(1rem,.9vw + .55rem,1.15rem);
  font-weight:300;
  color:var(--ink-dim);
  line-height:1.85;
  margin:0;
  max-width:52ch;
}
.section-subhead{
  margin-top: clamp(56px,7vw,80px);
  font-size:1.05rem;
  font-weight:500;
  color:var(--ink-dim);
}

/* ---------- TYPE / FEATURE LIST ---------- */
.type-list{ margin-top: clamp(40px,5vw,56px); display:flex; flex-direction:column; }
.type-row{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap: clamp(14px,2vw,26px);
  padding: 16px 0;
  border-bottom:1px solid var(--line);
}
.type-num{ font-size:.85rem; color:var(--brass-dim); font-variant-numeric: tabular-nums; flex-shrink:0; }
.type-ar{ font-size: clamp(1rem,1vw + .5rem,1.15rem); font-weight:500; color:var(--ink); }
.type-en{ font-size:.8rem; font-weight:300; color:var(--ink-dim); letter-spacing:.02em; }
.type-desc{ flex-basis:100%; font-size:.92rem; font-weight:300; color:var(--ink-dim); line-height:1.8; margin:6px 0 0; max-width:60ch; }

/* ---------- NOTE BLOCK ---------- */
.note-block{
  margin-top: clamp(64px,8vw,96px);
  padding-inline-start: clamp(20px,3vw,28px);
  border-inline-start:1px solid var(--brass);
  max-width:62ch;
}
.note-block h4{ font-size: clamp(1.1rem,1.2vw + .5rem,1.35rem); font-weight:600; color:var(--ink); margin:0 0 12px; }
.note-block p{ font-size:.98rem; font-weight:300; color:var(--ink-dim); line-height:1.85; margin:0; }

/* ---------- SERVICES LIST (home teaser / detail intro) ---------- */
.service-list{ margin-top: clamp(60px,8vw,96px); border-top:1px solid var(--line); }
.service-row{
  position:relative;
  display:grid;
  grid-template-columns: 90px 1.1fr 1.6fr;
  gap: clamp(20px,3vw,50px);
  align-items:start;
  padding: clamp(34px,4vw,50px) 0;
  border-bottom:1px solid var(--line);
}
.service-row::before{
  content:'';
  position:absolute;
  inset-inline-start:0; top:0; bottom:0;
  width:1px;
  background:var(--brass);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .55s var(--ease);
}
.service-row:hover::before, .service-row:focus-visible::before{ transform:scaleY(1); }
.service-num{ font-size: clamp(1.6rem,2vw,2.1rem); font-weight:300; color:var(--brass-dim); font-variant-numeric: tabular-nums; transition:color .5s var(--ease); }
.service-row:hover .service-num{ color:var(--brass-light); }
.service-name-ar{ font-size: clamp(1.25rem,1.6vw + .3rem,1.7rem); font-weight:600; color:var(--ink); margin:0 0 6px; }
.service-name-en{ font-size:.82rem; font-weight:300; color:var(--ink-dim); letter-spacing:.03em; }
.service-desc{ font-size: clamp(.95rem,.8vw + .5rem,1.08rem); font-weight:300; color:var(--ink-dim); line-height:1.85; margin:0; }
a.service-row{ display:grid; cursor:pointer; }
.service-arrow{
  align-self:center;
  justify-self:end;
  width:34px; height:34px;
  border:1px solid var(--line);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .4s var(--ease), transform .4s var(--ease), background-color .4s var(--ease);
  flex-shrink:0;
}
a.service-row:hover .service-arrow{ border-color:var(--brass); background:var(--brass); transform:translateX(4px); }
[dir="rtl"] a.service-row:hover .service-arrow{ transform:translateX(-4px); }
.service-arrow svg{ width:15px; height:15px; stroke:var(--ink); transition:stroke .3s var(--ease); }
a.service-row:hover .service-arrow svg{ stroke:var(--bg-0); }
@media (max-width:760px){
  .service-row{ grid-template-columns: 46px 1fr; }
  .service-desc{ grid-column: 2 / 3; }
  .service-arrow{ display:none; }
}

.services-directory .service-row{
  grid-template-columns: 90px 1.6fr 90px;
  align-items:center;
}
.services-directory .service-desc{ margin-top:10px; }
.service-thumb{
  position:relative;
  width:84px; height:84px;
  border-radius:2px;
  overflow:hidden;
  background: linear-gradient(160deg,#1a2038,#0e1322);
  display:flex; align-items:center; justify-content:center;
  justify-self:end;
  transition: transform .5s var(--ease);
}
.service-row:hover .service-thumb{ transform:scale(1.05); }
.service-thumb .cover-waves{ display:flex; align-items:center; justify-content:center; gap:4px; }
.service-thumb .cover-waves span{ width:2.5px; background:var(--brass-dim); border-radius:2px; opacity:.6; }
.service-thumb img{
  width:100%; height:100%; object-fit:cover;
  filter: grayscale(1) contrast(1.1) brightness(.7);
  transition: transform .5s var(--ease), filter .4s var(--ease);
}
.service-row:hover .service-thumb img{ filter: grayscale(.7) contrast(1.12) brightness(.85); }
@media (max-width:760px){
  .services-directory .service-row{ grid-template-columns: 46px 1fr 52px; gap:14px; }
  .service-thumb{ width:52px; height:52px; }
}

/* ---------- PORTFOLIO / WORKS ---------- */
.work-block{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px,5vw,64px);
  align-items:center;
  padding: clamp(48px,6vw,80px) 0;
  border-bottom:1px solid var(--line);
}
.work-block:last-child{ border-bottom:none; }
.work-block:nth-child(even) .work-cover{ order:2; }
.work-block:nth-child(even) .work-info{ order:1; }
@media (max-width:700px){
  .work-block{ grid-template-columns:1fr; gap:22px; }
  .work-block:nth-child(even) .work-cover{ order:0; }
  .work-block:nth-child(even) .work-info{ order:0; }
}

.work-cover{
  position:relative;
  aspect-ratio: 4/3;
  border-radius:2px;
  overflow:hidden;
  background:
    radial-gradient(120% 140% at 20% 15%, #232c4a 0%, #141b30 55%),
    linear-gradient(160deg,#1a2038,#0e1322);
}
.work-cover-inner{ position:absolute; inset:0; transition: transform .7s var(--ease); }
.work-block:hover .work-cover-inner{ transform:scale(1.035); }
.work-cover .cover-waves{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:5px; }
.work-cover .cover-waves span{ width:3px; background:var(--brass-dim); border-radius:2px; opacity:.55; }
.work-cover-inner img{
  width:100%; height:100%; object-fit:cover;
  filter: grayscale(.9) contrast(1.12) brightness(.62) saturate(1.05);
  transition: filter .6s var(--ease);
}
.work-block:hover .work-cover-inner img{ filter: grayscale(.75) contrast(1.15) brightness(.7) saturate(1.1); }
.work-cover-inner::after{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(200deg, rgba(201,163,95,.22), transparent 55%),
    linear-gradient(0deg, rgba(10,14,26,.55) 0%, transparent 45%);
  mix-blend-mode:multiply;
  pointer-events:none;
}
.work-index{ position:absolute; top:20px; inset-inline-start:20px; font-size:.85rem; color:var(--ink); letter-spacing:.03em; z-index:2; text-shadow:0 1px 6px rgba(4,6,14,.5); }

.work-info h3{ font-size: clamp(1.4rem,1.8vw + .4rem,2rem); font-weight:600; margin:0 0 14px; color:var(--ink); }
.work-info p{ font-size:1rem; font-weight:300; color:var(--ink-dim); line-height:1.8; margin:0 0 26px; max-width:42ch; }

.btn-line{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:.95rem;
  color:var(--ink);
  padding-bottom:6px;
  border-bottom:1px solid var(--line);
  transition: border-color .5s var(--ease-soft), color .5s var(--ease-soft), gap .5s var(--ease-soft);
}
.btn-line:hover{ border-color:var(--brass); color:var(--brass); gap:16px; }
.btn-line svg{ width:15px; height:15px; flex-shrink:0; transition: transform .5s var(--ease-soft); }
[dir="rtl"] .btn-line svg{ transform:scaleX(-1); }

.btn-solid{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 16px 40px;
  border:1px solid var(--brass-dim);
  color:var(--ink);
  font-size:.98rem;
  border-radius:999px;
  transition: background-color .55s var(--ease-soft), color .55s var(--ease-soft), border-color .55s var(--ease-soft), transform .4s var(--ease-soft);
}
.btn-solid:hover{ background:var(--brass); border-color:var(--brass); color:var(--bg-0); transform:translateY(-2px); }
.btn-solid:active{ transform:translateY(0); }

/* ---------- CONTACT ---------- */
.contact-section{ background: var(--bg-0); position:relative; overflow:hidden; padding: clamp(120px,16vw,190px) 0 clamp(70px,8vw,100px); }
.contact-mark{
  position:absolute; top:-6%; inset-inline-end:-8%;
  width:min(560px,60%);
  mix-blend-mode:screen;
  opacity:.4;
  pointer-events:none;
}
.contact-grid{ display:grid; grid-template-columns: 1.3fr .7fr; gap: clamp(40px,6vw,70px); align-items:end; }
.contact-copy h2{ font-size: clamp(2.2rem, 4.6vw + .4rem, 4.6rem); font-weight:700; line-height:1.15; letter-spacing:-.015em; margin:0 0 22px; color:var(--ink); }
.contact-copy p{ font-size: clamp(1.05rem,1vw + .5rem,1.3rem); font-weight:300; color:var(--ink-dim); margin:0 0 clamp(32px,4vw,44px); }
.portrait-frame{
  position:relative;
  justify-self:end;
  width: min(240px, 62%);
  aspect-ratio: 3/4;
  border-radius:6px;
  overflow:hidden;
  box-shadow: 0 30px 60px -20px rgba(4,6,14,.55), 0 0 0 1px rgba(201,163,95,.18);
  transition: transform .6s var(--ease);
}
.portrait-frame:hover{ transform: translateY(-4px); }
.portrait-frame::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,14,26,0) 55%, rgba(10,14,26,.55) 100%),
              linear-gradient(90deg, rgba(201,163,95,.14), transparent 55%);
}
.portrait-frame img{ width:100%; height:100%; object-fit:cover; filter: saturate(1.05) contrast(1.04); transition: transform 1.1s var(--ease); }
.portrait-frame:hover img{ transform: scale(1.045); }
@media (max-width:760px){
  .contact-grid{ grid-template-columns:1fr; }
  .portrait-frame{ justify-self:center; width:150px; order:-1; margin-bottom:8px; }
}

/* ---------- CONTACT ALT EMAIL ---------- */
.contact-alt-email{ display:block; margin-top:18px; font-size:.95rem; color:var(--ink-dim); }
.contact-alt-email a{ color:inherit; border-bottom:1px solid var(--line); padding-bottom:1px; transition: color .4s var(--ease-soft), border-color .4s var(--ease-soft); }
.contact-alt-email a:hover{ color:var(--brass); border-color:var(--brass); }

/* ---------- WHATSAPP ---------- */
.whatsapp-link{ margin-inline-start:28px; }
.whatsapp-link svg{ width:16px; height:16px; }
[dir="rtl"] .whatsapp-link svg{ transform:none; }
@media (max-width:600px){ .whatsapp-link{ margin-inline-start:0; margin-top:14px; } }

.whatsapp-float{
  position:fixed;
  inset-inline-end:26px;
  bottom:26px;
  width:58px;
  height:58px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg-1);
  border:1px solid var(--brass-dim);
  color:var(--brass-light);
  box-shadow:0 10px 28px rgba(4,6,14,.45);
  z-index:500;
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .35s var(--ease);
}
.whatsapp-float::before{
  content:'';
  position:absolute; inset:-6px;
  border-radius:50%;
  border:1px solid var(--brass-dim);
  opacity:.5;
  animation: wa-pulse 2.6s ease-out infinite;
}
@keyframes wa-pulse{
  0%{ transform:scale(.85); opacity:.55; }
  100%{ transform:scale(1.35); opacity:0; }
}
.whatsapp-float:hover{ background:var(--brass); border-color:var(--brass); color:var(--bg-0); transform:scale(1.06); }
.whatsapp-float svg{ width:28px; height:28px; }
@media (prefers-reduced-motion: reduce){ .whatsapp-float::before{ animation:none; } }
@media (max-width:600px){
  .whatsapp-float{ width:52px; height:52px; inset-inline-end:16px; bottom:16px; }
  .whatsapp-float svg{ width:24px; height:24px; }
}

.site-footer{
  border-top:1px solid var(--line);
  padding: 34px 0;
}
.site-footer .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:18px;
}
.footer-brand{ display:flex; flex-direction:column; gap:2px; font-size:.85rem; color:var(--ink-dim); }
.footer-brand strong{ color:var(--ink); font-weight:600; }
.footer-links{ display:flex; align-items:center; gap:22px; font-size:.85rem; color:var(--ink-dim); flex-wrap:wrap; }
.footer-links a{ transition:color .3s var(--ease); }
.footer-links a:hover{ color:var(--brass-light); }
.footer-copy{ font-size:.78rem; color:var(--ink-dim); width:100%; padding-top:18px; border-top:1px solid var(--line); margin-top:8px; }

/* ---------- WORKS DIRECTORY ---------- */
.works-hero{ min-height:58vh; }
.works-hero-content{ position:relative; z-index:1; padding-top:15vh; }
.works-directory{ padding:clamp(70px,9vw,120px) 0; }
.works-filter{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-bottom:clamp(42px,6vw,70px);
  border-bottom:1px solid var(--line);
  padding-bottom:22px;
}
.works-filter-btn{
  appearance:none; border:1px solid var(--line); background:transparent;
  color:var(--ink-dim); border-radius:999px; padding:10px 18px;
  font-size:.88rem; transition:all .35s var(--ease);
}
.works-filter-btn:hover,.works-filter-btn.is-active{
  color:var(--bg-0); background:var(--brass); border-color:var(--brass);
}
.works-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px;
}
.work-card{
  display:block; background:rgba(20,27,51,.72); border:1px solid var(--line);
  overflow:hidden; transition:transform .5s var(--ease),border-color .5s var(--ease),background .5s var(--ease);
}
.work-card:hover{ transform:translateY(-6px); border-color:var(--brass-dim); background:rgba(20,27,51,.95); }
.work-card-media{ position:relative; aspect-ratio:1.18/1; overflow:hidden; background:var(--bg-1); }
.work-card-media img{ width:100%;height:100%;object-fit:cover; filter:grayscale(.85) contrast(1.1) brightness(.62); transition:transform .7s var(--ease),filter .7s var(--ease); }
.work-card:hover .work-card-media img{ transform:scale(1.045); filter:grayscale(.55) contrast(1.12) brightness(.7); }
.work-card-shade{ position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,26,.1),rgba(10,14,26,.72)); }
.work-card-index{ position:absolute;top:16px;inset-inline-start:18px;color:var(--brass-light);font:500 .72rem 'IBM Plex Sans',sans-serif;letter-spacing:.14em; }
.work-card-icon{
  position:absolute; bottom:18px; inset-inline-end:18px; width:44px;height:44px;
  border:1px solid rgba(227,195,131,.5); background:rgba(10,14,26,.58);
  backdrop-filter:blur(8px); display:grid;place-items:center;color:var(--brass-light);
}
.work-card-icon svg{width:22px;height:22px;}
.work-card-body{padding:22px 22px 24px;}
.work-card-category{font-size:.72rem;color:var(--brass-light);letter-spacing:.04em;margin-bottom:10px;}
.work-card-logo{width:42px;height:30px;margin-bottom:8px;}
.work-card-logo img{width:100%;height:100%;object-fit:contain;filter:none;}
.work-card-body h3{margin:0 0 18px;font-size:1.22rem;line-height:1.65;color:var(--ink);}
.work-card-link{font-size:.78rem;color:var(--ink-dim);transition:color .3s var(--ease);}
.work-card:hover .work-card-link{color:var(--brass-light);}
.work-card-link span{display:inline-block;transition:transform .35s var(--ease);}
.work-card:hover .work-card-link span{transform:translateX(-4px);}
.works-preview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:52px;}
.works-preview-grid .work-card-body{padding:18px;}
.works-preview-grid .work-card-body h3{font-size:1rem;margin-bottom:10px;}
.works-preview-grid .work-card-category{font-size:.66rem;}
.works-preview-cta{display:flex;justify-content:center;margin-top:38px;}
.works-preview-cta .btn-line{display:inline-flex;align-items:center;gap:12px;}
.works-preview-cta .btn-line svg{width:18px;height:18px;}

/* ---------- SINGLE WORK ---------- */
.work-detail-hero{position:relative;min-height:78vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--bg-0);}
.work-detail-bg{position:absolute;inset:0;}
.work-detail-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.8) contrast(1.12) brightness(.35);}
.work-detail-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,26,.22),rgba(10,14,26,.9) 82%),linear-gradient(90deg,rgba(10,14,26,.1),rgba(10,14,26,.65));}
.work-detail-hero-inner{position:relative;z-index:1;width:100%;padding-top:150px;padding-bottom:clamp(70px,10vw,120px);}
.back-link{display:inline-flex;gap:10px;align-items:center;color:var(--ink-dim);font-size:.8rem;margin-bottom:42px;transition:color .3s var(--ease);}
.back-link:hover{color:var(--brass-light);}
.work-detail-meta{display:flex;align-items:center;gap:12px;color:var(--brass-light);font-size:.8rem;margin-bottom:18px;}
.work-detail-icon{width:42px;height:42px;border:1px solid var(--brass-dim);display:grid;place-items:center;}
.work-detail-icon svg{width:21px;height:21px;}
.work-detail-icon.has-logo{width:auto;height:38px;padding:5px 12px;background:rgba(255,255,255,.95);border-color:transparent;border-radius:8px;}
.work-detail-icon.has-logo img{height:100%;width:auto;object-fit:contain;display:block;}
.work-detail-hero h1{font-size:clamp(2.2rem,6vw,5.3rem);line-height:1.2;max-width:900px;margin:0 0 22px;}
.work-detail-hero p{max-width:680px;color:var(--ink-dim);font-size:1rem;line-height:2;margin:0 0 30px;}
.work-detail-hero .btn-line{display:inline-flex;align-items:center;gap:10px;}
.audio-section{padding:clamp(70px,9vw,120px) 0;}
.audio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:55px;}
.audio-card{background:var(--bg-1);border:1px solid var(--line);overflow:hidden;}
.audio-cover{position:relative;aspect-ratio:16/9;background:var(--bg-2);overflow:hidden;}
.audio-cover img{width:100%;height:100%;object-fit:cover;filter:grayscale(.7) contrast(1.08) brightness(.65);}
.audio-cover-badge{position:absolute;top:14px;inset-inline-start:14px;padding:6px 10px;border:1px solid rgba(227,195,131,.4);background:rgba(10,14,26,.62);backdrop-filter:blur(7px);color:var(--brass-light);font-size:.66rem;z-index:3;}
.audio-cover-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border:1px solid rgba(227,195,131,.65);background:rgba(10,14,26,.58);display:grid;place-items:center;color:var(--brass-light);font-size:1rem;padding-inline-start:3px;}
.audio-card-body{display:flex;gap:18px;padding:22px;}
.audio-number{color:var(--brass-dim);font:500 .7rem 'IBM Plex Sans',sans-serif;letter-spacing:.12em;padding-top:4px;}
.audio-card-main{min-width:0;flex:1;}
.audio-card-main h3{margin:0 0 14px;font-size:1.02rem;}
.audio-card audio{display:none;}
.audio-unavailable{border:1px dashed var(--line);padding:12px;color:var(--ink-dim);font-size:.72rem;line-height:1.7;}

/* ---- custom audio player ---- */
.audio-wave{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:3px;padding:0 13%;pointer-events:none;z-index:1;}
.audio-wave-bar{width:3px;height:var(--h);max-height:72%;background:rgba(227,195,131,.24);border-radius:999px;transform-origin:center;transition:background-color .16s ease,opacity .16s ease,transform .16s ease;}
.audio-wave-bar.is-played{background:var(--brass-light);opacity:1;}
.audio-card.is-playing .audio-wave-bar.is-played{transform:scaleY(1.04);}
@keyframes wave-pulse{0%,100%{height:16%;}50%{height:var(--h);}}
@media (prefers-reduced-motion: reduce){.audio-card.is-playing .audio-wave-bar{transition:none;transform:none;}}

.audio-play-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;border:1px solid rgba(227,195,131,.65);background:rgba(10,14,26,.62);backdrop-filter:blur(7px);display:grid;place-items:center;color:var(--brass-light);cursor:pointer;z-index:2;transition:transform .25s var(--ease),background .25s ease,border-color .25s ease;padding:0;}
.audio-play-btn svg{width:18px;height:18px;}
.audio-play-btn .icon-pause{display:none;}
.audio-card.is-playing .audio-play-btn .icon-play{display:none;}
.audio-card.is-playing .audio-play-btn .icon-pause{display:block;}
.audio-play-btn:hover{transform:translate(-50%,-50%) scale(1.08);background:rgba(227,195,131,.18);border-color:var(--brass-light);}
.audio-card.is-playing .audio-play-btn{background:rgba(227,195,131,.22);border-color:var(--brass-light);}

.audio-progress{position:relative;height:3px;background:rgba(227,195,131,.16);overflow:hidden;margin-bottom:10px;}
.audio-progress-fill{position:absolute;inset-inline-start:0;top:0;bottom:0;width:0%;background:linear-gradient(to left,var(--brass-light),var(--brass));transition:width .12s linear;}
.audio-meta{display:flex;justify-content:space-between;font-size:.68rem;color:var(--ink-dim);font-variant-numeric:tabular-nums;letter-spacing:.02em;}
.audio-empty{grid-column:1/-1;border:1px dashed var(--line);padding:clamp(40px,7vw,80px);text-align:center;background:rgba(16,22,42,.45);}
.audio-empty-icon{display:block;font-size:2.2rem;color:var(--brass);margin-bottom:18px;}
.audio-empty h3{margin:0 0 10px;font-size:1.15rem;}
.audio-empty p{max-width:650px;margin:0 auto;color:var(--ink-dim);line-height:2;font-size:.82rem;}

@media (max-width:950px){
  .works-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .works-preview-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .audio-grid{grid-template-columns:1fr;}
}
@media (max-width:700px){
  .works-grid,.works-preview-grid{grid-template-columns:1fr;}
  .works-filter{gap:8px;}
  .works-filter-btn{font-size:.78rem;padding:9px 14px;}
  .work-detail-hero{min-height:72vh;}
  .work-detail-hero-inner{padding-top:130px;}
  .work-detail-hero h1{font-size:clamp(2rem,11vw,3.2rem);}
}

/* ---------- WORKS: CATEGORY-FIRST DIRECTORY ---------- */
.works-categories{display:flex;flex-direction:column;gap:clamp(72px,9vw,120px);}
.works-category{scroll-margin-top:100px;}
.works-category-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid var(--line);}
.works-category-title{display:flex;align-items:center;gap:16px;}
.works-category-icon{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--brass-dim);color:var(--brass-light);background:rgba(227,195,131,.035);}
.works-category-icon svg{width:22px;height:22px;}
.works-category-kicker{display:block;color:var(--brass-light);font:500 .62rem 'IBM Plex Sans',sans-serif;letter-spacing:.18em;margin-bottom:5px;}
.works-category-heading h2{margin:0;font-size:clamp(1.45rem,3vw,2.25rem);line-height:1.35;}
.works-category-count{color:var(--brass-dim);font:500 .75rem 'IBM Plex Sans',sans-serif;letter-spacing:.16em;}
.works-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
.work-card{display:block;background:transparent;border:0;overflow:hidden;transition:transform .45s var(--ease);}
.work-card:hover{transform:translateY(-5px);border-color:transparent;background:transparent;}
.work-card-media{position:relative;aspect-ratio:1/1;background:var(--bg-1);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:grid;place-items:center;}
.work-card-media::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.035),transparent 55%);pointer-events:none;}
.work-card-logo-stage{position:absolute;inset:10%;display:grid;place-items:center;background:#f3f3f1;border-radius:12px;overflow:hidden;z-index:1;}
.work-card-logo-stage img{width:78%;height:78%;object-fit:contain;filter:none;mix-blend-mode:multiply;}
.work-card-logo-fallback{background:var(--bg-2);color:var(--brass-light);border:1px solid var(--line);}
.work-card-logo-fallback svg{width:64px;height:64px;opacity:.85;}
.work-card-icon{position:absolute;top:14px;inset-inline-end:14px;width:40px;height:40px;border:1px solid rgba(227,195,131,.5);background:rgba(10,14,26,.7);backdrop-filter:blur(8px);display:grid;place-items:center;color:var(--brass-light);z-index:3;}
.work-card-icon svg{width:19px;height:19px;}
.work-card-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.6);background:rgba(10,14,26,.62);backdrop-filter:blur(7px);display:grid;place-items:center;color:#fff;font-size:.78rem;padding-inline-start:2px;z-index:4;box-shadow:0 8px 25px rgba(0,0,0,.2);}
.work-card-body{padding:15px 4px 0;}
.work-card-category{display:block;font-size:.67rem;color:var(--brass-light);margin-bottom:6px;}
.work-card-body h3{margin:0 0 9px;font-size:1.05rem;line-height:1.65;color:var(--ink);}
.work-card-link{font-size:.72rem;color:var(--ink-dim);transition:color .3s var(--ease);}
.work-card:hover .work-card-link{color:var(--brass-light);}
.work-card-link span{display:inline-block;transition:transform .35s var(--ease);}
.work-card:hover .work-card-link span{transform:translateX(-4px);}
.works-category-empty{grid-column:1/-1;min-height:150px;border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;gap:14px;color:var(--ink-dim);background:rgba(16,22,42,.28);}
.works-category-empty span{display:grid;place-items:center;color:var(--brass-dim);}
.works-category-empty svg{width:24px;height:24px;}
.works-category-empty p{margin:0;font-size:.8rem;}
@media (max-width:950px){.works-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:700px){
  .works-categories{gap:72px;}
  .works-category-heading{margin-bottom:22px;}
  .works-category-title{gap:12px;}
  .works-category-icon{width:42px;height:42px;}
  .works-grid{grid-template-columns:1fr;gap:28px;}
  .work-card-media{aspect-ratio:1.12/1;}
  .work-card-logo-stage{inset:9%;}
}


/* ---------- LOCAL WORKS: ICON-ONLY VISUAL STYLE ---------- */
.work-card-media.work-card-icon-only{
  background:linear-gradient(145deg,#111522,#080b14);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.work-card-media.work-card-icon-only::before{
  content:"";position:absolute;inset:18%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.08),transparent 68%);
}
.work-card-media.has-cover{background-size:cover;background-position:center;background-repeat:no-repeat;transition:background-size .7s var(--ease);}
.work-card-media.has-cover::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,11,20,.05),rgba(8,11,20,.55) 78%,rgba(8,11,20,.78));
}
.work-card-media.has-cover.has-logo::after{background:linear-gradient(180deg,rgba(8,11,20,.15),rgba(8,11,20,.35) 60%,rgba(8,11,20,.6));}
.work-card:hover .work-card-media.has-cover{background-size:106%;}
.work-card-main-icon{position:relative;z-index:2;color:#fff;display:grid;place-items:center;}
.work-card-main-icon svg{width:82px;height:82px;stroke-width:1.15;filter:drop-shadow(0 10px 24px rgba(0,0,0,.35));}
.work-card-logo-chip{position:relative;z-index:2;display:grid;place-items:center;width:68%;max-width:230px;padding:24px 28px;background:rgba(255,255,255,.95);border-radius:16px;box-shadow:0 16px 34px rgba(0,0,0,.4);}
.work-card-logo-chip img{width:100%;height:auto;max-height:92px;object-fit:contain;display:block;}
.work-card:hover .work-card-logo-chip{transform:scale(1.05);transition:transform .45s var(--ease);}
.work-card-icon-only .work-card-play{width:42px;height:42px;right:18px;left:auto;top:auto;bottom:18px;transform:none;border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.08);color:#fff;backdrop-filter:blur(8px);}
.work-card:hover .work-card-icon-only{border-color:rgba(255,255,255,.25);}
.work-card:hover .work-card-main-icon{transform:scale(1.05);transition:transform .45s var(--ease);}
.work-detail-local{background:#080b14;min-height:68vh;}
.work-detail-pattern{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.08),transparent 24%),radial-gradient(circle at 20% 80%,rgba(255,255,255,.035),transparent 28%),linear-gradient(145deg,#111522,#070a12);}
.work-detail-hero.has-cover .work-detail-pattern{background-size:cover;background-position:center 30%;background-repeat:no-repeat;}
.work-detail-local .work-detail-overlay{background:linear-gradient(180deg,rgba(7,10,18,.08),rgba(7,10,18,.94) 92%);}
.work-detail-local .work-detail-icon{color:#fff;border-color:rgba(255,255,255,.28);}
.local-audio-path{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--ink-dim);font-size:.75rem;}
.local-audio-path span{color:#fff;}
.local-audio-path code{direction:ltr;font-family:monospace;font-size:.7rem;border:1px solid rgba(255,255,255,.12);padding:8px 10px;background:rgba(255,255,255,.035);color:var(--ink-dim);}
@media(max-width:700px){.work-card-main-icon svg{width:68px;height:68px;}.work-card-logo-chip{padding:18px 20px;}.work-card-logo-chip img{max-height:64px;}.work-card-icon-only .work-card-play{right:14px;bottom:14px;}}

.works-local-note{margin-top:14px;color:var(--ink-dim);font-size:.74rem;}
.audio-icon-cover{display:grid;place-items:center;background:linear-gradient(145deg,#111522,#080b14)!important;}
.audio-cover-icon{font-size:5rem;line-height:1;color:#fff;font-family:serif;opacity:.92;text-shadow:0 12px 30px rgba(0,0,0,.35);}

/* Final logo treatment */
.work-card-logo-chip img,.work-detail-icon.has-logo img{object-fit:contain;mix-blend-mode:normal;}
.work-card-logo-chip{background:transparent!important;border-color:rgba(227,195,131,.28);padding:10px;}
.work-detail-icon.has-logo{background:rgba(255,255,255,.035)!important;}

/* Handwritten brand mark */
.brand{flex-direction:row;align-items:center;gap:12px;}
.brand-copy{display:flex;flex-direction:column;line-height:1.3;}
.brand-logo{width:74px;height:42px;object-fit:contain;object-position:center;filter:brightness(0) invert(1);opacity:.95;}
@media (max-width:700px){.brand-logo{width:58px;height:34px}.brand{gap:9px}.brand strong{font-size:.9rem}.brand span{font-size:.62rem}}

html[dir="rtl"] .audio-wave{flex-direction:row-reverse;}
.works-directory .work-card-logo-chip img[src*="alsayyah"],.work-detail-icon.has-logo img[src*="alsayyah"]{filter:brightness(0) invert(1);}

/* External video samples */
.video-card{overflow:hidden;}
.video-card-frame{position:relative;aspect-ratio:16/9;background:#080808;border-bottom:1px solid var(--line);}
.video-card-frame iframe{width:100%;height:100%;border:0;display:block;}

/* White client logos for dark work cards */
.work-card-logo-chip img,.work-detail-icon.has-logo img{filter:none!important;mix-blend-mode:normal!important;}


/* Final handwritten logo treatment */
.brand{display:flex;align-items:center;gap:0;}
.brand-logo{display:block;width:150px;height:auto;max-height:42px;object-fit:contain;object-position:center;filter:brightness(0) invert(1);opacity:.98;}
.brand-copy{display:none!important;}
.hero-name-mark{display:flex;align-items:center;justify-content:center;}
.hero-name-logo{display:block;width:min(330px,52vw);height:auto;max-height:82px;object-fit:contain;filter:brightness(0) invert(1);opacity:.94;}
.footer-brand{display:flex;align-items:center;}
.footer-brand-logo{display:block;width:155px;height:auto;max-height:48px;object-fit:contain;filter:brightness(0) invert(1);opacity:.92;}
.work-detail-meta .work-detail-icon{display:none!important;}
@media(max-width:700px){
  .brand-logo{width:112px;max-height:34px;}
  .hero-name-logo{width:min(270px,68vw);max-height:68px;}
  .footer-brand-logo{width:125px;max-height:40px;}
}

.hero-name-mark{flex-direction:column;gap:10px;}
.hero-role{display:block;color:var(--brass-light);font-size:.78rem;letter-spacing:.18em;text-transform:none;opacity:.92;}
@media (max-width:600px){.hero-role{font-size:.7rem;letter-spacing:.12em;}}

/* Works: category-first browsing */
.works-category-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:38px;overflow:visible;}
.works-category-picker .works-filter-btn{min-height:118px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;text-align:right;padding:20px 22px;border:1px solid var(--line);background:rgba(16,22,42,.38);color:var(--ink);transition:transform .25s ease,border-color .25s ease,background .25s ease;}
.works-category-picker .works-filter-btn:hover,.works-category-picker .works-filter-btn.is-active{transform:translateY(-2px);border-color:var(--brass-dim);background:rgba(227,195,131,.055);}
.works-picker-icon{width:50px;height:50px;display:grid;place-items:center;border:1px solid var(--brass-dim);color:var(--brass-light);background:rgba(227,195,131,.035);}
.works-picker-icon svg{width:23px;height:23px;}
.works-picker-copy{display:flex;flex-direction:column;gap:7px;min-width:0;}
.works-picker-copy strong{font-size:1rem;font-weight:500;line-height:1.5;}
.works-picker-copy small{font:500 .68rem 'IBM Plex Sans',sans-serif;letter-spacing:.12em;color:var(--ink-dim);}
.works-picker-arrow{font-size:1.15rem;color:var(--brass-light);transition:transform .25s ease;}
.works-category-picker .works-filter-btn:hover .works-picker-arrow,.works-category-picker .works-filter-btn.is-active .works-picker-arrow{transform:translateX(-4px);}
.works-category[hidden]{display:none!important;}
@media (max-width:700px){
  .works-category-picker{grid-template-columns:1fr;gap:10px;margin-bottom:28px;}
  .works-category-picker .works-filter-btn{min-height:92px;padding:16px;gap:13px;}
  .works-picker-icon{width:44px;height:44px;}
  .works-picker-copy strong{font-size:.9rem;}
}


/* =========================================================
   IBT VISUAL SYSTEM v10 — Premium Arabian / Contemporary
   ========================================================= */
:root{
  --bg-0:#090a09;
  --bg-1:#101210;
  --bg-2:#151815;
  --paper:#f4f0e7;
  --paper-2:#e9e3d6;
  --ink:#f4f1ea;
  --ink-dim:#a9aaa2;
  --ink-dark:#171914;
  --ink-dark-dim:#62655d;
  --brass:#b79a67;
  --brass-light:#dbc18b;
  --brass-dim:#786542;
  --line:rgba(229,220,200,.12);
  --line-paper:rgba(70,63,48,.18);
  --shadow:0 30px 80px rgba(0,0,0,.26);
  --radius:22px;
}

html{scroll-padding-top:96px}
body{background:var(--bg-0);letter-spacing:.005em}
::selection{background:var(--brass);color:#0a0b09}

.wrap{max-width:1380px;padding-inline:clamp(22px,5vw,84px)}
header.site-nav{
  padding:18px clamp(22px,5vw,84px);
  background:linear-gradient(180deg,rgba(9,10,9,.74),transparent);
  transition:all .45s var(--ease-soft);
}
header.site-nav.scrolled{
  background:rgba(9,10,9,.82);
  backdrop-filter:blur(22px) saturate(130%);
  -webkit-backdrop-filter:blur(22px) saturate(130%);
  border-color:rgba(219,193,139,.13);
  box-shadow:0 12px 40px rgba(0,0,0,.14);
}
.brand-logo,.footer-brand-logo{filter:brightness(0) invert(1)!important; opacity:.98}
nav.links{gap:clamp(20px,3vw,42px);font-size:.9rem}
nav.links a{color:#b9bbb3}
nav.links a:hover{color:#fff}
nav.links a::after{height:2px;background:var(--brass-light);border-radius:99px}
.lang-btn{
  min-width:48px;height:34px;
  border-color:rgba(219,193,139,.22);
  background:rgba(255,255,255,.025);
}
.lang-btn:hover{background:rgba(219,193,139,.08)}

.hero{
  min-height:min(900px,100svh);
  background:#080908;
  isolation:isolate;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 72% 42%,rgba(183,154,103,.15),transparent 28%),
    linear-gradient(90deg,rgba(5,6,5,.92) 0%,rgba(5,6,5,.57) 42%,rgba(5,6,5,.16) 100%),
    linear-gradient(0deg,rgba(5,6,5,.88),transparent 55%);
}
.hero-photo img{filter:saturate(.72) contrast(1.08) brightness(.72)}
.hero-inner{
  position:relative;z-index:2;
  width:min(920px,100%);
  padding-top:clamp(150px,22vh,235px);
}
.hero-kicker,.page-hero-eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  color:var(--brass-light);
  font-size:.76rem;font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hero-kicker::before,.page-hero-eyebrow::before{
  content:"";width:34px;height:1px;background:var(--brass);
  box-shadow:0 0 18px rgba(183,154,103,.5);
}
.hero-title{
  max-width:900px;
  font-size:clamp(3.3rem,7.5vw,7.2rem);
  line-height:1.01;
  letter-spacing:-.045em;
  text-wrap:balance;
  margin:22px 0 26px;
}
.hero-subtitle{
  max-width:660px;
  color:#c7c8c1;
  font-size:clamp(1rem,1.45vw,1.22rem);
  line-height:1.9;
  margin:0;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px}
.hero-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:24px;
  min-height:56px;padding:0 24px;border-radius:999px;
  font-size:.92rem;font-weight:600;
  transition:transform .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.hero-btn:hover{transform:translateY(-3px)}
.hero-btn-primary{background:var(--paper);color:#11120f}
.hero-btn-primary:hover{background:#fff}
.hero-btn-ghost{border:1px solid rgba(236,225,201,.25);color:#f1eee6;background:rgba(255,255,255,.035)}
.hero-btn-ghost:hover{border-color:rgba(219,193,139,.55);background:rgba(219,193,139,.08)}
.hero-actions{flex-direction:column;align-items:flex-start;gap:12px}
.hero-btn-works{width:min(420px,100%);min-height:68px;padding:0 32px;font-size:1.05rem}
.hero-btn-project{width:min(420px,100%);min-height:50px;padding:0 24px}
.hero-signature{
  display:flex;align-items:center;gap:12px;margin-top:62px;
  color:#777970;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
}
.hero-signature span{width:42px;height:1px;background:var(--brass)}
.hero-signature b{font-family:var(--font-display);font-size:.8rem;color:#c7b384;letter-spacing:.08em}
.hero-signature small{font-size:.65rem}

.section-light{
  background:
    radial-gradient(circle at 15% 30%,rgba(183,154,103,.11),transparent 26%),
    var(--paper);
  color:var(--ink-dark);
  min-height:58vh;
  display:flex;align-items:center;
}
.idea-copy{padding-block:clamp(100px,14vw,190px)}
.idea-copy h2{
  max-width:980px;font-size:clamp(3rem,6vw,6.5rem);
  line-height:1.02;letter-spacing:-.045em;margin:0 0 28px;
}
.idea-copy p{max-width:680px;color:#66695f;font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.9}

.section-dark{background:var(--bg-1)}
.section-dark,.works-preview{position:relative}
.section-dark::before,.contact-section::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.018),transparent 30%);
}
.section-head{padding-top:clamp(82px,10vw,145px);margin-bottom:58px}
.head-mark{
  color:var(--brass-light);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
}
.head-body h2{font-size:clamp(2.5rem,5vw,5.2rem);line-height:1.02;letter-spacing:-.04em;margin:12px 0 16px}
.head-body p{max-width:650px;color:var(--ink-dim);font-size:1rem;line-height:1.85}

.service-list{border-top:1px solid var(--line)}
.service-row{
  display:grid;
  grid-template-columns:74px minmax(250px,1.1fr) minmax(260px,.9fr) 44px;
  gap:26px;align-items:center;
  min-height:148px;padding:24px 0;
  border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;
  transition:padding .45s var(--ease-soft),background .45s var(--ease-soft);
}
.service-row::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(183,154,103,.09),transparent 55%);
  transform:translateX(-105%);transition:transform .65s var(--ease-soft);
}
.service-row:hover{padding-inline:18px}
.service-row:hover::before{transform:translateX(0)}
.service-num{position:relative;z-index:1;color:#6e716a;font-size:.75rem;letter-spacing:.12em}
.service-name-ar,.service-name-en,.service-desc,.service-arrow{position:relative;z-index:1}
.service-name-ar{font-size:clamp(1.35rem,2vw,2rem);line-height:1.25}
.service-name-en{margin-top:7px;color:#6f736b;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
.service-desc{color:#92958c;font-size:.9rem;line-height:1.8;margin:0}
.service-arrow{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:transform .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease)}
.service-arrow svg{width:18px}
.service-row:hover .service-arrow{transform:translateX(-4px);border-color:var(--brass);color:var(--brass-light)}

.works-preview{background:#111411!important}
.works-preview-grid{gap:18px!important}
.works-card,.work-card{
  border:1px solid rgba(236,225,201,.11)!important;
  border-radius:var(--radius)!important;
  overflow:hidden;
  background:#171a17!important;
  box-shadow:none!important;
  transition:transform .55s var(--ease-soft),border-color .45s var(--ease),box-shadow .55s var(--ease-soft);
}
.works-card:hover,.work-card:hover{transform:translateY(-8px);border-color:rgba(219,193,139,.34)!important;box-shadow:var(--shadow)!important}
.works-card img,.work-card img{transition:transform .9s var(--ease-soft),filter .7s var(--ease)}
.works-card:hover img,.work-card:hover img{transform:scale(1.045);filter:saturate(.95)}
.btn-line{
  border-color:rgba(219,193,139,.26)!important;
  border-radius:999px!important;
  padding:13px 20px!important;
  transition:all .35s var(--ease)!important;
}
.btn-line:hover{background:rgba(183,154,103,.08);border-color:var(--brass)!important;transform:translateY(-2px)}

.contact-section{
  background:
    radial-gradient(circle at 75% 45%,rgba(183,154,103,.12),transparent 28%),
    #0b0d0b;
  padding-block:clamp(100px,13vw,180px)!important;
}
.contact-grid{align-items:center;gap:clamp(50px,9vw,150px)}
.contact-copy h2{font-size:clamp(3.4rem,7vw,7rem);line-height:.95;letter-spacing:-.05em}
.contact-copy p{color:#9fa29a;font-size:1.05rem;line-height:1.9}
.btn-solid{
  border-radius:999px!important;padding:15px 25px!important;
  background:var(--paper)!important;color:#12130f!important;
  transition:transform .35s var(--ease),background .35s var(--ease)!important;
}
.btn-solid:hover{transform:translateY(-3px);background:#fff!important}
.whatsapp-link{margin-top:10px}
.portrait-frame{
  border:1px solid rgba(219,193,139,.2)!important;
  border-radius:28px!important;
  overflow:hidden;box-shadow:var(--shadow);
  max-height:620px;
}
.portrait-frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.75) contrast(1.05)}

.site-footer{background:#080908!important;border-top:1px solid var(--line)!important}
.site-footer .wrap{padding-block:38px!important}
.footer-links a{transition:color .3s var(--ease)}
.footer-links a:hover{color:var(--brass-light)!important}

.page-hero{
  min-height:58vh!important;
  padding-top:140px!important;
  display:flex;align-items:flex-end;
  padding-bottom:80px!important;
  background:#0a0c0a!important;
}
.page-hero::after{
  background:linear-gradient(180deg,rgba(7,8,7,.35),rgba(7,8,7,.92))!important;
}
.page-hero-photo img{filter:saturate(.7) brightness(.65)!important}
.page-hero h1{font-size:clamp(3.4rem,7vw,7rem);line-height:.95;letter-spacing:-.05em;margin:18px 0}
.page-hero .lede{max-width:680px;color:#aaaDA5!important;font-size:1.05rem;line-height:1.9}

.services-directory{padding-bottom:100px}
.services-directory .service-row{grid-template-columns:70px minmax(240px,1fr) minmax(240px,.9fr) 130px}
.service-thumb{
  width:120px!important;height:82px!important;border-radius:14px!important;overflow:hidden;
  border:1px solid var(--line);opacity:.72;transition:opacity .4s var(--ease),transform .5s var(--ease)
}
.service-thumb img{width:100%;height:100%;object-fit:cover}
.service-row:hover .service-thumb{opacity:1;transform:scale(1.04)}

.work-detail-hero{min-height:64vh!important}
.work-detail-hero-inner{padding-top:150px!important;padding-bottom:90px!important}
.work-detail-hero h1{font-size:clamp(3.2rem,7vw,7rem)!important;line-height:.95!important;letter-spacing:-.05em!important}
.audio-section{padding-bottom:110px}
.audio-grid{gap:18px!important}
.audio-card{
  background:#141714!important;border:1px solid var(--line)!important;
  border-radius:22px!important;overflow:hidden!important;
  transition:transform .45s var(--ease-soft),border-color .4s var(--ease),box-shadow .45s var(--ease-soft)!important;
}
.audio-card:hover{transform:translateY(-5px);border-color:rgba(219,193,139,.28)!important}
.audio-card.is-playing{border-color:rgba(219,193,139,.5)!important;box-shadow:0 18px 55px rgba(0,0,0,.3)}
.audio-cover{background:linear-gradient(135deg,#1c211c,#0f110f)!important}
.audio-play-btn{
  width:64px!important;height:64px!important;border-radius:50%!important;
  background:var(--paper)!important;color:#14150f!important;
  box-shadow:0 10px 35px rgba(0,0,0,.25);
  transition:transform .35s var(--ease),background .35s var(--ease)!important;
}
.audio-play-btn:hover{transform:scale(1.07)!important;background:#fff!important}
.audio-wave-bar{background:#555950!important}
.audio-wave-bar.is-played{background:var(--brass-light)!important}
.audio-progress{background:rgba(255,255,255,.08)!important;border-radius:99px!important}
.audio-progress-fill{background:var(--brass)!important}
.audio-card-body{padding:22px!important}
.audio-number{color:#6f746b!important}
.audio-meta{color:#767a72!important}

.whatsapp-float{
  width:52px!important;height:52px!important;bottom:22px!important;
  background:rgba(20,23,20,.88)!important;
  border:1px solid rgba(219,193,139,.22)!important;
  color:#dedbd1!important;box-shadow:0 12px 30px rgba(0,0,0,.24);
  backdrop-filter:blur(12px);
}
.whatsapp-float:hover{background:var(--brass)!important;color:#12130f!important;transform:translateY(-3px)}

@media(max-width:850px){
  .hero{min-height:92svh}
  .hero-inner{padding-top:145px}
  .hero-title{font-size:clamp(3rem,13vw,5rem)}
  .service-row,.services-directory .service-row{
    grid-template-columns:48px 1fr 38px;
    gap:14px;min-height:130px;
  }
  .service-desc{grid-column:2;max-width:560px}
  .service-thumb{display:none}
  .service-arrow{grid-column:3;grid-row:1/3}
  .contact-grid{grid-template-columns:1fr!important}
  .portrait-frame{max-height:520px}
}
@media(max-width:640px){
  header.site-nav{padding:14px 18px}
  nav.links{display:none}
  .menu-btn{display:block}
  .hero::after{background:linear-gradient(90deg,rgba(5,6,5,.88),rgba(5,6,5,.38)),linear-gradient(0deg,rgba(5,6,5,.94),transparent 65%)}
  .hero-actions{margin-top:30px}
  .hero-btn{flex:1;min-width:145px}
  .hero-signature{margin-top:40px}
  .section-head{margin-bottom:38px}
  .head-body h2{font-size:2.7rem}
  .service-name-ar{font-size:1.28rem}
  .service-desc{font-size:.82rem}
  .page-hero{min-height:52vh!important;padding-top:120px!important;padding-bottom:60px!important}
  .page-hero h1{font-size:3.5rem}
  .contact-copy h2{font-size:4.2rem}
}

/* Floating audio dock */
.audio-dock{
  position:fixed;z-index:120;left:50%;bottom:20px;
  width:min(620px,calc(100vw - 32px));min-height:72px;
  transform:translate(-50%,18px);opacity:0;visibility:hidden;
  display:flex;align-items:center;gap:16px;padding:10px 12px 10px 16px;
  border:1px solid rgba(219,193,139,.2);border-radius:20px;
  background:rgba(15,17,15,.9);backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 22px 70px rgba(0,0,0,.35);
  transition:opacity .4s var(--ease-soft),transform .4s var(--ease-soft),visibility .4s;
}
.audio-dock.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0)}
.audio-dock-wave{width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:linear-gradient(135deg,rgba(219,193,139,.22),rgba(219,193,139,.04));position:relative}
.audio-dock-wave::after{content:"";position:absolute;inset:9px 7px;background:repeating-linear-gradient(90deg,var(--brass) 0 2px,transparent 2px 5px);opacity:.85}
.audio-dock-info{min-width:0;display:flex;flex-direction:column;gap:2px;flex:1}
.audio-dock-info small{font-size:8px;letter-spacing:.14em;color:var(--brass-light)}
.audio-dock-info strong{font-size:.86rem;color:#f1eee6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.audio-dock-info span{font-size:.7rem;color:#777c73}
.audio-dock-toggle{width:44px;height:44px;border-radius:50%;border:1px solid rgba(219,193,139,.3);background:var(--paper);color:#151711;font-weight:700}
@media(max-width:640px){.audio-dock{bottom:12px;border-radius:18px}.audio-dock-toggle{width:40px;height:40px}}

/* Page back button — kept separate from the logo */
.back-page-btn{
  position:relative;
  z-index:20;
  display:flex;
  align-items:center;
  gap:10px;
  width:max-content;
  margin:26px auto 0 clamp(20px,5vw,72px);
  padding:10px 17px;
  border:1px solid rgba(219,193,139,.28);
  border-radius:999px;
  background:rgba(15,17,15,.72);
  color:#f1eee6;
  font:inherit;
  font-size:.84rem;
  cursor:pointer;
  backdrop-filter:blur(12px);
  transition:transform .25s ease,background .25s ease,border-color .25s ease;
}
.back-page-btn span{font-size:1.1rem;line-height:1;transition:transform .25s ease}
.back-page-btn:hover{transform:translateY(-2px);background:rgba(219,193,139,.1);border-color:rgba(219,193,139,.55)}
.back-page-btn:hover span{transform:translateX(-4px)}
@media(max-width:640px){
  .back-page-btn{
    margin:18px auto 0 20px;
    padding:9px 14px;
    font-size:.78rem;
  }
}
/* v19: homepage CTAs moved below services */
.services-actions{padding-top:clamp(34px,5vw,56px);padding-bottom:clamp(54px,7vw,86px);display:flex;justify-content:flex-start;}
.services-actions .hero-actions{margin-top:0;}
.nav-services{color:var(--brass)!important;}
@media(max-width:640px){.services-actions{padding-top:28px;padding-bottom:54px;}}

/* ---------- v20 visual refinements ---------- */
.hero-name-mark .hero-role{
  font-size:clamp(1.05rem,1.5vw,1.45rem) !important;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--brass-light);
  margin-top:8px;
}
.section-head .head-mark{
  font-size:clamp(2.2rem,4.2vw,4.8rem) !important;
  line-height:1;
  font-weight:700;
  padding-top:0;
}
.idea-visual-section{
  min-height:100svh !important;
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
  color:#fff;
  background:#090807 !important;
}
.idea-visual-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(8,7,6,.34),rgba(8,7,6,.62)),
    url("../img/oud-idea.jpeg") center/cover no-repeat;
  transform:scale(1.015);
}
.idea-visual-section::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(55% 50% at 50% 48%,rgba(201,163,95,.16),transparent 72%),
    linear-gradient(180deg,transparent 35%,rgba(5,5,5,.45) 100%);
  pointer-events:none;
}
.idea-visual-section .waveform-bg{
  z-index:1;
  opacity:.28 !important;
  height:32% !important;
}
.idea-visual-section .idea-copy{
  z-index:2;
  color:#fff;
  width:100%;
}
.idea-visual-section .idea-copy h2{
  color:#fff !important;
  text-shadow:0 8px 35px rgba(0,0,0,.45);
}
.idea-visual-section .idea-copy p{
  color:rgba(255,255,255,.82) !important;
  text-shadow:0 5px 25px rgba(0,0,0,.5);
}
.works-visual-section{
  min-height:100svh;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#080706;
}
.works-visual-photo,
.works-visual-overlay,
.works-visual-waves{
  position:absolute;
  inset:0;
}
.works-visual-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:brightness(.48) contrast(1.08);
  transform:scale(1.025);
}
.works-visual-overlay{
  background:
    linear-gradient(180deg,rgba(6,5,4,.28),rgba(6,5,4,.68)),
    radial-gradient(50% 55% at 50% 45%,rgba(201,163,95,.13),transparent 72%);
}
.works-visual-waves{
  bottom:0;
  top:auto;
  height:30%;
  opacity:.28;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 7px,
      rgba(220,196,151,.45) 8px 9px,
      transparent 10px 15px
    );
  mask-image:linear-gradient(to top,rgba(0,0,0,.8),transparent);
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.8),transparent);
  animation:v20-wave 8s ease-in-out infinite alternate;
}
.works-visual-content{
  position:relative;
  z-index:2;
  width:100%;
  min-height:70vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:28px;
  text-align:center;
}
.works-visual-kicker{
  color:var(--brass-light);
  font-size:clamp(1rem,1.4vw,1.35rem);
  letter-spacing:.22em;
  font-weight:500;
}
.works-visual-content .hero-btn-works{
  width:min(560px,92vw);
  min-height:82px;
  font-size:clamp(1.05rem,1.5vw,1.3rem);
  box-shadow:0 18px 60px rgba(0,0,0,.3);
}
@keyframes v20-wave{
  from{transform:translateX(0) scaleY(.82);}
  to{transform:translateX(-18px) scaleY(1.08);}
}
@media(max-width:640px){
  .section-head .head-mark{font-size:2.6rem !important;}
  .works-visual-content .hero-btn-works{min-height:70px;}
}

/* v21 — الأعمال كنص فقط */
.works-text-link{
  display:inline-block;
  color:#fff !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  min-height:0 !important;
  width:auto !important;
  border-radius:0 !important;
  font-family:'Salma Arabic',sans-serif !important;
  font-weight:900 !important;
  font-size:clamp(2rem,4vw,3.8rem) !important;
  line-height:1.2 !important;
  text-decoration:none !important;
  letter-spacing:0 !important;
  transition:opacity .3s ease, transform .3s ease !important;
}
.works-text-link:hover{
  color:#fff !important;
  opacity:.82;
  transform:translateY(-2px);
}
.works-text-link span{
  font-family:'Salma Arabic',sans-serif !important;
  color:#fff !important;
}