@import url("../fonts/fonts.css");

/* =========================================================================
   GLITTER — design system
   Palette lifted directly from the Glitter 2025 company profile:
     magenta  #eb0a8c   cyan #09b2e0   lilac #e1ddeb   midnight #03002d
     cover gradients    #0f0230 -> #7829c2   /   #630073 -> #03002f
   ========================================================================= */

:root{
  /* --- brand core --- */
  --ink:          #03002d;
  --ink-2:        #0b0533;
  --void:         #060126;
  --violet-950:   #0f0230;
  --violet-900:   #12043a;
  --violet-800:   #1d0a4d;
  --violet-700:   #2e035d;
  --violet-600:   #5a1a9e;
  --violet-500:   #7829c2;
  --violet-400:   #9d4bdd;
  --violet-300:   #bd86ee;
  --magenta:      #eb0a8c;
  --magenta-400:  #ff3fa6;
  --magenta-300:  #ff7cc4;
  --cyan:         #09b2e0;
  --cyan-300:     #5fd8f7;
  --lilac:        #e1ddeb;
  --lilac-2:      #eceaf3;
  --paper:        #f6f4fb;
  --white:        #ffffff;

  /* --- semantic (dark is the default canvas) --- */
  --bg:           var(--ink);
  --fg:           #ece9f6;
  --fg-soft:      #b3aacb;
  --fg-faint:     #7d739b;
  --line:         rgba(225,221,235,.14);
  --line-strong:  rgba(225,221,235,.28);
  --card:         rgba(255,255,255,.045);
  --card-2:       rgba(255,255,255,.07);

  /* --- gradients --- */
  --g-brand:      linear-gradient(100deg,#eb0a8c 0%,#b13ad4 48%,#09b2e0 100%);
  --g-brand-soft: linear-gradient(100deg,#ff4fb2 0%,#bd86ee 50%,#5fd8f7 100%);
  --g-cosmic:     linear-gradient(165deg,#12043a 0%,#03002d 52%,#060126 100%);
  --g-violet:     linear-gradient(120deg,#0f0230 0%,#2e035d 55%,#7829c2 100%);

  /* --- type --- */
  --f-display: 'Archivo Black','Archivo','Cairo','Segoe UI',system-ui,sans-serif;
  --f-body:    'Archivo','Cairo','Segoe UI',system-ui,-apple-system,sans-serif;

  /* --- metrics --- */
  --container: 1280px;
  --gutter:    clamp(1.25rem,4vw,3.5rem);
  --section-y: clamp(5rem,10vw,9.5rem);
  --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-xl: 40px;

  /* --- motion --- */
  /* label tracking multiplier — Arabic is cursive, so it drops to 0 (see below) */
  --track: 1;

  --e-out:  cubic-bezier(.16,1,.3,1);
  --e-soft: cubic-bezier(.4,0,.2,1);
  --t-fast: .28s var(--e-soft);
  --t-mid:  .55s var(--e-out);
  --t-slow: .9s  var(--e-out);
}

/* =========================== reset =========================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:clamp(1rem,.96rem + .18vw,1.075rem);
  line-height:1.68;
  font-weight:400;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--magenta);color:#fff}
:focus-visible{outline:2px solid var(--cyan-300);outline-offset:3px;border-radius:4px}

/* Arabic / RTL */
/* Arabic letters join into words. Any positive tracking pulls those joins apart
   and the text stops reading as Arabic — so every label style multiplies its
   tracking by --track, which is 0 here. Negative display tracking is untouched:
   it only ever applies to the Latin brand words. */
html[lang="ar"]{--track:0}
html[lang="ar"] body{font-family:'Cairo','Archivo',system-ui,sans-serif;line-height:1.85;letter-spacing:0}
html[lang="ar"] .display,
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{font-family:'Cairo',var(--f-display);font-weight:900;letter-spacing:0}

/* Cairo carries taller ascenders and deeper descenders than Archivo Black, so
   the tight Latin display leading collides with itself in Arabic. */
html[lang="ar"] .display{line-height:1.24}
html[lang="ar"] .d1{line-height:1.18}
html[lang="ar"] .d2{line-height:1.2}
html[lang="ar"] .d3{line-height:1.28}
html[lang="ar"] .d4{line-height:1.34}
html[lang="ar"] .tl__title,
html[lang="ar"] .svc__name,
html[lang="ar"] .work-card__title,
html[lang="ar"] .quote__text{line-height:1.4}

/* =========================== layout =========================== */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{position:relative;padding-block:var(--section-y)}
.section--tight{padding-block:clamp(3.5rem,7vw,6rem)}
.stack>*+*{margin-block-start:var(--gap,1.25rem)}

/* light surface sections */
.section--light{
  background:
    radial-gradient(120% 90% at 12% 0%,#fff 0%,rgba(255,255,255,0) 60%),
    linear-gradient(180deg,var(--paper) 0%,var(--lilac) 100%);
  color:var(--ink);
}
.section--light{--fg:var(--ink);--fg-soft:#4b4470;--fg-faint:#6f6893;--line:rgba(3,0,45,.12);--line-strong:rgba(3,0,45,.24);--card:rgba(255,255,255,.72);--card-2:#fff}
.section--light .display{color:var(--ink)}

/* deep cosmic sections */
.section--cosmic{background:var(--g-cosmic)}
.section--cosmic::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 50% at 78% 8%,rgba(235,10,140,.20),transparent 65%),
    radial-gradient(55% 55% at 6% 84%,rgba(9,178,224,.16),transparent 68%),
    radial-gradient(50% 45% at 50% 50%,rgba(120,41,194,.16),transparent 70%);
}
.section--cosmic>*{position:relative;z-index:1}

/* soft grain, keeps big gradients from banding */
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* =========================== type =========================== */
.display{
  font-family:var(--f-display);
  font-weight:400;
  line-height:.94;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.d1{font-size:clamp(2.55rem,1rem + 5.4vw,5.5rem)}
.d2{font-size:clamp(2.1rem,1.05rem + 3.9vw,4.15rem)}
.d3{font-size:clamp(1.8rem,1.1rem + 2.9vw,3.15rem);line-height:1}
.d4{font-size:clamp(1.35rem,1.05rem + 1.3vw,1.95rem);line-height:1.1;letter-spacing:-.025em}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.735rem;font-weight:700;letter-spacing:calc(.22em * var(--track));text-transform:uppercase;
  color:var(--fg-soft);
}
.eyebrow::before{
  content:"";width:26px;height:2px;border-radius:2px;background:var(--g-brand);flex:none;
}

.lead{font-size:clamp(1.06rem,1rem + .5vw,1.35rem);line-height:1.62;color:var(--fg-soft)}

/* No orphans: `pretty` pulls a word down from the previous line rather than
   leaving one or two words stranded on the last line. `balance` evens the
   line lengths of short display type. Both degrade to normal wrapping. */
p,.lead,.svc__text,.hero-fact__v,.stat__v,.form-note,.objective p,.tl p,
.footer__list a,.contact-line__v,.drawer__foot a{text-wrap:pretty}
.display,.svc__name,.svc-item__t,.work-card__title,.tl__title,.quote__text,
.svc__kind,.work-card__role,.objective__label,.eyebrow{text-wrap:balance}
.measure,.measure-sm{text-wrap:pretty}
.muted{color:var(--fg-soft)}
.faint{color:var(--fg-faint)}
.measure{max-width:58ch}
.measure-sm{max-width:44ch}

.grad-text{
  background:var(--g-brand-soft);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
}
.section--light .grad-text{background:var(--g-brand);-webkit-background-clip:text;background-clip:text}

.mark-em{color:var(--magenta-300);font-style:italic;font-weight:600}
.section--light .mark-em{color:var(--magenta)}

/* =========================== buttons =========================== */
.btn{
  --btn-fg:#fff;
  position:relative;display:inline-flex;align-items:center;gap:.65rem;
  padding:.95rem 1.7rem;border-radius:999px;border:1px solid transparent;
  font-weight:700;font-size:.94rem;letter-spacing:calc(.01em * var(--track));
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:transform var(--t-fast),box-shadow var(--t-fast),color var(--t-fast),border-color var(--t-fast);
  will-change:transform;
}
.btn svg{flex:none;transition:transform var(--t-fast)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:hover svg{transform:translateX(3px)}
html[dir="rtl"] .btn:hover svg{transform:translateX(-3px)}
html[dir="rtl"] .btn svg{transform:scaleX(-1)}
html[dir="rtl"] .btn:hover svg{transform:scaleX(-1) translateX(3px)}

.btn--primary{background:var(--g-brand);color:#fff;box-shadow:0 10px 34px -12px rgba(235,10,140,.75)}
.btn--primary::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(100deg,#09b2e0,#b13ad4 52%,#eb0a8c);
  transition:opacity var(--t-mid);
}
.btn--primary:hover{box-shadow:0 16px 40px -12px rgba(9,178,224,.7)}
.btn--primary:hover::after{opacity:1}

.btn--ghost{border-color:var(--line-strong);color:var(--fg);background:transparent}
.btn--ghost:hover{border-color:var(--magenta-300);color:#fff;background:rgba(235,10,140,.10)}
.section--light .btn--ghost:hover{color:var(--ink);background:rgba(235,10,140,.07)}

.btn--sm{padding:.62rem 1.15rem;font-size:.85rem}

/* text link with sliding rule */
.link-u{position:relative;display:inline-flex;align-items:center;gap:.5rem;font-weight:600;padding-block:.15rem}
.link-u::after{
  content:"";position:absolute;inset-inline-start:0;bottom:0;height:1.5px;width:100%;
  background:var(--g-brand);transform:scaleX(0);transform-origin:inline-start;
  transition:transform var(--t-mid);
}
.link-u:hover::after{transform:scaleX(1)}

/* =========================== header =========================== */
.header{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:120;
  transition:transform .45s var(--e-out),background .35s var(--e-soft),
             backdrop-filter .35s var(--e-soft),border-color .35s var(--e-soft);
  border-block-end:1px solid transparent;
}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-block:clamp(.85rem,1.6vw,1.35rem);
  transition:padding .35s var(--e-soft);
}
.header.is-stuck{
  background:rgba(6,1,38,.78);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-block-end-color:rgba(225,221,235,.12);
}
.header.is-stuck .header__inner{padding-block:.7rem}
.header.is-hidden{transform:translateY(-102%)}

.brand{display:inline-flex;align-items:center;gap:.7rem;flex:none}
.brand__mark{width:38px;height:38px;flex:none;transition:transform .6s var(--e-out)}
.brand:hover .brand__mark{transform:rotate(-12deg) scale(1.06)}
.brand__word{
  font-family:var(--f-display);font-size:1.42rem;letter-spacing:-.045em;
  color:#fff;line-height:1;padding-block-start:.12em;
}
html[lang="ar"] .brand__word{font-family:var(--f-display)}

.nav{display:flex;align-items:center;gap:.35rem}
.nav__link{
  position:relative;padding:.55rem .9rem;border-radius:999px;
  font-size:.92rem;font-weight:600;color:var(--fg-soft);
  transition:color var(--t-fast);
}
.nav__link::before{
  content:"";position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.08);
  opacity:0;transform:scale(.85);transition:opacity var(--t-fast),transform var(--t-fast);
}
.nav__link:hover{color:#fff}
.nav__link:hover::before{opacity:1;transform:scale(1)}
.nav__link.is-active{color:#fff}
.nav__link.is-active::after{
  content:"";position:absolute;inset-inline:.9rem;bottom:.25rem;height:2px;border-radius:2px;
  background:var(--g-brand);
}

.header__actions{display:flex;align-items:center;gap:.6rem;flex:none}

.lang{
  display:inline-flex;align-items:center;gap:.1rem;padding:.28rem;
  border:1px solid var(--line-strong);border-radius:999px;background:rgba(255,255,255,.05);
}
.lang__btn{
  border:0;background:transparent;cursor:pointer;border-radius:999px;
  font-family:'Archivo','Cairo',system-ui,sans-serif;
  padding:.32rem .7rem;font-size:.8rem;font-weight:700;letter-spacing:calc(.04em * var(--track));
  color:var(--fg-soft);transition:color var(--t-fast),background var(--t-fast);
}
.lang__btn.is-on{background:var(--g-brand);color:#fff}
.lang__btn[data-lang="ar"]{font-family:'Cairo','Archivo',system-ui,sans-serif;font-size:1rem;line-height:1;padding-block:.24rem .4rem}
.lang__btn:not(.is-on):hover{color:#fff}

.burger{
  display:none;width:44px;height:44px;border:1px solid var(--line-strong);border-radius:14px;
  background:rgba(255,255,255,.05);cursor:pointer;place-items:center;
  transition:border-color var(--t-fast),background var(--t-fast);
}
.burger:hover{border-color:var(--magenta-300)}
.burger span{display:block;width:18px;height:2px;border-radius:2px;background:#fff;transition:transform .4s var(--e-out),opacity .25s}
.burger span+span{margin-block-start:5px}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:110;display:grid;align-content:center;
  padding:6rem var(--gutter) 3rem;
  background:var(--g-cosmic);
  clip-path:circle(0% at calc(100% - 44px) 44px);
  transition:clip-path .7s var(--e-out);
  pointer-events:none;
}
html[dir="rtl"] .drawer{clip-path:circle(0% at 44px 44px)}
.drawer.is-open{clip-path:circle(150% at calc(100% - 44px) 44px);pointer-events:auto}
html[dir="rtl"] .drawer.is-open{clip-path:circle(150% at 44px 44px)}
.drawer__nav{display:grid;gap:.2rem}
.drawer__link{
  font-family:var(--f-display);font-size:clamp(2rem,9vw,3.2rem);letter-spacing:-.04em;
  line-height:1.15;color:#fff;opacity:0;transform:translateY(24px);
  transition:opacity .5s var(--e-out),transform .5s var(--e-out),color var(--t-fast);
}
.drawer.is-open .drawer__link{opacity:1;transform:none;transition-delay:calc(.14s + var(--i,0)*.06s)}
.drawer__link:hover{color:var(--magenta-300)}
.drawer__foot{margin-block-start:2.5rem;display:grid;gap:.4rem;color:var(--fg-soft);font-size:.95rem}
.drawer__foot a:hover{color:#fff}

/* =========================== hero =========================== */
.hero{
  position:relative;min-height:100svh;display:grid;align-items:center;
  padding-block:clamp(6.5rem,12vh,8.5rem) clamp(3.5rem,7vh,6rem);
  overflow:clip;background:var(--void);
}
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__bg img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.72;transform:scale(1.06);
  will-change:transform;
}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(6,1,38,.72) 0%,rgba(6,1,38,.30) 35%,rgba(3,0,45,.86) 100%),
    radial-gradient(75% 60% at 50% 42%,rgba(6,1,38,0) 25%,rgba(6,1,38,.55) 100%);
}
.hero__canvas{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  /* canvas is a replaced element: inset:0 alone leaves it at its intrinsic 300x150 */
  width:100%;height:100%;
}
.hero__inner{position:relative;z-index:2}
.hero__grid{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media (min-width:1000px){.hero__grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}}

.hero__title{margin-block:1.1rem .1rem}
.hero__title .ln{display:block;overflow:hidden}
.hero__sub{margin-block-start:1.6rem;max-width:52ch;color:#cdc5e4}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-block-start:2.3rem}

.hero__side{display:grid;gap:1.15rem}
.hero-fact{
  position:relative;isolation:isolate;overflow:hidden;
  padding:1.15rem 1.3rem;border-radius:var(--r-md);
  border:1px solid var(--line);background:rgba(255,255,255,.05);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color var(--t-mid),transform var(--t-mid),background var(--t-mid);
}
.hero-fact:hover{
  border-color:var(--line-strong);
  transform:translateY(-5px);
  background:rgba(255,255,255,.09);
}
.hero-fact__k{font-family:var(--f-display);font-size:1.85rem;line-height:1;letter-spacing:-.03em;direction:ltr;unicode-bidi:isolate;text-align:start}
.hero-fact__v{margin-block-start:.35rem;font-size:.88rem;color:var(--fg-soft);line-height:1.45}

.scroll-cue{
  position:absolute;inset-block-end:1.6rem;inset-inline-start:50%;transform:translateX(-50%);
  z-index:3;display:grid;justify-items:center;gap:.55rem;
  font-size:.68rem;letter-spacing:calc(.24em * var(--track));text-transform:uppercase;color:var(--fg-faint);
}
.scroll-cue__rail{width:1px;height:52px;background:linear-gradient(180deg,transparent,var(--magenta-300),transparent);position:relative;overflow:hidden}
.scroll-cue__rail::after{content:"";position:absolute;inset-inline:0;top:-40%;height:40%;background:#fff;animation:railDrop 2.2s var(--e-soft) infinite}
@keyframes railDrop{0%{top:-40%}60%,100%{top:110%}}

/* =========================== marquee =========================== */
.marquee{
  position:relative;overflow:hidden;
  padding-block:clamp(.9rem,1.6vw,1.25rem);
  background:linear-gradient(90deg,#190040,#7d33bc 52%,#eb0a8c);
  border-block:1px solid rgba(255,255,255,.12);
}
.marquee__track{display:flex;width:max-content;animation:slide 34s linear infinite;will-change:transform}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{display:flex;align-items:center;gap:2.4rem;padding-inline-end:2.4rem;flex:none}
.marquee__item{
  font-family:var(--f-display);font-size:clamp(1rem,2.1vw,1.55rem);letter-spacing:-.02em;
  color:#fff;white-space:nowrap;text-transform:uppercase;
}
.marquee__dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.6);flex:none}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html[dir="rtl"] .marquee__track{animation-name:slideRtl}
@keyframes slideRtl{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* client logo rail — the track is cloned by JS until it is at least twice the
   container width, then it scrolls by exactly one group, so the loop is seamless
   at any viewport and with any number of logos. */
.logo-rail{overflow:hidden;position:relative;--logo-scale:.85;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
@media (min-width:700px){.logo-rail{--logo-scale:1}}
@media (min-width:1100px){.logo-rail{--logo-scale:1.15}}
.logo-rail__track{
  display:flex;width:max-content;align-items:center;
  --rail-dir:-1;
  animation:railSlide var(--rail-dur,40s) linear infinite;
  will-change:transform;
}
html[dir="rtl"] .logo-rail__track{--rail-dir:1}
.logo-rail--rev .logo-rail__track{animation-direction:reverse}
.logo-rail:hover .logo-rail__track{animation-play-state:paused}
.logo-rail__group{
  display:flex;align-items:center;flex:none;
  gap:clamp(2.5rem,6vw,5rem);padding-inline-end:clamp(2.5rem,6vw,5rem);
}
@keyframes railSlide{
  from{transform:translateX(0)}
  to  {transform:translateX(calc(var(--rail-dir) * var(--rail-w,50%)))}
}
/* --h is the canvas height that renders ~36px of ink for that particular mark
   (each logo sits on a differently padded canvas). Keep the values
   unitless-free: mixing numbers and vw inside clamp() is invalid CSS. */
.client-logo{
  /* --pad grows the area the pointer has to find without moving anything:
     the padding is cancelled by an equal negative margin. */
  --pad:0px;
  position:relative;display:inline-block;flex:none;
  line-height:0;isolation:isolate;
  padding:var(--pad);margin:calc(var(--pad) * -1);
}
.client-logo img{
  width:auto;object-fit:contain;
  max-height:min(calc(var(--h,36px) * var(--logo-scale,1)), 130px);
}

/* The logos are white ink on a transparent canvas, so a plain overlay would
   light up a rectangle. Masking the sweep with the logo file itself means the
   light only ever travels across the letterforms. */
.client-logo::after{
  content:"";position:absolute;inset:var(--pad);pointer-events:none;
  background:linear-gradient(105deg,
    transparent 38%,
    rgba(255,255,255,.55) 46%,
    rgba(255,255,255,.95) 50%,
    rgba(255,124,196,.7) 54%,
    transparent 62%);
  background-size:280% 100%;
  background-position:180% 0;
  -webkit-mask-image:var(--src);        mask-image:var(--src);
  -webkit-mask-size:contain;            mask-size:contain;
  -webkit-mask-repeat:no-repeat;        mask-repeat:no-repeat;
  -webkit-mask-position:center;         mask-position:center;
  opacity:0;
}
/* Resting the pointer keeps the light travelling. The sweep takes the first
   part of the cycle and the rest is a pause with the highlight parked outside
   the mask, so the loop reads as a repeating glint rather than a strobe. */
.client-logo:hover::after,
.client-card:hover .client-logo::after{
  opacity:1;
  animation:logoShine 2.1s cubic-bezier(.35,0,.25,1) infinite;
}
@keyframes logoShine{
  0%,   6%   {background-position:180% 0}
  58%, 100%  {background-position:-80% 0}
}

.logo-rail .client-logo{--pad:16px;opacity:.7;transition:opacity var(--t-mid),transform var(--t-mid),filter var(--t-mid)}
.logo-rail .client-logo:hover{opacity:1;transform:scale(1.07)}
/* the halo follows the alpha channel, so it hugs the mark, not its box */
.client-logo:hover img,
.client-card:hover .client-logo img{filter:drop-shadow(0 0 12px rgba(255,124,196,.45))}
.section--light .client-logo:hover img,
.section--light .client-card:hover .client-logo img{filter:drop-shadow(0 0 10px rgba(235,10,140,.35))}
.client-card{display:grid;place-items:center;min-height:132px;--logo-scale:1.3;cursor:pointer}
.client-card .client-logo{opacity:.86;transition:opacity var(--t-mid),transform var(--t-mid)}
.client-card:hover .client-logo{opacity:1;transform:scale(1.05)}

/* =========================== cards =========================== */
.grid{display:grid;gap:clamp(1rem,2vw,1.6rem)}
.grid--2{grid-template-columns:1fr}
@media (min-width:820px){.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}

.card{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(1.5rem,2.4vw,2.2rem);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--card);
  transition:border-color var(--t-mid),transform var(--t-mid),background var(--t-mid);
}
/* the spotlight follows the pointer; --mx/--my are written by main.js */
.card::before,
.hero-fact::before{
  content:"";position:absolute;inset:-1px;z-index:-1;opacity:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(235,10,140,.22),transparent 62%);
  transition:opacity var(--t-mid);
}
.card:hover{border-color:var(--line-strong);transform:translateY(-5px);background:var(--card-2)}
.card:hover::before,
.hero-fact:hover::before{opacity:1}

/* service card */
.svc{display:grid;gap:1.1rem;align-content:start;min-height:100%}
.svc__top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.svc__badge{
  width:58px;height:58px;flex:none;display:grid;place-items:center;border-radius:18px;
  background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.03));
  border:1px solid var(--line-strong);
  transition:transform var(--t-mid),background var(--t-mid);
}
.card:hover .svc__badge{transform:rotate(-8deg) scale(1.05)}
.svc__badge svg{width:26px;height:26px;stroke:var(--magenta-300);fill:none;stroke-width:1.6}
.section--light .svc__badge svg{stroke:var(--magenta)}
.svc__no{font-family:var(--f-display);font-size:.9rem;color:var(--fg-faint);letter-spacing:.02em}
.svc__name{font-family:var(--f-display);font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.035em;line-height:1}
.svc__kind{font-size:.78rem;letter-spacing:calc(.2em * var(--track));text-transform:uppercase;color:var(--magenta-300);font-weight:700;margin-block-start:.45rem}
.section--light .svc__kind{color:var(--magenta)}
.svc__text{color:var(--fg-soft);font-size:.98rem}
.svc__art{
  position:absolute;inset-block-end:-14%;inset-inline-end:-10%;width:52%;max-width:230px;
  opacity:.16;pointer-events:none;z-index:-1;
  transition:opacity var(--t-slow),transform var(--t-slow);
}
.card:hover .svc__art{opacity:.34;transform:translateY(-8px) rotate(-5deg)}

/* Pills in a flex row wrap greedily and strand the last one on a line of its
   own (3+1). An inline list wraps as text instead, so it always reads evenly. */
.svc__tags{font-size:.85rem;line-height:1.75;color:var(--fg-faint);text-wrap:pretty}
.svc__tags li{display:inline}
.svc__tags li+li::before{
  content:"";display:inline-block;vertical-align:.22em;
  width:4px;height:4px;border-radius:50%;background:var(--magenta-300);
  margin-inline:.55rem;
}
.section--light .svc__tags li+li::before{background:var(--magenta)}
.card:hover .svc__tags{color:var(--fg-soft)}

/* the newest division takes the full row instead of sitting alone in a column */
.svc--wide{grid-column:1/-1}
@media (min-width:900px){
  .svc--wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
             gap:clamp(1.5rem,3vw,3rem);align-items:center}
  .svc--wide .svc__head{display:grid;gap:1.1rem;align-content:start}
  .svc--wide .svc__art{position:static;width:100%;max-width:none;opacity:1;transform:none}
  .card:hover .svc--wide .svc__art{opacity:1;transform:translateY(-6px)}
}
.svc--wide .svc__art{filter:drop-shadow(0 26px 50px rgba(3,0,45,.5))}

.svc-item{display:grid;gap:.75rem;align-content:start;padding:1.45rem 1.4rem 1.6rem}
.svc-item__i{font-family:var(--f-display);font-size:.78rem;letter-spacing:.08em;color:var(--fg-faint)}
.svc-item__t{font-family:var(--f-display);font-size:1.08rem;line-height:1.18;letter-spacing:-.025em}
html[lang="ar"] .svc-item__t{font-size:1.05rem;line-height:1.5}
.svc-item::after{
  content:"";position:absolute;inset-block-end:0;inset-inline:0;height:2px;
  background:var(--g-brand);transform:scaleX(0);transform-origin:inline-start;
  transition:transform .55s var(--e-out);
}
.svc-item:hover::after{transform:scaleX(1)}

.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{
  padding:.4rem .8rem;border-radius:999px;border:1px solid var(--line);
  font-size:.79rem;font-weight:600;color:var(--fg-soft);background:rgba(255,255,255,.03);
  transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast);
}
.chip:hover{border-color:var(--magenta-300);color:var(--fg);background:rgba(235,10,140,.10)}
.section--light .chip{background:rgba(255,255,255,.65)}

/* =========================== split / feature blocks =========================== */
.split{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (min-width:900px){.split{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split--rev>*:first-child{order:2}}

.art-frame{
  position:relative;aspect-ratio:1/1;display:grid;place-items:center;
  border-radius:var(--r-xl);overflow:hidden;
  background:radial-gradient(70% 70% at 50% 45%,rgba(120,41,194,.32),transparent 70%);
}
.art-frame::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  border:1px solid var(--line);
}
.art-frame__glow{
  position:absolute;width:62%;aspect-ratio:1;border-radius:50%;filter:blur(64px);opacity:.5;
  background:var(--g-brand);animation:breathe 9s var(--e-soft) infinite;
}
.section--light .art-frame{
  background:radial-gradient(72% 72% at 50% 45%,rgba(157,75,221,.14),rgba(255,255,255,0) 72%);
  box-shadow:0 26px 70px -40px rgba(3,0,45,.4);
}
.section--light .art-frame__glow{opacity:.3;filter:blur(78px)}
.section--light .art-frame::before{border-color:rgba(3,0,45,.10)}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.42}50%{transform:scale(1.16);opacity:.62}}
.art-frame img{position:relative;width:74%;filter:drop-shadow(0 24px 46px rgba(3,0,45,.55))}
.art-frame--sm{aspect-ratio:4/3}

/* Some of the profile's cut-outs run off their own canvas (the reaching hands
   lose the wrist at the top-left). Insetting such an image leaves the cut edge
   floating with a gap to the frame; oversizing it lets the frame do the
   cropping instead, so the bleed reads as deliberate. */
.art-frame--bleed{overflow:hidden}
.art-frame--bleed img{width:112%;max-width:none}

.float{animation:float 7s var(--e-soft) infinite}
.float--slow{animation-duration:10s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* =========================== team =========================== */
.team-card{display:grid;gap:.7rem;justify-items:center;text-align:center;padding:1.4rem 1rem}
.team-card__photo{
  width:104px;height:104px;border-radius:50%;object-fit:cover;
  border:2px solid var(--line-strong);
}
.team-card__photo--blank{
  display:grid;place-items:center;
  font-family:var(--f-display);font-size:2.2rem;color:#fff;
  background:var(--g-brand);border-color:transparent;
}
.team-card__name{font-family:var(--f-display);font-size:1.05rem;letter-spacing:-.02em;line-height:1.2}
.team-card__role{font-size:.84rem;color:var(--fg-soft);line-height:1.4;text-wrap:pretty}

/* =========================== stats =========================== */
.stats{display:grid;gap:clamp(.8rem,1.6vw,1.2rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,138px),1fr))}
.stat{padding:1.6rem 1.4rem;border-radius:var(--r-md);border:1px solid var(--line);background:var(--card)}
.stat__k{font-family:var(--f-display);font-size:clamp(2rem,4vw,2.9rem);line-height:1;letter-spacing:-.04em;direction:ltr;unicode-bidi:isolate;text-align:start}
.stat__v{margin-block-start:.5rem;font-size:.86rem;color:var(--fg-soft);letter-spacing:calc(.02em * var(--track))}

/* =========================== work =========================== */
.work-card{
  position:relative;display:grid;overflow:hidden;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--card);
  transition:transform var(--t-mid),border-color var(--t-mid);
}
.work-card:hover{transform:translateY(-6px);border-color:var(--line-strong)}
.work-card__media{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--violet-900)}
.work-card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e-out);filter:saturate(.92)}
.work-card:hover .work-card__media img{transform:scale(1.07)}
.work-card__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(3,0,45,.72))}
.work-card__tag{
  position:absolute;z-index:2;inset-block-start:1rem;inset-inline-start:1rem;
  padding:.35rem .8rem;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:calc(.12em * var(--track));
  text-transform:uppercase;background:rgba(6,1,38,.72);border:1px solid var(--line-strong);color:#fff;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.work-card__body{padding:1.4rem 1.5rem 1.6rem;display:grid;gap:.6rem;align-content:start}
.work-card__title{font-family:var(--f-display);font-size:1.22rem;letter-spacing:-.03em;line-height:1.15}
.work-card__role{font-size:.8rem;letter-spacing:calc(.12em * var(--track));text-transform:uppercase;color:var(--magenta-300);font-weight:700}
.section--light .work-card__role{color:var(--magenta)}

/* full case study */
.case{position:relative;padding-block:clamp(3rem,6vw,5rem);border-block-start:1px solid var(--line)}
.case:first-of-type{border-block-start:0}
.case__no{
  font-family:var(--f-display);font-size:clamp(3.5rem,9vw,7rem);line-height:.8;letter-spacing:-.05em;
  -webkit-text-stroke:1.5px var(--line-strong);color:transparent;
}
.case__media{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--violet-900)}
.case__media img{width:100%;transition:transform 1.2s var(--e-out)}
.case__media:hover img{transform:scale(1.04)}
.case__grid{display:grid;gap:clamp(1.5rem,4vw,3.5rem)}
@media (min-width:980px){.case__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center}}
.case__pair{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.objective{
  padding:1.2rem 1.4rem;border-radius:var(--r-md);
  border:1px solid var(--line);border-inline-start:3px solid var(--magenta);
  background:rgba(235,10,140,.07);
}
.objective__label{font-size:.74rem;letter-spacing:calc(.2em * var(--track));text-transform:uppercase;font-weight:700;color:var(--magenta-300);margin-block-end:.4rem}
.section--light .objective__label{color:var(--magenta)}

/* =========================== timeline =========================== */
.timeline{position:relative;display:grid;gap:clamp(1.6rem,3vw,2.6rem)}
.timeline::before{
  content:"";position:absolute;inset-block:.7rem;inset-inline-start:19px;width:2px;
  background:linear-gradient(180deg,var(--magenta),var(--violet-400) 50%,var(--cyan));
  opacity:.45;
}
.tl{position:relative;padding-inline-start:calc(19px + 2.2rem)}
.tl__dot{
  position:absolute;inset-inline-start:0;inset-block-start:.25rem;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--g-brand);color:#fff;font-family:var(--f-display);font-size:.9rem;
  box-shadow:0 0 0 6px rgba(235,10,140,.12);
}
.tl__title{font-family:var(--f-display);font-size:1.3rem;letter-spacing:-.03em;margin-block-end:.5rem}

/* =========================== quote =========================== */
.quote{
  position:relative;padding:clamp(2rem,4vw,3.2rem);border-radius:var(--r-xl);
  border:1px solid var(--line);background:var(--card);overflow:hidden;
}
.quote::before{
  content:"\201C";position:absolute;inset-block-start:-2.2rem;inset-inline-start:1rem;
  font-family:var(--f-display);font-size:11rem;line-height:1;color:var(--magenta);opacity:.14;
}
.quote__text{font-family:var(--f-display);font-size:clamp(1.25rem,2.5vw,2rem);line-height:1.22;letter-spacing:-.03em}
.quote__by{margin-block-start:1.4rem;font-size:.85rem;letter-spacing:calc(.16em * var(--track));text-transform:uppercase;color:var(--fg-soft)}

/* =========================== contact =========================== */
.contact-grid{display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:940px){.contact-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}

.field{display:grid;gap:.5rem}
.field label{font-size:.78rem;letter-spacing:calc(.14em * var(--track));text-transform:uppercase;font-weight:700;color:var(--fg-soft)}
.field input,.field textarea,.field select{
  width:100%;padding:.9rem 1.05rem;border-radius:14px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--fg);
  transition:border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
}
.section--light .field input,.section--light .field textarea,.section--light .field select{background:#fff}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-faint)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:0;border-color:var(--magenta);box-shadow:0 0 0 4px rgba(235,10,140,.14);
}
.field textarea{resize:vertical;min-height:140px}
.field.is-bad input,.field.is-bad textarea{border-color:#ff5f7a;box-shadow:0 0 0 4px rgba(255,95,122,.14)}
.field__err{
  font-size:.8rem;color:#ff90a2;min-height:1.1em;line-height:1.1em;
  visibility:hidden;opacity:0;transform:translateY(-3px);
  transition:opacity .25s var(--e-soft),transform .25s var(--e-soft);
}
.field.is-bad .field__err{visibility:visible;opacity:1;transform:none}
.section--light .field__err{color:#d31f45}
.form-row{display:grid;gap:1.1rem}
@media (min-width:640px){.form-row--2{grid-template-columns:1fr 1fr}}

.contact-line{
  display:flex;align-items:center;gap:1rem;padding:1.1rem 1.25rem;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--card);
  transition:border-color var(--t-fast),transform var(--t-fast),background var(--t-fast);
}
.contact-line:hover{border-color:var(--magenta-300);transform:translateX(4px);background:var(--card-2)}
html[dir="rtl"] .contact-line:hover{transform:translateX(-4px)}
.contact-line__ico{width:44px;height:44px;flex:none;border-radius:13px;display:grid;place-items:center;background:var(--g-brand)}
.contact-line__ico svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.7}
.contact-line__k{font-size:.74rem;letter-spacing:calc(.18em * var(--track));text-transform:uppercase;color:var(--fg-soft)}
.contact-line__v{font-weight:700;font-size:1.02rem;word-break:break-word}

/* channel picker — three ways to reach us */
.seg{border:0;padding:0;margin:0 0 .4rem}
.seg__label{
  padding:0;margin-block-end:.7rem;font-size:.78rem;font-weight:700;
  letter-spacing:calc(.14em * var(--track));text-transform:uppercase;color:var(--fg-soft);
}
.seg__opts{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr))}
.seg__opt{
  position:relative;display:grid;gap:.3rem;cursor:pointer;
  padding:.9rem .85rem;border-radius:16px;
  border:1px solid var(--line);background:var(--card);
  transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast);
}
.seg__opt:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.seg__opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.seg__ico{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;
  background:rgba(255,255,255,.07);color:var(--fg-soft);transition:background var(--t-fast),color var(--t-fast)}
.section--light .seg__ico{background:rgba(3,0,45,.06)}
.seg__ico svg{width:18px;height:18px}
.seg__t{font-weight:700;font-size:.94rem;line-height:1.2}
.seg__d{font-size:.76rem;color:var(--fg-faint);line-height:1.35;text-wrap:pretty}
.seg__opt:has(input:checked){border-color:var(--magenta);background:rgba(235,10,140,.09)}
.seg__opt:has(input:checked) .seg__ico{background:var(--g-brand);color:#fff}
.seg__opt:has(input:focus-visible){outline:2px solid var(--cyan-300);outline-offset:2px}

/* ticket receipt */
.ticket-ok{display:grid;gap:.9rem;justify-items:start;text-align:start}
.ticket-ok__ico{
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--g-brand);color:#fff;
}
.ticket-ok__ico svg{width:24px;height:24px}
.ticket-ok__ref{
  display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;width:100%;
  padding:.9rem 1.1rem;border-radius:14px;
  border:1px dashed var(--magenta);background:rgba(235,10,140,.08);
}
.ticket-ok__ref code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1.15rem;font-weight:700;letter-spacing:.06em;color:var(--fg);
}

.form-note{
  margin-block-start:1rem;padding:.85rem 1rem;border-radius:12px;font-size:.86rem;
  border:1px solid var(--line);background:rgba(9,178,224,.08);color:var(--fg-soft);
}
.form-status{min-height:1.4em;font-size:.9rem;font-weight:600}
.form-status.ok{color:var(--cyan-300)}
.section--light .form-status.ok{color:#0a7ea0}

/* =========================== CTA band =========================== */
.cta-band{position:relative;overflow:hidden;background:var(--g-violet);padding-block:clamp(4rem,8vw,7rem)}
.cta-band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 80% at 85% 20%,rgba(235,10,140,.38),transparent 65%),
             radial-gradient(50% 70% at 10% 90%,rgba(9,178,224,.28),transparent 65%);
}
.cta-band>*{position:relative;z-index:1}

/* =========================== footer =========================== */
.footer{background:var(--void);border-block-start:1px solid var(--line);padding-block:clamp(3rem,6vw,4.5rem) 2rem}
.footer__grid{display:grid;gap:clamp(2rem,4vw,3rem)}
@media (min-width:820px){.footer__grid{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}}
.footer__title{font-size:.76rem;letter-spacing:calc(.2em * var(--track));text-transform:uppercase;color:var(--fg-faint);margin-block-end:1rem;font-weight:700}
.footer__list{display:grid;gap:.6rem}
.footer__list a{color:var(--fg-soft);transition:color var(--t-fast),padding var(--t-fast)}
.footer__list a:hover{color:#fff;padding-inline-start:.35rem}
/* each way of reaching us carries its own mark, rather than a separate row
   of icons that repeats the same three links */
.footer__list--contact{gap:.75rem}
.footer__list--contact a{
  display:inline-flex;align-items:center;gap:.7rem;
  padding-inline-start:0;
}
.footer__list--contact a:hover{padding-inline-start:0}
.footer__ico{
  display:grid;place-items:center;flex:none;
  width:34px;height:34px;border-radius:11px;
  border:1px solid var(--line);color:var(--fg-soft);
  transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast),transform var(--t-fast);
}
.footer__ico svg{width:16px;height:16px;fill:currentColor}
.footer__list--contact a:hover .footer__ico{
  border-color:transparent;background:var(--g-brand);color:#fff;transform:translateY(-2px);
}

.footer__bottom{
  margin-block-start:clamp(2.2rem,4vw,3.2rem);padding-block-start:1.6rem;border-block-start:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  font-size:.84rem;color:var(--fg-faint);
}
.social{display:flex;gap:.5rem}
.social a{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--fg-soft);
  transition:border-color var(--t-fast),color var(--t-fast),transform var(--t-fast),background var(--t-fast);
}
.social a:hover{border-color:var(--magenta);color:#fff;transform:translateY(-3px);background:rgba(235,10,140,.14)}
.social svg{width:18px;height:18px;fill:currentColor}

/* =========================== page hero (inner pages) =========================== */
.phero{
  position:relative;overflow:clip;padding-block:clamp(8.5rem,16vh,12rem) clamp(3.5rem,7vw,6rem);
  background:var(--g-cosmic);
}
.phero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 80% 0%,rgba(235,10,140,.26),transparent 62%),
             radial-gradient(60% 60% at 5% 100%,rgba(9,178,224,.20),transparent 65%);
}
.phero>*{position:relative;z-index:1}
.crumb{display:flex;align-items:center;gap:.55rem;font-size:.8rem;color:var(--fg-faint);margin-block-end:1.2rem}
.crumb a:hover{color:#fff}
.phero__art{
  position:absolute;inset-block-end:-18%;inset-inline-end:-4%;width:min(38%,420px);
  opacity:.5;z-index:0;pointer-events:none;
}

/* orbs */
.orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0}
.orb--m{background:rgba(235,10,140,.5)}
.orb--c{background:rgba(9,178,224,.42)}
.orb--v{background:rgba(120,41,194,.5)}

/* =========================== reveal =========================== */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .85s var(--e-out),transform .85s var(--e-out);transition-delay:var(--d,0s)}
[data-reveal="left"]{transform:translateX(-32px)}
[data-reveal="right"]{transform:translateX(32px)}
[data-reveal="zoom"]{transform:scale(.94)}
[data-reveal="clip"]{opacity:1;clip-path:inset(0 100% 0 0);transform:none;transition:clip-path 1s var(--e-out)}
html[dir="rtl"] [data-reveal="left"]{transform:translateX(32px)}
html[dir="rtl"] [data-reveal="right"]{transform:translateX(-32px)}
html[dir="rtl"] [data-reveal="clip"]{clip-path:inset(0 0 0 100%)}
[data-reveal].is-in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}

/* headline word reveal */
.word{display:inline-block;overflow:hidden;vertical-align:top}
.word>i{display:inline-block;font-style:inherit;transform:translateY(105%);transition:transform .9s var(--e-out);transition-delay:var(--wd,0s)}
.is-in .word>i,.split-ready.is-in .word>i{transform:none}

/* =========================== progress + cursor + top =========================== */
.progress{position:fixed;inset-block-start:0;inset-inline:0;height:2px;z-index:200;background:var(--g-brand);transform:scaleX(0);transform-origin:inline-start;will-change:transform}

.cursor,.cursor-ring{position:fixed;top:0;left:0;z-index:300;pointer-events:none;border-radius:50%;mix-blend-mode:difference;opacity:0;transition:opacity .3s}
.cursor{width:7px;height:7px;background:#fff;margin:-3.5px 0 0 -3.5px}
.cursor-ring{width:34px;height:34px;border:1.5px solid rgba(255,255,255,.65);margin:-17px 0 0 -17px;transition:width .3s var(--e-out),height .3s var(--e-out),margin .3s var(--e-out),opacity .3s,border-color .3s}
.cursor-on .cursor,.cursor-on .cursor-ring{opacity:1}
.cursor-ring.is-hot{width:56px;height:56px;margin:-28px 0 0 -28px;border-color:#fff}

.to-top{
  position:fixed;inset-block-end:1.4rem;inset-inline-end:1.4rem;z-index:90;
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line-strong);background:rgba(6,1,38,.75);color:#fff;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:opacity var(--t-mid),transform var(--t-mid),border-color var(--t-fast),background var(--t-fast);
}
.to-top.is-on{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{border-color:var(--magenta);background:rgba(235,10,140,.28)}
.to-top svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}

/* =========================== preloader =========================== */
.preload{
  position:fixed;inset:0;z-index:400;display:grid;place-items:center;gap:1.4rem;
  background:var(--void);transition:opacity .7s var(--e-soft),visibility .7s;
}
.preload.is-done{opacity:0;visibility:hidden}
.preload__mark{width:74px;height:74px;animation:pulse 1.7s var(--e-soft) infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.1);opacity:1}}
.preload__bar{width:min(210px,44vw);height:2px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.preload__bar i{display:block;height:100%;width:0;background:var(--g-brand);transition:width .3s linear}
.preload__word{font-family:var(--f-display);letter-spacing:.36em;font-size:.72rem;color:var(--fg-faint);text-transform:uppercase;padding-inline-start:.36em}

/* =========================== responsive =========================== */
@media (max-width:960px){
  .nav{display:none}
  .burger{display:grid}
  .header__actions{gap:.45rem}
}
@media (max-width:560px){
  .brand__word{font-size:1.2rem}
  .brand__mark{width:32px;height:32px}
  .hero__cta .btn{width:100%;justify-content:center}
  .case__pair{grid-template-columns:1fr}
}
@media (hover:none){
  .cursor,.cursor-ring{display:none}
}

/* =========================== motion off =========================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
  .word>i{transform:none!important}
  .marquee__track,.logo-rail__track{animation:none}
  .client-logo:hover::after,
  .client-card:hover .client-logo::after{animation:none;opacity:0}
  .hero__canvas{display:none}
}

/* =========================== print =========================== */
@media print{
  .header,.drawer,.progress,.to-top,.preload,.cursor,.cursor-ring,.hero__canvas,.scroll-cue{display:none!important}
  body{background:#fff;color:#000}
  .section--cosmic,.cta-band,.footer,.phero{background:#fff!important;color:#000!important}
}

/* =========================== utilities =========================== */
.u-center{text-align:center}
.u-mt-lg{margin-block-start:clamp(2rem,4vw,3rem)}
.u-mb-lg{margin-block-end:clamp(2.5rem,5vw,4rem)}
@media (max-width:960px){.u-md-up{display:none!important}}
@media (max-width:700px){.u-sm-up{display:none!important}}
.is-ready .preload{pointer-events:none}