@font-face{font-family:"Cairo";src:url("fonts/cairo.woff2") format("woff2");font-weight:200 1000;font-style:normal;font-display:swap}
/* TrimPix website. Tokens from the TrimPix design system. */
:root{
  --bg:#070707; --surface:#141110; --surface-2:#1E1916; --line:#2E2622; --line-strong:#7A6C63;
  --ink:#F5F2EF; --ink-muted:#B0A59C; --orange:#E4670D; --on-orange:#070707; --brown:#562A09; --rec:#FF5C7A;
  --radius-sm:4px; --radius-md:10px; --radius-lg:18px; --radius-full:999px;
  --font-head:"Cairo","Segoe UI",Tahoma,sans-serif;
  --font-body:"Cairo","Segoe UI",Tahoma,system-ui,sans-serif;
  --font-latin:"Cairo","Segoe UI",sans-serif;
  --wrap:1200px;
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{background:var(--bg)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:30px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.hidden{display:none!important}
h1,h2,h3{font-family:var(--font-head);margin:0}
.en{font-family:var(--font-latin);direction:ltr;unicode-bidi:isolate}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 3D stage */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;transition:opacity .6s}
#gl.dim{opacity:.35}
main{position:relative;z-index:1}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 24px;border-radius:var(--radius-md);font-weight:600;font-size:16px;text-decoration:none;border:1px solid transparent;white-space:nowrap;background:none}
.btn.primary{background:var(--orange);color:var(--on-orange)}
.btn.primary:hover{background:#F07A24}
.btn.ghost{border-color:rgba(245,242,239,.45);color:var(--ink)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.small{height:40px;padding:0 16px;font-size:14px}
.btn svg{width:18px;height:18px}
.ctas{display:flex;gap:12px;flex-wrap:wrap}

/* header + menu */
.top{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background .2s,border-color .2s;border-bottom:1px solid transparent}
.top.solid{background:rgba(7,7,7,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.top-in{max-width:calc(var(--wrap) + 40px);margin:0 auto;display:flex;align-items:center;gap:24px;padding:14px 20px}
.brand img{height:24px;width:auto}
.nav{display:none;gap:4px;margin-inline-start:auto}
.nav a{text-decoration:none;color:var(--ink-muted);font-size:15px;padding:6px 12px;border-radius:var(--radius-sm)}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--orange)}
.top .cta{display:none}
.menu-btn{margin-inline-start:auto;width:44px;height:44px;border-radius:var(--radius-md);border:1px solid var(--line);background:rgba(7,7,7,.6);display:grid;place-items:center}
.menu-btn svg{width:22px;height:22px}
@media (min-width:980px){.nav{display:flex}.top .cta{display:inline-flex}.menu-btn{display:none}}
.menu{position:fixed;inset:0;z-index:60;background:#070707;display:none;flex-direction:column;padding:calc(20px + env(safe-area-inset-top,0px)) 24px calc(28px + env(safe-area-inset-bottom,0px))}
.menu.open{display:flex}
.menu-head{display:flex;justify-content:space-between;align-items:center}
.menu-head img{height:22px}
.menu nav{display:flex;flex-direction:column;margin:36px 0 auto}
.menu nav a{font-family:var(--font-head);font-weight:700;font-size:36px;line-height:64px;text-decoration:none;border-bottom:1px solid var(--line)}
.menu nav a[aria-current="page"]{color:var(--orange)}
.menu .btn{width:100%}

/* page transitions */
#page{min-height:100vh;transition:opacity .35s}
#page.leaving{opacity:0}

/* shared section layout */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sec{position:relative;padding:88px 0 0}
.solid-bg{background:linear-gradient(180deg,rgba(7,7,7,0) 0,#070707 140px)}
.kicker{font-family:var(--font-latin);font-weight:700;font-size:15px;color:var(--orange);direction:ltr;text-align:right;display:block;margin-bottom:8px}
.h2{font-weight:700;font-size:38px;line-height:52px}
.lead{color:var(--ink-muted);font-size:18px;line-height:32px;max-width:36em;margin:12px 0 0}
@media (min-width:900px){.sec{padding-top:128px}.h2{font-size:56px;line-height:72px}}

/* page hero (inner pages) */
.phero{min-height:88vh;min-height:88svh;display:flex;align-items:flex-end;padding:120px 0 56px}
.phero .wrap{width:100%}
.phero h1{font-weight:700;font-size:48px;line-height:62px;max-width:10em}
.phero p{color:var(--ink-muted);font-size:18px;line-height:32px;max-width:32em;margin:16px 0 26px}
@media (min-width:900px){.phero{align-items:center}.phero h1{font-size:84px;line-height:100px}}

/* home: scroll through the frame tunnel */
.tunnel{height:340vh;position:relative}
.tunnel-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.beat{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 20px 64px;max-width:var(--wrap);margin:0 auto;pointer-events:none;opacity:0;will-change:opacity,transform}
.beat.on{pointer-events:auto}
.beat h1{font-weight:700;font-size:44px;line-height:58px;max-width:9em;text-shadow:0 2px 30px rgba(7,7,7,.8)}
.beat p{font-size:18px;line-height:32px;max-width:30em;color:rgba(245,242,239,.9);margin:16px 0 26px;text-shadow:0 1px 16px rgba(7,7,7,.9)}
.beat .big{font-family:var(--font-head);font-weight:700;font-size:15vw;line-height:1.05;text-shadow:0 2px 40px rgba(7,7,7,.8)}
.beat .big-en{font-family:var(--font-latin);font-weight:700;font-size:15vw;line-height:.9;direction:ltr;text-align:left;text-shadow:0 2px 40px rgba(7,7,7,.8)}
.beat .big-en span{display:block;color:var(--orange)}
.scroll-hint{position:absolute;bottom:18px;inset-inline:0;text-align:center;font-size:13px;color:var(--ink-muted);transition:opacity .3s}
@media (min-width:900px){.beat{padding:0 20px 96px}.beat h1{font-size:88px;line-height:104px}.beat .big,.beat .big-en{font-size:150px}}

/* showreel player */
.reel{margin:36px 0 0}
.reel-frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius-md) var(--radius-md) 0 0;overflow:hidden;background:#000}
.reel-frame video,.reel-frame iframe{width:100%;height:100%;object-fit:cover;border:0}
.reel-bar{background:#0C0A09;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius-md) var(--radius-md);padding:12px 14px 10px}
.scrub{position:relative;height:26px;cursor:pointer;touch-action:none}
.scrub .ruler{position:absolute;inset:0 0 auto 0;height:8px;background:repeating-linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px 10px);opacity:.7}
.scrub::after{content:"";position:absolute;inset-inline:0;bottom:4px;height:6px;border-radius:3px;background:var(--surface-2)}
.scrub .fill{position:absolute;inset-inline-start:0;bottom:4px;height:6px;border-radius:3px;background:var(--orange);z-index:1;width:0}
.scrub .head{position:absolute;inset-inline-start:0;top:0;bottom:0;width:2px;background:var(--orange);z-index:2;transform:translateX(50%)}
.scrub .head::before{content:"";position:absolute;top:-2px;inset-inline-start:-5px;width:12px;height:10px;border-radius:2px;background:var(--orange)}
.reel-ctrl{display:flex;align-items:center;gap:12px;margin-top:6px}
.reel-ctrl .icon{width:34px;height:34px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);display:grid;place-items:center}
.reel-ctrl .icon svg{width:16px;height:16px}
.tc{font-family:var(--font-latin);font-weight:500;font-size:15px;color:var(--ink-muted);direction:ltr}
.sound{margin-inline-start:auto;height:34px;padding:0 12px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);font-size:14px}
.sound[aria-pressed="true"]{border-color:var(--orange);color:var(--orange)}

/* tilt cards (services, reasons) */
.cards{display:grid;gap:14px;margin-top:36px;perspective:1000px}
@media (min-width:700px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1050px){.cards.four{grid-template-columns:repeat(4,1fr)}}
.tilt{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:26px 22px 24px;transform-style:preserve-3d;transition:transform .2s ease-out,border-color .2s;min-height:220px;display:flex;flex-direction:column}
.tilt:hover{border-color:var(--line-strong)}
.tilt .n{font-family:var(--font-latin);font-weight:700;font-size:46px;line-height:46px;color:var(--orange);transform:translateZ(40px);display:block;margin-bottom:auto;padding-bottom:22px}
.tilt h3{font-weight:600;font-size:22px;line-height:32px;transform:translateZ(28px)}
.tilt p{color:var(--ink-muted);font-size:16px;line-height:28px;margin:8px 0 0;transform:translateZ(16px)}
.tilt .glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(400px circle at var(--gx,50%) var(--gy,0%),rgba(228,103,13,.16),transparent 60%);opacity:0;transition:opacity .2s}
.tilt:hover .glare{opacity:1}
@media (prefers-reduced-motion:reduce){.tilt{transition:none}}

/* featured works strip */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:36px}
.work{position:relative;aspect-ratio:9/16;border-radius:var(--radius-md);overflow:hidden;background:var(--surface);border:0;padding:0;text-align:start;display:block;width:100%}
.work video,.work img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.work .cap{position:absolute;inset-inline:0;bottom:0;padding:40px 12px 12px;background:linear-gradient(180deg,transparent,rgba(7,7,7,.92));z-index:1}
.work .cat{display:inline-block;font-size:12px;line-height:20px;padding:0 8px;border-radius:var(--radius-sm);background:rgba(7,7,7,.7);border:1px solid rgba(245,242,239,.25);margin-bottom:6px}
.work .ttl{display:block;font-family:var(--font-head);font-weight:600;font-size:15px;line-height:22px}
.work .res{display:block;font-size:13px;color:var(--orange)}
.row-end{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}

/* steps */
.steps{list-style:none;margin:36px 0 0;padding:0;display:grid;counter-reset:s}
@media (min-width:900px){.steps{grid-template-columns:repeat(4,1fr);gap:28px}}
.steps li{counter-increment:s;padding:22px 0;border-top:1px solid var(--line)}
.steps li::before{content:counter(s);display:block;font-family:var(--font-latin);font-weight:700;font-size:44px;line-height:44px;color:var(--orange);margin-bottom:14px}
.steps h3{font-weight:600;font-size:22px;line-height:32px}
.steps p{margin:6px 0 0;color:var(--ink-muted);font-size:16px;line-height:28px}

/* CTA band */
.band{margin-top:128px;background:linear-gradient(180deg,#B4520C 0%,#562A09 55%,#2A1508 100%);padding:80px 0}
.band h2{font-weight:700;font-size:40px;line-height:54px;color:#fff;max-width:14em}
.band p{color:rgba(255,255,255,.86);margin:12px 0 26px;max-width:32em}
@media (min-width:900px){.band h2{font-size:64px;line-height:80px}}

/* work page: 3D ring */
.ring-stage{height:100vh;height:100svh;position:relative}
.ring-ui{position:absolute;inset-inline:0;bottom:0;padding:0 20px calc(28px + env(safe-area-inset-bottom,0px));max-width:var(--wrap);margin:0 auto;display:flex;flex-direction:column;gap:14px;pointer-events:none}
.ring-ui>*{pointer-events:auto}
.ring-top{position:absolute;top:calc(84px + env(safe-area-inset-top,0px));inset-inline:0;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.ring-top h1{font-weight:700;font-size:40px;line-height:52px}
@media (min-width:900px){.ring-top h1{font-size:64px;line-height:80px}}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-top:14px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:38px;padding:0 16px;border-radius:var(--radius-full);border:1px solid var(--line-strong);background:rgba(7,7,7,.6);font-size:15px;color:var(--ink-muted)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.now{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.now .t{font-family:var(--font-head);font-weight:700;font-size:26px;line-height:36px;text-shadow:0 2px 20px rgba(7,7,7,.9)}
.now .c{font-size:14px;color:var(--ink-muted)}
.now .count{font-family:var(--font-latin);font-weight:700;font-size:18px;color:var(--ink-muted);direction:ltr}
.ring-ctrl{display:flex;gap:10px;align-items:center}
.ring-ctrl .arrow{width:52px;height:52px;border-radius:var(--radius-md);border:1px solid var(--line-strong);background:rgba(7,7,7,.6);font-size:22px}
.ring-ctrl .btn{flex:1;max-width:260px}
.hint{font-size:13px;color:var(--ink-muted)}
.list-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:28px}
@media (min-width:700px){.list-grid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1050px){.list-grid{grid-template-columns:repeat(6,1fr)}}

/* packages */
.packs{display:grid;margin-top:36px;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;background:rgba(7,7,7,.8)}
@media (min-width:900px){.packs{grid-template-columns:repeat(3,1fr)}}
.pack{padding:28px 24px;border-top:1px solid var(--line);position:relative;display:flex;flex-direction:column}
.pack:first-child{border-top:0}
@media (min-width:900px){.pack{border-top:0;border-inline-start:1px solid var(--line)}.pack:first-child{border-inline-start:0}}
.pack.featured{background:var(--surface);box-shadow:inset 0 3px 0 var(--orange)}
.pack .tag{position:absolute;top:28px;inset-inline-end:24px;font-size:12px;line-height:22px;padding:0 9px;border-radius:var(--radius-sm);background:var(--orange);color:var(--on-orange);font-weight:600}
.pack h3{font-weight:700;font-size:30px;line-height:42px}
.pack .price{font-size:15px;color:var(--ink-muted);margin:2px 0 18px}
.pack .price b{font-family:var(--font-latin);font-weight:700;font-size:32px;color:var(--ink)}
.pack ul{list-style:none;margin:0 0 24px;padding:0;flex:1}
.pack li{padding:10px 0;border-top:1px solid var(--line);font-size:16px;line-height:26px;display:flex;gap:10px;align-items:baseline}
.pack li::before{content:"";width:7px;height:7px;border-radius:var(--radius-full);background:var(--orange);flex:none;transform:translateY(-2px)}
.pack .btn{width:100%}
.pack:not(.featured) .btn{background:transparent;border-color:var(--line-strong);color:var(--ink)}

/* FAQ */
.faq{margin-top:28px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;font-family:var(--font-head);font-weight:600;font-size:20px;line-height:30px;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-latin);font-size:28px;color:var(--orange);flex:none}
.faq details[open] summary::after{content:"−"}
.faq p{margin:0 0 20px;color:var(--ink-muted);max-width:44em}

/* testimonials */
.quotes{display:grid;gap:24px;margin-top:32px}
@media (min-width:800px){.quotes{grid-template-columns:repeat(2,1fr)}}
.quote{border-top:2px solid var(--orange);padding-top:16px;margin:0}
.quote p{font-size:20px;line-height:36px;margin:0 0 10px}
.quote span{color:var(--ink-muted);font-size:14px}

/* join */
.perks{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:0}
@media (min-width:900px){.perks{grid-template-columns:repeat(2,1fr);column-gap:48px}}
.perks li{padding:18px 0;border-top:1px solid var(--line)}
.perks b{display:block;font-family:var(--font-head);font-weight:600;font-size:21px;line-height:32px}
.perks span{color:var(--ink-muted)}

/* contact */
.contact-list{display:grid;gap:12px;margin-top:32px;max-width:560px}
.contact-list a{display:flex;align-items:center;gap:16px;padding:18px 20px;border:1px solid var(--line-strong);border-radius:var(--radius-md);text-decoration:none;background:rgba(7,7,7,.7)}
.contact-list a:hover{border-color:var(--orange)}
.contact-list svg{width:26px;height:26px;color:var(--orange);flex:none}
.contact-list b{display:block;font-family:var(--font-head);font-weight:600;font-size:20px;line-height:28px}
.contact-list span{color:var(--ink-muted);font-size:15px}

/* footer */
.foot{position:relative;z-index:1;background:#070707;border-top:1px solid var(--line);margin-top:0}
.foot-in{max-width:var(--wrap);margin:0 auto;padding:48px 20px calc(40px + env(safe-area-inset-bottom,0px));display:grid;gap:28px}
@media (min-width:900px){.foot-in{grid-template-columns:2fr 1fr 1fr}}
.foot img{height:22px;width:auto}
.foot .tag{font-family:var(--font-latin);font-weight:500;color:var(--ink-muted);direction:ltr;text-align:right;margin:10px 0 0}
.foot h3{font-size:16px;line-height:24px;color:var(--ink-muted);font-weight:600;margin-bottom:8px}
.foot nav a,.foot .links a{display:block;text-decoration:none;padding:4px 0;color:var(--ink)}
.foot .copy{grid-column:1/-1;color:var(--ink-muted);font-size:14px;border-top:1px solid var(--line);padding-top:20px}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(7,7,7,.95);display:none;align-items:center;justify-content:center;padding:calc(64px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px))}
.lightbox.open{display:flex}
.lb-body{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.lb-body video{max-height:calc(100% - 44px);max-width:100%;border-radius:var(--radius-md);background:#000}
.lb-body iframe{width:min(100%,960px);aspect-ratio:16/9;border:0;border-radius:var(--radius-md)}
.lb-body iframe.tall{width:auto;height:min(calc(100% - 44px),86vh);aspect-ratio:9/16;max-width:100%}
.lb-body .t{font-family:var(--font-head);font-weight:600;font-size:18px}
.lb-close{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));inset-inline-end:14px;width:46px;height:46px;border-radius:var(--radius-full);border:1px solid var(--line-strong);background:var(--surface);font-size:26px;line-height:1}

/* loader */
.loader{position:fixed;inset:0;z-index:90;background:#070707;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .5s}
.loader.done{opacity:0;pointer-events:none}
.loader img{width:92px}
.loader .bar{width:160px;height:3px;background:var(--surface-2);border-radius:2px;overflow:hidden}
.loader .bar i{display:block;height:100%;width:0;background:var(--orange);transition:width .2s}

/* ring drag should not fight vertical scrolling */
.ring-stage{touch-action:pan-y;cursor:grab}
.ring-stage:active{cursor:grabbing}

/* no WebGL: plain but complete */
.no-gl .tunnel{height:auto}
.no-gl .tunnel-stick{position:relative;height:auto;min-height:100vh;min-height:100svh;background:linear-gradient(180deg,#B4520C 0%,#562A09 45%,#070707 88%);display:flex;align-items:flex-end}
.no-gl .beat{position:relative;opacity:1!important;transform:none!important;pointer-events:auto;padding-top:140px;width:100%}
.no-gl .beat[data-b="1"],.no-gl .beat[data-b="2"],.no-gl .scroll-hint{display:none}
.no-gl .phero{background:radial-gradient(90% 70% at 20% 10%,rgba(228,103,13,.35),transparent 60%)}
h1[tabindex="-1"]:focus{outline:none}
@media (min-width:900px){.phero .wrap>*{max-width:640px}.phero h1{font-size:76px;line-height:92px}}

/* ---------- platform pages ---------- */
.two-col{display:grid;gap:36px;margin-top:36px}
@media (min-width:900px){.two-col{grid-template-columns:1fr 1fr;gap:64px}}
.col-h{font-weight:600;font-size:22px;line-height:32px;color:var(--orange-text,#E4670D);margin-bottom:6px}
.pairs{list-style:none;margin:0;padding:0}
.pairs li{padding:16px 0;border-top:1px solid var(--line)}
.pairs b{display:block;font-family:var(--font-head);font-weight:600;font-size:19px;line-height:30px;color:var(--ink-muted)}
.pairs b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:var(--radius-full);background:var(--rec);margin-inline-end:10px;transform:translateY(-3px)}
.pairs span{display:block;font-size:17px;line-height:30px;margin-top:4px}
.phero.short{min-height:auto;padding:140px 0 24px}
.form{max-width:640px}
.form .field{display:block;margin-bottom:16px}
.form .field>span,.form .flabel{display:block;font-size:14px;line-height:22px;color:var(--ink-muted);margin-bottom:6px}
.form .input{width:100%;height:52px;border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface);padding:0 14px;font-size:16px;color:var(--ink)}
.form textarea.input{height:auto;min-height:110px;padding:12px 14px;line-height:28px;resize:vertical}
.form .two{display:grid;gap:12px}
@media (min-width:700px){.form .two{grid-template-columns:1fr 1fr}}
.form .req{color:var(--orange);font-style:normal}
.form .err{color:var(--rec);font-size:15px;min-height:0;margin:0 0 10px}
.form .hint{color:var(--ink-muted);font-size:14px;margin-top:10px}
.pickset{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.pickset button{border:1px solid var(--line-strong);background:transparent;border-radius:var(--radius-full);padding:8px 16px;font-size:15px;color:var(--ink)}
.pickset button[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:var(--on-orange);font-weight:600}
.done{max-width:640px}
.done .mark{width:64px;height:64px;border-radius:var(--radius-full);display:grid;place-items:center;background:color-mix(in srgb,var(--ok) 22%,transparent);color:var(--ok);margin-bottom:20px}
.done .mark svg{width:30px;height:30px}
.hp{position:absolute;width:1px;height:1px;padding:0;border:0;opacity:0;pointer-events:none;clip-path:inset(50%)}

/* =====================================================================
   Professional pass: one container, one rhythm, solid sections
   ===================================================================== */
body{font-size:17px;line-height:30px}
.wrap{max-width:1200px;padding:0 24px}
.sec{background:var(--bg)}
.sec.solid-bg{background:linear-gradient(180deg,rgba(7,7,7,0) 0,#070707 160px)}
.psec{position:relative;z-index:1;background:var(--bg);padding:96px 0 0}
.psec.first{padding-top:0;background:linear-gradient(180deg,rgba(7,7,7,0),#070707 60%)}
.psec.last{padding-bottom:120px}
@media (min-width:980px){.psec{padding-top:140px}.psec.last{padding-bottom:160px}}
.h2{letter-spacing:-.01em}
.lead{font-size:18px;line-height:32px}

/* section header: title on one side, lead on the other */
.sh{display:grid;gap:10px}
.sh .lead{margin:0;max-width:34em}
.sh-end{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
/* the intro always sits right under its title, on every screen size (Khaled's rule) */
.sh.c{text-align:center;justify-items:center;grid-template-columns:1fr}

/* feature strip under the hero */
.fstrip{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden}
.fstrip>div{display:flex;align-items:center;gap:12px;padding:20px 18px;border-top:1px solid var(--line);border-inline-start:1px solid var(--line)}
.fstrip>div:nth-child(-n+2){border-top:0}
.fstrip>div:nth-child(odd){border-inline-start:0}
.fstrip b{font-weight:600;font-size:15px;line-height:24px}
.fstrip .ic,.feat-card .ic,.cmp-h .ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--orange) 15%,transparent);color:var(--orange)}
.fstrip .ic svg,.feat-card .ic svg,.cmp-h .ic svg{width:22px;height:22px}
@media (min-width:980px){.fstrip{grid-template-columns:repeat(4,1fr)}.fstrip>div{border-top:0!important;border-inline-start:1px solid var(--line)!important;padding:26px 24px}.fstrip>div:first-child{border-inline-start:0!important}.fstrip b{font-size:16px}}

/* problem / solution */
.compare{display:grid;gap:18px;margin-top:48px}
@media (min-width:980px){.compare{grid-template-columns:1fr 1fr;gap:24px}}
.cmp{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px 24px 10px}
.cmp-h{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.cmp-h h3{font-weight:700;font-size:22px;line-height:32px}
.cmp ul{list-style:none;margin:0;padding:0}
.cmp li{display:grid;gap:6px;padding:18px 0;border-top:1px solid var(--line)}
.cmp .was,.cmp .now{display:flex;gap:10px;align-items:flex-start}
.cmp .was{color:var(--ink-muted);font-size:15px;line-height:26px}
.cmp .was span{text-decoration:line-through;text-decoration-color:rgba(255,92,122,.55)}
.cmp .now{font-weight:600;font-size:17px;line-height:28px}
.cmp svg{flex:none;width:20px;height:20px;margin-top:4px}
.cmp .was svg{color:var(--rec)}.cmp .now svg{color:var(--orange)}

/* timeline steps (brand motif: an editing timeline) */
.tline{list-style:none;margin:48px 0 0;padding:0;display:grid;gap:0}
.tline li{position:relative;padding:0 0 30px;padding-inline-start:68px}
.tline li::before{content:"";position:absolute;inset-inline-start:23px;top:50px;bottom:4px;width:2px;background:repeating-linear-gradient(180deg,var(--line-strong) 0 2px,transparent 2px 9px)}
.tline li:last-child::before{display:none}
.tline .node{position:absolute;inset-inline-start:0;top:0;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:2px solid var(--orange);color:var(--orange);font-weight:800;font-size:18px}
.tline h3{font-weight:700;font-size:20px;line-height:30px;padding-top:8px}
.tline p{margin:4px 0 0;color:var(--ink-muted);font-size:16px;line-height:27px}
@media (min-width:980px){
  .tline{grid-template-columns:repeat(var(--n),1fr);gap:20px;position:relative}
  .tline::before{content:"";position:absolute;inset-inline:24px;top:23px;height:2px;background:repeating-linear-gradient(90deg,var(--line-strong) 0 2px,transparent 2px 10px)}
  .tline li{padding:70px 0 0}
  .tline li::before{display:none}
  .tline .node{top:0;inset-inline-start:0}
  .tline li:first-child .node{background:var(--orange);color:var(--on-orange)}
}

/* feature cards */
.fgrid{display:grid;gap:14px;margin-top:48px}
@media (min-width:700px){.fgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1050px){.fgrid.c3{grid-template-columns:repeat(3,1fr)}.fgrid.c4{grid-template-columns:repeat(4,1fr)}}
.feat-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px 24px;transition:border-color .2s,transform .2s}
.feat-card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.feat-card .ic{margin-bottom:20px}
.feat-card h3{font-weight:700;font-size:20px;line-height:30px}
.feat-card p{color:var(--ink-muted);margin:8px 0 0;font-size:16px;line-height:28px}
@media (prefers-reduced-motion:reduce){.feat-card{transition:none}.feat-card:hover{transform:none}}

/* works + reel */
.works4{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:48px}
@media (min-width:1000px){.works4{grid-template-columns:repeat(4,1fr);gap:16px}}
.works4 .work,.list-grid .work,.feat .work{border-radius:16px;transition:transform .25s}
.works4 .work:hover{transform:translateY(-4px)}
.reel-split{display:grid;gap:32px;align-items:center}
@media (min-width:980px){.reel-split{grid-template-columns:1.35fr 1fr;gap:64px}}
.reel-split .reel{margin:0}

/* FAQ */
.faq-wrap .faq{margin-top:32px;max-width:860px}

/* closing cards */

.btn.dark{background:#070707;color:#fff}
.btn.dark:hover{background:#1E1916}
.btn.ghost-w{border-color:rgba(255,255,255,.6);color:#fff}

/* footer */
.foot-in{padding-top:64px}

/* ---------- more imagery ---------- */
/* timeline icons */
.tline .node svg{width:22px;height:22px}
.tline .tnum{position:absolute;inset-inline-start:56px;top:12px;font-weight:700;font-size:13px;color:var(--ink-muted)}
.tline h3{padding-top:0}
.tline li{padding-top:0}
@media (max-width:979px){.tline .tnum{display:none}.tline h3{padding-top:8px}}
@media (min-width:980px){.tline li{padding-top:70px}.tline .tnum{inset-inline-start:58px;top:14px}}

/* showcase tab icons */

/* moving strip of work under the hero */
.ribbon-sec{padding-top:72px;overflow:hidden}
@media (min-width:980px){.ribbon-sec{padding-top:80px}}
.ribbon{direction:ltr;overflow:hidden;margin-top:32px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ribbon-track{display:flex;gap:12px;width:max-content;animation:rib 60s linear infinite;direction:ltr}
.ribbon:hover .ribbon-track{animation-play-state:paused}
@keyframes rib{from{transform:translateX(0)}to{transform:translateX(-33.333%)}}
@media (prefers-reduced-motion:reduce){.ribbon-track{animation:none}}
.rib{position:relative;flex:none;width:150px;aspect-ratio:9/16;border:0;padding:0;border-radius:14px;overflow:hidden;background:var(--surface)}
@media (min-width:980px){.rib{width:190px}}
.rib img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.rib:hover img{transform:scale(1.05)}
.rib span{position:absolute;bottom:8px;inset-inline-start:8px;font-size:12px;line-height:20px;padding:0 8px;border-radius:4px;background:rgba(7,7,7,.72);color:var(--ink)}

/* service cards with a photo behind */
.svc{display:grid;gap:14px;margin-top:48px}
@media (min-width:700px){.svc{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.svc{grid-template-columns:repeat(4,1fr)}}
.svc-card{position:relative;min-height:320px;border-radius:20px;overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end;padding:22px}
.svc-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.svc-card:hover img{transform:scale(1.05)}
.svc-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,7,7,.15) 0%,rgba(7,7,7,.55) 45%,rgba(7,7,7,.95) 100%)}
.svc-card .ic{position:absolute;top:18px;inset-inline-start:18px;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--orange);color:var(--on-orange)}
.svc-card .ic svg{width:22px;height:22px}
.svc-t{position:relative}
.svc-t h3{font-weight:700;font-size:21px;line-height:31px}
.svc-t p{margin:6px 0 0;font-size:15px;line-height:26px;color:rgba(245,242,239,.82)}

/* three promises with illustrations */
.promise{display:grid;gap:16px}
@media (min-width:900px){.promise{grid-template-columns:repeat(3,1fr);gap:20px}}
.pr{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px 24px 26px}
.pr-art{display:grid;place-items:center;height:170px;border-radius:14px;background:radial-gradient(70% 70% at 50% 45%,rgba(228,103,13,.16),transparent 70%);margin-bottom:18px}
.pr-art svg{width:150px;height:150px}
.pr h3{font-weight:700;font-size:21px;line-height:31px}
.pr p{margin:6px 0 0;color:var(--ink-muted);font-size:16px;line-height:28px}

/* illustrations on the closing cards */

/* homepage hero: background video or photos */
.vhero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:#070707;z-index:1}
.vh-media{position:absolute;inset:0}
.vh-media video,.vh-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vh-img{opacity:0;transition:opacity 1.4s ease;transform:scale(1.06)}
.vh-img.on{opacity:1;animation:vhzoom 7s ease-out forwards}
@keyframes vhzoom{from{transform:scale(1.06)}to{transform:scale(1)}}
.vh-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,7,7,.55) 0%,rgba(7,7,7,.2) 35%,rgba(7,7,7,.75) 75%,#070707 100%)}
.vh-in{position:relative;z-index:2;padding-top:140px;padding-bottom:14vh;max-width:1200px}
.vh-kick{display:inline-block;direction:ltr;font-weight:700;font-size:14px;letter-spacing:.06em;color:#F5A04A;margin-bottom:10px}
.vh-in h1{font-weight:800;font-size:clamp(36px,6.2vw,76px);line-height:1.2;max-width:15em;margin:0;color:#fff}
.vh-in p{font-size:clamp(16px,1.6vw,20px);line-height:1.75;color:rgba(245,242,239,.86);max-width:36em;margin:16px 0 26px}
.vh-down{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:2;font-size:13px;color:rgba(245,242,239,.7);transition:opacity .3s}
@media (prefers-reduced-motion:reduce){.vh-img,.vh-img.on{transition:none;animation:none;transform:none}}

/* sales assistant chat */
.tpc{position:fixed;inset-inline-end:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;font-family:var(--font-body)}
.tpc[hidden]{display:none}
.tpc-fab{width:56px;height:56px;border-radius:50%;border:1px solid rgba(245,242,239,.18);background:var(--brown);color:#fff;display:grid;place-items:center;box-shadow:0 8px 28px rgba(0,0,0,.5)}
.tpc-fab svg{width:26px;height:26px}
.tpc.open .tpc-fab{display:none}
.tpc-panel{position:fixed;inset-inline-end:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:min(380px,calc(100vw - 32px));height:min(560px,calc(100dvh - 96px));display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 18px 60px rgba(0,0,0,.6);overflow:hidden}
.tpc-panel[hidden]{display:none}
.tpc-panel header{position:relative;padding:14px 16px;background:linear-gradient(180deg,var(--brown),#301909);border-bottom:1px solid var(--line)}
.tpc-panel header b{display:block;font-size:16px;line-height:24px}
.tpc-panel header span{display:block;font-size:13px;line-height:20px;color:rgba(245,242,239,.75)}
.tpc-x{position:absolute;top:10px;inset-inline-end:10px;width:36px;height:36px;border:0;border-radius:8px;background:rgba(0,0,0,.25);color:#fff;font-size:22px;line-height:1}
.tpc-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
.tpc-m{margin:0;max-width:86%;padding:9px 12px;border-radius:14px;font-size:15px;line-height:25px;white-space:normal;word-wrap:break-word}
.tpc-m.bot{align-self:flex-start;background:var(--surface-2);border-start-start-radius:4px}
.tpc-m.me{align-self:flex-end;background:#2A1A0E;border:1px solid #4A2A12;border-start-end-radius:4px}
.tpc-m.typing{display:flex;gap:5px;padding:14px}
.tpc-m.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-muted);animation:tpcdot 1s infinite}
.tpc-m.typing i:nth-child(2){animation-delay:.15s}.tpc-m.typing i:nth-child(3){animation-delay:.3s}
@keyframes tpcdot{0%,80%,100%{opacity:.3}40%{opacity:1}}
.tpc-done{margin:4px 0 0;font-size:14px;line-height:22px;color:#5CC08A;text-align:center}
.tpc-form{display:flex;gap:8px;align-items:flex-end;padding:10px;border-top:1px solid var(--line)}
.tpc-form textarea{flex:1;resize:none;min-height:44px;max-height:120px;padding:10px 12px;border-radius:12px;border:1px solid var(--line-strong);background:var(--bg);color:var(--ink);font:inherit;font-size:16px;line-height:24px}
.tpc-form button{flex:none;width:44px;height:44px;border-radius:12px;border:0;background:var(--orange);color:var(--on-orange);display:grid;place-items:center}
.tpc-form button:disabled{opacity:.5}
.tpc-form button svg{width:20px;height:20px}
.tpc-note{margin:0;padding:0 12px 10px;font-size:11px;line-height:16px;color:var(--ink-muted);text-align:center}
@media (prefers-reduced-motion:reduce){.tpc-m.typing i{animation:none}}

/* homepage services: each card plays parts of our real work on top, text below */
.svx{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1000px){.svx{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.svx-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s}
@media (hover:hover){.svx-card:hover{transform:translateY(-6px);border-color:#9B480C}}
.svx-media{position:relative;aspect-ratio:4/5;max-width:100%;overflow:hidden;background:#1c1512}
.svx-clip{cursor:pointer}
.svx-clip::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(7,7,7,0) 55%,rgba(7,7,7,.85));pointer-events:none}
.svx-clip:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.svx-pic,.svx-pic img{position:absolute;inset:0;width:100%;height:100%}
.svx-pic img{object-fit:cover;display:block}
.svx-pic .svx-blur{filter:blur(16px) brightness(.45);transform:scale(1.3)}
.svx-pic .svx-fit{object-fit:contain}
.svx-cover{animation:svxKb 7s linear both}
/* the player sits over the still and fades in once it plays; tall clips fill the card, wide ones sit in the middle */
.svx-frame{position:absolute;z-index:1;border:0;pointer-events:none;opacity:0;transition:opacity .45s ease;left:0;width:100%;top:50%;height:auto;aspect-ratio:9/16;transform:translateY(-50%)}
.svx-frame.wide{left:-10%;width:120%;height:auto;aspect-ratio:16/9}
.svx-frame.on{opacity:1}
.svx-play{position:absolute;z-index:3;top:10px;left:10px;width:32px;height:32px;border-radius:50%;background:rgba(7,7,7,.6);border:1px solid rgba(247,237,226,.4);display:grid;place-items:center;color:#F7EDE2}
.svx-play svg{width:13px;height:13px}
.svx-lbl{position:absolute;z-index:3;inset-inline:12px;bottom:18px;font-size:13px;font-weight:700;color:#F7EDE2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svx-bar{position:absolute;z-index:3;inset-inline:12px;bottom:9px;height:3px;border-radius:2px;background:rgba(255,255,255,.2);overflow:hidden}
.svx-bar b{display:block;height:100%;background:var(--orange);transform:scaleX(0);transform-origin:right}
.svx-bar b.go{animation:svxBar 7s linear both}
.svx-ab{display:grid;grid-template-rows:1fr 1fr;gap:8px;padding:10px}
.svx-ab div{position:relative;border-radius:10px;overflow:hidden;border:2px solid transparent;opacity:.45;transition:opacity .4s,border-color .4s}
.svx-ab img{width:100%;height:100%;object-fit:cover;display:block}
.svx-ab b{position:absolute;top:6px;right:6px;font-size:12px;background:rgba(7,7,7,.7);color:#F7EDE2;border-radius:4px;padding:0 6px}
.svx-ab i{position:absolute;top:6px;left:6px;width:22px;height:22px;border-radius:50%;background:var(--orange);color:#070707;display:grid;place-items:center;opacity:0;transform:scale(.4);transition:opacity .3s,transform .3s}
.svx-ab i svg{width:14px;height:14px}
.svx-ab .win{border-color:var(--orange);opacity:1}.svx-ab .win i{opacity:1;transform:scale(1)}
.svx-in{padding:14px 14px 18px}
@media (min-width:1000px){.svx-in{padding:18px 18px 22px}}
.svx-ratio{display:inline-block;font-size:12px;color:#F5A04A;direction:ltr;margin-bottom:2px}
.svx-card h3{font-weight:700;font-size:16px;line-height:26px}
@media (min-width:1000px){.svx-card h3{font-size:18px;line-height:28px}}
.svx-card p{margin:4px 0 0;font-size:14px;line-height:24px;color:var(--ink-muted)}
@keyframes svxKb{from{transform:scale(1.02)}to{transform:scale(1.12)}}
@keyframes svxBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.svx-cover,.svx-bar b.go{animation:none}.svx-card{transition:none}}
/* why TrimPix: a messy chat beside the calm portal, then four points in one panel */
.wy{display:grid;gap:12px}
@media (min-width:820px){.wy{grid-template-columns:1fr 1fr;gap:16px}}
.wy-pane{border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:9px;min-width:0;min-height:300px}
.wy-hd{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;margin-bottom:4px}
.wy-hd i{width:9px;height:9px;border-radius:50%}
.wy-chat{background:#0f1a14;border:1px solid #1d3326}
.wy-chat .wy-hd{color:var(--ink-muted)}
.wy-chat .wy-hd i{background:#e0626b}
.wy-bub{max-width:85%;margin:0;font-size:14px;line-height:1.6;padding:8px 12px;border-radius:12px;transition:opacity .4s,transform .4s}
.wy.anim .wy-bub{opacity:0;transform:translateY(8px)}
.wy.anim .wy-bub.in{opacity:1;transform:none}
.wy-bub.me{align-self:flex-start;background:#1f3b2b;border-start-start-radius:3px}
.wy-bub.them{align-self:flex-end;background:#26302a;color:var(--ink-muted);border-start-end-radius:3px}
.wy-bub small{display:block;font-size:10px;color:#7d8f84;direction:ltr;text-align:end}
.wy-portal{background:var(--surface);border:1px solid var(--line)}
.wy-portal .wy-hd i{background:#4bbf7a}
.wy-v{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#1c1512;border-radius:12px;padding:12px 14px}
.wy-v b{display:block;font-size:14px}
.wy-v small{display:block;font-size:12px;color:var(--ink-muted)}
.wy-pill{flex:none;font-size:12px;font-weight:700;border-radius:999px;padding:3px 11px;white-space:nowrap;transition:background .4s,color .4s}
.wy-pill.s-work{background:#2a1a0e;color:#F5A04A}
.wy-pill.s-review{background:#2a2410;color:#e9c46a}
.wy-pill.s-wait{background:var(--orange);color:#070707}
.wy-pill.s-ok{background:#12251a;color:#8fd9ad}
.wy-btns{display:flex;gap:8px;margin-top:2px}
.wy-btns span{font-size:13px;font-weight:700;border-radius:9px;padding:7px 14px;border:1px solid var(--line);transition:opacity .4s}
.wy-btns .p{background:#562A09;border-color:#7a3d10}
.wy-btns.done span{opacity:.25}
.wy-pts{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:14px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
@media (min-width:820px){.wy-pts{grid-template-columns:repeat(4,1fr)}}
.wy-pt{background:var(--surface);padding:18px 16px 20px;display:flex;flex-direction:column;gap:10px;transition:background .5s}
.wy-pt .ic{width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--orange) 15%,transparent);color:var(--orange);display:flex;align-items:center;justify-content:center;flex:none;transition:background .5s,color .5s}
.wy-pt .ic svg{width:24px;height:24px;display:block}
.wy-pt h3{font-weight:700;font-size:15px;line-height:24px}
.wy-pt p{margin:2px 0 0;font-size:13px;line-height:22px;color:var(--ink-muted)}
.wy-pt.on{background:#1b120b}
.wy-pt.on .ic{background:var(--orange);color:#070707}
@media (prefers-reduced-motion:reduce){.wy-bub,.wy-pill,.wy-pt,.wy-pt .ic{transition:none}}

/* how it works: six small step cards with live scenes, a progress track above them */
.hw-track{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:12px}
.hw-track span{height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.hw-track em{display:block;height:100%;width:0;background:var(--orange);border-radius:2px}
.hw-track .done em{width:100%}
.hw-track .cur em{animation:hwSeg 1.8s linear forwards}
.hw-cards{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:860px){.hw-cards{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}}
.hw-c{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;min-width:0;transition:border-color .4s,transform .4s,opacity .4s}
.hw.anim .hw-c{opacity:.62}
.hw.anim .hw-c.done{opacity:.85}
.hw.anim .hw-c.on{opacity:1;border-color:var(--orange);transform:translateY(-3px)}
.hw-scene{position:relative;height:72px;background:#1c1512;display:flex;align-items:center;justify-content:center;gap:6px;overflow:hidden}
@media (min-width:860px){.hw-scene{height:84px}}
.hw-k{position:absolute;top:6px;right:7px;font-size:10px;font-weight:800;color:#5a4a3e;transition:color .4s}
.hw-c.on .hw-k{color:#F5A04A}
.hw-in{padding:9px 10px 11px}
.hw-in h3{font-size:13px;font-weight:700;line-height:20px}
.hw-in p{margin:2px 0 0;font-size:11.5px;line-height:18px;color:var(--ink-muted)}
@media (min-width:860px){.hw-in{padding:10px 12px 13px}.hw-in h3{font-size:14px;line-height:22px}.hw-in p{font-size:12px;line-height:19px}}
/* 1 upload */
.hw-up{width:74%;display:grid;gap:6px}
.hw-file{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:10px;color:var(--ink-muted);direction:ltr}
.hw-file i{width:14px;height:17px;border:1.5px solid #9B480C;border-radius:3px;flex:none;display:flex;align-items:center;justify-content:center;transition:background .25s,border-color .25s}
.hw-file i svg{width:9px;height:9px;display:block}
.hw-file b{color:#F5A04A;font-weight:700;min-width:26px;text-align:right}
.hw-up.done .hw-file i{border-color:#4bbf7a;background:#2e6b48;color:#8fd9ad}
.hw-up.done .hw-file b{color:#8fd9ad}
.hw-bar{height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.hw-bar em{display:block;height:100%;width:0;background:var(--orange)}
.hw-up.done .hw-bar em{background:#4bbf7a}
/* 2 assign */
.hw-av{width:30px;height:30px;border-radius:50%;background:#9B480C;color:#F7EDE2;display:flex;align-items:center;justify-content:center;border:2px solid transparent;animation:hwPick 3.6s infinite}
.hw-av svg{width:17px;height:17px;display:block}
.hw-av:nth-child(3){background:#562A09;animation-delay:1.2s}.hw-av:nth-child(4){background:#301909;animation-delay:2.4s}
/* 3 delivery */
.hw-reel{position:relative;height:56px;aspect-ratio:9/16;border:1.5px solid var(--orange);border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--orange)}
.hw-reel>svg{width:11px;height:11px}
.hw-pb{position:absolute;left:3px;right:3px;bottom:3px;height:2px;background:var(--line);overflow:hidden}
.hw-pb em{display:block;height:100%;background:var(--orange);animation:hwGrow 3s linear infinite}
.hw-v1{font-size:10px;font-weight:800;background:var(--orange);color:#070707;border-radius:4px;padding:0 5px;direction:ltr;align-self:flex-start;margin-top:14px}
/* 4 checklist */
.hw-ql{display:grid;gap:4px;font-size:10.5px}
.hw-ql span{display:grid;grid-template-columns:14px auto;align-items:center;gap:6px;color:var(--ink-muted);line-height:14px}
.hw-ql i{width:14px;height:14px;border-radius:4px;border:1.5px solid #5a4a3e;display:flex;align-items:center;justify-content:center;color:transparent;animation:hwTick 3.6s infinite}
.hw-ql i svg{width:9px;height:9px;display:block}
.hw-ql span:nth-child(2) i{animation-delay:.6s}.hw-ql span:nth-child(3) i{animation-delay:1.2s}
/* 5 approve */
.hw-ap{display:flex;gap:4px}
.hw-ap span{font-size:10.5px;font-weight:700;border-radius:6px;padding:4px 8px;border:1px solid var(--line);white-space:nowrap}
.hw-ap .p{background:var(--orange);color:#070707;border-color:var(--orange);animation:hwPress 3s infinite}
.hw-ok{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:5px;font-size:12px;font-weight:800;color:#8fd9ad;background:#1c1512;opacity:0;animation:hwOk 3s infinite}
.hw-ok svg{width:12px;height:12px}
/* 6 sizes */
.hw-sz{display:flex;align-items:center;justify-content:center;border:1.5px solid #9B480C;border-radius:5px;font-size:8.5px;color:#F5A04A;direction:ltr;opacity:0;animation:hwPop 3.6s infinite}
.hw-sz.a{height:50px;aspect-ratio:9/16}.hw-sz.b{height:36px;aspect-ratio:1;animation-delay:.4s}.hw-sz.c{width:50px;aspect-ratio:16/9;animation-delay:.8s}
@keyframes hwSeg{from{width:0}to{width:100%}}
@keyframes hwGrow{0%{width:0}80%,100%{width:100%}}
@keyframes hwPick{0%,30%{border-color:var(--orange);transform:scale(1.15)}34%,100%{border-color:transparent;transform:none}}
@keyframes hwTick{0%,15%{color:transparent;border-color:#5a4a3e;background:transparent}25%,90%{color:#070707;border-color:var(--orange);background:var(--orange)}100%{color:transparent}}
@keyframes hwPress{0%,40%{transform:none}45%{transform:scale(.9)}50%,100%{transform:none}}
@keyframes hwOk{0%,48%{opacity:0}55%,92%{opacity:1}100%{opacity:0}}
@keyframes hwPop{0%,10%{opacity:0;transform:scale(.7)}20%,85%{opacity:1;transform:none}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hw *{animation:none!important;transition:none!important}.hw-sz,.hw-ok{opacity:1}.hw-ql i{color:#070707;background:var(--orange);border-color:var(--orange)}}
@media (max-width:699px){.psec{padding-top:72px}}

/* ===== homepage v2: brand gradient hero, real work in phones, timeline ruler ===== */
.hero2{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
  background:linear-gradient(180deg,#E4670D 0,#9B480C 120px,#562A09 250px,#301909 360px,#070707 470px)}
@media (min-width:980px){.hero2{background:linear-gradient(180deg,#E4670D 0,#9B480C 22vh,#562A09 42vh,#301909 58vh,#070707 78vh)}}
.hero2>.wrap{width:100%}
/* faint pixel dots, from the two dots of the logo */
.hero2::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1.2px,transparent 1.3px);background-size:22px 22px;mask-image:linear-gradient(180deg,#000 0%,transparent 70%);-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 70%);pointer-events:none}
.h2-in{position:relative;display:grid;gap:34px;padding-top:112px;padding-bottom:20px;align-items:center;flex:1}
@media (min-width:980px){.h2-in{grid-template-columns:1.1fr .9fr;gap:48px;padding-top:120px}}
.h2-kick{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:14px;letter-spacing:.06em;color:#fff;margin-bottom:14px}
.dots{display:inline-flex;gap:5px;flex:none}
.dots i{width:9px;height:9px;border-radius:50%;background:#fff}
.dots i+i{background:#F5A04A}
.h2-text h1{font-weight:800;font-size:clamp(44px,9.5vw,92px);line-height:1.12;letter-spacing:-.01em;margin:0;color:#fff}
.h2-text p{font-size:clamp(16px,1.5vw,19px);line-height:1.8;color:rgba(255,255,255,.86);max-width:32em;margin:18px 0 28px}
/* three phones with real work */
.hstack{position:relative;height:330px;width:100%;max-width:440px;margin-inline:auto}
@media (min-width:980px){.hstack{height:560px;max-width:none}}
.hc{position:absolute;top:50%;left:50%;padding:0;border:1px solid rgba(255,255,255,.22);border-radius:22px;overflow:hidden;background:#141110;aspect-ratio:9/16;cursor:pointer;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.hc img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .28s}
.hc.swap img{opacity:0}
.hc.mid{width:178px;z-index:3;transform:translate(-50%,-50%);animation:hcfloat 7s ease-in-out infinite}
.hc.side{width:138px;z-index:2;opacity:.82}
.hc.s1{transform:translate(calc(-50% + 118px),-46%) rotate(7deg)}
.hc.s2{transform:translate(calc(-50% - 118px),-46%) rotate(-7deg)}
@media (min-width:980px){.hc.mid{width:286px}.hc.side{width:214px}.hc.s1{transform:translate(calc(-50% + 190px),-45%) rotate(7deg)}.hc.s2{transform:translate(calc(-50% - 190px),-45%) rotate(-7deg)}}
.hc:hover{border-color:rgba(255,255,255,.5)}
.hc-cat{position:absolute;bottom:10px;inset-inline-start:10px;font-size:12px;line-height:20px;padding:0 8px;border-radius:4px;background:rgba(7,7,7,.72);color:#fff}
.hc-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:rgba(7,7,7,.55);border:1px solid rgba(255,255,255,.4);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hc-play svg{width:22px;height:22px;margin-inline-start:3px}
@keyframes hcfloat{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 8px))}}
/* editing timeline ruler with a moving playhead */
.hruler{position:relative;direction:ltr;height:62px;margin:6px 0 22px}
.hr-clips{position:absolute;inset:0 0 auto;height:22px}
.hr-clips i{position:absolute;top:0;left:var(--x);width:var(--w);height:100%;border-radius:4px;background:#562A09;border:1px solid rgba(255,255,255,.08)}
.hr-clips i:nth-child(2n){background:rgba(245,160,74,.35)}
.hr-clips i:nth-child(3){background:#9B480C}
.hr-ticks{position:absolute;left:0;right:0;top:34px;height:10px;border-bottom:1px solid rgba(255,255,255,.2);background:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 1px,transparent 1px 12px) bottom/100% 6px no-repeat}
.hr-ticks::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 1px,transparent 1px 60px)}
.hr-head{position:absolute;top:-8px;bottom:0;left:0;width:2px;background:#fff;animation:hrmove 14s linear infinite}
.hr-head b{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-weight:700;font-size:11px;line-height:18px;padding:0 6px;border-radius:4px;background:#fff;color:#070707;white-space:nowrap;font-variant-numeric:tabular-nums}
@keyframes hrmove{from{left:0}to{left:calc(100% - 2px)}}
@media (prefers-reduced-motion:reduce){.hc.mid,.hr-head{animation:none}.hr-head{left:38%}}
@media (max-width:979px){.h2-text{text-align:start}.hruler{margin-top:0}}
/* section labels: the logo's two dots, a chapter number, a name */
.eb{display:inline-flex;align-items:center;gap:10px;margin-bottom:12px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--ink-muted)}
.eb .dots i{width:8px;height:8px;background:var(--orange)}
.eb .dots i+i{background:#F5A04A}
.eb .en{color:var(--ink)}
/* gentle entrance as sections come into view */
.rv-on .psec .wrap>*,.rv-on .psec .ribbon{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rv-on .psec .wrap>*:nth-child(2){transition-delay:.08s}
.rv-on .psec.in .wrap>*,.rv-on .psec.in .ribbon{opacity:1;transform:none}
/* header: the button is outlined over the hero, orange once the bar turns solid (one orange button per screen) */
@media (min-width:980px){.top:not(.solid) .cta.btn.primary{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}}

/* ===== one spacing system for every section =====
   --sec: space above each section · --head: section title to its content · --end: space under the last section */
:root{--sec:80px;--head:32px;--end:88px}
@media (min-width:980px){:root{--sec:120px;--head:48px;--end:120px}}
.psec,.ribbon-sec,.sec{padding-top:var(--sec)}
.band{margin-top:var(--sec)}
.psec.last{padding-bottom:var(--end)}
.psec .wrap>.sh+*,.sec .wrap>.sh+*,.faq-wrap .faq,.ribbon-sec .ribbon{margin-top:var(--head)}
/* section title block: label, title and intro sit close together */
.eb{margin-bottom:10px}
.sh{gap:12px}
/* hero: even space between the buttons, the phones and the timeline, and no extra gap under it */
.h2-in{gap:32px;padding-bottom:32px}
.hruler{margin:0}
.hero2{padding-bottom:0}
@media (min-width:980px){.h2-in{gap:48px;padding-bottom:48px}}
/* closing cards: the illustration sits above the title in the flow, so it never covers the text */
/* how-it-works: each step's number sits above its own title, off the dotted line */
.tline .tnum{position:static;display:block;direction:rtl;text-align:start;margin:0 0 2px;font-weight:700;font-size:12px;line-height:20px;letter-spacing:.08em;color:#F5A04A}
@media (max-width:979px){.tline .tnum{display:block}.tline h3{padding-top:0}.tline li{padding-top:2px}}
@media (min-width:980px){.tline li{padding-top:66px}}
/* wide (16:9) videos: in the strip they keep the same height and run longer, like a longer clip on a timeline */
.rib{width:auto;height:220px;aspect-ratio:9/16}
.rib.wide{aspect-ratio:16/9}
@media (min-width:980px){.rib{height:338px}}
/* works page: a separate 16:9 grid for wide videos */
.list-h{font-weight:700;font-size:20px;line-height:30px;margin:40px 0 0}
.list-grid.wide-grid{grid-template-columns:1fr;margin-top:16px}
@media (min-width:700px){.list-grid.wide-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1050px){.list-grid.wide-grid{grid-template-columns:repeat(3,1fr)}}
.wide-grid .work{aspect-ratio:16/9}

/* ===== works page v2 ===== */
/* readable title and controls over the 3D ring */
.ring-stage::before,.ring-stage::after{content:"";position:absolute;inset-inline:0;z-index:0;pointer-events:none}
.ring-stage::before{top:0;height:46%;background:linear-gradient(180deg,rgba(7,7,7,.92) 0%,rgba(7,7,7,.6) 55%,rgba(7,7,7,0) 100%)}
.ring-stage::after{bottom:0;height:42%;background:linear-gradient(0deg,rgba(7,7,7,.95) 0%,rgba(7,7,7,.6) 55%,rgba(7,7,7,0) 100%)}
.ring-top,.ring-ui{z-index:1}
.ring-top .eb{margin-bottom:6px}
.ring-top .eb .en:empty{display:none}
.ring-sub{margin:6px 0 0;font-size:15px;line-height:24px;color:var(--ink-muted);max-width:30em}
.now .count{font-weight:700;font-size:15px;letter-spacing:.06em;color:var(--ink-muted)}
/* the ruler: one clip per work, wide clips for wide videos; the current one is lit */
.wruler{display:flex;gap:4px;direction:ltr;align-items:flex-end;height:18px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.18);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,transparent 1px 10px) bottom/100% 5px no-repeat}
.wr-clip{flex:1 1 0;min-width:0;height:10px;padding:0;border:0;border-radius:3px;background:rgba(255,255,255,.18);cursor:pointer;transition:background .2s,height .2s}
.wr-clip.wide{flex-grow:2}
.wr-clip.past{background:#562A09}
.wr-clip.on{background:#fff;height:14px}
.wr-clip:hover{background:rgba(255,255,255,.5)}
/* work cards: a play badge, and a lift on hover */
.wplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);z-index:2;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgba(7,7,7,.55);border:1px solid rgba(255,255,255,.4);color:#fff;opacity:0;transition:opacity .2s,transform .2s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.wplay svg{width:20px;height:20px;margin-inline-start:3px}
.work{border:1px solid var(--line);transition:transform .25s,border-color .25s}
.work:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.35)}
.work:hover .wplay,.work:focus-visible .wplay{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (hover:none){.wplay{opacity:1;top:12px;left:auto;inset-inline-end:12px;width:34px;height:34px;transform:none}.wplay svg{width:14px;height:14px}}
.work .ttl{font-size:15px;line-height:23px}
/* one section per kind of work */
.wsec .list-grid{margin-top:var(--head)}
.wsec .list-grid+.list-grid{margin-top:12px}
.wsec.hidden{display:none}

/* ===== works page v3: no 3D ===== */
.whero{position:relative;z-index:1;padding:128px 0 28px;background:linear-gradient(180deg,#E4670D 0,#9B480C 90px,#562A09 190px,#301909 280px,#070707 380px)}
@media (min-width:980px){.whero{padding:168px 0 40px;background:linear-gradient(180deg,#E4670D 0,#9B480C 120px,#562A09 250px,#301909 360px,#070707 480px)}}
.whero .eb{color:rgba(255,255,255,.85)}
.whero .eb .dots i{background:#fff}.whero .eb .dots i+i{background:#F5A04A}
.whero .eb .en:empty{display:none}
.whero h1{font-weight:800;font-size:clamp(44px,9vw,88px);line-height:1.12;color:#fff;margin:0}
.whero p{margin:14px 0 0;max-width:34em;font-size:17px;line-height:30px;color:var(--ink-muted)}
/* filter bar: stays under the header while scrolling */
.wbar{position:sticky;top:calc(72px + env(safe-area-inset-top,0px));z-index:5;background:rgba(7,7,7,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.wbar .chips{margin:0;padding:12px 0}
.wbar .chip .en{margin-inline-start:4px;opacity:.6;font-size:13px}
.wsec{position:relative;z-index:1;background:var(--bg)}
.wsec:first-of-type,.wbar+.wsec{padding-top:48px}
/* the first work in a big group is shown larger */
@media (min-width:1050px){
  .list-grid.bento .work:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;height:100%}
  .list-grid.bento .work:first-child .ttl{font-size:22px;line-height:32px}
  .list-grid.bento .work:first-child .wplay{width:72px;height:72px}
}
/* a wide video inside a vertical card: whole in the middle, on a blurred copy of itself */
.work img.wbg{filter:blur(18px) brightness(.45);transform:scale(1.25)}
.work img.wfit{object-fit:contain;object-position:50% 36%}
.work.hidden{display:none}
/* desktop hero: as tall as its content, starting right under the header (no empty band on top) */
@media (min-width:980px){.hero2{min-height:0;justify-content:flex-start}.h2-in{flex:none;padding-top:136px}}

/* ===== fixes: Arabic always reads from the right ===== */
/* labels inside left-to-right strips (works strip, timeline) still read right-to-left */
.rib span,.hc-cat,.hr-head b{direction:rtl}
/* form fields use Cairo like the rest of the page */
input,select,textarea{font-family:inherit}
/* phone and email are typed left to right but line up with the Arabic labels on the right */
.form .ltr-in{text-align:right}
/* request page on phones: the 3D logo sits above the title, not behind it */
@media (max-width:899px){.phero.short{padding-top:204px}}

/* the client portal to try on the page (homepage and brands page): a browser window with a working copy */
.pd{display:grid;gap:12px;max-width:760px;margin-inline:auto;width:100%}
.pd-win{border-radius:16px;border:1px solid #3a2f28;background:#0b0908;overflow:hidden;box-shadow:0 30px 70px -35px rgba(228,103,13,.55)}
.pd-bar{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#1a1411;border-bottom:1px solid var(--line);direction:ltr}
.pd-dots{display:flex;gap:5px}.pd-dots i{width:10px;height:10px;border-radius:50%;background:#3a2f28}
.pd-url{flex:1;max-width:340px;margin:0 auto;height:26px;border-radius:8px;background:#0b0908;color:var(--ink-muted);font-size:12px;display:flex;align-items:center;justify-content:center;gap:6px}
.pd-url svg{width:11px;height:11px}
.pd-body{position:relative;padding:14px;display:grid;gap:12px}
.pd-top{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.pd-lg{font-weight:800;letter-spacing:.06em}
.pd-me{color:var(--ink-muted)}
.pd-cols{display:grid;gap:12px}
@media (min-width:700px){.pd-cols{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}}
.pd-card{background:#1c1512;border-radius:14px;padding:10px;display:grid;gap:9px}
.pd-thumb{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:radial-gradient(70% 70% at 70% 30%,#9B480C,#301909 65%,#070707)}
.pd-pl{width:42px;height:42px;border-radius:50%;background:rgba(7,7,7,.6);display:grid;place-items:center;color:#F7EDE2;transition:opacity .3s}
.pd-pl svg{width:16px;height:16px}
.pd-thumb.playing .pd-pl{opacity:0}
.pd-vbar{position:absolute;left:10px;right:10px;bottom:9px;height:4px;border-radius:2px;background:rgba(255,255,255,.2);overflow:hidden}
.pd-vbar em{display:block;height:100%;width:0;background:var(--orange)}
.pd-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pd-h b{display:block;font-size:15px}
.pd-h small,.pd-row small{display:block;font-size:12px;color:var(--ink-muted)}
.pd-pill{flex:none;font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap;transition:background .35s,color .35s}
.pd-pill.s-wait{background:var(--orange);color:#070707}
.pd-pill.s-review{background:#2a2410;color:#e9c46a}
.pd-pill.s-work,.pd-pill.s-edit{background:#2a1a0e;color:#F5A04A}
.pd-pill.s-ok{background:#12251a;color:#8fd9ad}
.pd-btns{display:flex;gap:8px}
.pd-btns span,.pd-send{font:inherit;font-size:13px;font-weight:700;border-radius:9px;padding:7px 14px;border:1px solid var(--line);background:none;color:var(--ink);cursor:pointer;transition:background .35s,color .35s,border-color .35s}
.pd-btns .p{background:var(--orange);color:#070707;border-color:var(--orange)}
.pd-btns .p.done{background:#12251a;color:#8fd9ad;border-color:#2e6b48;cursor:default}
.pd-btns .p.done~span{opacity:.35}
.pd-form{display:none;gap:6px}
.pd-form.on{display:flex}
.pd-input{flex:1;min-width:0;height:36px;border-radius:9px;border:1px solid var(--orange);background:#0b0908;color:var(--ink);font-size:13px;padding:0 10px;display:flex;align-items:center;white-space:nowrap;overflow:hidden}
.pd-input::after{content:"";width:1.5px;height:16px;background:var(--orange);margin-inline-start:2px;animation:pdCaret 1s steps(1) infinite}
.pd-send{background:var(--orange);color:#070707;border-color:var(--orange)}
.pd-notes{display:grid;gap:6px}
.pd-notes:empty{display:none}
.pd-note{display:flex;gap:8px;align-items:center;font-size:12.5px;background:#100d0c;border-radius:8px;padding:7px 10px;animation:pdIn .4s both}
.pd-note .en{color:#F5A04A;font-weight:700}
.pd-side{display:grid;gap:8px}
.pd-pk{background:#562A09;border-radius:12px;padding:11px 12px}
.pd-pk small{font-size:12px;color:#e8d6c4}
.pd-pbar{display:block;height:6px;border-radius:3px;background:rgba(0,0,0,.4);margin-top:7px;overflow:hidden}
.pd-pbar em{display:block;height:100%;width:58%;background:#F5A04A;transition:width 1s ease}
.pd-row{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#1c1512;border-radius:11px;padding:9px 11px;font-size:13px}
.pd-toast{position:absolute;top:12px;left:12px;z-index:3;display:flex;gap:8px;align-items:center;max-width:calc(100% - 24px);background:rgba(36,29,24,.97);border:1px solid #3a2f28;border-radius:12px;padding:8px 11px;font-size:13px;font-weight:700;transform:translateY(-12px);opacity:0;transition:transform .4s cubic-bezier(.2,.9,.2,1),opacity .4s;pointer-events:none}
.pd-toast.show{transform:none;opacity:1}
.pd-toast i{width:24px;height:24px;border-radius:7px;background:var(--orange);color:#070707;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:12px;flex:none}
.pd-foot{display:flex;justify-content:center}
@keyframes pdIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.pd-cur{position:absolute;z-index:4;top:60%;left:50%;width:22px;height:22px;opacity:0;pointer-events:none;transition:top .7s cubic-bezier(.3,.8,.3,1),left .7s cubic-bezier(.3,.8,.3,1),opacity .3s}
.pd-cur svg{width:22px;height:22px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.pd-cur.on{opacity:1}
.pd-cur::after{content:"";position:absolute;top:-9px;left:-9px;width:24px;height:24px;border-radius:50%;border:2px solid #F5A04A;opacity:0}
.pd-cur.tap::after{animation:pdRing .5s ease-out}
@keyframes pdRing{from{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(1.6)}}
@keyframes pdCaret{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.pd *{animation:none!important;transition:none!important}}

/* editors: one quiet button beside the main call to action (desktop bar), and under it in the phone menu */
.top .cta-ed{margin-inline-end:-12px}
.menu .menu-ed{margin-top:10px}

/* footer contacts as icon buttons, with the email written once under them */
.foot .soc{display:flex;gap:10px}
.foot .soc a{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--ink);padding:0;transition:border-color .2s,color .2s,background .2s}
.foot .soc a:hover{border-color:var(--orange);color:var(--orange)}
.foot .soc svg{width:22px;height:22px;display:block}
.foot .links .mail{font-size:14px;color:var(--ink-muted);margin-top:10px;text-align:right}

/* the moving strip under the hero: a slowly shifting brand gradient, cream text, the two-dot mark between items, sliding right to left.
   The strip itself is left-to-right so the long row starts at the left edge and never leaves a gap; the words inside stay right-to-left. */
.tk{position:relative;z-index:2;overflow:hidden;direction:ltr;color:#F7EDE2;background:linear-gradient(90deg,#301909,#562A09 18%,#9B480C 36%,#E4670D 50%,#9B480C 64%,#562A09 82%,#301909);background-size:200% 100%;animation:tkGlow 14s ease-in-out infinite alternate;border-block:1px solid rgba(245,160,74,.35)}
.tk-track{display:flex;width:max-content;direction:ltr;animation:tkMove var(--tk-dur,40s) linear infinite}
.tk:hover .tk-track{animation-play-state:paused}
.tk-run{display:flex;align-items:center;flex:none}
.tk-item{direction:rtl;white-space:nowrap;font-weight:800;font-size:14px;line-height:20px;padding:7px 0;text-shadow:0 1px 2px rgba(7,7,7,.35)}
.tk-sep{display:inline-flex;gap:4px;margin:0 20px;flex:none}
.tk-sep i{width:6px;height:6px;border-radius:50%;background:#F7EDE2}
.tk-sep i+i{background:#F5A04A}
@media (min-width:900px){.tk-item{font-size:15px;padding:8px 0}.tk-sep{margin:0 28px}}
@keyframes tkMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes tkGlow{from{background-position:0% 0}to{background-position:100% 0}}
@media (prefers-reduced-motion:reduce){.tk,.tk-track{animation:none}}


/* globe: editors in Cairo, clients in the Gulf; the Earth rises from the bottom of the section */
.gsec{padding-bottom:0;overflow:hidden}
.gl-head{text-align:center;max-width:760px;margin:0 auto}
.gl-t{font-weight:800;font-size:clamp(30px,5.4vw,56px);line-height:1.3;text-wrap:balance}
.gl-t span{background:linear-gradient(270deg,#F7EDE2,#F5A04A 45%,#E4670D);-webkit-background-clip:text;background-clip:text;color:transparent}
.gl-head .lead{margin:14px auto 0;max-width:34em}
.gl-wrap{position:relative;margin-top:8px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 72%,transparent);mask-image:linear-gradient(180deg,transparent,#000 14%,#000 72%,transparent)}
.gl-cv{display:block;width:100%;height:clamp(300px,40vw,520px)}

/* works page: wide (YouTube) videos are shown wide, three columns across and as tall as a vertical card,
   so they keep close to 16:9; rows are sized from the column width (container units) so every card lines up */
.wsec .wrap{container-type:inline-size}
.work.wide img.wbg{display:none}
.work.wide img.wfit{object-fit:cover;object-position:center}
@media (max-width:699px){#wgrid .work.wide{grid-column:1/-1;aspect-ratio:16/9}}
@media (min-width:700px){
  #wgrid{grid-auto-flow:dense;grid-auto-rows:calc((100cqw - 30px) / 4 * 16 / 9)}
  #wgrid .work{aspect-ratio:auto;height:100%}
  #wgrid .work.wide{grid-column:span 3}
}
@media (min-width:1050px){#wgrid{grid-auto-rows:calc((100cqw - 50px) / 6 * 16 / 9)}}

/* closing card on the client pages: the brand gradient, an icon tile, the pitch and two buttons (one row on desktop) */
.duo{display:grid;gap:16px}
.duo-card{position:relative;overflow:hidden;border-radius:24px;padding:32px 26px;display:flex;flex-direction:column;gap:22px;background:linear-gradient(155deg,#C95B0C 0%,#7A3A0B 40%,#2A1508 100%);color:#fff}
.duo-card>div{position:relative}
.duo-card h3{font-weight:800;font-size:30px;line-height:42px}
.duo-card p{margin:8px 0 0;font-size:17px;line-height:30px;max-width:30em;color:rgba(255,255,255,.86)}
.duo-ic{flex:none;width:64px;height:64px;border-radius:18px;background:rgba(7,7,7,.28);border:1px solid rgba(247,237,226,.28);color:#F7EDE2;display:flex;align-items:center;justify-content:center}
.duo-ic svg{width:32px;height:32px;display:block}
@media (min-width:900px){
  .duo-card{flex-direction:row;align-items:center;gap:26px;padding:34px 36px}
  .duo-card>div{flex:1}
  .duo-card .ctas{flex:none;margin:0}
  .duo-ic{width:76px;height:76px;border-radius:20px}.duo-ic svg{width:38px;height:38px}
}


/* work titles on the cards: small and short (four words at most, set in content.js) */
.work .ttl{font-size:13px;line-height:19px}
@media (min-width:1050px){.list-grid.bento .work:first-child .ttl{font-size:17px;line-height:25px}}

/* services page: quick links to each service, then one row per service (video beside the explanation, alternating on desktop) */
.sv-jump{position:sticky;top:calc(72px + env(safe-area-inset-top,0px));z-index:5;background:rgba(7,7,7,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.sv-jump .wrap{display:flex;gap:8px;overflow-x:auto;padding-block:12px;scrollbar-width:none}
.sv-jump .wrap::-webkit-scrollbar{display:none}
.sv-jump a{flex:none;text-decoration:none;font-size:14px;font-weight:700;color:var(--ink-muted);border:1px solid var(--line);border-radius:999px;padding:6px 14px;white-space:nowrap}
.sv-jump a:hover{color:var(--ink);border-color:var(--orange)}
.sv-rows{display:grid;gap:56px}
.sv-row{display:grid;gap:22px;scroll-margin-top:140px}
.sv-media{max-width:420px;width:100%;justify-self:center;border-radius:22px;overflow:hidden;border:1px solid var(--line)}
.sv-media .svx-media{aspect-ratio:4/5}
.sv-k{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-muted)}
.sv-k b{color:#F5A04A;font-size:15px}
.sv-k span{border:1px solid var(--line);border-radius:6px;padding:0 8px}
.sv-text h2{margin-top:8px;font-weight:800;font-size:clamp(28px,4vw,40px);line-height:1.3}
.sv-about{margin:10px 0 0;font-size:17px;line-height:30px;color:var(--ink-muted);max-width:34em}
.sv-text h3{margin-top:22px;font-weight:700;font-size:16px;line-height:24px}
.sv-inc{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
@media (min-width:600px){.sv-inc{grid-template-columns:1fr 1fr}}
.sv-inc li{display:flex;gap:8px;align-items:flex-start;font-size:15px;line-height:24px}
.sv-inc svg{flex:none;width:18px;height:18px;margin-top:3px;color:var(--orange)}
.sv-for{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px}
.sv-for span{font-size:14px;color:var(--ink-muted)}
.sv-for i{font-style:normal;font-size:13px;font-weight:700;border-radius:999px;padding:4px 12px;background:var(--surface);border:1px solid var(--line)}
@media (min-width:900px){
  .sv-rows{gap:88px}
  .sv-row{grid-template-columns:minmax(0,380px) minmax(0,1fr);align-items:center;gap:56px}
  .sv-row:nth-child(even) .sv-media{order:2}
}

/* services page: the six steps in detail, down a vertical line (number and icon on the right, then the text and "من جهتك / من جهتنا") */
.sd{list-style:none;margin:40px 0 0;padding:0;position:relative;display:grid;gap:14px}
.sd::before{content:"";position:absolute;top:24px;bottom:24px;inset-inline-start:23px;width:2px;background:linear-gradient(180deg,var(--orange),#562A09)}
.sd-step{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:start}
.sd-n{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}
.sd-n .ic{width:48px;height:48px;border-radius:50%;background:var(--bg);border:2px solid var(--orange);color:var(--orange);display:flex;align-items:center;justify-content:center}
.sd-n .ic svg{width:22px;height:22px;display:block}
.sd-n b{font-size:12px;color:#F5A04A;background:var(--bg);padding:0 4px}
.sd-body{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px 18px 16px}
.sd-body h3{font-weight:800;font-size:19px;line-height:28px}
.sd-body p{margin:6px 0 0;font-size:15px;line-height:27px;color:var(--ink-muted);max-width:52em}
.sd-who{display:grid;gap:8px;margin-top:14px}
@media (min-width:700px){.sd-who{grid-template-columns:1fr 1fr}}
.sd-who div{font-size:14px;line-height:24px;background:#1c1512;border-radius:12px;padding:10px 12px}
.sd-who span{display:block;font-size:12px;font-weight:700;color:#F5A04A;margin-bottom:2px}
@media (min-width:900px){.sd{gap:18px}.sd-step{grid-template-columns:56px minmax(0,1fr);gap:22px}.sd::before{inset-inline-start:27px}.sd-n .ic{width:56px;height:56px}.sd-body{padding:22px 24px 20px}}

/* top bar links in white (they sit on the orange gradient at the top of the pages) */
.nav a,.nav a:hover,.nav a[aria-current="page"]{color:#fff}

/* top bar hover: links get a soft pill and an underline that grows from the middle; the two buttons lift and fill */
.nav a{position:relative;transition:background .2s ease}
.nav a::after{content:"";position:absolute;left:50%;right:50%;bottom:2px;height:2px;border-radius:2px;background:#fff;transition:left .25s ease,right .25s ease}
.nav a:hover,.nav a:focus-visible{background:rgba(255,255,255,.12)}
.nav a:hover::after,.nav a:focus-visible::after{left:12px;right:12px}
.nav a[aria-current="page"]::after{display:none}
.top .cta{transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease}
.top .cta:hover,.top .cta:focus-visible{transform:translateY(-2px);box-shadow:0 8px 22px -8px rgba(7,7,7,.6)}
.top .cta-ed:hover,.top .cta-ed:focus-visible{background:#fff;color:#070707;border-color:#fff}
.top .cta.btn.primary:hover,.top .cta.btn.primary:focus-visible{background:#070707;color:#fff;border-color:#070707}
@media (prefers-reduced-motion:reduce){.nav a::after,.top .cta{transition:none}.top .cta:hover{transform:none}}

/* language switch (i18n.js): shows the other language's name */
.lang-btn{margin-inline-start:auto;height:34px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;font:600 13px/1 Cairo,"Segoe UI",Tahoma,sans-serif;cursor:pointer;transition:background .2s,color .2s}
.lang-btn:hover,.lang-btn:focus-visible{background:#fff;color:#070707}
html[lang="ar"] .lang-btn::after{content:"English"}
html[lang="en"] .lang-btn::after{content:"العربية"}
@media (min-width:980px){.lang-btn{margin-inline-start:0}}
/* English (left to right): small labels that were pinned right to left */
html[dir="ltr"] .tline .tnum,html[dir="ltr"] .rib span,html[dir="ltr"] .hc-cat,html[dir="ltr"] .hr-head b,html[dir="ltr"] .tk-item{direction:ltr}