/* Sky Peak: what every page shares — tokens, the header and its phone sheet, the footer, buttons, reveals, the work viewer.
   Brand pages add css/site.css (+ css/pages.css); industry pages add css/ind.css and their own css/ind/<slug>.css,
   which re-colour everything here by overriding the tokens below. */
:root{
  --bg:#141414; --card:#1A1A1A; --card-2:#1F1F1F; --border:#262626; --muted:#98989A; --fg:#FFFFFF; --secondary-fg:#E6E6E6;
  --primary:#2563EB; --on-primary:#FFFFFF; --accent:#60A5FA; --danger:#F87171;
  --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-in-out:cubic-bezier(0.77,0,0.175,1); --dur:200ms;
  --ar-body:"IBM Plex Sans Arabic";
  --font-body:"Montserrat",var(--ar-body),"Noto Sans Arabic",system-ui,sans-serif;
  --hd-h:72px; --peak:#3B82F6;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hd-h) + 16px);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:clip}
html[lang=ar] body{line-height:1.85}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.3;text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:fixed;top:12px;inset-inline-start:12px;z-index:100;padding:10px 16px;border-radius:8px;background:var(--primary);color:var(--on-primary);font-weight:700;transform:translateY(-200%)}
.skip:focus{transform:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html[dir=rtl]{--start-side:right} html[dir=ltr]{--start-side:left}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:10px;font:600 16px/1.2 var(--font-body);border:1px solid transparent;cursor:pointer;text-align:center;
  transition:background-color var(--dur),border-color var(--dur),color var(--dur),transform 160ms var(--ease-out)}
.btn svg{width:20px;height:20px;flex-shrink:0}
html[dir=ltr] .btn svg{transform:scaleX(-1)}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-ghost{background:var(--card-2);color:var(--fg);border-color:var(--border)}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:color-mix(in srgb,var(--primary) 86%,#000)}
  .btn-ghost:hover{border-color:color-mix(in srgb,var(--fg) 30%,var(--border))}
}

/* ===== Header: the logo, the language, a consultation button and the ☰ menu. Every section lives inside the menu. ===== */
.hd{position:fixed;inset:0 0 auto;z-index:50;border-bottom:1px solid transparent;transition:background-color 250ms ease,border-color 250ms ease}
/* solid, not blurred: a backdrop-filter here would trap the fixed menu sheet inside the bar */
.hd.scrolled,.hd.open{background:var(--bg);border-color:var(--border)}
.hd-bar{max-width:1320px;height:var(--hd-h);margin:0 auto;padding:0 clamp(16px,3vw,40px);display:flex;align-items:center;gap:12px}
.hd-logo{display:flex;align-items:center;gap:10px;direction:ltr;flex-shrink:0;color:var(--fg)}
.hd-logo img{width:40px;height:auto}
.hd-logo span{font:700 18px/1 "Montserrat",sans-serif;letter-spacing:.06em;white-space:nowrap}
.hd-logo b{color:var(--peak);font-weight:700}
.hd-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-inline-start:auto}
.hd-lang{min-width:44px;height:44px;padding:0 12px;border-radius:10px;background:var(--card-2);border:1px solid var(--border);color:var(--fg);font:600 15px var(--font-body);cursor:pointer;transition:border-color var(--dur)}
.hd .hd-cta{min-height:44px;padding:0 18px;font-size:15px;white-space:nowrap}
.hd-burger{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;border-radius:10px;background:var(--card-2);border:1px solid var(--border);cursor:pointer;transition:border-color var(--dur)}
.hd-burger span{width:20px;height:2px;border-radius:2px;background:var(--fg);transition:transform 250ms var(--ease-out),opacity 150ms ease}
.hd.open .hd-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hd.open .hd-burger span:nth-child(2){opacity:0}
.hd.open .hd-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* the menu: a full-height sheet under the bar, one centred column, big targets */
.hd-nav{position:fixed;top:var(--hd-h);inset-inline:0;bottom:0;padding:12px 20px calc(32px + env(safe-area-inset-bottom));background:var(--bg);overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out),visibility 0s 220ms}
.hd.open .hd-nav{opacity:1;visibility:visible;transform:none;transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out),visibility 0s}
.hd-menu{list-style:none;display:flex;flex-direction:column;max-width:760px;margin:0 auto}
.hd-menu > li{border-bottom:1px solid var(--border)}
.hd-menu > li > a,.hd-ddbtn{position:relative;display:flex;width:100%;align-items:center;justify-content:center;gap:8px;min-height:64px;padding:0;background:none;border:0;color:var(--fg);
  font:600 clamp(18px,1.8vw,21px)/1.2 var(--font-body);cursor:pointer;transition:color var(--dur)}
.hd-menu > li > a::after,.hd-ddbtn::after{content:"";position:absolute;bottom:12px;left:50%;width:28px;height:2px;margin-left:-14px;border-radius:2px;background:var(--primary);transform:scaleX(0);transition:transform 300ms var(--ease-out)}
.hd-menu > li > a[aria-current=page]::after,.hd-ddbtn.on::after{transform:none}
.hd-ddbtn svg{width:18px;height:18px;transition:transform 200ms var(--ease-out)}
.hd-ddbtn[aria-expanded=true] svg{transform:rotate(180deg)}
.hd-panel{display:none;padding:4px 0 18px}
.hd-dd.open .hd-panel{display:block}
.hd-all{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;margin-bottom:10px;border-radius:12px;background:var(--primary);color:var(--on-primary);font-weight:700;font-size:15px}
.hd-all svg{width:18px;height:18px}
html[dir=ltr] .hd-all svg{transform:scaleX(-1)}
.hd-inds{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.hd-inds a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:92px;padding:12px 8px;border-radius:12px;background:var(--card);border:1px solid var(--border);
  color:var(--fg);font-size:14px;font-weight:600;line-height:1.35;text-align:center;transition:border-color var(--dur),background-color var(--dur)}
.hd-inds i{flex-shrink:0;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 20%,transparent);color:var(--c)}
.hd-inds i svg{width:18px;height:18px}
.hd-inds a[aria-current=page]{border-color:var(--c)}
.hd .hd-sheetcta{display:flex;width:100%;max-width:760px;margin:24px auto 0;min-height:54px}
html.menu-open{overflow:hidden}
@media (hover:hover) and (pointer:fine){
  .hd-menu > li > a:hover,.hd-ddbtn:hover{color:var(--primary)}
  .hd-inds a:hover{border-color:var(--c);background:color-mix(in srgb,var(--c) 10%,var(--card))}
  .hd-lang:hover,.hd-burger:hover{border-color:var(--primary)}
}
@media (max-width:640px){
  :root{--hd-h:64px}
  .hd-logo img{width:36px}
  .hd-logo span{font-size:17px}
  .hd .hd-cta{display:none}
}

/* ===== Footer: one centred column ===== */
.ft{border-top:1px solid var(--border);background:var(--bg);padding:56px 20px calc(100px + env(safe-area-inset-bottom));text-align:center;color:var(--muted)}
.ft-in{max-width:960px;margin:0 auto;display:grid;justify-items:center;gap:18px}
.ft-logo{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--fg);direction:ltr}
.ft-logo img{width:56px;height:auto}
.ft-logo span{font:700 20px/1 "Montserrat",sans-serif;letter-spacing:.08em}
.ft-logo b{color:var(--peak);font-weight:700}
.ft-tag{font-size:15px;max-width:44ch}
.ft-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 22px;font-weight:600}
.ft-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--secondary-fg);transition:color var(--dur)}
.ft-social{display:flex;gap:10px}
.ft-social a{width:46px;height:46px;border-radius:12px;border:1px solid var(--border);background:var(--card);display:grid;place-items:center;color:var(--fg);transition:border-color var(--dur),color var(--dur)}
.ft-social svg{width:20px;height:20px}
.ft-info{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;font-size:14px}
.ft-info a{unicode-bidi:isolate}
.ft-legal{width:100%;padding-top:18px;border-top:1px solid var(--border);font-size:13.5px}
.ft-legal a{text-decoration:underline;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .ft-links a:hover,.ft-info a:hover{color:var(--fg)}
  .ft-social a:hover{border-color:var(--primary);color:var(--primary)}
}

/* ===== Floating WhatsApp ===== */
.wa{position:fixed;bottom:max(20px,env(safe-area-inset-bottom));inset-inline-end:20px;z-index:40;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;
  box-shadow:0 8px 24px -6px rgba(0,0,0,.5);transition:transform 160ms var(--ease-out)}
.wa svg{width:28px;height:28px}
.wa:active{transform:scale(.94)}
html.menu-open .wa{display:none}

/* ===== Reveal once, staggered within each group (animate skill curve) ===== */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity 700ms var(--ease-out) var(--d,0ms),transform 700ms var(--ease-out) var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}
[data-live]:not(.live) *,[data-live]:not(.live){animation-play-state:paused!important}

/* ===== Headline typing in (js/typewriter.js): letter by letter behind a blinking caret, then the copy rises in turn ===== */
.tw-host{position:relative}
.tw-caret{position:absolute;left:0;top:0;width:4px;border-radius:2px;background:var(--accent);pointer-events:none;opacity:0}
.tw-host.tw-on .tw-caret{opacity:1;animation:twBlink 800ms steps(1,end) infinite}
.tw-host.tw-end .tw-caret{animation:none;opacity:0;transition:opacity 300ms ease}
@keyframes twBlink{50%{opacity:0}}
.tw-host > :not(h1):not(.tw-caret){transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out)}
.tw-host > .lead{transition-delay:150ms}
.tw-host > .hero-for{transition-delay:280ms}
.tw-host > .hero-ctas{transition-delay:400ms}
.tw-host.tw-wait > :not(h1):not(.tw-caret){opacity:0;transform:translateY(20px);transition-delay:0ms}

/* ===== Forms (status line) ===== */
.ok{display:none;padding:12px 14px;border-radius:10px;background:var(--card);border:1px solid var(--accent)}
.ok.show{display:block}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ===== Work viewer ===== */
.lightbox{max-width:min(92vw,1100px);max-height:92vh;padding:0;border:0;background:transparent;color:#fff;overflow:visible;margin:auto}
.lightbox::backdrop{background:rgba(8,8,8,.9)}
.lightbox img,.lightbox video{display:block;max-width:min(92vw,1100px);max-height:80vh;margin:0 auto;border-radius:12px;object-fit:contain;background:#000}
.lightbox [hidden]{display:none}
.lightbox p{margin-top:12px;text-align:center;color:#D4D4D4;font-size:15px}
.lb-btn{position:fixed;top:50%;translate:0 -50%;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(20,20,20,.75);border:1px solid rgba(255,255,255,.15);color:#fff;cursor:pointer}
.lb-btn svg{width:22px;height:22px}
.lb-prev{inset-inline-start:16px}.lb-next{inset-inline-end:16px}
.lb-close{top:20px;translate:none;inset-inline-end:16px}
html[dir=rtl] .lb-prev svg,html[dir=rtl] .lb-next svg{transform:scaleX(-1)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{transform:none;transition:opacity 300ms ease var(--d,0ms)}
  .hd-nav,.hd-burger span{transition:none}
}

/* ===== Work: tabs, a masonry of real pieces, and an Instagram-style feed (industry pages, influencer campaigns) ===== */
.m-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.m-tab{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--secondary-fg);font:600 15px var(--font-body);cursor:pointer;transition:background-color var(--dur),color var(--dur),border-color var(--dur)}
.m-tab b{min-width:26px;padding:2px 8px;border-radius:999px;background:var(--card-2);color:var(--muted);font:700 12px var(--font-body)}
.m-tab[aria-selected=true]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.m-tab[aria-selected=true] b{background:color-mix(in srgb,var(--on-primary) 20%,transparent);color:var(--on-primary)}
.m-empty{max-width:560px;margin:0 auto;padding:28px 24px;border:1px dashed var(--border);border-radius:14px;text-align:center;color:var(--muted)}
.gallery{columns:4 220px;column-gap:14px}
.g-item{break-inside:avoid;margin:0 0 14px;border-radius:14px;overflow:hidden;background:var(--card);border:1px solid var(--border);transition:transform 300ms var(--ease-out),box-shadow 300ms ease}
.g-open{position:relative;display:block;width:100%;padding:0;border:0;background:#0E0E0E;cursor:zoom-in;overflow:hidden}
.g-open img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease-out)}
.g-reel .g-open{aspect-ratio:9/16}
.g-post .g-open{aspect-ratio:4/5}
.g-wide .g-open{aspect-ratio:16/9}
.g-square .g-open{aspect-ratio:1}
.g-sheet .g-open img{object-fit:contain;height:auto}
.g-play{position:absolute;inset:50% auto auto 50%;translate:-50% -50%;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(20,20,20,.7);color:#fff}
.g-play svg{width:22px;height:22px;fill:currentColor}
.g-item figcaption{display:grid;gap:2px;padding:10px 12px 12px;text-align:center}
.g-tag{font:600 12px var(--font-body);color:var(--accent)}
.g-title{font-size:14px;line-height:1.45;color:var(--secondary-fg)}
.g-open:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ig{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:clamp(24px,5vw,72px);align-items:center;margin-bottom:40px}
.ig-copy{text-align:center}
.ig-copy h3{font-size:clamp(22px,2.2vw,30px);margin-bottom:10px}
.ig-copy p{color:var(--muted);max-width:44ch;margin-inline:auto}
.ig-phone{padding:14px 10px;border-radius:28px;background:#0E0E0E;border:1px solid var(--border);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.ig-feed{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;border-radius:14px;overflow:hidden}
.ig-feed .g-open{aspect-ratio:4/5}
@media (hover:hover) and (pointer:fine){
  .g-open:hover img{transform:scale(1.04)}
  .g-item:hover{transform:translateY(-4px);box-shadow:0 22px 44px -22px rgba(0,0,0,.6)}
}
@media (max-width:820px){
  .ig{grid-template-columns:1fr}
  .ig-phone{max-width:360px;margin-inline:auto}
  .gallery{columns:2 150px;column-gap:10px}
  .g-item{margin-bottom:10px}
}
@media (prefers-reduced-motion:reduce){ .g-open img,.g-item{transition:none} }