/* service page */
html{background:var(--green)}
body{background:var(--white)}
.top{color:var(--milk)}
.top.light{color:var(--green)}
.top .btn{background:var(--milk);color:var(--green)}
.top.light .btn{background:var(--black);color:var(--milk)}
.top::before{content:"";position:absolute;inset:0;background:var(--white);opacity:0;transition:opacity .4s;box-shadow:0 1px 0 var(--line)}
.top.light::before{opacity:1}
.top .wrap{position:relative}
section{position:relative}
.pad{padding-block:clamp(80px,13vh,150px)}
.eyebrow{display:flex;gap:10px;align-items:center;font-size:13px;color:rgba(244,239,230,.7)}
.eyebrow a{text-decoration:none} .eyebrow a:hover{text-decoration:underline}
.eyebrow svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.5}
html[dir=rtl] .eyebrow svg{transform:scaleX(-1)}
.lead{font-size:clamp(18px,1.5vw,22px);max-width:46ch}
.muted{color:var(--muted)}

/* hero: green, the lens film plays as you scroll */
.s-hero{background:var(--green);color:var(--milk);min-height:100svh;display:grid;align-items:center;padding-block:110px 40px;overflow:hidden}
.s-hero .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center}
.s-hero .copy{display:grid;gap:clamp(18px,3vh,28px)}
.s-hero h1{font-size:clamp(44px,min(5.6vw,9.5vh),92px)}
html[lang=ar] .s-hero h1{font-size:clamp(46px,min(6vw,10vh),98px)}
.s-hero .lead{color:rgba(244,239,230,.78)}
.ctas{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.link{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;border-bottom:1px solid currentColor;padding-bottom:4px}
html[lang=ar] .link{letter-spacing:0;font-size:16px}
.lensbox{position:relative;width:min(100%,62vh,600px);aspect-ratio:1/1;justify-self:center}
.lens-svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.lens-svg path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.lens-svg .ln{stroke:rgba(244,239,230,.85);stroke-width:1.3;stroke-dasharray:1;stroke-dashoffset:1}
.lens-svg .ln2{stroke:rgba(244,239,230,.4);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1}
.lens-svg .tk{stroke:rgba(244,239,230,.45);stroke-width:1;opacity:0}
.lens-svg .gl{stroke:var(--gold);stroke-width:1.4;opacity:0}
.lens-svg .bl{stroke:rgba(244,239,230,.55);stroke-width:1}
.lens-svg path.dot{fill:var(--milk);stroke:none;vector-effect:none;opacity:0}
.cue{position:absolute;bottom:28px;left:50%;translate:-50% 0;width:1px;height:42px;background:rgba(244,239,230,.4);overflow:hidden}
.cue::after{content:"";position:absolute;inset:0;background:var(--milk);animation:cue 2.2s cubic-bezier(.76,0,.24,1) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* what we shoot */
.s-what .head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:clamp(36px,6vh,64px)}
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px) clamp(16px,2vw,28px)}
.shot{display:grid;gap:10px;align-content:start}
.shot p{color:var(--muted);font-size:.92em}
.ph{aspect-ratio:4/5;border-radius:4px;position:relative;overflow:hidden;background:linear-gradient(165deg,#e7dfd1,#d9cfbf);margin-bottom:6px}
.ph::after{content:"";position:absolute;inset:-30%;background:radial-gradient(circle at 30% 30%,rgba(201,160,99,.28),transparent 45%);transform:translateX(var(--gx,0%))}
.shot:nth-child(even) .ph,.ph.dark{background:linear-gradient(165deg,#173f33,#0F3328)}
.ph span{position:absolute;inset:auto 12px 12px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(15,51,40,.55);z-index:1}
html[lang=ar] .ph span{letter-spacing:0;font-size:12px}
.shot:nth-child(even) .ph span,.ph.dark span{color:rgba(244,239,230,.6)}

/* three steps */
.s-steps{background:var(--milk)}
.steps{list-style:none;margin:clamp(36px,6vh,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);position:relative}
.steps::before{content:"";position:absolute;top:22px;inset-inline:0;height:1px;background:var(--line);transform-origin:left;transform:scaleX(var(--line-p,1))}
html[dir=rtl] .steps::before{transform-origin:right}
.step{display:grid;gap:12px;align-content:start;position:relative}
.step .dot{display:block;width:40px;height:44px;background:var(--green);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;position:relative}
.step p{color:var(--muted)}

/* selected work */
.s-work{background:var(--black);color:var(--milk)}
.s-work .muted{color:rgba(244,239,230,.68)}
.works{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin-top:clamp(36px,6vh,64px)}
.wk{margin:0;display:grid;gap:10px}
.wk:nth-child(odd){transform:translateY(var(--off,32px))}
.wk figcaption{font-size:14px;color:rgba(244,239,230,.75)}

/* what you get */
.s-get .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:start}
.gets{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.gets li{display:flex;gap:16px;align-items:center;padding-block:18px;border-bottom:1px solid var(--line);font-size:clamp(17px,1.4vw,21px)}
.gets .arr{width:16px;height:16px;flex:none;fill:none;stroke:var(--gold);stroke-width:1.5}
html[dir=rtl] .gets .arr{transform:scaleX(-1)}

/* call to action */
.s-cta{background:var(--green);color:var(--milk);text-align:center}
.s-cta .wrap{display:grid;justify-items:center;gap:28px}
.s-cta h2{max-width:16ch}
.s-cta .muted{color:rgba(244,239,230,.7)}
.next{display:flex;justify-content:space-between;gap:20px;align-items:center;border-top:1px solid rgba(244,239,230,.18);margin-top:clamp(56px,10vh,110px);padding-top:24px;width:100%;font-size:14px;color:rgba(244,239,230,.7)}
.next b{font-weight:400;font-family:var(--f-display);font-size:clamp(20px,2vw,28px);color:var(--milk)}
html[lang=ar] .next b{font-family:var(--f-display-ar)}
footer{background:var(--green);color:rgba(244,239,230,.55);font-size:13px;padding-block:28px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(244,239,230,.12);padding-top:24px}

@media (max-width:860px){
  .s-hero .wrap,.s-what .head,.s-get .wrap{grid-template-columns:minmax(0,1fr)}
  .s-hero{padding-top:96px}
  .lensbox{width:min(82vw,46vh)}
  .shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:minmax(0,1fr);gap:36px}
  .steps::before{display:none}
  .works{grid-template-columns:repeat(2,minmax(0,1fr))}
  .next{flex-direction:column;align-items:flex-start;text-align:start}
}
@media (max-width:520px){.shots{grid-template-columns:minmax(0,1fr)}.shot .ph{aspect-ratio:4/3}}
.proto{position:fixed;inset-inline-start:16px;bottom:16px;z-index:45;background:var(--gold);color:var(--green);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border-radius:999px}
html[lang=ar] .proto{letter-spacing:0;font-size:12px}

/* hero visuals, one per service; all drawn in milk and gold on the green hero */
.vis{position:relative;width:100%;aspect-ratio:1100/720;margin:0;color:var(--milk)}
.vis .ln,.vis b{display:block;height:6px;border-radius:3px;background:rgba(244,239,230,.22)}
.vis .ln.s{width:60%}
.phone{position:absolute;left:50%;top:50%;translate:-50% -50%;height:96%;aspect-ratio:9/18.5;border:1.5px solid rgba(244,239,230,.55);border-radius:34px;overflow:hidden;background:rgba(0,0,0,.18);padding:34px 12px 12px}
.phone .notch{position:absolute;top:10px;left:50%;translate:-50% 0;width:34%;height:14px;border-radius:8px;background:rgba(244,239,230,.25)}
.feed{display:grid;gap:14px}
.post{display:grid;gap:7px}
.post .hd{display:flex;gap:8px;align-items:center}.post .hd b{width:40%}
.av{display:block;width:22px;height:22px;border-radius:50%;background:rgba(201,160,99,.75);flex:none}
.post .img{aspect-ratio:1;border-radius:8px;background:linear-gradient(160deg,rgba(244,239,230,.2),rgba(244,239,230,.06))}
.post:nth-child(even) .img{background:linear-gradient(160deg,rgba(201,160,99,.4),rgba(201,160,99,.1))}
.bub{position:absolute;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--milk);color:var(--green);font-size:12px;box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
.bub svg{width:14px;height:14px;fill:var(--gold)}
.bub.b1{left:4%;top:18%}.bub.b2{right:2%;top:46%}.bub.b3{left:10%;bottom:14%}
html[lang=ar] .bub{font-size:14px}
.vis svg.draw{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vis svg.draw path,.vis svg.draw line,.vis svg.draw circle,.vis svg.draw rect{fill:none;stroke:rgba(244,239,230,.32);stroke-width:1.2}
.vis svg.draw .gold{stroke:var(--gold);stroke-width:2}
.vis svg.draw .fill{fill:var(--gold);stroke:none}
.sym{position:absolute;left:50%;top:46%;translate:-50% -50%;width:22%;aspect-ratio:1.1217;color:var(--milk)}
.sym i{position:absolute;background:currentColor;-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.sym i:nth-child(1){--m:var(--m-top);left:27%;top:0;width:44.17%;height:54.66%}
.sym i:nth-child(2){--m:var(--m-bl);left:0;top:48.92%;width:43.14%;height:51.08%}
.sym i:nth-child(3){--m:var(--m-br);left:56.64%;top:48.75%;width:43.36%;height:51.23%}
.swatches{position:absolute;left:50%;bottom:6%;translate:-50% 0;display:flex;gap:12px}
.swatches i{display:block;width:34px;height:34px;border-radius:50%;border:1px solid rgba(244,239,230,.4)}
.vis[data-v=film]{overflow:hidden;border-radius:6px}
.strip{position:absolute;inset-inline-start:0;top:22%;height:56%;display:flex;gap:10px;padding-block:22px;background:rgba(0,0,0,.35);border-radius:6px}
.strip::before,.strip::after{content:"";position:absolute;inset-inline:0;height:8px;background:repeating-linear-gradient(90deg,rgba(244,239,230,.4) 0 10px,transparent 10px 22px)}
.strip::before{top:7px}.strip::after{bottom:7px}
.fr{flex:none;height:100%;aspect-ratio:16/10;border-radius:3px;background:linear-gradient(160deg,rgba(244,239,230,.22),rgba(244,239,230,.05))}
.fr:nth-child(3n+2){background:linear-gradient(160deg,rgba(201,160,99,.45),rgba(201,160,99,.1))}
.ruler{position:absolute;left:4%;right:4%;bottom:8%;height:22px;border-top:1px solid rgba(244,239,230,.4);background:repeating-linear-gradient(90deg,rgba(244,239,230,.35) 0 1px,transparent 1px 24px) top/100% 8px no-repeat}
.ruler .head{position:absolute;top:-8px;left:0;width:2px;height:30px;background:var(--gold)}
.play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:70px;height:70px;border-radius:50%;border:1.5px solid var(--milk);display:grid;place-items:center;background:rgba(15,51,40,.5)}
.play svg{width:20px;height:20px;fill:var(--milk);margin-inline-start:4px}
.lbl{position:absolute;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,239,230,.75)}
html[lang=ar] .lbl{letter-spacing:0;font-size:14px}
.card{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:4/5.2;margin:0;border-radius:12px;background:var(--milk);color:var(--green);padding:12px;display:grid;grid-template-rows:auto 1fr auto auto auto;gap:8px;box-shadow:0 24px 50px -18px rgba(0,0,0,.6);translate:-50% -50%}
.card .hd{display:flex;gap:8px;align-items:center}.card .hd b{width:45%;background:rgba(15,51,40,.25)}
.card .img{border-radius:6px;background:linear-gradient(160deg,#d9cfbf,#c9bca7)}
.card:nth-child(even) .img{background:linear-gradient(160deg,#173f33,#0F3328)}
.card .ln{background:rgba(15,51,40,.18)}
.card .pill{justify-self:start;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:var(--green);color:var(--milk)}
html[lang=ar] .card .pill{letter-spacing:0;font-size:12px}
.clip{position:absolute;left:50%;top:50%;width:40%;aspect-ratio:4/4.6;border-radius:4px;background:var(--milk);color:var(--green);padding:16px;display:grid;align-content:start;gap:9px;box-shadow:0 24px 50px -18px rgba(0,0,0,.6);translate:-50% -50%}
.clip .mast{font-family:var(--f-display);font-size:18px;border-bottom:2px solid var(--green);padding-bottom:6px;display:flex;justify-content:space-between}
html[lang=ar] .clip .mast{font-family:var(--f-display-ar)}
.clip .mast small{font-family:var(--f-body);font-size:9px;letter-spacing:.14em;align-self:center;opacity:.6}
.clip .hl{height:12px;border-radius:2px;background:var(--green)}.clip .hl.s{width:70%}
.clip .cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.clip .cols div{display:grid;gap:6px}
.clip .ln{background:rgba(15,51,40,.2);height:5px}
.clip .mark{position:absolute;inset-inline-end:14px;bottom:14px;width:30%;aspect-ratio:1;border-radius:3px;background:linear-gradient(160deg,#d9cfbf,#c9bca7)}
.win{position:absolute;inset:6% 4%;border-radius:12px;border:1.5px solid rgba(244,239,230,.5);background:rgba(0,0,0,.2);overflow:hidden}
.win .bar{display:flex;align-items:center;gap:7px;padding:12px 14px;border-bottom:1px solid rgba(244,239,230,.2)}
.win .bar i{width:9px;height:9px;border-radius:50%;background:rgba(244,239,230,.35)}
.win .url{flex:1;margin-inline-start:10px;height:20px;border-radius:999px;background:rgba(244,239,230,.12)}
.win .q{margin:22px 7% 18px;height:44px;border-radius:999px;border:1.5px solid rgba(244,239,230,.45);display:flex;align-items:center;padding-inline:18px;gap:12px}
.win .q svg{width:16px;height:16px;fill:none;stroke:var(--milk);stroke-width:1.6;flex:none}
.win .q .typed{height:8px;border-radius:4px;background:var(--milk);width:0}
.res{margin:0 7%;display:grid;gap:12px}
.res .r{display:grid;gap:7px;padding:12px 14px;border-radius:8px;border:1px solid rgba(244,239,230,.12)}
.res .r b{width:55%;height:9px;background:rgba(244,239,230,.4)}
.res .r.me{border-color:var(--gold);background:rgba(201,160,99,.12)}.res .r.me b{background:var(--gold)}
.stage{position:absolute;inset:0;border-radius:6px;overflow:hidden}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage .dim{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.stage .cone{position:absolute;left:50%;top:-10%;width:70%;height:120%;translate:-50% 0;background:linear-gradient(180deg,rgba(255,236,200,.45),rgba(255,236,200,0) 80%);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);mix-blend-mode:screen}
.avr{position:absolute;width:12%;aspect-ratio:1;border-radius:50%;border:2px solid var(--milk);background:linear-gradient(160deg,rgba(201,160,99,.85),rgba(201,160,99,.35));translate:-50% -50%}
.avr::after{content:"";position:absolute;right:-4px;bottom:-4px;width:30%;aspect-ratio:1;border-radius:50%;background:var(--milk)}
@media (max-width:860px){.vis{width:100%}.bub{font-size:11px;padding:7px 11px}.card{width:44%}.clip{width:52%}}

.top .main a.on{opacity:1;text-decoration:underline;text-underline-offset:8px;text-decoration-color:var(--gold)}
.s-hero.short{min-height:auto;padding-block:170px 110px}
.s-hero .hsym{position:relative;width:min(100%,340px);aspect-ratio:1.1217;justify-self:center;color:var(--milk)}
.s-hero .hsym i{position:absolute;background:currentColor;-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.s-hero .hsym i:nth-child(1){--m:var(--m-top);left:27%;top:0;width:44.17%;height:54.66%}
.s-hero .hsym i:nth-child(2){--m:var(--m-bl);left:0;top:48.92%;width:43.14%;height:51.08%}
.s-hero .hsym i:nth-child(3){--m:var(--m-br);left:56.64%;top:48.75%;width:43.36%;height:51.23%}
.symwrap{display:grid;justify-items:center;gap:28px}
.symwrap p{font-family:var(--f-display);font-size:clamp(18px,1.6vw,24px);color:rgba(244,239,230,.8);text-align:center;margin:0}
html[lang=ar] .symwrap p{font-family:var(--f-display-ar)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:start}
.two p{margin:0;font-size:clamp(17px,1.3vw,20px);line-height:1.7}
.facts{list-style:none;margin:clamp(48px,8vh,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.facts li{padding:28px 0;display:grid;gap:8px;border-bottom:1px solid var(--line)}
.facts li+li{padding-inline-start:28px;border-inline-start:1px solid var(--line)}
.facts b{font-family:var(--f-display);font-weight:400;font-size:clamp(40px,4.4vw,64px);line-height:1;color:var(--green)}
.facts span{color:var(--muted)}
.facts b{direction:ltr;unicode-bidi:isolate;justify-self:start}
.s-vm{background:var(--milk)}
.vm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px)}
.vm article{display:grid;gap:16px;align-content:start;padding-top:24px;border-top:2px solid var(--green)}
.vm p{margin:0;line-height:1.7}
.vals{list-style:none;margin:clamp(36px,6vh,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.vals li{display:grid;gap:12px;align-content:start;padding:28px 24px;border-radius:14px;background:var(--black);color:var(--milk)}
.vals li:nth-child(even){background:var(--green)}
.vals .n{width:28px;aspect-ratio:1.1217;position:relative;color:var(--gold)}
.vals p{margin:0;color:rgba(244,239,230,.72);line-height:1.6}
.ig{display:inline-flex;align-items:center;gap:10px;margin-top:28px;color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px}
.ig svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}.ig svg .f{fill:currentColor;stroke:none}
/* contact */
.info{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}
.info li{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;padding-block:20px;border-bottom:1px solid var(--line)}
.info h3{font-family:var(--f-body);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500;padding-top:4px}
html[lang=ar] .info h3{font-family:var(--f-body-ar);font-size:14px;letter-spacing:0}
.info p{margin:0;font-size:clamp(17px,1.3vw,20px);line-height:1.6}
.info a{color:inherit}
.info .ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.socials{display:flex;flex-wrap:wrap;gap:10px 18px}
form.cf{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding:clamp(24px,3vw,40px);border-radius:16px;background:var(--green);color:var(--milk)}
form.cf h3{font-size:clamp(26px,2.4vw,34px)}
form.cf label{display:grid;gap:8px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,239,230,.75)}
html[lang=ar] form.cf label{letter-spacing:0;font-size:14px}
form.cf input,form.cf textarea{width:100%;min-width:0;font:inherit;font-size:17px;letter-spacing:0;text-transform:none;color:var(--milk);background:transparent;border:0;border-bottom:1px solid rgba(244,239,230,.4);padding:10px 0;border-radius:0;outline:none;transition:border-color .2s}
form.cf textarea{min-height:120px;resize:vertical}
form.cf input:focus,form.cf textarea:focus{border-color:var(--gold)}
form.cf .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
form.cf .btn{justify-self:start;margin-top:8px}
form.cf small{color:rgba(244,239,230,.6);font-size:13px}
.why{list-style:none;margin:clamp(36px,6vh,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px) clamp(24px,4vw,64px)}
.why li{display:grid;gap:12px;align-content:start;padding-top:22px;border-top:1px solid var(--line)}
.why p{margin:0;color:var(--muted);line-height:1.7}
.mapcard{display:grid;gap:18px;justify-items:start;padding:clamp(24px,3vw,40px);border-radius:16px;background:var(--black);color:var(--milk);margin-top:clamp(24px,3vw,40px)}
.mapcard p{margin:0;color:rgba(244,239,230,.75)}
@media (max-width:860px){
  .two,.vm,.s-hero.short .wrap{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:minmax(0,1fr)}.facts li+li{padding-inline-start:0;border-inline-start:0}
  .vals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .why{grid-template-columns:minmax(0,1fr)}
  .info li{grid-template-columns:minmax(0,1fr);gap:4px}
  form.cf .row{grid-template-columns:minmax(0,1fr)}
  .s-hero.short{padding-block:130px 80px}
  .s-hero .hsym{width:180px}
}
@media (max-width:520px){.vals{grid-template-columns:minmax(0,1fr)}}

/* work page */
.s-filter{position:sticky;top:80px;z-index:30;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding-block:14px}
.s-filter .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-block:2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;background:transparent;border:1px solid var(--line);color:var(--green);border-radius:999px;padding:9px 16px;font:inherit;font-size:14px;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s;white-space:nowrap;min-height:40px}
@media (hover:hover){.chip:hover{border-color:var(--green)}}
.chip:active{scale:.97}
.chip[aria-pressed=true]{background:var(--green);color:var(--milk);border-color:var(--green)}
.chip:focus-visible,.pj:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.count{flex:none;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.s-grid{padding-block:clamp(36px,6vh,64px) clamp(80px,13vh,150px)}
.pjs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,48px) clamp(16px,2vw,28px);align-items:start}
.pj{display:grid;gap:12px;color:inherit;text-decoration:none}
.pj[hidden]{display:none}
.pj-img{position:relative;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:var(--g);color:var(--c)}
.pj.wide .pj-img{aspect-ratio:4/3}
.pj-img::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.12) 50%,transparent 70%);translate:-60% 0;transition:translate .9s cubic-bezier(.23,1,.32,1)}
.pj-img span{position:absolute;white-space:nowrap;inset-inline-start:16px;bottom:14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
html[lang=ar] .pj-img span{letter-spacing:0;font-size:13px}
.pj-img .go{inset-inline-start:auto;inset-inline-end:14px;bottom:auto;top:14px;width:40px;height:40px;border-radius:50%;background:var(--milk);display:grid;place-items:center;scale:.6;opacity:0;transition:scale .35s cubic-bezier(.23,1,.32,1),opacity .25s}
.pj-img .go svg{width:16px;height:16px;fill:none;stroke:var(--green);stroke-width:1.6}
html[dir=rtl] .pj-img .go svg{transform:scaleX(-1)}
@media (hover:hover){.pj:hover .pj-img::after{translate:60% 0}.pj:hover .pj-img .go{scale:1;opacity:1}.pj:hover h3{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:6px}}
.pj-meta{display:flex;justify-content:space-between;gap:12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
html[lang=ar] .pj-meta{letter-spacing:0;font-size:14px}
.pj h3{font-size:clamp(21px,1.7vw,26px)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags span{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--muted)}
.note{margin:0 0 clamp(28px,4vh,40px);font-size:14px;color:var(--muted);display:flex;gap:10px;align-items:center}
.note::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none}
/* case study */
.cs-meta{list-style:none;margin:clamp(36px,6vh,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;border-top:1px solid rgba(244,239,230,.2);padding-top:22px}
.cs-meta li{display:grid;gap:6px}
.cs-meta small{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,239,230,.6)}
html[lang=ar] .cs-meta small{letter-spacing:0;font-size:13px}
.cs-meta b{font-weight:400;color:var(--milk)}
.s-hero.cs .wrap{grid-template-columns:minmax(0,1fr)}
.s-hero.cs h1{max-width:18ch}
.cover{aspect-ratio:16/8;border-radius:14px;background:var(--g,linear-gradient(160deg,#173f33,#0b241c));position:relative;overflow:hidden;color:var(--c,rgba(244,239,230,.8))}
.cover span{position:absolute;white-space:nowrap;inset-inline-start:22px;bottom:18px;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
html[lang=ar] .cover span{letter-spacing:0;font-size:14px}
.s-cover{padding-top:clamp(40px,7vh,72px)}
.hint{display:block;margin-top:14px;font-size:14px;color:var(--muted);border-inline-start:2px solid var(--gold);padding-inline-start:12px}
.metrics{list-style:none;margin:clamp(36px,6vh,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.metrics li{display:grid;gap:10px;padding:28px 24px;border-radius:14px;background:var(--black);color:var(--milk)}
.metrics b{font-family:var(--f-display);font-weight:400;font-size:clamp(44px,5vw,72px);line-height:1;color:rgba(244,239,230,.35)}
.metrics span{color:rgba(244,239,230,.7)}
.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin-top:clamp(36px,6vh,56px)}
.gal div{aspect-ratio:4/3;border-radius:12px;background:var(--g,linear-gradient(160deg,#e7dfd1,#cdbfa8));position:relative;color:var(--c,rgba(15,51,40,.7))}
.gal div:first-child{grid-column:1/-1;aspect-ratio:16/7}
.gal span{position:absolute;white-space:nowrap;inset-inline-start:16px;bottom:14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
html[lang=ar] .gal span{letter-spacing:0;font-size:13px}
.quote{font-family:var(--f-display);font-size:clamp(28px,3vw,44px);line-height:1.25;max-width:24ch;margin:0;color:var(--green)}
html[lang=ar] .quote{font-family:var(--f-display-ar)}
.quote+p{margin-top:20px;color:var(--muted)}
/* 404 */
.lost{min-height:100svh;display:grid;place-items:center;text-align:center;background:var(--green);color:var(--milk);padding:120px var(--gl) 80px}
.lost .wrap{display:grid;justify-items:center;gap:26px}
.lost .sym{width:min(56vw,220px);position:relative;aspect-ratio:1.1217}
.lost .sym i{position:absolute;background:currentColor;-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.lost .sym i:nth-child(1){--m:var(--m-top);left:27%;top:0;width:44.17%;height:54.66%}
.lost .sym i:nth-child(2){--m:var(--m-bl);left:0;top:48.92%;width:43.14%;height:51.08%}
.lost .sym i:nth-child(3){--m:var(--m-br);left:56.64%;top:48.75%;width:43.36%;height:51.23%}
.lost p{max-width:40ch;margin:0;color:rgba(244,239,230,.75)}
.lost .ctas{justify-content:center}
@media (max-width:860px){
  .pjs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metrics{grid-template-columns:minmax(0,1fr)}
  .s-filter .wrap{flex-direction:column;align-items:stretch;gap:8px}
  .chips{margin-inline:calc(var(--gl)*-1);padding-inline:var(--gl)}
}
@media (max-width:560px){.pjs{grid-template-columns:minmax(0,1fr)}.pj:nth-child(n) .pj-img{aspect-ratio:4/3}.gal{grid-template-columns:minmax(0,1fr)}.cover{aspect-ratio:4/3}}

/* Django: form feedback */
.cf .errorlist{list-style:none;margin:4px 0 0;padding:0;font-size:13px;color:#f3c7a8;text-transform:none;letter-spacing:0}
.cf .hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sent{display:grid;gap:10px;padding:clamp(24px,3vw,40px);border-radius:16px;background:var(--green);color:var(--milk)}

/* blog article */
.post-body{max-width:70ch;margin-inline:auto;font-size:clamp(17px,1.15vw,19px);line-height:1.75;color:var(--green)}
.post-body>*{margin:0 0 1.1em}
.post-body h2,html .post-body h2,html .post-body h3{font-family:var(--f-display);font-weight:400;line-height:1.25;margin:1.6em 0 .5em;letter-spacing:0}
html .post-body h2,html[lang] .post-body h2{font-size:clamp(26px,2.4vw,36px)}html .post-body h3,html[lang] .post-body h3{font-size:clamp(21px,1.8vw,26px)}
html[lang=ar] .post-body{font-family:var(--f-body-ar);line-height:1.95}
html[lang=ar] .post-body h2,html[lang=ar] .post-body h3{font-family:var(--f-display-ar);line-height:1.5}
.post-body [lang=en],.post-body[lang=en]{font-family:var(--f-body)}
.post-body a{color:inherit;text-decoration-color:var(--gold);text-underline-offset:3px}
.post-body img,.post-body figure{max-width:100%;height:auto;border-radius:8px}
.post-body figure{margin-inline:0}.post-body figcaption{font-size:13px;color:var(--muted);margin-top:8px}
.post-body blockquote{margin-inline:0;padding-inline-start:20px;border-inline-start:2px solid var(--gold);font-family:var(--f-display);font-size:1.2em}
.post-body ul,.post-body ol{padding-inline-start:1.3em}
.post-card h3{margin:0}

/* project photos open full screen (assets/js/lightbox.js) */
a[data-zoom]{display:block;width:100%;height:100%;cursor:zoom-in}
a[data-zoom] img{transition:transform .6s cubic-bezier(.23,1,.32,1)}
@media (hover:hover){a[data-zoom]:hover img{transform:scale(1.03)}}
.lb{position:fixed;inset:0;z-index:300;background:#000;color:var(--milk);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.lb.on{opacity:1;visibility:visible;transition:opacity .3s}
html.lb-open,html.lb-open body{overflow:hidden}
.lb-stage{position:absolute;inset:72px 16px 24px;display:grid;place-items:center;overflow:hidden;touch-action:none;cursor:zoom-in}
.lb.zoomed .lb-stage{cursor:grab}.lb.zoomed .lb-stage:active{cursor:grabbing}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;transform-origin:center;will-change:transform}
.lb-bar{position:absolute;top:0;inset-inline:0;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,3vw,40px);font-size:14px;letter-spacing:.14em;font-variant-numeric:tabular-nums}
.lb-tools{display:flex;gap:10px}
.lb-count{direction:ltr;unicode-bidi:isolate}
.lb button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(244,239,230,.35);background:rgba(0,0,0,.35);color:inherit;display:grid;place-items:center;cursor:pointer;transition:border-color .2s,opacity .2s}
.lb button:hover{border-color:var(--milk)}
.lb button:disabled{opacity:.35;cursor:default}
.lb button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.lb-nav{position:absolute;top:50%;translate:0 -50%}
.lb-prev{inset-inline-start:clamp(12px,2.4vw,32px)}.lb-next{inset-inline-end:clamp(12px,2.4vw,32px)}
html[dir=rtl] .lb-nav svg{transform:scaleX(-1)}
.lb.single .lb-nav,.lb.zoomed .lb-nav{opacity:0;pointer-events:none}
@media (max-width:860px){.lb-nav{top:auto;bottom:20px;translate:none}.lb-stage{inset:72px 0 84px}}
@media (prefers-reduced-motion:reduce){.lb,.lb.on{transition:none}a[data-zoom] img{transition:none}}

/* every photo fills its frame exactly: the frame keeps its shape, the photo covers it from edge to edge
   and can never push the frame bigger, whatever size or shape was uploaded */
.ph,.pj-img,.cover,.gal>div{position:relative;overflow:hidden;min-height:0}
.ph>img,.pj-img>img,.cover>img,.gal>div>img,.gal>div>a{position:absolute!important;inset:0;width:100%!important;height:100%!important;max-width:none;margin:0}
.ph>img,.pj-img>img,.cover>img,.gal>div img{display:block;object-fit:cover!important;object-position:50% 50%}
.gal>div>a>img{width:100%;height:100%}

/* card videos (Services > Card photos or videos): fill the frame like the photos */
.ph>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0b241c}

/* 1.4.9: service card styles */
/* drawn graphics */
.ph.gfx{color:var(--green);--gbg:#e2d9ca}
.shot:nth-child(even) .ph.gfx{color:var(--milk);--gbg:#14392e}
.gfx-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gfx-svg .f{fill:var(--gbg)}
.gfx-svg .g{stroke:var(--gold)}
.gfx-svg .w{stroke-width:5}
.gfx-svg .gf{fill:var(--gold);stroke:none}
.gfx.arm .gfx-svg [pathLength]{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s cubic-bezier(.23,1,.32,1) calc(var(--i)*55ms),opacity .5s ease calc(var(--i)*55ms)}
.gfx.arm .gfx-svg .gf{opacity:0}
.gfx.arm.in .gfx-svg [pathLength]{stroke-dashoffset:0}
.gfx.arm.in .gfx-svg .gf{opacity:1}
/* one wide photo, cards as text under it */
.wide-ph.ph{aspect-ratio:21/9;width:100%;margin:0 0 clamp(28px,5vh,52px)}
.shots.txt .shot{border-top:1px solid rgba(15,51,40,.18);padding-top:18px}
@media (max-width:760px){.wide-ph.ph{aspect-ratio:4/3}}
/* press articles with links, and outlet logos */
.shots.arts .ph{aspect-ratio:4/3}
a.shot.art{color:inherit;text-decoration:none}
a.shot.art .ph>img{transition:transform .7s cubic-bezier(.23,1,.32,1)}
a.shot.art:hover .ph>img{transform:scale(1.04)}
.shot .read{display:inline-flex;align-items:center;gap:6px;font-size:.86em;color:var(--green);border-bottom:1px solid currentColor;justify-self:start;padding-bottom:2px}
.shot .read svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6}
html[dir=rtl] .shot .read svg{transform:scaleX(-1)}
.outlets-wrap{margin-top:clamp(48px,9vh,96px)}
.outlets-wrap h3{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 18px;font-family:inherit;font-weight:500}
html[lang=ar] .outlets-wrap h3{letter-spacing:0;font-size:14px}
.outlets{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.outlets li{height:clamp(64px,11vh,96px);border:1px solid rgba(15,51,40,.16);border-radius:6px;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 12px;background:var(--white)}
.outlets li.empty{border-style:dashed;background:none;color:var(--muted);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
html[lang=ar] .outlets li.empty{letter-spacing:0;font-size:13px}
.outlets img{max-width:78%;max-height:56%;object-fit:contain}
@media (max-width:900px){.outlets{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.outlets{grid-template-columns:repeat(2,minmax(0,1fr))}}
.shots.arts .shot.more{display:none}
.shots.arts.all .shot.more{display:grid;animation:mvIn .6s cubic-bezier(.23,1,.32,1) both}
@keyframes mvIn{from{opacity:0;transform:translateY(14px)}}
.more-btn{margin-top:clamp(28px,5vh,48px)}

/* 1.5.3: case study website + ad results */
.web{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);gap:clamp(28px,5vw,80px);align-items:center}
.web-copy{display:grid;gap:20px;justify-items:start}
.web-copy p{max-width:46ch}
.browser{margin:0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 30px 70px -30px rgba(15,51,40,.45);border:1px solid rgba(15,51,40,.12)}
.browser .bar{height:34px;display:flex;align-items:center;gap:6px;padding-inline:14px;background:var(--milk);border-bottom:1px solid rgba(15,51,40,.1);direction:ltr}
.browser .bar i{width:9px;height:9px;border-radius:50%;background:rgba(15,51,40,.22)}
.browser .bar span{margin-inline-start:12px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser .screen{display:block;aspect-ratio:16/10;overflow:hidden;position:relative}
.browser .screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:object-position 6s cubic-bezier(.45,0,.2,1)}
@media (hover:hover){.browser .screen:hover img{object-position:50% 100%}}
.ads-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 64px;align-items:end}
.ads-head p{max-width:52ch}
#ads .metrics li{background:var(--green)}
.ads-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin-top:clamp(28px,5vh,48px)}
.ads-shots a{display:block;position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--milk);border:1px solid rgba(15,51,40,.1)}
.ads-shots img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform .7s cubic-bezier(.23,1,.32,1)}
@media (hover:hover){.ads-shots a:hover img{transform:scale(1.03)}}
@media (max-width:900px){.web,.ads-head{grid-template-columns:minmax(0,1fr)}.ads-shots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.ads-shots{grid-template-columns:minmax(0,1fr)}}