/* Layout: each section is its own coloured sheet with rounded top corners that slides up over the one before it, so you feel a clear separation but no hard cut. A faint dot texture keeps the colour from feeling flat. */
:root{
  --teal:#3db7ac; --deep:#0f5d57; --sun:#ffc83d; --tang:#ff7a45; --ink:#10302e; --paper:#fffaf0; --blush:#ffe1d3; --mint:#d3f2ee;
  --f:"Cairo",system-ui,"Segoe UI",Tahoma,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f);font-size:17px;line-height:1.8;overflow-x:clip}
.wrap{max-width:1180px;margin-inline:auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
h1,h2,h3,h4{font-family:var(--f);font-weight:800;line-height:1.25;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
[hidden]{display:none!important}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
:focus-visible{outline:3px solid currentColor;outline-offset:3px;border-radius:6px}
svg.ic{width:22px;height:22px;flex:none}

/* sheets */
.sheet{position:relative;background:var(--bg,var(--paper));color:var(--fg,var(--ink));border-radius:44px 44px 0 0;margin-top:-44px;--ov:44px;padding-block:clamp(72px,8vw,108px) calc(clamp(72px,8vw,108px) + var(--ov));isolation:isolate}
.sheet::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:radial-gradient(color-mix(in srgb,var(--fg,#000) 9%,transparent) 1.2px,transparent 1.3px);background-size:22px 22px;opacity:.55;z-index:-1;pointer-events:none}
.page>.sheet:first-child{margin-top:0;border-radius:0}
.page>.sheet:first-child::before{border-radius:0}
.t-teal{--bg:var(--teal);--fg:#0b2725;--ac:var(--paper)}
.t-sun{--bg:var(--sun);--fg:var(--ink);--ac:var(--deep)}
.t-paper{--bg:var(--paper);--fg:var(--ink);--ac:var(--deep)}
.t-deep{--bg:var(--deep);--fg:var(--paper);--ac:var(--sun)}
.t-tang{--bg:var(--tang);--fg:#1d1410;--ac:var(--paper)}
.t-blush{--bg:var(--blush);--fg:var(--ink);--ac:#c4532a}
.t-mint{--bg:var(--mint);--fg:var(--ink);--ac:var(--deep)}
.t-white{--bg:#fff;--fg:var(--ink);--ac:var(--deep)}
.t-motion{--bg:#10302e;--fg:#fffaf0;--ac:#ffc83d;background:linear-gradient(120deg,#10302e,#0f5d57,#1c7f76,#10302e);background-size:300% 300%;animation:flow 14s ease-in-out infinite;overflow:hidden}
@keyframes flow{50%{background-position:100% 50%}}
.t-flow{background:linear-gradient(120deg,#3db7ac,#2fa59b,#58c7bc,#3db7ac);background-size:300% 300%;animation:flow 12s ease-in-out infinite;overflow:hidden}
.t-flow .blobs i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;z-index:-1}
.t-flow .blobs i:nth-child(1){width:340px;height:340px;background:#ffc83d;top:-80px;left:12%;animation:drift1 15s ease-in-out infinite}
.t-flow .blobs i:nth-child(2){width:300px;height:300px;background:#0f5d57;bottom:-100px;right:8%;animation:drift2 18s ease-in-out infinite}
.t-flow .blobs i:nth-child(3){width:220px;height:220px;background:#fffaf0;top:35%;right:40%;animation:drift1 21s ease-in-out infinite reverse}
.btn-cta{min-width:min(100%,300px);padding-block:9px;font-size:17px;letter-spacing:.5px}.btn-cta:hover{background:#ffc83d;border-color:#ffc83d;color:#10302e;transform:translateY(-3px) scaleX(1.04)}
.t-motion .blobs i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.45;z-index:-1}
.t-motion .blobs i:nth-child(1){width:320px;height:320px;background:#ffc83d;top:-60px;right:10%;animation:drift1 16s ease-in-out infinite}
.t-motion .blobs i:nth-child(2){width:380px;height:380px;background:#3db7ac;bottom:-120px;left:5%;animation:drift2 19s ease-in-out infinite}
.t-motion .blobs i:nth-child(3){width:220px;height:220px;background:#ff9c73;top:40%;left:45%;animation:drift1 22s ease-in-out infinite reverse}
@keyframes drift1{50%{transform:translate(-120px,80px) scale(1.2)}}
@keyframes drift2{50%{transform:translate(160px,-60px) scale(.85)}}
.clients{padding-block:clamp(54px,5vw,72px) calc(clamp(54px,5vw,72px) + var(--ov))}.clients .center-head{margin-bottom:26px}
.center-head{text-align:center;margin-bottom:34px}.center-head .eyebrow::after{content:"";width:26px;height:3px;background:currentColor;border-radius:2px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;border-radius:999px;padding:12px 30px;transition:transform .25s,background .25s,color .25s;border:2px solid var(--fg,var(--ink));cursor:pointer;font:inherit;font-weight:700;white-space:nowrap;line-height:1.5}
.btn-solid{background:var(--fg,var(--ink));color:var(--bg,var(--paper))}
.btn-solid:hover{transform:translateY(-3px);background:var(--hov,#ffc83d);border-color:var(--hov,#ffc83d);color:#10302e;box-shadow:0 12px 24px -12px rgba(0,0,0,.45)}
.t-deep .btn-solid,.t-sun .btn-solid,.t-motion .btn-solid{--hov:#3db7ac}
.btn-line{background:transparent;color:var(--fg,var(--ink))}
.btn-line:hover{background:var(--fg,var(--ink));color:var(--bg,var(--paper))}

/* header */
header.site{--hbg:#10302e;--hfg:#fffaf0;--hac:#ffc83d;position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);left:0;right:0;z-index:80;pointer-events:none}
header.site .wrap{pointer-events:auto;background:var(--hbg);color:var(--hfg);border-radius:999px;box-shadow:0 10px 30px -12px rgba(0,0,0,.35);transition:background-color .5s ease,color .5s ease;max-width:1180px;width:calc(100% - 32px);padding-inline:10px 26px!important}
main#app{padding-top:0}
header.site::before{content:'';position:fixed;top:0;left:0;right:0;height:calc(env(safe-area-inset-top,0px) + 104px);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);-webkit-mask:linear-gradient(#000 65%,transparent);mask:linear-gradient(#000 65%,transparent);z-index:-1;pointer-events:none}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:62px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand .mk{width:30px;height:38px;fill:var(--hac,var(--teal));transition:fill .5s}
.brand .wm{width:112px;height:26px;fill:currentColor}
.brand .mk.hm{width:30px;height:38px;fill:var(--hlogo,#fffaf0);transition:fill .5s,transform .35s cubic-bezier(.34,1.56,.64,1)}.brand:hover .mk.hm{transform:rotate(-8deg) scale(1.08)}
nav.main{display:flex;gap:2px;position:relative}nav.main .ind{position:absolute;top:0;bottom:0;border-radius:999px;background:var(--hfg);transition:left .45s cubic-bezier(.3,.9,.3,1),width .45s cubic-bezier(.3,.9,.3,1),opacity .3s,background-color .5s;z-index:0;pointer-events:none}nav.main a{position:relative;z-index:1}
nav.main a{text-decoration:none;font-weight:700;font-size:15px;padding:6px 13px;border-radius:999px;transition:background .25s}
nav.main a:hover{background:color-mix(in srgb,var(--hfg) 12%,transparent)}
nav.main a[aria-current="page"]{color:var(--hbg);transition:color .35s}
.head-cta{--fg:var(--hfg);--bg:var(--hbg);padding:9px 24px}.head-cta:hover{background:var(--hac);border-color:var(--hac);color:var(--hbg)}
.burger{display:none;border:0;cursor:pointer;width:46px;height:46px;border-radius:50%;background:var(--hfg);color:var(--hbg);place-items:center;padding:0;transition:background .3s,color .3s}.burger svg{transition:transform .45s cubic-bezier(.2,.9,.25,1.2)}.burger.on{background:var(--sun);color:var(--ink)}.burger.on svg{transform:rotate(90deg) scale(.9)}
.drawer{position:fixed;top:calc(env(safe-area-inset-top,0px) + 80px);left:auto;right:16px;width:min(290px,calc(100% - 32px));z-index:70;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;padding:10px 22px 20px;border-radius:28px;box-shadow:0 30px 60px -20px rgba(0,0,0,.55);max-height:calc(100svh - 110px);overflow:auto;transform-origin:calc(100% - 34px) -10px;opacity:0;transform:translateY(-14px) scale(.92);clip-path:inset(0 0 100% 0 round 28px);transition:opacity .35s ease,transform .55s cubic-bezier(.2,.9,.25,1.1),clip-path .55s cubic-bezier(.65,0,.25,1),visibility 0s .55s;visibility:hidden}
.drawer.open{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 28px);visibility:visible;transition:opacity .3s ease,transform .55s cubic-bezier(.2,.9,.25,1.1),clip-path .6s cubic-bezier(.65,0,.25,1),visibility 0s}
.scrim{position:fixed;inset:0;z-index:60;background:rgba(8,26,24,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s .4s}.scrim.on{opacity:1;visibility:visible;transition:opacity .4s ease}
.drawer .top{display:none}
.drawer .brand{color:var(--paper);--hac:var(--teal)}
.drawer .x{border:0;background:var(--sun);color:var(--ink);width:46px;height:46px;border-radius:50%;font-size:26px;cursor:pointer;line-height:1}
.drawer nav{display:flex;flex-direction:column;margin-top:0}
.drawer nav a{font-size:17px;font-weight:700;text-decoration:none;padding:11px 4px;border-bottom:1px solid rgba(255,250,240,.1);display:flex;justify-content:space-between;align-items:center;opacity:0;transform:translateY(12px);filter:blur(10px);transition:opacity .5s ease,filter .5s ease,transform .55s cubic-bezier(.2,.8,.2,1),color .25s}
.drawer nav a::after{content:'←';font-size:16px;opacity:.35;transition:transform .3s,opacity .3s}
.drawer nav a:active::after,.drawer nav a:hover::after{transform:translateX(-6px);opacity:1}
.drawer.open nav a{opacity:1;transform:none;filter:blur(0)}
.drawer.open nav a:nth-child(1){transition-delay:0.50s}.drawer.open nav a:nth-child(2){transition-delay:0.57s}.drawer.open nav a:nth-child(3){transition-delay:0.64s}.drawer.open nav a:nth-child(4){transition-delay:0.71s}.drawer.open nav a:nth-child(5){transition-delay:0.78s}.drawer.open nav a:nth-child(6){transition-delay:0.85s}.drawer.open nav a:nth-child(7){transition-delay:0.92s}
.drawer nav a:last-child{border:0;margin-top:14px;align-self:flex-start;background:var(--sun);color:var(--ink);border-radius:999px;padding:8px 26px;font-size:16px}.drawer nav a:last-child::after{display:none}
.drawer .top,.drawer .socials{opacity:0;filter:blur(10px);transform:translateY(10px);transition:opacity .5s ease,filter .5s ease,transform .55s ease}.drawer.open .top,.drawer.open .socials{opacity:1;filter:blur(0);transform:none}.drawer.open .socials{transition-delay:1s}
.drawer nav a[aria-current="page"]{color:var(--sun)}.drawer nav a[aria-current="page"]::after{opacity:1}
.drawer .socials{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,250,240,.1);display:flex;flex-wrap:nowrap;gap:6px;justify-content:space-between}.drawer .socials a{width:34px;height:34px;flex:none}.drawer .socials a svg{width:16px;height:16px}

/* page transitions */
.page{animation:pageIn .6s cubic-bezier(.2,.8,.2,1) both}
.page.out{animation:pageOut .25s ease-in both}
@keyframes pageIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes pageOut{to{opacity:0;transform:translateY(-12px)}}
.rv{opacity:0;transform:translateY(34px) scale(.97);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.rv:not(.shot):not(.card):not(.svc):not(.mate):not(.cta-in){filter:blur(10px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1),filter .9s ease}
.rv.in:not(.shot):not(.card):not(.svc):not(.mate){filter:blur(0)}
.cta-in.rv{opacity:1;transform:none;filter:none}
.cta-in h2,.cta-in p{opacity:0;transform:translateY(40px);filter:blur(14px);transition:opacity .9s ease,transform 1s cubic-bezier(.2,.8,.2,1),filter .9s ease}
.cta-in p{transition-delay:.25s}
.cta-in .btn-cta{opacity:0;transform:translateY(-120px) rotate(-14deg) scale(.7)}
.cta-in.in h2,.cta-in.in p{opacity:1;transform:none;filter:blur(0)}
.cta-in.in .btn-cta{animation:toss 1.1s .55s cubic-bezier(.3,1.4,.5,1) forwards}
@keyframes toss{0%{opacity:0;transform:translateY(-120px) rotate(-14deg) scale(.7)}55%{opacity:1;transform:translateY(10px) rotate(4deg) scale(1.03)}75%{transform:translateY(-4px) rotate(-1.5deg)}100%{opacity:1;transform:none}}
.tiles{perspective:1400px}
.tiles .shot.rv{opacity:0;filter:blur(12px);transform-origin:50% 100%;transform:translate3d(var(--cx,110px),50px,-140px) rotateY(var(--cy,-50deg)) rotateZ(var(--cz,7deg));transition:opacity .6s ease,filter .8s ease,transform 1.1s cubic-bezier(.2,.9,.25,1.1)}
.tiles .shot.rv:nth-child(even){--cx:-110px;--cy:50deg;--cz:-7deg}
.tiles .shot.rv.in{opacity:1;filter:blur(0);transform:none}
@media (max-width:700px){.tiles .shot.rv{--cx:50px;--cy:-35deg;--cz:5deg}.tiles .shot.rv:nth-child(even){--cx:-50px;--cy:35deg;--cz:-5deg}}
.sheet.slide{transform:translateY(120px);transition:transform 1.1s cubic-bezier(.16,.84,.24,1)}
.sheet.slide.up{transform:none}

/* type */
.eyebrow{font-weight:700;font-size:15px;display:inline-flex;gap:10px;align-items:center;opacity:.8}
.eyebrow::before{content:"";width:26px;height:3px;background:currentColor;border-radius:2px}
.h2{font-size:clamp(32px,4.6vw,56px);font-weight:900;margin-top:8px}
.lede{font-size:clamp(17px,1.7vw,20px);max-width:58ch;margin-top:12px;opacity:.85}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:36px}

/* hero */
.hero{min-height:100svh;display:flex;align-items:center;padding-block:110px 110px}
.hero>.wrap{width:100%}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center}
.note-wrap{position:relative;display:inline-block;padding-top:34px}
.h1-wrap{position:relative;display:inline-block;margin-top:18px}
.hand{position:absolute;font-size:16px;font-weight:700;color:var(--paper);white-space:nowrap;opacity:0;animation:rise .6s forwards}
.hand svg{width:46px;height:34px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;position:absolute}
.hand.n1{top:0;right:46px;animation-delay:.15s}.hand.n1 svg{left:100%;top:8px;width:40px;height:30px}
.hand.n2{top:-10px;right:-6px;animation-delay:1.2s}.hand.n2 svg{top:100%;right:14px;width:30px;height:40px}@media(max-width:700px){.hand.n2{top:-14px;right:-14px}.hand.n2 svg{height:24px;width:22px}.hand{font-size:14px}}
.btn-wide{padding-inline:56px}.btn-slim{padding:7px 26px;font-size:15px}
.boring{opacity:0;animation:rise .5s .4s forwards;display:inline-block;position:relative;font-size:clamp(12px,3.2vw,18px);font-weight:600;opacity:.75;white-space:nowrap}
.boring::after{content:"";position:absolute;right:-4px;top:55%;height:3px;width:0;background:var(--tang);border-radius:3px;animation:strike .45s .75s cubic-bezier(.7,0,.3,1) forwards}
@keyframes strike{to{width:calc(100% + 8px)}}
.hero h1{font-size:clamp(86px,15vw,196px);font-weight:900;line-height:1.1;color:var(--ac);margin-top:6px;opacity:0;animation:rise .7s 1s cubic-bezier(.2,.8,.2,1) forwards}
.hero .sub{font-size:clamp(24px,3vw,36px);font-weight:800;opacity:0;animation:rise .6s 1.35s forwards}
.hero .actions{opacity:0;animation:rise .6s 1.55s forwards}
@keyframes rise{from{opacity:0;transform:translateY(18px);filter:blur(12px)}to{opacity:1;transform:none;filter:blur(0)}}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero-art{position:relative;width:min(100%,410px);aspect-ratio:1;margin-inline:auto}
.disc{cursor:pointer;opacity:0;transform:scale(.2);animation:discIn .7s 1.75s cubic-bezier(.34,1.56,.64,1) forwards;text-decoration:none;position:absolute;inset:19%;border-radius:50%;background:var(--paper);display:grid;place-items:center;box-shadow:0 0 0 14px rgba(255,250,240,.22)}
.disc .mk{width:44%;height:auto;aspect-ratio:168/210;fill:var(--teal);opacity:0;animation:mkIn .6s 2.05s cubic-bezier(.34,1.56,.64,1) forwards,bob 5s 3s ease-in-out infinite}
@keyframes discIn{from{filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes mkIn{from{opacity:0;transform:scale(.3) rotate(-25deg)}to{opacity:1;transform:none}}
@keyframes bob{50%{transform:translateY(-6px) rotate(-3deg)}}
@property --p{syntax:'<angle>';inherits:false;initial-value:0deg}
.dash{position:absolute;inset:8%;border-radius:50%;border:2px dashed rgba(11,39,37,.25);-webkit-mask:conic-gradient(#000 var(--p),transparent 0);mask:conic-gradient(#000 var(--p),transparent 0);animation:draw .7s 2.15s cubic-bezier(.6,0,.3,1) forwards}
@keyframes draw{to{--p:360deg}}
.tring{position:absolute;inset:-7%;width:114%;height:114%;overflow:visible;pointer-events:none;animation:sway 9s ease-in-out 3s infinite}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.tring text{font-family:inherit;font-weight:900;font-size:24px;letter-spacing:.3px;fill:#10302e;direction:ltr;unicode-bidi:normal}
.tring .sep{fill:#ffc83d;font-size:20px}
.tring text{opacity:0;filter:blur(8px);animation:twIn .9s 2.3s ease forwards}.tring .a2{animation-delay:2.7s}
@keyframes twIn{to{opacity:1;filter:blur(0)}}
.ring{position:absolute;inset:0;animation:spin 70s linear infinite;pointer-events:none}
.ring .tag{position:absolute;transform:translate(-50%,-50%);opacity:0;translate:var(--dx) 0;scale:.6;animation:tagIn .36s var(--dl) cubic-bezier(.2,.9,.3,1.25) forwards}
@keyframes tagIn{from{filter:blur(10px)}to{opacity:1;translate:0 0;scale:1;filter:blur(0)}}
.ring .tag span{display:block;white-space:nowrap;font-weight:800;font-size:clamp(11.5px,1.15vw,14px);padding:7px 14px;border-radius:10px;animation:spin 70s linear infinite reverse;box-shadow:0 10px 20px -12px rgba(16,48,46,.55)}
.ring .tag:nth-child(odd) span{background:#10302e;color:#fffaf0}
.ring .tag:nth-child(even) span{background:#ffc83d;color:#10302e}
.ring .tag:nth-child(4n) span{background:#fffaf0;color:#10302e}
@keyframes spin{to{rotate:360deg}}

/* about band */
.about-band{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.big-quote{font-size:clamp(28px,4vw,52px);font-weight:900;line-height:1.35;margin-top:12px}
.about-cols{columns:2 340px;column-gap:48px;margin-top:18px;font-size:clamp(16px,1.5vw,18px);line-height:1.95}
#about-sec{padding-block:clamp(72px,8vw,104px) calc(clamp(72px,8vw,104px) + var(--ov))}
.about-card{max-width:860px;margin-inline:auto;background:rgba(255,250,240,.55);border-radius:32px;padding:clamp(24px,3.4vw,44px)}
.sharia{display:inline-block;background:var(--deep);color:var(--sun);font-weight:700;font-size:clamp(10.5px,2.9vw,15px);line-height:1.6;white-space:nowrap;border-radius:999px;padding:4px 14px;margin-top:6px!important;max-width:100%}
.pop{opacity:0;transform:translateY(70px);clip-path:inset(100% 0 0 0 round 32px);transition:opacity .5s ease,transform 1.1s cubic-bezier(.16,.84,.24,1),clip-path 1.1s cubic-bezier(.16,.84,.24,1)}
.pop.in{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 32px)}
.pop .eyebrow,.pop .about-cols p{opacity:0;transform:translateY(34px);filter:blur(12px);transition:opacity .9s ease,transform 1s cubic-bezier(.2,.8,.2,1),filter 1s ease}
.pop.in .eyebrow,.pop.in .about-cols p{opacity:1;transform:none;filter:blur(0)}
.pop.in .eyebrow{transition-delay:.55s}.pop.in .about-cols p:nth-child(1){transition-delay:.8s}.pop.in .about-cols p:nth-child(2){transition-delay:1.15s}
.pop .about-cols .sharia{transform:scale(.6);filter:blur(6px)}.pop.in .about-cols .sharia{transform:none;transition:opacity .6s ease 1.6s,transform .7s cubic-bezier(.34,1.56,.64,1) 1.6s,filter .6s ease 1.6s}
.pop .actions .btn{opacity:0;transform:translateX(90px);transition:opacity .6s ease 2s,transform .9s cubic-bezier(.2,.9,.25,1.15) 2s,background .25s,color .25s}
.pop.in .actions .btn{opacity:1;transform:none}
.about-cols p{margin:0 0 14px;break-inside:avoid}
.about-cols .sharia{font-size:13.5px;padding:4px 12px}
@media (max-width:600px){.about-cols .sharia{font-size:clamp(10.5px,2.9vw,13.5px)}}

.big-quote em{font-style:normal;color:var(--ac)}

/* services — editorial list, not boxes */
.svc-list{display:grid;gap:14px;counter-reset:sv;max-width:780px;margin-inline:auto}
#svcExtra{max-width:780px;margin-inline:auto}
#services-sec .head-row{justify-content:center;text-align:center;max-width:780px;margin-inline:auto}#services-sec .head-row .eyebrow{justify-content:center}
.svc{--cc:#3db7ac;--ct:#fffaf0;counter-increment:sv;position:sticky;top:calc(96px + var(--k,0)*14px);display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;padding:22px 28px;border-radius:24px;background:var(--cc);color:var(--ct);text-decoration:none;box-shadow:0 -10px 30px -18px rgba(16,48,46,.45),0 18px 34px -24px rgba(16,48,46,.55);transition:transform .45s cubic-bezier(.2,.9,.25,1.2),box-shadow .45s;transform-origin:50% 100%}
.svc::before{display:none;content:counter(sv,decimal-leading-zero);font-weight:900;font-size:clamp(36px,3.6vw,48px);line-height:1;direction:ltr;color:transparent;-webkit-text-stroke:1.6px var(--ct);opacity:.8;min-width:1.6em;text-align:center}
.svc:nth-child(6n+1){--cc:#3db7ac;--ct:#fffaf0}.svc:nth-child(6n+2){--cc:#ffc83d;--ct:#10302e}.svc:nth-child(6n+3){--cc:#0f5d57;--ct:#fffaf0}.svc:nth-child(6n+4){--cc:#bfe7a8;--ct:#10302e}.svc:nth-child(6n+5){--cc:#10302e;--ct:#ffc83d}.svc:nth-child(6n){--cc:#d3f2ee;--ct:#10302e}
.svc svg.ic{display:none}
.svc h3{font-size:clamp(20px,2vw,25px);font-weight:900;color:inherit}
.svc p{font-size:15.5px;opacity:.85;margin-top:4px;color:inherit}
.svc .go{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:14px;white-space:nowrap;padding:10px 18px;border-radius:999px;border:2px solid currentColor;transition:background .3s,color .3s,transform .35s}
.svc .go:empty{display:none}
a.svc:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 -10px 30px -18px rgba(16,48,46,.45),0 30px 44px -26px rgba(16,48,46,.7)}
a.svc:hover .go{background:var(--ct);color:var(--cc);transform:translateX(-6px)}
.svc.rv{opacity:0;transform:translateY(70px) rotate(2deg) scale(.96);filter:blur(10px)!important;transition:opacity .6s ease,transform .9s cubic-bezier(.2,.9,.25,1.1),filter .7s ease,box-shadow .45s!important}
.svc.rv.in{opacity:1;transform:none;filter:blur(0)!important}
.svc.rv.in:hover{transform:translateY(-6px) rotate(-.6deg)}
@media (min-width:901px){
 .svc-list{grid-template-columns:1fr 1fr;max-width:1040px;gap:18px}
 .svc{top:calc(96px + var(--r,0)*16px);grid-template-columns:1fr;justify-items:start;align-content:center;gap:14px;padding:30px 34px;min-height:168px;border-radius:26px}
 .svc h3{font-size:clamp(23px,2.1vw,30px)}
 .svc.rv{transform:translateX(var(--sx,160px)) rotate(var(--sr,4deg)) scale(.94)}
 .svc.rv:nth-child(even){--sx:-160px;--sr:-4deg}
}
@media (min-width:1500px){
 .wrap{max-width:1320px}header.site .wrap{max-width:1320px}
 .svc-list{max-width:1180px;gap:22px}.svc{min-height:190px;padding:36px 40px}
}
#svcExtra>div{display:grid;gap:14px;padding-top:14px}#svcExtra .svc{position:relative;top:auto}
#svcExtra .svc:nth-child(6n+1){--cc:#bfe7a8;--ct:#10302e}#svcExtra .svc:nth-child(6n+2){--cc:#10302e;--ct:#ffc83d}#svcExtra .svc:nth-child(6n+3){--cc:#d3f2ee;--ct:#10302e}#svcExtra .svc:nth-child(6n+4){--cc:#3db7ac;--ct:#fffaf0}#svcExtra .svc:nth-child(6n+5){--cc:#ffc83d;--ct:#10302e}#svcExtra .svc:nth-child(6n){--cc:#0f5d57;--ct:#fffaf0}
.more-rv.rv{transition-delay:.9s!important}
.extra{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s cubic-bezier(.2,.8,.2,1)}
.extra>div{overflow:hidden}
.extra.open{grid-template-rows:1fr}
.more-row{display:flex;justify-content:center;margin-top:28px}

/* work cards */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{position:relative;display:block;text-decoration:none;border-radius:20px;overflow:hidden;background:var(--ink);color:var(--paper);isolation:isolate}
.card img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.card:hover img{transform:scale(1.05)}
.card .cap{position:absolute;inset:auto 0 0;padding:46px 14px 12px;background:linear-gradient(transparent,rgba(8,26,24,.92));display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.card h3{font-size:16px;font-weight:700;direction:ltr;line-height:1.35}
.card .tag{font-size:12px;font-weight:700;background:var(--sun);color:var(--ink);border-radius:999px;padding:1px 10px;flex:none}
.card.hide{display:none}
.grid{perspective:1400px}
.card.rv{opacity:0;transform-origin:50% 100%;transform:translate3d(var(--cx,180px),-40px,-160px) rotateY(var(--cy,-60deg)) rotateZ(var(--cz,8deg));transition:opacity .7s ease,transform 1.2s cubic-bezier(.2,.9,.25,1.12)}
.grid .card.rv:nth-child(even){--cx:-180px;--cy:60deg;--cz:-8deg}
.card.rv.in{opacity:1;transform:none}
@media (max-width:700px){.card.rv{--cx:70px;--cy:-45deg;--cz:6deg}.grid .card.rv:nth-child(even){--cx:-70px;--cy:45deg;--cz:-6deg}}
#work-sec .rv:not(.card){filter:blur(10px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1),filter .9s ease}#work-sec .rv.in:not(.card){filter:blur(0)}
.jump{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:46px}
.jump a{text-decoration:none;font-weight:800;font-size:15px;padding:9px 20px;border-radius:999px;border:0;background:var(--jb);color:var(--jc);box-shadow:0 8px 18px -12px rgba(0,0,0,.5);transition:background .3s,color .3s,transform .35s cubic-bezier(.2,.9,.25,1.3),box-shadow .3s;white-space:nowrap;flex:none}
.jump a:nth-child(4n+1){--jb:#3db7ac;--jc:#fff}.jump a:nth-child(4n+2){--jb:#ffc83d;--jc:#10302e}.jump a:nth-child(4n+3){--jb:#0f5d57;--jc:#fffaf0}.jump a:nth-child(4n){--jb:#bfe7a8;--jc:#10302e}
.jump a:hover{background:#10302e;color:#ffc83d;transform:translateY(-4px) scale(1.04);box-shadow:0 14px 24px -14px rgba(0,0,0,.6)}
.jump.rv{filter:none!important;opacity:1;transform:none}
.jump.rv a{opacity:0;transform:translateY(18px) scale(.85);filter:blur(8px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.9,.25,1.3),filter .5s ease,background .3s,color .3s}
.jump.rv.in a{opacity:1;transform:none;filter:blur(0)}
.jump.rv.in a:nth-child(2){transition-delay:.06s}.jump.rv.in a:nth-child(3){transition-delay:.12s}.jump.rv.in a:nth-child(4){transition-delay:.18s}.jump.rv.in a:nth-child(5){transition-delay:.24s}.jump.rv.in a:nth-child(6){transition-delay:.3s}.jump.rv.in a:nth-child(7){transition-delay:.36s}
.jump.rv.in a:hover{transform:translateY(-4px) scale(1.04);transition-delay:0s}
@media (max-width:700px){.jump{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding:6px 16px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-bottom:30px}.jump::-webkit-scrollbar{display:none}.jump a{font-size:14px;padding:8px 16px}}.sector{scroll-margin-top:110px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.chip{border:2px solid var(--fg);background:transparent;color:var(--fg);font:inherit;font-weight:700;font-size:15px;padding:5px 18px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s}
.chip[aria-pressed="true"],.chip:hover{background:var(--fg);color:var(--bg)}
.tabs{display:inline-flex;gap:6px;padding:5px;border-radius:999px;background:color-mix(in srgb,var(--fg) 12%,transparent);margin-bottom:24px}
.tabs button{border:0;background:transparent;color:var(--fg);font:inherit;font-weight:700;padding:8px 26px;border-radius:999px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--fg);color:var(--bg)}

/* designs: full image, never cropped */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start}
.tiles.stagger .shot:nth-child(even){margin-top:34px}
.tiles .shot{margin:0;aspect-ratio:var(--ar,4/5);background:color-mix(in srgb,var(--fg,#10302e) 8%,transparent)}
.tiles .shot img{width:100%;height:100%;object-fit:cover}
.tiles.photos .shot img{object-fit:cover}
.tiles.wide .shot{aspect-ratio:4/3}
.masonry{columns:4 220px;column-gap:14px}
.shot{display:block;width:100%;border:0;padding:0;background:none;margin:0 0 14px;break-inside:avoid;cursor:zoom-in;position:relative;border-radius:14px;overflow:hidden}
.shot img{width:100%;height:auto;transition:transform .6s}
.shot:hover img{transform:scale(1.03)}
.shot small{position:absolute;bottom:8px;left:8px;background:rgba(255,250,240,.94);color:var(--ink);font-weight:700;font-size:12px;border-radius:999px;padding:0 10px;direction:ltr}
.sector{margin-top:64px}
.sector:first-child{margin-top:0}
.sector>h3{font-size:clamp(26px,3vw,36px);font-weight:900;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.sector>h3 span{font-size:15px;font-weight:600;opacity:.65}

/* videos */
.vids{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.vid{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:9/16;background:var(--v,#ffe08a);color:var(--ink);display:flex;flex-direction:column;justify-content:space-between;padding:18px;text-decoration:none;border:0;font:inherit;text-align:start;cursor:pointer;isolation:isolate}
.vid.w{grid-column:span 2;aspect-ratio:auto}
.vids{grid-auto-flow:dense}
.vid{justify-content:center;align-items:center}
.vid small{position:absolute;bottom:14px;inset-inline:0;text-align:center;font-weight:700;opacity:.75}
.vid[style*='#0f5d57'],.vid[style*='#10302e']{color:#fffaf0}
.vid[style*='#0f5d57'] .pl,.vid[style*='#10302e'] .pl{background:#ffc83d;color:#10302e}
.vid img.cv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.vid h4{font-weight:800;font-size:21px;line-height:1.35}
.vid .pl{width:52px;height:52px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center}
.vid .pl svg{width:20px;height:20px;margin-inline-start:3px}
.vid small{font-weight:700;opacity:.7}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.vid.soon{cursor:default}.vid.soon .pl{opacity:.3}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,40px);margin-top:40px}
.stat{border-top:3px solid var(--fg);padding-top:22px;text-align:center}
.stat b{display:block;font-weight:900;font-size:clamp(42px,5vw,70px);line-height:1;direction:ltr;text-align:center;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:12px;font-size:16px;font-weight:700}
.stat small{display:block;margin-top:4px;font-size:13px;font-weight:600;opacity:.7}

/* clients marquee — colour logos, seamless */
.marquee{overflow:hidden;direction:ltr;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee+.marquee{margin-top:30px}
.track{display:flex;width:max-content;will-change:transform;backface-visibility:hidden;transform:translateZ(0)}
.marquee{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}.marquee.drag{cursor:grabbing}.marquee img{pointer-events:none;-webkit-user-drag:none}
.set{display:flex;align-items:center;gap:clamp(40px,5vw,70px);padding-inline-end:clamp(40px,5vw,70px)}
.set img{height:clamp(46px,5.6vw,66px);width:auto;max-width:170px;object-fit:contain}
@keyframes slide{to{transform:translateX(-50%)}}

/* team */
.team{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;text-align:center}
.mate .ph{width:min(100%,128px);aspect-ratio:1;border-radius:50%;overflow:hidden;margin:0 auto 14px;background:transparent;filter:grayscale(1)}
.mate .ph img{width:100%;height:100%;object-fit:cover}
.mate .ph.bot{background:var(--ink);display:grid;place-items:center;filter:none}
.mate .ph.bot span{font-size:44px;font-weight:900;color:var(--sun);direction:ltr}
.mate h3.ar,.mate .role.ar{direction:rtl;white-space:normal}
.mate h3{font-size:clamp(14px,1.35vw,18px);font-weight:800;direction:ltr;white-space:nowrap}
.mate .role{font-size:13px;font-weight:600;opacity:.7;direction:ltr;white-space:nowrap}

/* cta */
.cta{text-align:center}
.cta h2{font-size:clamp(54px,9vw,128px);font-weight:900;line-height:1.15}
.cta p{font-size:20px;margin-top:6px;opacity:.85}
.cta .actions{justify-content:center}

/* page hero */
.page-hero{padding-top:130px!important;padding-bottom:clamp(20px,3vw,40px)}
.page-hero .back,.page-hero .eyebrow,.page-hero h1,.page-hero .lede{animation:heroIn .9s cubic-bezier(.2,.8,.2,1) both}
.page-hero .eyebrow{animation-delay:.12s}.page-hero h1{animation-delay:.22s}.page-hero .lede{animation-delay:.4s}
@keyframes heroIn{from{opacity:0;transform:translateY(30px);filter:blur(12px)}to{opacity:1;transform:none;filter:blur(0)}}
.page-hero h1{font-size:clamp(44px,7vw,96px);font-weight:900;margin-top:10px;line-height:1.2}
.back{display:inline-flex;gap:8px;font-weight:700;text-decoration:none;opacity:.8;margin-bottom:14px;border-bottom:2px solid currentColor}
.back:hover{opacity:1}
.bottom-back{margin-top:44px}
.sheet.continue{margin-top:0;border-radius:0;padding-top:10px}
.sheet.continue::before{border-radius:0}

/* content samples: caption then the design */
.posts{columns:3 300px;column-gap:clamp(22px,3vw,36px)}
.post{break-inside:avoid;margin:0 0 26px;background:#fff;border-radius:20px;padding:20px 20px 16px}
.post .kind{display:block;font-size:13px;font-weight:800;opacity:.6;direction:ltr;text-align:left}
.post .cap-text{font-size:16px;line-height:1.9;margin:8px 0 14px;white-space:pre-line}
.post .thumb{display:block;width:100%;height:84px;border:0;padding:0;border-radius:12px;overflow:hidden;cursor:zoom-in;position:relative}
.post .thumb img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.post .thumb::after{content:"شوف التصميم ⤢";position:absolute;inset:auto 8px 8px auto;background:rgba(16,48,46,.85);color:#fffaf0;font:700 12px var(--f);padding:2px 10px;border-radius:999px}
.plan{overflow-x:auto;margin-top:22px;border-radius:18px;background:#fff}
.plan table{border-collapse:collapse;width:100%;min-width:720px}
.plan.rv{opacity:1!important;transform:none!important;filter:none!important}
.plan.rv th,.plan.rv td{opacity:0;filter:blur(8px);transform:translateY(10px);transition:opacity .45s ease var(--d,0s),filter .5s ease var(--d,0s),transform .5s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.plan.rv.in th,.plan.rv.in td{opacity:1;filter:blur(0);transform:none}
.legend span{opacity:0;filter:blur(6px);transition:opacity .45s ease var(--d,0s),filter .45s ease var(--d,0s)}.plan.in~.legend span{opacity:1;filter:blur(0)}
.plan th,.plan td{padding:13px 10px;text-align:center;border-bottom:1px solid rgba(16,48,46,.1);font-size:14px}
.plan th{font-weight:800;background:rgba(16,48,46,.05)}
.plan td span{display:inline-block;border-radius:999px;padding:2px 13px;font-weight:700;font-size:13px;color:var(--ink)}
.k1{background:#ffc83d}.k2{background:#bfeee8}.k3{background:#bfe7a8}.k4{background:#e3d4ff}.k5{background:#f1ece0}
.legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;font-size:14px}
.legend span{border-radius:999px;padding:1px 12px;font-weight:700;color:var(--ink)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s}
.step{--cc:#3db7ac;--ct:#fffaf0;counter-increment:s;background:var(--cc);color:var(--ct);border-radius:24px;padding:24px 24px 26px;box-shadow:0 18px 30px -22px rgba(16,48,46,.6);transform:rotate(var(--rt,0deg));transition:transform .45s cubic-bezier(.2,.9,.25,1.2),box-shadow .45s}
.step:nth-child(6n+1){--cc:#3db7ac;--ct:#fffaf0;--rt:-1.2deg}.step:nth-child(6n+2){--cc:#ffc83d;--ct:#10302e;--rt:1deg}.step:nth-child(6n+3){--cc:#0f5d57;--ct:#fffaf0;--rt:-.8deg}.step:nth-child(6n+4){--cc:#bfe7a8;--ct:#10302e;--rt:1.2deg}.step:nth-child(6n+5){--cc:#10302e;--ct:#ffc83d;--rt:-1deg}.step:nth-child(6n){--cc:#d3f2ee;--ct:#10302e;--rt:.8deg}
.step::before{content:counter(s,decimal-leading-zero);font-weight:900;font-size:44px;display:block;line-height:1;direction:ltr;text-align:right;color:transparent;-webkit-text-stroke:1.5px var(--ct);opacity:.85}
.step h3{font-size:23px;margin-top:12px;color:inherit}
.step p{opacity:.88;margin-top:4px;color:inherit;font-size:15.5px}
.step:hover{transform:translateY(-6px) rotate(0deg);box-shadow:0 28px 40px -24px rgba(16,48,46,.7)}
.steps{perspective:1200px}
.step.rv{opacity:0;transform:translate3d(var(--fx,260px),-140px,-500px) rotate(var(--fr,24deg)) scale(.6);filter:blur(12px)!important;transition:opacity .5s ease,transform 1.1s cubic-bezier(.22,1.2,.36,1),filter .8s ease,box-shadow .45s!important}
.step.rv:nth-child(even){--fx:-260px;--fr:-24deg}
@media (max-width:700px){.step.rv{--fx:120px}.step.rv:nth-child(even){--fx:-120px}}
.step.rv.in{opacity:1;transform:rotate(var(--rt,0deg));filter:blur(0)!important}
.step.rv.in:hover{transform:translateY(-6px) rotate(0deg)}
.steps.six{grid-template-columns:repeat(3,1fr);row-gap:34px}
.checks{display:grid;grid-template-columns:repeat(2,1fr);width:fit-content;max-width:100%;gap:12px 18px;margin-top:30px;font-weight:700}
@media (max-width:700px){.checks{grid-template-columns:1fr}}
.checks div{--cc:#3db7ac;position:relative;background:#fff;border-radius:999px;padding:11px 18px 11px 22px;padding-inline-start:54px;box-shadow:0 10px 22px -18px rgba(16,48,46,.6);font-size:15px;overflow:hidden}
.checks div:nth-child(4n+2){--cc:#ffc83d}.checks div:nth-child(4n+3){--cc:#0f5d57}.checks div:nth-child(4n){--cc:#ff8a5c}
.checks div::before{content:'✓';position:absolute;inset-inline-start:8px;top:50%;translate:0 -50%;width:34px;height:34px;border-radius:50%;background:var(--cc);color:#fff;display:grid;place-items:center;font-size:16px;font-weight:900}
.checks.rv{opacity:1!important;transform:none!important;filter:none!important}
.checks.rv div{opacity:0;transform:translateX(60px);filter:blur(8px);transition:opacity .5s ease,transform .7s cubic-bezier(.2,.9,.25,1.15),filter .5s ease}
.checks.rv div:nth-child(even){transform:translateX(-60px)}
.checks.rv.in div{opacity:1;transform:none;filter:blur(0)}
.checks.rv.in div:nth-child(2){transition-delay:.12s}.checks.rv.in div:nth-child(3){transition-delay:.24s}.checks.rv.in div:nth-child(4){transition-delay:.36s}
@media (max-width:700px){.steps.six,.checks{grid-template-columns:1fr}}

/* ads results */
.results{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.res{background:var(--deep);color:var(--paper);border-radius:22px;padding:24px}
.res .who{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:800;font-size:18px;flex-wrap:wrap}
.res .who span{direction:ltr}
.res .who small{font-size:13px;font-weight:600;opacity:.6}
.res .nums{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:18px}
.res .n{background:rgba(255,250,240,.08);border:1px solid rgba(255,250,240,.14);border-radius:16px;padding:16px}
.res .n b{color:var(--sun)}
.res .n b{display:block;font-size:clamp(28px,3.4vw,42px);font-weight:900;line-height:1.15;direction:ltr;text-align:right}
.res .n span{font-size:14px;font-weight:700;opacity:.75}
.res .bar{height:8px;border-radius:8px;background:rgba(255,250,240,.12);margin-top:10px;overflow:hidden}
.res .bar i{display:block;height:100%;width:0;background:var(--sun);border-radius:8px;transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.res.in .bar i{width:var(--w)}

/* contact */
.pick-lead{font-size:19px;font-weight:700;margin:0 0 10px}.sharia-note{display:inline-block;background:#c8321e;color:#fff;font-weight:800;font-size:15px;padding:4px 14px;border-radius:999px;margin:0 0 22px;white-space:nowrap;font-size:14px}
.contact-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(28px,5vw,70px);align-items:start}
.pick{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--sun);border-bottom:2px solid var(--sun)}
.pick button{background:none;border:0;font:inherit;color:var(--fg);text-align:start;padding:28px 6px;cursor:pointer}
.pick button+button{border-inline-start:2px solid var(--sun);padding-inline-start:24px}
.pick b{display:block;font-size:clamp(28px,3.4vw,42px);font-weight:900;line-height:1.3}
.pick span{font-size:15px;opacity:.8}
.pick b::after{content:" ←";display:inline-block;transition:transform .3s}
.pick button:hover b::after{transform:translateX(-8px)}
.progress{display:flex;gap:6px;margin-bottom:22px}
.progress i{flex:1;height:5px;border-radius:5px;background:rgba(255,250,240,.18);transition:background .4s}
.progress i.on{background:var(--sun)}
.fstep{display:none}
.fstep.on{display:block}
.fstep.on>*{animation:heroIn .7s cubic-bezier(.2,.8,.2,1) both}
.fstep.on>*:nth-child(2){animation-delay:.1s}.fstep.on>*:nth-child(3){animation-delay:.2s}.fstep.on>*:nth-child(4){animation-delay:.3s}.fstep.on>*:nth-child(5){animation-delay:.4s}.fstep.on>*:nth-child(6){animation-delay:.5s}.fstep.on>*:nth-child(7){animation-delay:.6s}.fstep.on>*:nth-child(8){animation-delay:.7s}.fstep.on>*:nth-child(9){animation-delay:.8s}
#flow .progress,#flow .navrow{animation:heroIn .7s .3s both}
.fstep h3{font-size:32px;font-weight:900}
.fstep .hint{font-size:15px;opacity:.75;margin-bottom:8px}
.field{display:block;margin-top:20px}
.field>span{display:block;font-weight:700;font-size:15px;margin-bottom:6px}
.field>span em{font-style:normal;color:var(--sun)}
.field input,.field textarea{width:100%;font:inherit;font-size:17px;color:var(--fg);background:transparent;border:0;border-bottom:2px solid var(--sun);border-radius:0;padding:8px 2px;transition:border-color .2s}
.field textarea{min-height:70px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:#fffaf0}
.field input::placeholder,.field textarea::placeholder{color:color-mix(in srgb,var(--fg) 50%,transparent)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts label{cursor:pointer}
.opts input{position:absolute;opacity:0;pointer-events:none}
.opts span{display:inline-block;border:1.5px solid var(--sun);border-radius:999px;padding:4px 16px;font-weight:600;font-size:15px;transition:all .2s}
.opts input:checked+span{background:var(--sun);color:var(--ink);border-color:var(--sun)}
.opts input:focus-visible+span{outline:3px solid var(--ink)}
.navrow{display:flex;justify-content:space-between;gap:10px;margin-top:30px;flex-wrap:wrap}
.summary{background:rgba(255,250,240,.08);border:1px solid var(--sun);border-radius:14px;padding:14px 16px;font-size:15px;white-space:pre-line;max-height:260px;overflow:auto}
.info{display:grid}
.info>*{display:flex;gap:14px;align-items:flex-start;text-decoration:none;padding:16px 0;border-bottom:1px solid var(--sun)}
.info svg.ic{color:var(--sun)}
.info>*:first-child{border-top:1px solid var(--sun)}
.info svg.ic{margin-top:4px}
.info b{display:block;font-weight:800}
.info small{font-size:15px;opacity:.85;line-height:1.7;display:block}

/* footer */
/* team build-in */
.mate.rv{opacity:1;transform:none;transition-delay:0s!important}
.mate.rv .ph{opacity:0;transform:scale(.7);filter:grayscale(1) blur(16px);transition:opacity .8s ease calc(var(--i)*.18s),transform 1s cubic-bezier(.34,1.4,.64,1) calc(var(--i)*.18s),filter .9s ease calc(var(--i)*.18s)}
.mate.rv h3,.mate.rv .role{opacity:0;transform:translateY(14px);filter:blur(8px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1),filter .7s ease}
.mate.rv h3{transition-delay:calc(var(--i)*.18s + .55s)}.mate.rv .role{transition-delay:calc(var(--i)*.18s + .7s)}
.mate.rv.in h3,.mate.rv.in .role{opacity:1;transform:none;filter:blur(0)}
.mate.rv.in .ph{opacity:1;transform:none;filter:grayscale(1) blur(0)}
.mate.rv .ph.bot{filter:blur(16px)}.mate.rv.in .ph.bot{filter:blur(0)}
/* scroll jump */
.jumps{position:fixed;right:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);z-index:85;display:flex;flex-direction:column;gap:6px;opacity:0;transform:translateX(20px);filter:blur(6px);pointer-events:none;transition:opacity .35s ease,transform .45s cubic-bezier(.34,1.56,.64,1),filter .35s ease}
.jumps.on{opacity:1;transform:none;filter:blur(0);pointer-events:auto}
.jumps button{width:36px;height:36px;border-radius:50%;border:0;background:#10302e;color:#ffc83d;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 22px -12px rgba(0,0,0,.6);transition:background .25s,color .25s,transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s}
.jumps button svg{width:16px;height:16px}
.jumps button.dim{opacity:.35}
@media (hover:hover){.jumps button:hover{background:#ffc83d;color:#10302e;transform:scale(1.1)}}
/* mobile header message */
.hmsg{display:block;flex:1;text-align:center;font-weight:800;font-size:15px;color:var(--hfg);opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .35s ease,filter .35s ease,transform .45s cubic-bezier(.2,.9,.25,1.2),color .5s}
.hmsg.swap{opacity:0;filter:blur(6px);transform:translateY(6px)}
@media (min-width:901px){header.site .wrap{justify-content:flex-start}.hmsg{flex:0 1 auto;text-align:start;margin-inline-start:clamp(40px,7vw,110px)}header.site nav.main{margin-inline-start:auto}header.site .brand{margin-inline-start:clamp(40px,7vw,110px)}nav.main a{padding-inline:12px}}
@media (min-width:901px) and (max-width:1180px){.hmsg{font-size:13px}nav.main a{padding-inline:9px;font-size:14px}}
@media (max-width:900px){.hmsg{display:block;position:absolute;left:50%;top:50%;translate:-50% -50%;max-width:calc(100% - 150px);text-align:center;font-weight:800;font-size:13.5px;line-height:1.35;color:var(--hfg);pointer-events:none;transition:opacity .35s ease,filter .35s ease,transform .45s cubic-bezier(.2,.9,.25,1.2)}
 .hmsg.swap{opacity:0;filter:blur(6px);transform:translateY(6px)}
 header.site .wrap{position:relative}}
/* footer build-in */
footer.site .f-col h4,footer.site .f-links a,footer.site .f-info li,footer.site .copy{opacity:0;transform:translateY(22px);filter:blur(10px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1),filter .8s ease}
footer.site .socials a{opacity:0;transform:translateX(var(--sx,60px)) rotate(var(--sr,25deg)) scale(.6);transition:opacity .6s ease,transform .9s cubic-bezier(.2,.9,.25,1.2),background .25s,color .25s}
footer.site .socials a:nth-child(even){--sx:-60px;--sr:-25deg}
footer.site .f-logo{opacity:0;transform:scale(.4) rotate(-20deg);transition:opacity .6s ease 1.5s,transform .9s cubic-bezier(.34,1.56,.64,1) 1.5s}
footer.site.in .f-col h4,footer.site.in .f-links a,footer.site.in .f-info li,footer.site.in .copy,footer.site.in .socials a,footer.site.in .f-logo{opacity:1;transform:none;filter:blur(0)}
footer.site.in .f-follow h4{transition-delay:.05s}
footer.site.in .socials a:nth-child(1){transition-delay:.2s}footer.site.in .socials a:nth-child(2){transition-delay:.3s}footer.site.in .socials a:nth-child(3){transition-delay:.4s}footer.site.in .socials a:nth-child(4){transition-delay:.5s}footer.site.in .socials a:nth-child(5){transition-delay:.6s}footer.site.in .socials a:nth-child(6){transition-delay:.7s}
footer.site.in .f-center h4{transition-delay:.35s}
footer.site.in .f-links a:nth-child(1){transition-delay:.5s}footer.site.in .f-links a:nth-child(2){transition-delay:.58s}footer.site.in .f-links a:nth-child(3){transition-delay:.66s}footer.site.in .f-links a:nth-child(4){transition-delay:.74s}footer.site.in .f-links a:nth-child(5){transition-delay:.82s}footer.site.in .f-links a:nth-child(6){transition-delay:.9s}
footer.site.in .f-col:not(.f-center):not(.f-follow) h4{transition-delay:.8s}
footer.site.in .f-info li:nth-child(1){transition-delay:.95s}footer.site.in .f-info li:nth-child(2){transition-delay:1.1s}footer.site.in .f-info li:nth-child(3){transition-delay:1.25s}
footer.site.in .copy{transition-delay:1.7s}

footer.site{text-align:start;background:var(--sun);color:var(--ink);border-radius:44px 44px 0 0;margin-top:-44px;position:relative;padding:72px 0 calc(26px + env(safe-area-inset-bottom,0px))}
.f-grid{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:36px;align-items:start}
.f-logo{display:block;width:fit-content;align-self:start;justify-self:center;margin-top:2px}.f-logo .mk{width:76px;height:95px;fill:var(--teal);display:block;transition:transform .3s}.f-logo:hover .mk{transform:translateY(-4px)}
.f-center{text-align:center}
.f-col h4{font-size:22px!important;font-weight:900;display:inline-block;position:relative;padding-bottom:8px;margin-bottom:16px!important}
.f-col h4::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;border-radius:4px;background:var(--ink)}
.f-center .f-links{grid-template-columns:auto auto;justify-content:center;column-gap:34px;row-gap:8px}
.f-info{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.f-info li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.7}
.f-info li svg.ic{flex:none;width:36px;height:36px;padding:8px;border-radius:50%;background:var(--ink);color:var(--sun)}
.f-info b{display:block;font-weight:800}
.f-info a{text-decoration:none;font-weight:700}
.f-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.f-brand .mk{width:44px;height:55px;fill:var(--teal)}
.f-brand b{font-size:42px;font-weight:900;line-height:1}
.tagline{margin-top:16px;font-size:16px;max-width:30ch;font-weight:600}
footer h4{margin:0 0 12px;font-size:16px;font-weight:800}
footer p{font-size:15px}
.f-links{display:grid;gap:4px}
.f-links a{text-decoration:none;font-size:15px;font-weight:600}
.f-links a:hover{text-decoration:underline}
.socials{display:flex;flex-wrap:wrap;gap:10px}
footer .socials{display:grid;grid-template-columns:repeat(3,44px);gap:12px}
.socials a{width:44px;height:44px;border-radius:50%;border:2px solid currentColor;display:grid;place-items:center;line-height:0;transition:background .25s,color .25s}
.socials a svg{width:20px;height:20px;display:block}
.socials a:hover{background:var(--ink);color:var(--sun);border-color:var(--ink)}
.copy{margin-top:40px;padding-top:16px;border-top:1px solid rgba(16,48,46,.2);display:flex;justify-content:center;gap:10px;flex-wrap:wrap;font-size:13px;font-weight:600;opacity:.75}

/* lightbox */
.lb{position:fixed;inset:0;z-index:80;background:rgba(8,22,21,.93);display:none;align-items:center;justify-content:center;padding:20px}
.lb.open{display:flex}
.lb img{max-height:86vh;max-width:min(92vw,680px);border-radius:14px;width:auto}
.lb button{position:absolute;border:0;background:var(--sun);color:var(--ink);width:48px;height:48px;border-radius:50%;font-size:24px;cursor:pointer;font-weight:700}
.lb .c{top:calc(16px + env(safe-area-inset-top,0px));left:16px}
.lb .p{right:16px;top:50%}.lb .n{left:16px;top:50%}

@media (max-width:1100px){nav.main a{padding:6px 9px;font-size:14px}}
@media (max-width:1000px){

  .grid{grid-template-columns:repeat(3,1fr)}
  .team{grid-template-columns:repeat(3,1fr)}
  .vids{grid-template-columns:repeat(3,1fr)}
  .f-grid{grid-template-columns:auto 1fr 1fr}
  .f-grid>.f-col:last-child{grid-column:2/4}
  .steps{grid-template-columns:repeat(2,1fr)}
  .posts{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  nav.main,.head-cta{display:none}
  .burger{display:grid}
}
@media (max-width:820px){
  .hero-grid,.about-band,.contact-grid{grid-template-columns:1fr}
  .hero-grid{text-align:center}
  .actions{justify-content:center}
  .hero-art{width:min(76%,310px);order:2;margin-top:10px}
  .results{grid-template-columns:1fr}
}
@media (max-width:600px){
  body{font-size:16px}
  header.site .wrap{height:56px}
  .sheet{border-radius:30px 30px 0 0;margin-top:-30px;--ov:30px}
  footer.site{border-radius:30px 30px 0 0;margin-top:-30px}
  .hero{min-height:100svh;padding-top:96px}
  .svc{grid-template-columns:1fr auto;gap:12px;padding:18px 20px;border-radius:20px;top:calc(84px + var(--k,0)*10px)}
  .svc h3{font-size:19px}
  .svc .go{padding:7px 12px;font-size:12.5px}
  .grid{grid-template-columns:1fr 1fr;gap:12px}
  .card h3{font-size:14px}
  .card .cap{padding:34px 10px 10px;flex-direction:column;align-items:flex-start}
  .masonry{columns:2;column-gap:10px}.shot{margin-bottom:10px}
  .vids{grid-template-columns:1fr 1fr;gap:12px}
  .vid h4{font-size:17px}
  .stats{grid-template-columns:1fr 1fr;gap:26px 16px}
  .stat{padding-top:16px}
  .stat b{font-size:40px}.stat span{font-size:14px}
  .team{grid-template-columns:repeat(2,1fr);gap:26px 14px}
  .pick{grid-template-columns:1fr}
  .pick button+button{border-inline-start:0;border-top:2px solid var(--sun);padding-inline-start:6px}
  .f-grid{grid-template-columns:1fr;gap:30px}
  .f-grid>.f-col:last-child{grid-column:auto}
  .f-logo{margin-inline:auto}.f-logo .mk{width:56px;height:70px}
  .about-card{text-align:center}.about-card .eyebrow{justify-content:center}.about-card .actions{justify-content:center!important}
  footer .f-col{text-align:center}footer .socials{justify-content:center;margin-inline:auto}footer .f-center .f-links{justify-content:center;margin-inline:auto;width:fit-content;text-align:center}.f-info{justify-items:center}.f-info li{flex-direction:column;align-items:center;text-align:center;gap:6px}footer .copy{justify-content:center;gap:16px;flex-wrap:wrap}
  .tiles{grid-template-columns:repeat(2,1fr);gap:10px}.tiles.stagger .shot:nth-child(even){margin-top:24px}
  .f-center{text-align:center}
  .steps,.posts{grid-template-columns:1fr}
  .actions .btn{flex:0 0 auto}.btn-wide{padding-inline:40px}.btn-cta{min-width:220px}
  .ring .tag span{padding:5px 10px;font-size:11px}
}