@font-face{font-family:Anton;src:url('assets/anton.ttf')}@font-face{font-family:Roboto;src:url('assets/roboto-400.ttf');font-weight:400}@font-face{font-family:Roboto;src:url('assets/roboto-500.ttf');font-weight:500}@font-face{font-family:Roboto;src:url('assets/roboto-700.ttf');font-weight:700}
:root{--black-brush-image:url('assets/black-brush.webp');--yellow:#ffda21;--paper:#f6f5f1;--ink:#090a09;--muted:#777;scroll-behavior:smooth}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Roboto,Arial,sans-serif}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #df9900;outline-offset:5px}button:disabled{cursor:default}.page{max-width:1440px;margin:auto;container-type:inline-size;overflow:hidden;background:var(--paper)}.inner{width:86.3%;margin:auto}h1,h2,h3,.display,.primary{font-family:Anton,Impact,sans-serif;font-weight:400}h2{font-size:4.02cqw;line-height:1.2;margin:0}p{margin:0}.primary{background:var(--yellow);border:1.5px solid #111;border-radius:.65cqw;box-shadow:2px 3px 0 #111;padding:1.05cqw 2.65cqw;display:inline-flex;align-items:center;justify-content:center;gap:1.6cqw;font-size:1.52cqw;white-space:nowrap;transition:transform .15s,background .15s}.primary:hover{background:#ffe450;transform:translateY(-2px)}.primary:active{transform:translate(2px,2px);box-shadow:none}.arrow{width:2.1cqw;height:2.1cqw;fill:none;stroke:currentColor;stroke-width:1.8}.pin{width:1.7cqw;height:2.2cqw;fill:currentColor;vertical-align:middle}.site-header{height:6.44cqw;border-bottom:1.5px solid #151515;position:relative;z-index:3}.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:.7cqw;margin-left:1.4cqw}.brand img{height:5.6cqw;width:4.6cqw;object-fit:contain}.brand span{font-family:Anton;font-size:1.82cqw}.nav{display:flex;align-items:center;gap:2cqw;font-size:1.1cqw;font-weight:700}.nav>a:hover{text-decoration:underline;text-decoration-color:var(--yellow);text-underline-offset:5px}.languages{display:flex;gap:1.05cqw;align-items:center;color:#aaa}.languages:before{content:'|';color:#bbb;font-weight:400}.languages button{background:none;border:0;padding:0 0 .3cqw;font-size:1.1cqw;color:#999;position:relative}.languages button+button:before{content:'/';color:#aaa;position:absolute;left:-.75cqw}.languages button[aria-pressed=true]{color:#111}.languages button[aria-pressed=true]:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--yellow)}.nav .primary{font-size:1.16cqw;padding:.65cqw 1.7cqw;box-shadow:1px 2px 0 #111;margin-left:.55cqw;border-radius:.5cqw}.hero{height:48.1cqw;background:var(--paper) center/100% 100% no-repeat;position:relative;z-index:2;pointer-events:none;clip-path:url(#hero-section-cut)}.hero-content{padding-top:5.65cqw;width:44cqw;margin-left:6.7cqw;pointer-events:auto}.hero h1{font-size:7.05cqw;line-height:1.08;letter-spacing:-.08cqw;margin:0 0 1.15cqw;position:relative}.hero h1 span{display:block}.hero h1 .paint{display:inline-block;position:relative;isolation:isolate}.paint:before{content:'';position:absolute;z-index:-1;left:-4.15cqw;top:-3.25cqw;width:37.9cqw;height:14.3cqw;background:url('assets/yellow-brush.png') center/100% 100% no-repeat;transform:rotate(1.25deg)}.hero-subtitle{font-size:1.52cqw;font-weight:700;white-space:nowrap;margin-bottom:1.6cqw;line-height:1.3}.hero-copy{font-size:1.27cqw;line-height:2.02cqw;color:var(--muted);width:40.5cqw}.hero .primary{margin-top:1.8cqw;min-height:4.5cqw}.what{position:relative;margin-top:-4.02cqw;padding:4.15cqw 0 2.45cqw;border-top:1.5px solid #111;background:var(--paper);isolation:isolate;overflow:hidden}.what:before{content:'';position:absolute;right:-.4cqw;bottom:-.65cqw;width:35.5cqw;height:28.5cqw;z-index:-1;background:var(--black-brush-image) right bottom/100% 100% no-repeat;opacity:1}.section-heading{display:flex;gap:2.3cqw;align-items:center;margin-bottom:1.8cqw}.section-heading h2{flex-shrink:0}.underline{position:relative}.underline:after{content:'';position:absolute;left:0;bottom:-.75cqw;width:5.1cqw;height:.4cqw;background:var(--yellow)}.section-heading .rule{height:1.4px;background:#999;flex:1;margin-top:.5cqw}.strap{font-size:1.02cqw;color:#888;display:flex;gap:1.2cqw;margin-top:.7cqw;white-space:nowrap}.strap b{font-size:1.3cqw;color:#333}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.7cqw}.card{display:block;padding:0;text-align:left;background:#f8f7f3;border:1.5px solid #111;border-radius:1cqw;overflow:hidden;color:#111;position:relative;transition:transform .16s,box-shadow .16s}.card:hover{transform:translateY(-4px);box-shadow:0 6px 0 #f5ce11}.card-photo{height:17.8cqw;position:relative}.card-photo img{width:100%;height:100%;object-fit:cover;display:block}.card-number{position:absolute;bottom:0;left:0;background:var(--yellow);font-family:Anton;font-size:1.8cqw;padding:.45cqw 2.8cqw .45cqw 1.7cqw;clip-path:polygon(0 0,75% 0,100% 100%,0 100%)}.card-body{height:11.4cqw;padding:1.05cqw 1.7cqw 1.7cqw}.card h3{font-size:1.95cqw;line-height:1.25;margin:0 0 .4cqw}.card p{font-size:1.28cqw;line-height:1.88cqw;color:var(--muted);max-width:22.5cqw}.card .arrow{position:absolute;bottom:1.75cqw;right:1.65cqw}.services{height:15.8cqw;position:relative;overflow:hidden;border-bottom:1px solid #ccc;background:linear-gradient(130deg,#f2f1ed,var(--paper) 70%)}.services .inner{padding-top:3cqw;position:relative;z-index:1}.services h2{margin-bottom:2.65cqw}.services .underline:after,.where .underline:after,.suppliers .underline:after{border:1.4px solid #141414;box-shadow:0 1px 0 #999;height:.45cqw;bottom:-.95cqw}.services p{font-size:1.27cqw;color:var(--muted)}.engine-art{position:absolute;right:0;top:0;width:48%;height:100%;background:url('assets/engine.webp') right center/auto 150% no-repeat #111;clip-path:polygon(22% 0,100% 0,100% 100%,0 100%,3% 91%,5.5% 82%,7.4% 71%,9.3% 65%,11% 52%,13% 42%,15.5% 31%,17% 20%,19.5% 11%)}.engine-art:before{content:none}.where{height:23cqw;position:relative;overflow:hidden;background:var(--paper);border-bottom:2px solid var(--yellow)}.where .inner{padding-top:4cqw;position:relative;z-index:1;pointer-events:none}.where h2{margin-bottom:2.6cqw}.coverage-copy{display:flex;align-items:center;gap:1.15cqw;font-size:1.6cqw;font-weight:700}.coverage-copy a{pointer-events:auto}.map{position:absolute;right:0;top:0;width:61%;height:100%;background:linear-gradient(110deg,transparent,#eeede8 20%);mask-image:linear-gradient(90deg,transparent,#000 22%)}.map svg{width:100%;height:100%;display:block}.map-link{position:absolute;color:var(--yellow);background:#10110d;display:flex;align-items:center;gap:.8cqw;border-radius:1.5cqw .8cqw .8cqw 1.5cqw;padding:.55cqw .85cqw;font-weight:700;font-size:1.16cqw;border:1px solid #dcb42b;transition:transform .15s}.map-link:hover{transform:scale(1.05)}.map-link .pin{height:1.8cqw;width:1.3cqw}.map-zayed{left:62.7%;top:32%}.map-october{left:58.6%;top:63%}.suppliers{background:repeating-linear-gradient(132deg,#ffffff01 0 3cqw,transparent 3cqw 7cqw),#0d0e0d;color:#f5f5f5;height:22.3cqw}.supplier-inner{display:grid;grid-template-columns:49% 44%;gap:7%;padding-top:3.45cqw}.suppliers h2{margin-bottom:2.65cqw}.suppliers p{font-size:1.3cqw;line-height:1.98cqw}.suppliers .underline:after{border-color:#dfd9af}.supplier-tags{display:flex;align-content:flex-start;align-items:flex-start;flex-wrap:wrap;gap:.65cqw .7cqw;padding-top:.3cqw}.supplier-tags a{border:1.2px solid var(--yellow);border-radius:3cqw;color:var(--yellow);background:transparent;font-weight:700;font-size:1.19cqw;padding:.85cqw 1.3cqw;white-space:nowrap;transition:background .15s,color .15s}.supplier-tags a:hover{background:var(--yellow);color:#111}.site-footer{height:5.2cqw;background:#0d0e0d;color:#ddd;border-top:1px solid #393939;font-size:1.1cqw}.footer-inner{height:100%;display:flex;align-items:center;justify-content:space-between}.site-footer a:hover{color:var(--yellow)}.skip{position:fixed;top:-100px;left:16px;z-index:40;padding:12px;background:var(--yellow)}.skip:focus{top:8px}html[lang=ar] .page{font-family:Arial,sans-serif}html[lang=ar] [data-i18n]{direction:rtl}html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3,html[lang=ar] .brand span,html[lang=ar] .primary{font-family:Arial,sans-serif;font-weight:900}html[lang=ar] .hero h1{font-size:6cqw;line-height:1.27}html[lang=ar] .hero-subtitle{font-size:1.4cqw}html[lang=ar] .card-body{text-align:right}html[lang=ar] dialog{direction:rtl}html[lang=ar] .underline:after{left:auto;right:0}
@media(min-width:1441px){body{background:#e6e4df}.page{box-shadow:0 0 50px #0001}}
@media(max-width:640px){.page{container-type:normal}.inner{width:88%}.site-header{height:auto;min-height:75px;padding:8px 0}.header-inner{gap:8px;flex-wrap:wrap}.brand{gap:7px;margin:0}.brand img{height:44px;width:36px}.brand span{font-size:15px}.nav{gap:12px;font-size:11px;width:100%;justify-content:space-between}.nav .primary{font-size:11px;padding:6px 10px;border-radius:5px}.languages{gap:10px}.languages button{font-size:11px;padding:2px}.languages button+button:before{left:-6px}.hero{clip-path:none;height:620px;background-size:auto 390px;background-position:63% bottom;background-color:#f7f6f2}.hero-content{padding-top:27px;margin-left:6%;width:88%}.hero h1{font-size:54px;line-height:1.07;letter-spacing:-.6px;margin-bottom:14px}.paint:before{left:-28px;top:-25px;width:288px;height:107px}.hero-subtitle{font-size:13px;white-space:normal;line-height:1.4;margin-bottom:12px;max-width:340px}.hero-copy{font-size:12px;line-height:18px;width:90%;max-width:360px}.hero .primary{margin-top:15px;min-height:40px;font-size:14px;padding:9px 18px;border-radius:6px;gap:15px}.arrow{width:20px;height:20px}.what{margin-top:0;padding:30px 0}.what:before{width:310px;height:270px;bottom:-12px}.section-heading{gap:10px;margin-bottom:25px;flex-wrap:wrap}.section-heading h2,h2{font-size:32px;line-height:1.2}.section-heading .rule{min-width:40px}.strap{font-size:9px;gap:10px;width:100%}.strap b{font-size:11px}.underline:after{width:45px;height:4px;bottom:-8px}.cards{grid-template-columns:1fr;gap:20px}.card{border-radius:10px}.card-photo{height:auto;aspect-ratio:1.72}.card-number{font-size:20px;padding:6px 30px 6px 18px}.card-body{height:125px;padding:15px 18px}.card h3{font-size:22px;margin-bottom:5px}.card p{font-size:14px;line-height:20px;max-width:85%}.card .arrow{bottom:22px;right:20px}.services{height:195px}.services .inner{padding-top:32px}.services h2{margin-bottom:28px}.services p{font-size:13px;line-height:20px;max-width:56%}.engine-art{width:48%;opacity:.95;clip-path:polygon(50% 0,100% 0,100% 100%,0 100%)}.services .underline:after,.where .underline:after,.suppliers .underline:after{height:5px;bottom:-10px}.where{height:340px}.where .inner{padding-top:30px}.where h2{margin-bottom:28px}.coverage-copy{font-size:14px;gap:10px}.pin{width:16px;height:20px}.map{top:110px;width:100%;height:230px;mask-image:linear-gradient(180deg,transparent,#000 18%)}.map-link{font-size:12px;padding:7px 9px;gap:7px;border-radius:15px 8px 8px 15px}.map-link .pin{height:17px;width:13px}.map-zayed{left:51%;top:51%}.map-october{left:44%;top:74%}.suppliers{height:auto}.supplier-inner{grid-template-columns:1fr;padding:32px 0;gap:22px}.suppliers h2{margin-bottom:28px}.suppliers p{font-size:14px;line-height:21px}.supplier-tags{padding:0;gap:8px}.supplier-tags a{font-size:12px;padding:8px 12px;border-radius:25px}.site-footer{height:auto;font-size:11px;padding:18px 0}.footer-inner{gap:12px;align-items:flex-start;flex-direction:column}html[lang=ar] .hero h1{font-size:43px}html[lang=ar] .hero-subtitle{font-size:13px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

.supplier-tags a{display:inline-flex;cursor:pointer}.link-notice{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:12px 20px;border:1px solid #ffda21;border-radius:8px;background:#111;color:#ffda21;z-index:100;font:14px Roboto,Arial,sans-serif;box-shadow:0 5px 25px #0004}.link-notice[hidden]{display:none}

.hero{background-image:linear-gradient(90deg,rgba(246,245,241,.2) 0%,rgba(246,245,241,.2) 40%,transparent 58%),url("assets/hero.webp")}

/* The reference has three different joins: a curved hero overlap, a painted
   card-to-services transition, and a straight hairline above the map. */
.service-slashes{position:absolute;top:14%;left:50.2%;height:86%;width:15.2%;transform:skewX(-36.5deg);transform-origin:top left;isolation:isolate;background:linear-gradient(90deg,#ffda21 0 30%,#20211f 30% 100%)}
.service-slashes:before{content:'';position:absolute;inset:0;background:var(--black-brush-image) center/300% 160% no-repeat;opacity:.18;mix-blend-mode:multiply}
.services:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:58%;height:100%;background:var(--black-brush-image) center/100% 140% no-repeat;opacity:.035;transform:rotate(180deg)}
@media(max-width:640px){.service-slashes{left:67%;width:20%;transform:skewX(-28deg)}.what:before{right:-8px}.services:after{width:70%}html[lang=ar] .paint:before{left:-24px;width:290px}}
/* Where we work: live map (Leaflet + OpenStreetMap) with the admin service zone */
.map{background:#e9e8e3}.map .leaflet-tile-pane{filter:grayscale(1) contrast(.92) brightness(1.06)}.map.leaflet-container{font:inherit}.where .map{z-index:0}
.zone-pin{background:none;border:0}.zone-pin .map-link{position:static;transform:translate(-50%,-100%);white-space:nowrap}.zone-pin .map-link:hover{transform:translate(-50%,-100%) scale(1.05)}
.map .leaflet-control-attribution{font-size:10px;background:rgba(246,245,241,.85)}
.map .leaflet-overlay-pane svg{width:auto;height:auto}
.map .leaflet-control-attribution svg{width:12px!important;height:8px!important}.map.leaflet-container .zone-pin .map-link{color:var(--yellow)}
/* Arabic: the photos stay where the design puts them, so Arabic text stays in the same text column (right-aligned inside it)
   instead of running across the full width under the photos. Cairo matches the Squids app. */
html[lang=ar] .page,html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3,html[lang=ar] .brand span,html[lang=ar] .primary{font-family:Cairo,Arial,sans-serif}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3,html[lang=ar] .primary{font-weight:900}
html[lang=ar] h2.underline{width:fit-content}
html[lang=ar] .hero-content,html[lang=ar] .hero-copy,html[lang=ar] .hero-subtitle{text-align:right}
html[lang=ar] .hero-subtitle{white-space:normal}
html[lang=ar] .services p{max-width:44%}
html[lang=ar] .services p a{display:block;text-align:right}
html[lang=ar] .card p{max-width:none}
html[lang=ar] .supplier-inner p{text-align:right}
html[lang=ar] .hero h1{font-size:5.4cqw}
html[lang=ar] .primary .arrow,html[lang=ar] .card .arrow{transform:scaleX(-1)}
html[lang=ar] .card .arrow{right:auto;left:1.65cqw}
html[lang=ar] .card-body{height:auto;min-height:11.4cqw;padding-bottom:3.8cqw}
html[lang=ar] .coverage-copy{flex-direction:row-reverse;width:fit-content}
@media(max-width:640px){html[lang=ar] .hero h1{font-size:40px}html[lang=ar] .services p{max-width:56%}html[lang=ar] .card .arrow{left:20px}html[lang=ar] .card-body{padding-bottom:44px}}
html[lang=ar] .hero-copy{width:36cqw}@media(max-width:640px){html[lang=ar] .hero-copy{width:90%}}
@media(max-width:640px){html[lang=ar] .hero{height:690px}html[lang=ar] .hero-copy{line-height:20px}}