/* ==========================================================
   ALWIDAD — Taxation Procedure Follow Up  ·  concept site
   base layer: fonts, tokens, reset, type, buttons, header
   Palette sampled from Wedad's own poster (black + gold)
   ========================================================== */

@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 900;font-display:swap;src:url("../assets/fonts/playfair-display-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400 900;font-display:swap;src:url("../assets/fonts/playfair-display-latin-wght-italic.woff2") format("woff2")}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:400 900;font-display:swap;src:url("../assets/fonts/cinzel-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("../assets/fonts/manrope-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Cairo";font-style:normal;font-weight:200 1000;font-display:swap;src:url("../assets/fonts/cairo-arabic-wght-normal.woff2") format("woff2")}
@font-face{font-family:"El Messiri";font-style:normal;font-weight:400 700;font-display:swap;src:url("../assets/fonts/el-messiri-arabic-wght-normal.woff2") format("woff2")}

:root{
  color-scheme:dark;
  --ink-1000:#050405;
  --ink-950:#070607;
  --ink-900:#0b0a08;
  --ink-850:#100e0b;
  --ink-800:#15120e;
  --ink-700:#1d1812;
  --ink-600:#2a2319;

  --cream:#f6f0e4;
  --cream-2:#e6dece;
  --muted:#b9ae9a;
  --muted-2:#8d8473;

  --gold-100:#fbe9bd;
  --gold-200:#f7d083;
  --gold-300:#ecc673;
  --gold-400:#e2ba69;
  --gold-500:#d7a54e;
  --gold-600:#b98a38;
  --gold-700:#8a6a2c;
  --gold-grad:linear-gradient(120deg,#fbe3a1 0%,#e9c273 34%,#c8963f 68%,#f3d28b 100%);
  --gold-grad-v:linear-gradient(180deg,#f8dc95 0%,#e2ba69 52%,#b8883a 100%);
  --gold-border:linear-gradient(135deg,rgba(247,208,131,.85),rgba(226,186,105,.16) 38%,rgba(226,186,105,.14) 62%,rgba(247,208,131,.6));
  --line:rgba(226,186,105,.2);
  --line-strong:rgba(226,186,105,.42);

  --font-display:"Playfair Display","Times New Roman",serif;
  --font-label:"Cinzel","Playfair Display",serif;
  --font-body:"Manrope","Segoe UI",system-ui,sans-serif;

  --r-s:12px;
  --r-m:18px;
  --r-l:26px;
  --container:1240px;
  --gutter:clamp(20px,5vw,56px);
  --section-y:clamp(84px,11vw,150px);
  --ease:cubic-bezier(.22,.8,.24,1);
}

html[lang="ar"]{
  --font-display:"El Messiri","Playfair Display","Cairo",serif;
  --font-label:"Cairo","Manrope",sans-serif;
  --font-body:"Cairo","Manrope",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink-950);scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;min-height:100vh;background:var(--ink-950);color:var(--cream);
  font:400 1rem/1.7 var(--font-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* film grain over everything — keeps the black from looking flat */
body::after{
  content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--gold-400);color:#1a1307}
:focus-visible{outline:2px solid var(--gold-300);outline-offset:3px;border-radius:6px}
section[id]{scroll-margin-top:84px}

[hidden]{display:none!important}
body{transition:opacity .2s ease}
body.is-switching{opacity:0}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;inset-inline-start:14px;top:-80px;z-index:300;padding:12px 18px;border-radius:10px;background:var(--gold-grad);color:#1a1307;font-weight:700;transition:top .25s}
.skip:focus{top:14px}

.wrap{width:min(100% - 2 * var(--gutter),var(--container));margin-inline:auto}

.ico{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
html[dir="rtl"] .ico--flip{transform:scaleX(-1)}

/* ---------- type ---------- */
.gold-text{
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font:600 .72rem/1.3 var(--font-label);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-400);
}
.eyebrow::before{content:"";width:44px;height:1px;background:var(--gold-grad);flex:none}
.h2{font:700 clamp(2.05rem,4.3vw,3.55rem)/1.08 var(--font-display);letter-spacing:-.012em;text-wrap:balance}
.h2 em,.hero__title em{font-style:italic;font-weight:500}
.lead{font-size:clamp(1.04rem,1.35vw,1.19rem);line-height:1.72;color:var(--muted);max-width:40em;text-wrap:pretty}

/* ---------- buttons ---------- */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  padding:1.02em 1.55em;border-radius:14px;border:1px solid transparent;
  font:700 .92rem/1 var(--font-body);letter-spacing:.02em;white-space:nowrap;cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,border-color .3s,color .3s;
}
.btn .ico{width:1.15em;height:1.15em;transition:transform .3s var(--ease)}
.btn--gold{
  background:var(--gold-grad);color:#1b1408;
  box-shadow:0 14px 34px -14px rgba(226,186,105,.7),inset 0 1px 0 rgba(255,255,255,.55);
}
.btn--gold::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.6) 50%,transparent 68%);
  transform:translateX(-130%);transition:transform .8s var(--ease);
}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 20px 44px -14px rgba(226,186,105,.85),inset 0 1px 0 rgba(255,255,255,.6)}
.btn--gold:hover::after{transform:translateX(130%)}
html[dir="rtl"] .btn--gold::after{transform:translateX(130%)}
html[dir="rtl"] .btn--gold:hover::after{transform:translateX(-130%)}
.btn--ghost{border-color:var(--line-strong);color:var(--gold-200);background:rgba(226,186,105,.05)}
.btn--ghost:hover{background:rgba(226,186,105,.13);border-color:var(--gold-400);transform:translateY(-2px)}
.btn--dark{background:#120f0a;color:var(--gold-200);border-color:rgba(0,0,0,.4)}
.btn--dark:hover{background:#000;transform:translateY(-2px)}
.btn--sm{padding:.86em 1.2em;font-size:.84rem;border-radius:12px}
.btn:hover .ico--go{transform:translateX(4px)}
html[dir="rtl"] .btn:hover .ico--go{transform:scaleX(-1) translateX(4px)}
.btn:hover .ico--down{transform:translateY(3px)}

/* ---------- reveal ---------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.is-in{opacity:1;transform:none}

/* ---------- announcement bar ---------- */
.announce{
  background:var(--gold-grad);color:#1a1307;text-align:center;
  font:600 .8125rem/1.5 var(--font-body);padding:9px var(--gutter);
}
.announce b{
  display:inline-block;margin-inline-end:10px;padding:3px 9px 2px;border-radius:99px;
  background:#17110a;color:var(--gold-200);font:700 .62rem/1.4 var(--font-label);letter-spacing:.2em;text-transform:uppercase;vertical-align:1px;
}
@media (max-width:560px){.announce__more{display:none}.announce{padding:8px var(--gutter);font-size:.78rem}}
.announce a{margin-inline-start:6px;font-weight:800;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;white-space:nowrap}

/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:80;border-bottom:1px solid transparent;transition:background .35s,border-color .35s,backdrop-filter .35s}
.header.is-stuck{background:rgba(8,7,6,.86);-webkit-backdrop-filter:saturate(1.2) blur(14px);backdrop-filter:saturate(1.2) blur(14px);border-color:var(--line)}
.header__in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;min-height:84px}

.brand{display:grid;justify-items:center;gap:7px;line-height:1;grid-column:1}
.brand__name{
  font:600 1.72rem/1 "Cinzel",serif;letter-spacing:.26em;margin-inline-end:-.26em;
  background:var(--gold-grad-v);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.brand__tag{
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  font:500 .54rem/1 "Cinzel",serif;letter-spacing:.34em;margin-inline-end:-.34em;text-transform:uppercase;color:var(--cream-2);
}
.brand__tag::before,.brand__tag::after{content:"";width:16px;height:1px;background:var(--gold-500);opacity:.85}
html[lang="ar"] .brand__name{letter-spacing:.26em!important;text-transform:uppercase!important}
html[lang="ar"] .brand__tag{letter-spacing:.34em!important;text-transform:uppercase!important}

.nav{grid-column:2;display:flex;justify-content:center;gap:clamp(18px,2.5vw,40px)}
.nav a{position:relative;padding:10px 2px;font:500 .875rem/1 var(--font-body);letter-spacing:.03em;color:var(--cream-2);transition:color .25s}
.nav a::after{content:"";position:absolute;inset:auto 0 2px 0;height:1px;background:var(--gold-grad);transform:scaleX(0);transition:transform .4s var(--ease)}
.nav a:hover,.nav a.is-active{color:var(--gold-200)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.nav__cta{display:none}

.header__act{grid-column:3;display:flex;align-items:center;gap:14px}
.lang{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:99px;background:rgba(255,255,255,.02)}
.lang button{min-width:44px;min-height:34px;padding:0 13px;border-radius:99px;font:700 .74rem/1 var(--font-body);color:var(--muted);transition:background .25s,color .25s}
.lang button:hover{color:var(--gold-200)}
.lang button[aria-pressed="true"]{background:var(--gold-grad);color:#1b1408}
.lang button[lang="ar"]{font-family:"Cairo",var(--font-body);font-size:.82rem}

.burger{display:none;width:46px;height:46px;border:1px solid var(--line-strong);border-radius:12px;place-items:center;color:var(--gold-200)}
.burger span{display:block;width:18px;height:1.5px;background:currentColor;border-radius:2px;position:relative;transition:transform .3s var(--ease),background .3s}
.burger span::before,.burger span::after{content:"";position:absolute;inset-inline-start:0;width:100%;height:1.5px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease),top .3s var(--ease)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (max-width:1080px){
  .header__in{gap:16px;min-height:76px}
  .burger{display:grid}
  .header__cta{display:none}
  .nav{
    position:absolute;inset:100% 0 auto 0;flex-direction:column;justify-content:flex-start;gap:0;
    padding:6px var(--gutter) 26px;background:#0a0908;border-bottom:1px solid var(--line);box-shadow:0 40px 60px -30px rgba(0,0,0,.9);
    opacity:0;transform:translateY(-10px);pointer-events:none;visibility:hidden;
    transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s;
  }
  .nav.is-open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
  .nav a{padding:17px 2px;font-size:1.05rem;border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .nav a.nav__cta{display:inline-flex;margin-top:22px;align-self:flex-start;padding:1.02em 1.55em;font-size:.95rem;color:#1b1408;border-bottom:0}
  .nav a.nav__cta:hover{color:#1b1408}
  .header__act{grid-column:auto;margin-inline-start:auto}
  .header__in{grid-template-columns:auto 1fr}
}
@media (max-width:560px){
  .header__in{gap:12px;min-height:70px}
  .brand{min-width:0}
  .brand__name{font-size:1.45rem}
  .brand__tag{font-size:.47rem;gap:6px;letter-spacing:.26em;margin-inline-end:-.26em}
  .brand__tag::before,.brand__tag::after{width:10px}
  /* one pill that offers the other language, instead of a two-button switch */
  .lang{border-color:var(--line-strong);background:rgba(226,186,105,.06)}
  .lang button[aria-pressed="true"]{display:none}
  .lang button{min-width:54px;min-height:40px;padding:0 15px;color:var(--gold-200)}
  .burger{width:44px;height:44px}
  .header__act{gap:10px}
}
@media (max-width:360px){
  .header__in{gap:8px}
  .brand__name{font-size:1.2rem}
  .brand__tag{font-size:.4rem;letter-spacing:.2em;margin-inline-end:-.2em}
  .brand__tag::before,.brand__tag::after{display:none}
  .lang button{min-width:46px;padding:0 11px}
  .header__act{gap:8px}
}

/* ---------- Arabic / RTL adjustments ---------- */
html[lang="ar"] body{line-height:1.85}
html[lang="ar"] *{letter-spacing:0!important;text-transform:none!important}
html[lang="ar"] em,html[lang="ar"] .motto p,html[lang="ar"] .footer__tag{font-style:normal}
html[lang="ar"] .h2{line-height:1.3;letter-spacing:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}