/* ===== drinktea, shared site chrome (nav, footer, pages) ===== */
:root{
  /* drinktea brand kit v3.1 — Gilt / Ink / Sand */
  --gold:#D7B275;            /* Gilt 500 */
  --gold-soft:rgba(215,178,117,.55);
  --gilt-300:#E8D0A7;
  --gilt-700:#A9884F;
  --bg:#14100D;              /* Ink (Sand 900) */
  --ink:#EFE9DF;             /* Sand 100 */
  --muted:#A79E90;           /* Sand 400 */
  --steep:#5E4028;
  --cream:#F5EFE5;
  --font-display:'Geist','Geist Sans',Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-text:'Geist','Geist Sans',Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-mono:'Geist Mono','SFMono-Regular',Menlo,Consolas,'Liberation Mono',monospace;
}

/* ---------- top navigation ---------- */
#nav{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;justify-content:space-between;
  padding:20px 40px;opacity:0;transform:translateY(-14px);
  transition:opacity .9s .2s ease,transform .9s .2s ease}
body.loaded #nav, body.page #nav{opacity:1;transform:translateY(0)}
.n-brand{display:flex;align-items:center;text-decoration:none;z-index:2}
.n-brand img{width:104px;display:block;transition:transform .4s ease}
.n-brand:hover img{transform:scale(1.05)}
.n-pill{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;
  background:rgba(12,9,6,.42);border:1px solid rgba(215,178,117,.14);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transition:background .45s ease,border-color .45s ease,box-shadow .45s ease}
#nav.solid .n-pill{background:rgba(4,3,2,.82);border-color:rgba(215,178,117,.24);
  box-shadow:0 10px 44px rgba(0,0,0,.55)}
/* Pin the menu to the true centre of the screen. Flex space-between only
   centres it when the brand and the right-hand buttons happen to be the same
   width, which they are not, and the film page's autoplay button pushed it
   103px off. Taking it out of flow makes it exact regardless of either side.
   Only above 1340px: the menu is ~436px and the film page's right-hand cluster
   is ~410px once autoplay, the icon-only skip, the language toggle and the CTA
   are counted, so a centred menu first clears them at ~1334px. Below that the
   flex fallback keeps everything apart, slightly off-centre but never
   overlapping. Measured, not estimated: the earlier figure in this comment was
   wrong and the menu overlapped autoplay at 1440. */
@media (min-width:1340px){
  .n-pill{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
}
.n-link{position:relative;display:flex;align-items:center;gap:7px;padding:9px 17px;border:0;background:none;
  color:var(--muted);text-decoration:none;font-family:var(--font-text);font-size:10.5px;
  letter-spacing:.28em;text-transform:uppercase;cursor:pointer;transition:color .3s ease;white-space:nowrap}
.n-link::after{content:'';position:absolute;left:17px;right:17px;bottom:5px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.n-link:hover{color:var(--gold)}
.n-link:hover::after{transform:scaleX(1)}
.n-link svg{width:8px;height:5px;transition:transform .35s ease}
.n-drop{position:relative}
.n-drop.open .n-dropbtn{color:var(--gold)}
.n-drop.open .n-dropbtn svg{transform:rotate(180deg)}
.n-menu{position:absolute;top:calc(100% + 16px);left:50%;transform:translate(-50%,10px);min-width:344px;
  background:rgba(6,5,3,.92);border:1px solid rgba(215,178,117,.16);border-radius:18px;padding:8px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  opacity:0;visibility:hidden;transition:all .35s cubic-bezier(.22,1,.36,1);
  box-shadow:0 24px 70px rgba(0,0,0,.65)}
.n-drop.open .n-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.n-menu a{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:11px 14px;
  border-radius:12px;text-decoration:none;transition:background .25s ease,padding-left .25s ease}
.n-menu a b{color:var(--ink);font-family:var(--font-display);font-weight:400;font-size:15px;letter-spacing:.02em;white-space:nowrap}
.n-menu a span{color:var(--muted);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.n-menu a:hover{background:rgba(215,178,117,.09);padding-left:20px}
.n-menu a:hover b{color:var(--gold)}
.n-menu .n-all{margin-top:6px;border-top:1px solid rgba(215,178,117,.14);border-radius:0 0 12px 12px;
  justify-content:center;color:var(--gold);font-size:10px;letter-spacing:.3em;text-transform:uppercase;padding:13px 14px 9px}
.n-cta{padding:12px 26px;border:1px solid rgba(215,178,117,.45);border-radius:999px;color:var(--gold);
  text-decoration:none;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;white-space:nowrap;
  transition:all .4s ease}
.n-cta:hover{background:var(--gold);color:#171208;box-shadow:0 6px 34px rgba(215,178,117,.32);letter-spacing:.38em}
.n-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;z-index:2}
.n-burger i{width:24px;height:1.5px;background:var(--gold);transition:all .35s ease}
body.menu-open .n-burger i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open .n-burger i:nth-child(2){opacity:0}
body.menu-open .n-burger i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.n-overlay{position:fixed;inset:0;z-index:85;background:rgba(0,0,0,.96);backdrop-filter:blur(10px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  opacity:0;visibility:hidden;transition:all .5s ease}
body.menu-open .n-overlay{opacity:1;visibility:visible}
.n-overlay a{font-family:var(--font-display);font-weight:300;font-size:clamp(30px,7vw,44px);color:var(--ink);
  text-decoration:none;transition:color .3s,letter-spacing .3s}
.n-overlay a:hover{color:var(--gold);letter-spacing:.06em}
.n-overlay .socials{margin-top:26px}
@media (max-width:900px){
  #nav{padding:14px 18px}
  .n-pill,.n-cta{display:none}
  .n-burger{display:flex}
}

/* ---------- footer ---------- */
footer{padding:60px 6vw 46px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  border-top:1px solid rgba(215,178,117,.1)}
footer img{width:92px;opacity:.8}
footer p{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.socials{display:flex;gap:26px}
.socials a{color:var(--muted);display:flex;align-items:center;transition:color .3s,transform .3s}
.socials a:hover{color:var(--gold);transform:translateY(-2px)}
.socials a svg{width:15px;height:15px;fill:currentColor;display:block}

/* ---------- generic page scaffolding ---------- */
body.page{background:var(--bg);color:var(--ink);font-family:var(--font-text);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
.page-wrap{width:min(1180px,92vw);margin:0 auto;padding:clamp(140px,19vh,210px) 0 12vh}
.p-kicker{font-size:11px;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}
.p-title{font-family:var(--font-display);font-weight:300;font-size:clamp(40px,6.4vw,84px);line-height:1.04;
  letter-spacing:-.015em;margin-bottom:22px}
.p-title em{font-style:italic;color:var(--gold)}
.p-sub{max-width:560px;color:var(--muted);font-weight:300;font-size:15px;line-height:1.85}
.p-sec{margin-top:11vh}
.rv{opacity:0;transform:translateY(36px);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:translateY(0)}

/* ---------- ventures page ---------- */
.v-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:7vh}
.v-card{position:relative;overflow:hidden;border:1px solid rgba(215,178,117,.12);border-radius:24px;
  padding:38px 32px 32px;background:linear-gradient(155deg,rgba(215,178,117,.06),transparent 45%);
  transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .5s,box-shadow .5s}
.v-card:hover{transform:translateY(-8px);border-color:rgba(215,178,117,.4);box-shadow:0 30px 70px rgba(0,0,0,.6)}
.v-logo{height:56px;width:auto;display:block;margin-bottom:22px;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.6));transition:transform .5s cubic-bezier(.22,1,.36,1)}
.v-card:hover .v-logo{transform:translateY(-4px) scale(1.06)}
.v-tag{font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.v-card h3{font-family:var(--font-display);font-weight:400;font-size:26px;margin-bottom:12px}
.v-card p{color:var(--muted);font-size:13px;font-weight:300;line-height:1.85;margin-bottom:22px}
.v-card a{color:var(--gold);text-decoration:none;font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  border-bottom:1px solid rgba(215,178,117,.35);padding-bottom:4px;transition:all .35s}
.v-card a:hover{letter-spacing:.4em;border-color:var(--gold)}
.v-house{margin-top:9vh;text-align:center;padding:60px 20px;border:1px solid rgba(215,178,117,.14);
  border-radius:28px;background:radial-gradient(600px 200px at 50% 0%,rgba(215,178,117,.08),transparent 70%)}
.v-house img{width:min(240px,50vw);margin-bottom:20px}
.v-house p{max-width:520px;margin:0 auto;color:var(--muted);font-size:13.5px;font-weight:300;line-height:1.9}

/* ---------- blogs page ---------- */
.b-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px;margin-top:7vh}
.b-card{border:1px solid rgba(215,178,117,.12);border-radius:24px;padding:34px 30px;
  display:flex;flex-direction:column;gap:14px;background:linear-gradient(155deg,rgba(215,178,117,.05),transparent 50%);
  transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .5s,box-shadow .5s}
.b-card:hover{transform:translateY(-8px);border-color:rgba(215,178,117,.4);box-shadow:0 30px 70px rgba(0,0,0,.6)}
.b-meta{display:flex;align-items:center;gap:14px;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.b-meta .chip{color:var(--gold);border:1px solid rgba(215,178,117,.35);border-radius:999px;padding:5px 13px}
.b-card h3{font-family:var(--font-display);font-weight:400;font-size:23px;line-height:1.3}
.b-card p{color:var(--muted);font-size:13px;font-weight:300;line-height:1.85;flex:1}
.b-more{color:var(--gold);font-size:10px;letter-spacing:.3em;text-transform:uppercase}

/* ---------- news page ---------- */
.nws{margin-top:7vh;border-left:1px solid rgba(215,178,117,.18);padding-left:clamp(22px,4vw,50px);
  display:flex;flex-direction:column;gap:52px}
.nws-item{position:relative}
.nws-item::before{content:'';position:absolute;left:calc(-1 * clamp(22px,4vw,50px) - 5px);top:8px;width:9px;height:9px;
  border-radius:50%;background:var(--bg);border:1px solid var(--gold);box-shadow:0 0 14px rgba(215,178,117,.4)}
.nws-date{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.nws-item h3{font-family:var(--font-display);font-weight:400;font-size:clamp(21px,2.4vw,29px);margin-bottom:10px;max-width:640px}
.nws-item p{color:var(--muted);font-size:13.5px;font-weight:300;line-height:1.85;max-width:600px}

/* ---------- about page ---------- */
.a-cols{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,90px);margin-top:7vh;align-items:start}
.a-cols p{color:var(--muted);font-size:14.5px;font-weight:300;line-height:2;margin-bottom:22px}
.a-cols p b{color:var(--ink);font-weight:500}
.a-stats{display:flex;flex-direction:column;gap:34px}
.stat{border-left:1px solid rgba(215,178,117,.3);padding-left:24px}
.stat .num{font-family:var(--font-display);font-weight:300;font-size:52px;color:var(--gold);line-height:1}
.stat .lbl{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.a-principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:8vh}
.pr{border:1px solid rgba(215,178,117,.12);border-radius:22px;padding:30px 26px}
.pr .n{font-family:var(--font-display);font-style:italic;color:var(--gold);font-size:14px;display:block;margin-bottom:12px}
.pr h4{font-family:var(--font-display);font-weight:400;font-size:20px;margin-bottom:10px}
.pr p{color:var(--muted);font-size:12.5px;font-weight:300;line-height:1.8}
@media (max-width:900px){.a-cols{grid-template-columns:1fr}}
/* mission & vision: two facing statements, the pair that frames everything under it */
.a-mv{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);margin-top:5vh}
.mv{border:1px solid rgba(215,178,117,.18);border-radius:18px;padding:clamp(26px,3vw,40px);
  background:linear-gradient(160deg,rgba(215,178,117,.06),rgba(215,178,117,.015))}
.mv-k{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.mv h3{font-family:var(--font-display);font-weight:300;font-size:clamp(21px,2.2vw,28px);
  line-height:1.3;margin-bottom:16px;color:var(--ink)}
.mv-body p{color:var(--muted);font-size:14px;font-weight:300;line-height:1.95;margin-bottom:14px}
.mv-body p:last-child{margin-bottom:0}

/* timeline: a single gilt rule with the years hung off it.
   Written in logical properties so the rail, the dots and the year column all
   mirror together in Arabic instead of needing a parallel set of RTL overrides
   that drift out of step. --rail is the one number to change: the column, the
   rule and the dots are all derived from it. Arabic gets a wider rail because
   the Levantine month names ("كانون الثاني") are three times the width of
   "Jan". */
.a-time{list-style:none;margin-top:6vh;padding:0;position:relative;--rail:112px}
.a-time::before{content:'';position:absolute;inset-inline-start:var(--rail);top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(215,178,117,.45) 12%,rgba(215,178,117,.45) 88%,transparent)}
.a-time li{position:relative;display:grid;grid-template-columns:var(--rail) 1fr;
  gap:clamp(24px,3vw,44px);padding-bottom:38px}
.a-time li:last-child{padding-bottom:0}
.a-time li::before{content:'';position:absolute;inset-inline-start:calc(var(--rail) - 3px);top:9px;
  width:7px;height:7px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 4px var(--bg),0 0 18px rgba(215,178,117,.5)}
.a-time .yr{font-family:var(--font-mono);font-size:13px;color:var(--gold);letter-spacing:.08em;
  text-align:end;padding-inline-end:20px;padding-top:1px;line-height:1.5}
.a-time h4{font-family:var(--font-display);font-weight:400;font-size:18px;margin-bottom:8px;color:var(--ink)}
.a-time p{color:var(--muted);font-size:13px;font-weight:300;line-height:1.85}
[dir="rtl"] .a-time{--rail:158px}

/* achievements: the numbers, stated plainly */
.a-ach{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-top:6vh}
.ach{border:1px solid rgba(215,178,117,.16);border-radius:16px;padding:26px 24px;
  transition:border-color .45s ease,transform .45s ease}
.ach:hover{border-color:rgba(215,178,117,.4);transform:translateY(-3px)}
.ach-m{font-family:var(--font-display);font-weight:300;font-size:38px;color:var(--gold);
  line-height:1;margin-bottom:14px;letter-spacing:-.02em}
.ach h4{font-family:var(--font-display);font-weight:400;font-size:17px;margin-bottom:9px;color:var(--ink)}
.ach-role{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.ach p{color:var(--muted);font-size:12.5px;font-weight:300;line-height:1.8}

@media (max-width:900px){
  .a-mv{grid-template-columns:1fr}
  /* the rail moves to the edge and the year sits above its milestone */
  .a-time,[dir="rtl"] .a-time{--rail:8px}
  .a-time li{grid-template-columns:1fr;gap:6px;padding-inline-start:34px}
  .a-time li::before{top:7px}
  .a-time .yr{text-align:start;padding-inline-end:0}
}
[dir="rtl"] .mv-body p,[dir="rtl"] .a-time p,[dir="rtl"] .ach p{text-align:right}

/* ---------- contact page ---------- */
.c-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,6vw,90px);margin-top:7vh;align-items:start}
.c-info p{color:var(--muted);font-size:14px;font-weight:300;line-height:1.95;margin-bottom:26px}
.c-line{margin-bottom:18px}
.c-line .lbl{font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.c-line a{color:var(--gold);text-decoration:none;font-family:var(--font-display);font-size:20px;
  border-bottom:1px solid rgba(215,178,117,.3);padding-bottom:2px;transition:border-color .3s}
.c-line a:hover{border-color:var(--gold)}
#contactForm{display:flex;flex-direction:column;gap:26px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.f-field{display:flex;flex-direction:column;gap:9px}
.f-field label{font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.f-field input,.f-field select,.f-field textarea{background:transparent;border:0;border-bottom:1px solid rgba(215,178,117,.25);
  color:var(--ink);font-family:var(--font-text);font-size:15px;font-weight:300;padding:10px 2px;outline:none;
  transition:border-color .35s;border-radius:0;resize:vertical}
.f-field select{cursor:pointer}
.f-field select option{background:#0a0806}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{border-color:var(--gold)}
.f-send{align-self:flex-start;margin-top:6px;padding:15px 40px;border:1px solid rgba(215,178,117,.45);border-radius:999px;
  background:transparent;color:var(--gold);font-family:var(--font-text);font-size:11px;letter-spacing:.35em;text-transform:uppercase;
  cursor:pointer;transition:all .4s ease}
.f-send:hover{background:var(--gold);color:#171208;box-shadow:0 8px 40px rgba(215,178,117,.35)}
#contactForm .f-ok{display:none;font-family:var(--font-display);font-style:italic;font-size:20px;color:var(--gold)}
#contactForm.sent .f-row,#contactForm.sent .f-field,#contactForm.sent .f-send{display:none}
#contactForm.sent .f-ok{display:block}
@media (max-width:900px){.c-grid,.f-row{grid-template-columns:1fr}}

/* ---------- CMS cards: covers on blog + news, and article pages ---------- */
.b-card{display:block;text-decoration:none;overflow:hidden;padding:0}
.b-cover{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  border-bottom:1px solid rgba(215,178,117,.12)}
.b-body{padding:26px 26px 30px}
.nws-item{display:grid;grid-template-columns:220px 1fr;gap:26px;align-items:center;text-decoration:none}
.nws-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;display:block;
  border:1px solid rgba(215,178,117,.12)}
@media (max-width:720px){ .nws-item{grid-template-columns:1fr} }
.a-cover{width:100%;max-height:52vh;object-fit:cover;border-radius:20px;margin:6vh 0 2vh;
  border:1px solid rgba(215,178,117,.14);display:block}
.a-body{max-width:720px;color:var(--muted);font-weight:300;font-size:15.5px;line-height:1.95}
.a-body p{margin-bottom:1.5em}
.a-body h3{font-family:var(--font-display);font-weight:400;font-size:23px;color:var(--ink);
  margin:2.2em 0 .9em;letter-spacing:-.01em}
.a-body b{color:var(--ink);font-weight:500}
.a-back{margin-top:6vh}
.a-back a{color:var(--gold);text-decoration:none;font-size:10.5px;letter-spacing:.3em;
  text-transform:uppercase;border-bottom:1px solid rgba(215,178,117,.35);padding-bottom:4px;
  transition:letter-spacing .35s ease}
.a-back a:hover{letter-spacing:.4em}
.v-card a{display:inline-block;margin-right:18px}
.b-card,.nws-item{color:inherit}
.b-card h3,.nws-item h3{color:var(--ink)}
.b-card:hover h3,.nws-item:hover h3{color:var(--gold)}
/* article pages render inside page-wrap directly, not a card grid */
.a-body{margin-top:2vh}
.a-cover{max-width:900px}

/* ---------- brand kit v3.1: type roles ---------- */
/* Display 500/600 tracked -2%; Text 400/500 tracking 0; Data & labels Geist Mono +6% */
.p-title,.hero h1,.caption h2,.v-card h3,.b-card h3,.nws-item h3,.a-body h3,.finale h2{
  font-family:var(--font-display);letter-spacing:-.02em}
.meter .pct,.caption .idx,.b-meta,.nws-date,.a-stats .num,.v-tag,.chip{
  font-family:var(--font-mono);letter-spacing:.06em}
.a-stats .num{letter-spacing:-.01em}


/* ---------- language toggle ---------- */
.n-lang{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;
  padding:0 12px;border:1px solid rgba(215,178,117,.45);border-radius:999px;color:var(--gold);
  text-decoration:none;font-size:15px;line-height:1;white-space:nowrap;
  font-family:'Tajawal','Geist',sans-serif;
  transition:background .4s ease,color .4s ease,box-shadow .4s ease}
.n-lang:hover{background:var(--gold);color:#171208;box-shadow:0 6px 34px rgba(215,178,117,.32)}
@media (max-width:900px){ .n-lang{display:none} }
.n-lang-m{font-family:'Tajawal','Geist',sans-serif}

/* ---------- brand kit: the star ----------
   "Round the corners and a four-pointed star opens wherever four tips meet.
   Its arcs are the icon's own corner radius." Used here as the navigation
   bullet: it opens before the label on hover and stays open on the active tab.
   The SVG uses single quotes so the double-quoted url() cannot be terminated
   early, which silently disabled the mask the first time round. */
.n-link::before,.n-cta::before,.n-dropbtn::before{
  content:'';flex:none;width:0;height:11px;margin-right:0;
  background:var(--gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20150'%3E%3Cpath%20d='M135.03,14.97%20A84.90,84.90%200%200%201%2014.97,14.97%20A84.90,84.90%200%200%201%2014.97,135.03%20A84.90,84.90%200%200%201%20135.03,135.03%20A84.90,84.90%200%200%201%20135.03,14.97%20Z'%20fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20150'%3E%3Cpath%20d='M135.03,14.97%20A84.90,84.90%200%200%201%2014.97,14.97%20A84.90,84.90%200%200%201%2014.97,135.03%20A84.90,84.90%200%200%201%20135.03,135.03%20A84.90,84.90%200%200%201%20135.03,14.97%20Z'%20fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:0;transform:rotate(-45deg) scale(.4);
  transition:width .34s cubic-bezier(.22,1,.36,1),opacity .28s ease,
             margin-right .34s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1)}
.n-link:hover::before,.n-cta:hover::before,
.n-drop.open .n-dropbtn::before,
.n-link[aria-current="page"]::before,
.n-dropbtn[aria-current="page"]::before{
  width:11px;margin-right:10px;opacity:1;transform:rotate(0deg) scale(1)}
.n-link[aria-current="page"],.n-dropbtn[aria-current="page"]{color:var(--gold)}
[dir="rtl"] .n-link:hover::before,[dir="rtl"] .n-cta:hover::before,
[dir="rtl"] .n-drop.open .n-dropbtn::before,
[dir="rtl"] .n-link[aria-current="page"]::before,
[dir="rtl"] .n-dropbtn[aria-current="page"]::before{margin-right:0;margin-left:10px}
.n-overlay a::before{content:'';display:inline-block;width:0;height:16px;vertical-align:middle;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20150'%3E%3Cpath%20d='M135.03,14.97%20A84.90,84.90%200%200%201%2014.97,14.97%20A84.90,84.90%200%200%201%2014.97,135.03%20A84.90,84.90%200%200%201%20135.03,135.03%20A84.90,84.90%200%200%201%20135.03,14.97%20Z'%20fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20150'%3E%3Cpath%20d='M135.03,14.97%20A84.90,84.90%200%200%201%2014.97,14.97%20A84.90,84.90%200%200%201%2014.97,135.03%20A84.90,84.90%200%200%201%20135.03,135.03%20A84.90,84.90%200%200%201%20135.03,14.97%20Z'%20fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:0;margin-right:0;transition:width .3s ease,opacity .3s ease,margin-right .3s ease}
.n-overlay a:hover::before{width:16px;margin-right:12px;opacity:1}