@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/manrope-0.woff2) format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/manrope-1.woff2) format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/manrope-2.woff2) format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/manrope-3.woff2) format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/manrope-4.woff2) format('woff2'); } @font-face { font-family: 'Cairo'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/cairo-0.woff2) format('woff2'); } @font-face { font-family: 'Cairo'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/cairo-1.woff2) format('woff2'); } @font-face { font-family: 'Cairo'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/cairo-2.woff2) format('woff2'); } @font-face { font-family: 'Cairo'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/cairo-3.woff2) format('woff2'); } @font-face { font-family: 'Cairo'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/cairo-4.woff2) format('woff2'); } /* Vazirmatn v33.003, SIL OFL 1.1. Full variable font, including Kurdish glyphs. */ @font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/vazirmatn-v33.003.woff2') format('woff2'); } /* styles.css */ :root{color-scheme:light;--bg:#fcfaf8;--surface:#fff;--surface2:#f4f0ed;--rose:#fbece9;--red:#e34443;--red-dark:#bc302f;--ink:#252c2c;--muted:#737774;--line:#e7e3df;--shadow:0 14px 42px #392d2510;--radius:26px;--font:'Manrope',Arial,sans-serif} :root[data-theme=dark]{color-scheme:dark;--bg:#151b1c;--surface:#202829;--surface2:#263031;--rose:#38292a;--red:#ff7770;--red-dark:#ff9b94;--ink:#f6f5f0;--muted:#afb7b4;--line:#354042;--shadow:0 14px 42px #0003} *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--ink);font:500 15px/1.65 var(--font);-webkit-font-smoothing:antialiased}html[dir=rtl]{--font:'Cairo',Tahoma,sans-serif}button,input,select,textarea{font:inherit}a{color:inherit;text-decoration:none}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.6}img{display:block;max-width:100%}svg{width:22px;height:22px;flex-shrink:0}button{color:inherit}a,button{touch-action:manipulation}::selection{background:#f4c6c1;color:#332222}:focus-visible{outline:3px solid var(--red);outline-offset:5px}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-weight:800}h1{font-size:clamp(44px,5.6vw,80px);line-height:1.08;letter-spacing:-4.3px}h2{font-size:clamp(32px,3.5vw,49px);line-height:1.16;letter-spacing:-2px}h3{font-size:22px;line-height:1.35;letter-spacing:-.6px}p{color:var(--muted)}html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3{letter-spacing:0;line-height:1.5}.wrap{width:min(1264px,calc(100% - 104px));margin-inline:auto}.section{padding-block:92px}.eyebrow{display:flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:2.1px;color:var(--red);font-size:11px;font-weight:800;margin-bottom:22px}.eyebrow::before{content:'';width:22px;height:2px;background:currentColor}.lead{font-size:17px;line-height:1.8;max-width:540px}.skip-link{position:fixed;top:-100px;left:20px;z-index:200;padding:12px 20px;background:var(--surface);border-radius:10px}.skip-link:focus{top:10px} .site-header{height:102px;position:relative;z-index:50}.header-inner{height:100%;display:flex;align-items:center;gap:30px;border-bottom:1px solid var(--line)}.brand{display:block;flex-shrink:0}.brand img{width:124px;height:55px;object-fit:contain}.brand .logo-light{display:none}:root[data-theme=dark] .brand .logo-light{display:block}:root[data-theme=dark] .brand .logo-dark{display:none}.desktop-nav{display:flex;align-items:center;gap:28px;margin-inline:auto}.desktop-nav a{font-size:12px;font-weight:700;position:relative;white-space:nowrap}.desktop-nav a:hover,.desktop-nav a[aria-current=page]{color:var(--red)}.header-actions{display:flex;gap:10px;align-items:center}.icon-button{display:inline-grid;place-items:center;background:transparent;border:1px solid var(--line);width:40px;height:40px;border-radius:50%;transition:background .2s,transform .2s}.icon-button:hover{background:var(--rose);transform:translateY(-2px)}.icon-button svg{width:18px;height:18px}.language-switch{position:relative}.language-switch summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;padding:10px 6px}.language-switch summary::-webkit-details-marker{display:none}.language-switch summary svg{width:14px;height:14px}.language-options{position:absolute;inset-inline-end:0;top:45px;min-width:150px;display:grid;padding:8px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:16px}.language-options a{padding:9px 12px;border-radius:8px;font-size:13px}.language-options a:hover{background:var(--rose)}.header-actions>.btn{font-size:11px;padding:12px 17px;min-height:42px}.btn{display:inline-flex;justify-content:center;align-items:center;gap:23px;padding:17px 25px;border-radius:50px;min-height:54px;border:1px solid transparent;font-size:13px;font-weight:800;line-height:1.4;transition:transform .25s,box-shadow .25s,background .25s;white-space:normal}.btn svg{width:18px;height:18px}.btn:hover{transform:translateY(-3px)}.btn-primary{background:var(--red);color:#fff;box-shadow:0 7px 18px #df424325}.btn-primary:hover{background:var(--red-dark);box-shadow:0 10px 25px #df424338}:root[data-theme=dark] .btn-primary{color:#1f2323}.btn-secondary{border-color:var(--line);background:var(--surface);color:var(--ink)}.btn-secondary:hover{background:var(--rose)}.button-row{display:flex;gap:12px;flex-wrap:wrap}.menu-toggle{display:none}.mobile-nav{display:none} .home-hero{padding-top:58px;position:relative;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1fr 1.04fr;gap:12px;align-items:center;min-height:558px;padding-bottom:34px}.hero-copy{position:relative;z-index:3;padding-bottom:12px}.location-pill{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:30px;padding:7px 12px;font-size:10px;font-weight:700;margin-bottom:24px}.status-dot{height:6px;width:6px;border-radius:50%;background:#579f82;box-shadow:0 0 0 4px #70b39917}.hero-copy h1{max-width:620px;margin-bottom:24px}.hero-copy h1 em{font-style:normal;color:var(--red);position:relative;white-space:nowrap}.hero-copy h1 em::after{content:'';position:absolute;height:7px;border-top:2px solid var(--red);border-radius:50%;bottom:-10px;left:0;right:0;transform:rotate(-3deg);opacity:.5}.hero-copy .lead{max-width:425px;font-size:15px;margin-bottom:30px}.hero-proof{display:flex;align-items:center;gap:13px;margin-top:31px}.avatar-stack{display:flex;padding-inline-start:7px}.avatar-stack img{width:34px;height:34px;object-fit:cover;border-radius:50%;border:2px solid var(--bg);margin-inline-start:-7px}.hero-proof p{margin:0;font-size:10px;line-height:1.6}.hero-proof strong{display:block;color:var(--ink);font-size:11px}.hero-art{height:555px;position:relative;isolation:isolate;direction:ltr}.hero-halo{width:470px;height:470px;border-radius:50%;position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);background:radial-gradient(circle at 50% 40%,#fff6f2 0%,#f6ded7 64%,#f8e8e2 100%);z-index:-2}.hero-halo::before{content:'';position:absolute;inset:-17px;border:1px solid var(--line);border-radius:50%}.hero-halo::after{content:'';position:absolute;inset:26px;border:1px dashed #d9b4aa88;border-radius:50%}:root[data-theme=dark] .hero-halo{background:radial-gradient(circle at 50% 30%,#5c3c3b,#352b2c)}.rider-scene{position:absolute;inset:0;touch-action:pan-y}.rider-scene canvas{display:block;width:100%;height:100%;position:relative;z-index:1;cursor:grab}.rider-scene canvas:active{cursor:grabbing}.scene-fallback{position:absolute;inset:60px 50px;border-radius:45% 45% 40% 40%;overflow:hidden;transition:opacity .3s}.scene-fallback img{width:100%;height:100%;object-fit:cover}.scene-ready .scene-fallback{opacity:0;pointer-events:none}.scene-controls{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:11px;color:var(--muted);font-size:10px;z-index:7;white-space:nowrap}.scene-controls svg{width:15px;height:15px}.scene-controls button{width:28px;height:28px;background:var(--surface);border:1px solid var(--line);border-radius:50%;display:grid;place-items:center}.floating-label{position:absolute;z-index:4;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);padding:13px 16px;border-radius:15px;display:flex;align-items:center;gap:11px;pointer-events:none;animation:float 6s ease-in-out infinite}.floating-label .label-icon{width:33px;height:33px;border-radius:11px;display:grid;place-items:center;background:var(--rose);color:var(--red)}.floating-label .label-icon svg{width:17px;height:17px}.floating-label strong{display:block;font-size:11px;line-height:1.6}.floating-label span{font-size:9px;color:var(--muted);display:block}.label-top{top:86px;right:-1px;transform:rotate(4deg)}.label-bottom{bottom:99px;left:8px;animation-delay:-3s}.scene-mark{position:absolute;left:28px;top:61px;font-size:10px;font-weight:800;letter-spacing:2px;color:#b18c82;transform:rotate(-9deg)}.scene-spark{position:absolute;right:20px;bottom:131px;color:var(--red);font-size:45px;font-weight:400;line-height:1;transform:rotate(12deg)}@keyframes float{50%{translate:0 -8px}} .impact-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);padding:29px 0;margin-top:10px}.impact-stat{padding:0 28px;border-inline-end:1px solid var(--line)}.impact-stat:first-child{padding-inline-start:0}.impact-stat:last-child{border:0}.impact-stat b{font-size:35px;line-height:1.3;letter-spacing:-1.7px;display:block;font-weight:800}.impact-stat b span{color:var(--red)}.impact-stat p{font-size:10px;margin:6px 0 0}.partners{display:flex;align-items:center;justify-content:center;gap:56px;padding:32px 0;font-size:10px;border-bottom:1px solid var(--line)}.partners p{margin:0;max-width:140px;line-height:1.6}.partner-word{font-size:24px;font-weight:800;letter-spacing:-1px;color:var(--muted)}.partner-word.fib{font-style:italic;letter-spacing:0}.partner-word.sap{font-size:18px;letter-spacing:-.5px}.partner-word.sap small{font-size:13px;font-weight:600;letter-spacing:1px} .section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:36px}.section-head h2{margin-bottom:0;max-width:620px}.section-head .eyebrow{margin-bottom:15px}.section-head>p{max-width:340px;margin-bottom:0}.arrow-link{display:inline-flex;align-items:center;gap:15px;font-size:12px;font-weight:800;color:var(--ink)}.arrow-link svg{width:17px;height:17px;transition:transform .2s}.arrow-link:hover svg{transform:translateX(4px)}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.service-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .3s,box-shadow .3s}.service-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}.service-image{height:235px;overflow:hidden;position:relative;background:var(--rose)}.service-image img{width:100%;height:100%;object-fit:cover;transition:transform .65s}.service-card:hover img{transform:scale(1.05)}.service-image::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 65%,#0002)}.service-number{position:absolute;inset-inline-start:18px;top:18px;display:grid;place-items:center;font-size:10px;font-weight:800;border-radius:50%;height:30px;width:30px;background:#ffffffed;color:#333;z-index:1}.service-body{padding:25px 26px 27px}.service-body h3{margin-bottom:10px;font-size:20px}.service-body p{font-size:12px;line-height:1.8;min-height:44px;margin-bottom:22px}.service-bottom{border-top:1px solid var(--line);padding-top:18px;display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:800}.round-arrow{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--red)}.round-arrow svg{width:15px;height:15px} .people-section{padding:20px 0 88px}.people-grid{display:grid;grid-template-columns:1.04fr 1fr;align-items:center;gap:74px}.people-image{position:relative}.people-image>img{width:100%;height:480px;object-fit:cover;border-radius:var(--radius)}.photo-note{position:absolute;left:22px;right:22px;bottom:22px;border:1px solid #fff8;background:#ffffffee;backdrop-filter:blur(12px);border-radius:16px;padding:15px 20px;display:flex;align-items:center;gap:12px;color:#2a3030}.photo-note strong{display:block;font-size:12px}.photo-note span{display:block;font-size:10px;color:#737774}.photo-note svg{color:#df4545;width:26px;height:26px}.people-copy h2{margin-bottom:20px}.people-copy>.lead{font-size:14px}.benefit-row{display:flex;gap:14px;padding:18px 0;border-top:1px solid var(--line)}.benefit-row>svg{color:var(--red);width:19px;height:19px;margin-top:2px}.benefit-row h3{font-size:13px;letter-spacing:0;margin-bottom:3px}.benefit-row p{font-size:11px;margin:0}.people-copy .arrow-link{margin-top:20px}.process-panel{border-radius:32px;background:var(--rose);padding:52px;position:relative;overflow:hidden}.process-panel .section-head{align-items:center}.process-panel h2{font-size:38px;max-width:550px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:steps}.step{position:relative;padding-top:20px;border-top:1px solid #be8b852c}.step-number,.step>span:first-child{color:var(--red);font-size:12px;font-weight:800;display:block;margin-bottom:20px}.step h3{font-size:16px;letter-spacing:-.3px;margin-bottom:10px}.step p{font-size:11px;line-height:1.8;margin-bottom:0}.cta-panel{display:flex;align-items:center;justify-content:space-between;gap:30px;background:var(--ink);color:var(--bg);padding:52px;border-radius:var(--radius);margin-block:70px}.cta-panel h2{font-size:37px;margin-bottom:12px}.cta-panel p{color:var(--bg);opacity:.65;margin-bottom:0;font-size:13px}.cta-panel .btn{flex-shrink:0}.site-footer{padding-block:50px 25px;border-top:1px solid var(--line)}.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:45px}.footer-brand p{font-size:11px;max-width:230px;margin:16px 0}.footer-col h3{font-size:11px;letter-spacing:0;margin-bottom:18px}.footer-col a{display:block;font-size:11px;color:var(--muted);margin-bottom:11px}.footer-col a:hover{color:var(--red)}.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:40px;padding-top:23px;font-size:10px;color:var(--muted)}.footer-social{display:flex;gap:16px}.footer-social svg{width:17px;height:17px}.back-top{display:inline-flex;align-items:center;gap:10px}.back-top svg{width:14px;height:14px}.chat-float{position:fixed;inset-inline-end:25px;bottom:24px;border-radius:50%;width:47px;height:47px;display:grid;place-items:center;z-index:40;background:var(--ink);color:var(--surface);box-shadow:var(--shadow);border:1px solid var(--line);transition:transform .25s}.chat-float:hover{transform:translateY(-4px)}.chat-float svg{width:21px;height:21px} .page-heading{padding-block:70px 38px;max-width:1000px}.page-heading h1{font-size:clamp(38px,5vw,65px);letter-spacing:-3px;max-width:880px;margin-bottom:22px}.page-heading .lead{max-width:660px}.page-heading .eyebrow{margin-bottom:16px}.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.photo{width:100%;max-height:510px;min-height:240px;object-fit:cover;border-radius:var(--radius)}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.feature-card{padding:30px;border-radius:22px;background:var(--surface);border:1px solid var(--line)}.feature-card h3{font-size:19px;margin-block:18px 10px}.feature-card p{font-size:13px;margin-bottom:0}.icon-box{display:grid;place-items:center;width:47px;height:47px;border-radius:15px;background:var(--rose);color:var(--red)}.chips{display:flex;gap:10px;flex-wrap:wrap;margin-block:20px}.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:30px;padding:8px 16px;font-size:12px;background:var(--surface)}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.metric{padding:25px;background:var(--surface);border:1px solid var(--line);border-radius:20px}.metric strong,.metric b{display:block;font-size:32px;color:var(--red);letter-spacing:-1.5px}.metric span{font-size:12px;color:var(--muted)}.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.contact-card{padding:28px;border:1px solid var(--line);border-radius:22px;background:var(--surface)}.contact-card h3{font-size:17px;margin-block:18px 12px}.contact-card p,.contact-card a{font-size:13px;overflow-wrap:anywhere}.contact-card a:hover{color:var(--red)}.mission-form{background:var(--surface);border:1px solid var(--line);padding:35px;border-radius:var(--radius)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.field{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:700}.full{grid-column:1/-1}input,textarea,select{width:100%;min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);padding:13px 15px;font-size:13px}textarea{min-height:115px;resize:vertical}input[type=file]{font-size:11px}input[type=file]::file-selector-button{background:var(--rose);color:var(--ink);border:0;border-radius:7px;padding:7px 11px;margin-inline-end:10px}.form-status{font-size:13px;margin:0;color:var(--red)}.form-note{font-size:11px}.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0}.faq{margin-block:25px}.faq details{border-bottom:1px solid var(--line);padding:18px 0}.faq summary{cursor:pointer;font-size:15px;font-weight:700}.faq details p{font-size:13px;max-width:760px;margin-top:14px}.breadcrumbs{display:flex;gap:9px;font-size:11px;color:var(--muted);margin-bottom:30px}.breadcrumbs a:hover{color:var(--red)}.photo-caption{font-size:11px;margin-top:12px}.bullet-list{list-style:none;padding:0;margin:24px 0}.bullet-list li{position:relative;padding-inline-start:25px;margin-bottom:13px;font-size:14px;color:var(--muted)}.bullet-list li::before{content:'✓';position:absolute;inset-inline-start:0;color:var(--red)}.reveal{opacity:1}.js-motion .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}.js-motion .reveal.visible{opacity:1;transform:none}html[dir=rtl] .directional{transform:scaleX(-1)} @media(min-width:1500px){.home-hero{padding-top:80px}.hero-grid{min-height:600px}.hero-art{height:590px}.hero-halo{width:510px;height:510px}} @media(max-width:1150px){.wrap{width:calc(100% - 64px)}.desktop-nav{gap:19px}.header-inner{gap:20px}.desktop-nav a{font-size:11px}.brand img{width:108px}.hero-copy h1{font-size:65px;letter-spacing:-3.5px}.hero-art{height:510px}.hero-halo{width:400px;height:400px}.hero-grid{min-height:520px}.label-top{right:0;top:68px}.label-bottom{left:-10px;bottom:105px}.header-actions>.btn{display:none}.people-grid{gap:40px}.service-image{height:200px}} @media(max-width:850px){.site-header{height:82px}.wrap{width:calc(100% - 44px)}.desktop-nav{gap:17px}.desktop-nav a{font-size:10px}.header-inner{gap:15px}.header-actions{gap:6px}.brand img{width:97px}.home-hero{padding-top:35px}.hero-copy h1{font-size:53px;letter-spacing:-2.8px}.hero-copy .lead{font-size:13px}.hero-art{height:430px}.hero-halo{width:320px;height:320px}.floating-label{padding:10px 12px;gap:8px}.floating-label strong{font-size:10px}.floating-label span{font-size:8px}.label-top{top:70px;right:-7px}.label-bottom{left:0;bottom:60px}.hero-grid{min-height:455px}.scene-mark{left:9px;top:48px}.scene-spark{right:1px;bottom:110px}.hero-copy .btn{font-size:11px;padding:14px 18px;min-height:48px;gap:15px}.impact-stat{padding:0 22px}.impact-stat b{font-size:29px}.partners{gap:35px}.section{padding-block:65px}.service-grid{gap:14px}.service-image{height:170px}.service-body{padding:20px}.service-body h3{font-size:17px}.people-grid{gap:30px}.people-image>img{height:410px}.process-panel{padding:35px}.steps{gap:20px}.cta-panel{padding:35px}.footer-top{gap:25px}.feature-grid{gap:15px}.feature-card{padding:22px}.split{gap:30px}} @media(max-width:680px){.wrap{width:calc(100% - 40px)}.site-header{height:78px}.header-inner{justify-content:space-between}.brand img{width:105px;height:48px}.desktop-nav{display:none}.header-actions{gap:12px}.menu-toggle{display:inline-grid}.icon-button{height:36px;width:36px}.language-switch summary{font-size:10px}.mobile-nav{position:absolute;top:78px;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);padding:18px 24px 26px;box-shadow:0 25px 35px #0001}.mobile-nav.is-open{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mobile-nav a{padding:12px;border-radius:10px;font-size:13px}.mobile-nav a:hover{background:var(--rose)}.home-hero{padding-top:28px}.hero-grid{grid-template-columns:1fr;gap:0;padding-bottom:18px}.hero-copy{padding:0}.location-pill{font-size:9px;margin-bottom:19px}.hero-copy h1{font-size:clamp(44px,11vw,67px);letter-spacing:-2.9px;max-width:490px;margin-bottom:23px}.hero-copy .lead{font-size:13px;max-width:370px;margin-bottom:25px}.hero-copy .btn{font-size:11px;padding:15px 22px;min-height:50px}.hero-proof{margin-top:22px}.hero-art{height:410px;margin-top:5px;margin-inline:-10px}.hero-halo{width:330px;height:330px;top:48%}.label-top{top:70px;right:9px}.label-bottom{left:3px;bottom:58px}.scene-mark{left:18px;top:43px}.scene-spark{right:20px;bottom:100px}.scene-controls{bottom:0;font-size:9px}.impact-strip{grid-template-columns:1fr 1fr;padding:8px 0;margin-top:10px}.impact-stat{padding:20px 15px!important}.impact-stat:nth-child(2){border-inline-end:0}.impact-stat:nth-child(-n+2){border-bottom:1px solid var(--line)}.impact-stat:nth-child(odd){padding-inline-start:0!important}.impact-stat b{font-size:30px}.impact-stat p{font-size:10px}.partners{gap:24px;flex-wrap:wrap;padding:24px 0;justify-content:space-between}.partners p{width:100%;max-width:none;text-align:center;font-size:9px}.partner-word{font-size:23px}.partner-word.sap{font-size:17px}.section{padding-block:55px}.section-head{align-items:start;gap:20px;flex-direction:column;margin-bottom:28px}.section-head h2{font-size:34px;letter-spacing:-1.7px}.eyebrow{font-size:9px;letter-spacing:1.8px;margin-bottom:16px}.section-head>p{font-size:13px}.service-grid{grid-template-columns:1fr;gap:22px}.service-image{height:240px}.service-body{padding:25px}.service-body h3{font-size:22px}.service-body p{font-size:13px;min-height:0}.service-bottom{font-size:12px}.people-section{padding:10px 0 55px}.people-grid{grid-template-columns:1fr;gap:37px}.people-image>img{height:345px}.people-copy h2{font-size:35px;letter-spacing:-1.7px}.people-copy>.lead{font-size:13px}.benefit-row h3{font-size:13px}.benefit-row p{font-size:11px}.process-panel{padding:29px 25px;border-radius:25px}.process-panel h2{font-size:31px;letter-spacing:-1.4px}.steps{grid-template-columns:1fr 1fr;gap:26px 22px}.step-number{margin-bottom:12px}.step h3{font-size:15px}.step p{font-size:11px}.cta-panel{flex-direction:column;align-items:start;padding:30px;margin-block:45px}.cta-panel h2{font-size:32px;letter-spacing:-1.5px}.cta-panel p{font-size:12px}.footer-top{grid-template-columns:1fr 1fr;gap:26px}.footer-brand{grid-column:1/-1}.footer-brand p{max-width:280px}.footer-col a{font-size:11px}.footer-col h3{font-size:12px}.footer-bottom{flex-wrap:wrap;font-size:9px;margin-top:22px}.chat-float{width:43px;height:43px;bottom:18px;inset-inline-end:17px}.page-heading{padding-block:42px 18px}.page-heading h1{font-size:41px;letter-spacing:-2px}.page-heading .lead{font-size:14px}.split{grid-template-columns:1fr;gap:30px}.feature-grid{grid-template-columns:1fr}.metric-grid{grid-template-columns:1fr 1fr;gap:12px}.metric{padding:20px}.metric strong{font-size:27px}.contact-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.mission-form{padding:24px}.full{grid-column:auto}.photo{max-height:400px}.feature-card{padding:26px}html[dir=rtl] .hero-copy h1{font-size:43px}} .page-heading{max-width:none}.page-heading+.section{padding-top:25px}.breadcrumb{display:block;color:var(--muted);font-size:11px;margin-bottom:24px}.breadcrumb span{margin-inline:10px}.section-tint{background:var(--surface2)}.section-spacer{margin-top:42px}.feature-stack .feature-grid{grid-template-columns:1fr;gap:12px}.feature-stack .feature-card{padding:20px 24px;display:grid;grid-template-columns:40px 1fr;column-gap:16px;align-items:start}.feature-stack .feature-card .icon-box{grid-row:1/3;width:40px;height:40px}.feature-stack .feature-card h3{margin:0 0 7px;font-size:16px}.feature-stack .feature-card p{font-size:12px}.feature-stack{margin:25px 0}.form-split{align-items:start;grid-template-columns:.85fr 1.15fr}.form-title{font-size:26px;letter-spacing:-1px}.review-card{padding:40px;background:var(--surface);border:1px solid var(--line);border-radius:26px}.review-card .eyebrow{margin-block:20px}.review-card .form-note{margin-top:18px}.contact-card h2{font-size:24px;letter-spacing:-.6px;margin-block:20px 15px}.contact-detail{display:block;margin-bottom:10px}.contact-card>.arrow-link{margin-top:15px;align-items:start}.contact-card h3{font-size:13px;margin-top:25px}.social-links{display:flex;flex-wrap:wrap;gap:15px}.social-links a{display:flex;align-items:center;gap:6px;font-size:12px}.social-links svg{width:15px;height:15px}.service-card-body{padding:25px}.service-card-body>.icon-box{margin-bottom:20px}.service-card-body :is(h2,h3){font-size:23px;letter-spacing:-.7px}.service-card-body p{font-size:13px;min-height:65px}.service-image .photo{min-height:0;max-height:none;height:100%;border-radius:0}.steps{list-style:none;padding-inline:0}.about-values h2{font-size:36px}.section .cta-panel{margin-block:0}.feature-card>h2{font-size:26px;letter-spacing:-.7px;margin-top:20px} @media(max-width:680px){.form-split{grid-template-columns:1fr}.review-card{padding:27px}.section-spacer{margin-top:30px}.service-card-body p{min-height:0}.about-values h2{font-size:30px}.hero-copy .button-row{gap:9px}.hero-copy .btn{font-size:10px;padding:14px 17px;gap:10px;min-height:48px}.hero-art .label-top{top:20px;right:4px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.js-motion .reveal{opacity:1;transform:none}} /* polish.css */ /* Mission / vivid red, optical glass, physical motion */ :root{--bg:#ffffff;--surface:#fff;--surface2:#f5f6f8;--rose:#fff0f1;--red:#e52639;--red-dark:#c61429;--ink:#161d24;--muted:#67717b;--line:#e6e9ed;--shadow:0 22px 55px #172c4112} :root[data-theme=dark]{--bg:#0c1118;--surface:#151e29;--surface2:#192430;--rose:#34202b;--red:#ff4357;--red-dark:#ff6e7c;--ink:#f6f8fa;--muted:#a9b5c2;--line:#2c3948;--shadow:0 22px 55px #0005} body{background-image:radial-gradient(ellipse at 100% 0,#fff0f2 0,transparent 38%);background-repeat:no-repeat;background-size:100% 1050px}:root[data-theme=dark] body{background-image:radial-gradient(ellipse at 100% 0,#231424 0,transparent 44%)} .site-header{position:sticky;top:0;height:88px;background:#ffffffbd;backdrop-filter:blur(22px) saturate(1.7);-webkit-backdrop-filter:blur(22px) saturate(1.7);border-bottom:1px solid #ffffffb0;box-shadow:0 7px 35px #13274405}.header-inner{border-color:#263a5010}.brand img{width:132px;height:57px}.desktop-nav a{font-size:12px}.header-actions{gap:12px}:root[data-theme=dark] .site-header{background:#101722c9;border-bottom-color:#ffffff0a}.mobile-nav{background:#fffffff0;backdrop-filter:blur(25px)}:root[data-theme=dark] .mobile-nav{background:#121b28f2} .btn,.icon-button{isolation:isolate;position:relative;overflow:hidden;transform:translateZ(0);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s,background .3s}.btn{border-radius:17px;padding:17px 25px;font-size:13px;letter-spacing:-.1px}.btn-primary{color:#fff;background:radial-gradient(circle at var(--pointer-x,30%) var(--pointer-y,0%),#ff9ba47a 0,transparent 56%),linear-gradient(135deg,#f94756e8,#e32236f5 60%,#d8122bee);border:1px solid #ff889282;box-shadow:inset 0 1px 1px #ffffff85,inset 0 -2px 3px #aa07172c,0 5px 0 #b315240d,0 12px 24px #de17342c}.btn-primary:hover{background:radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,0%),#ffc6cc80,transparent 65%),linear-gradient(135deg,#ff4c5be8,#e82138f5 68%,#d31930f5);box-shadow:inset 0 1px 2px #ffffffa6,inset 0 -2px 4px #a7041630,0 16px 32px #d91c383b;transform:translateY(-3px)}.btn-secondary,.icon-button{background:radial-gradient(circle at var(--pointer-x,30%) var(--pointer-y,0%),#ffffffed,transparent 65%),linear-gradient(135deg,#ffffffd6,#e8edf37a);border:1px solid #ffffff;box-shadow:inset 0 1px 2px #fff,inset 0 -1px 2px #c9d3df85,0 0 0 1px #dce2e78c,0 7px 17px #253b5510}.btn-secondary:hover,.icon-button:hover{background:radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,0%),#fff,transparent 65%),linear-gradient(135deg,#ffffffee,#fff0f1c4);box-shadow:inset 0 1px 1px white,0 0 0 1px #eea6af60,0 12px 23px #a5334415}.btn::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 10%,#ffffff28 35%,#ffffff06 42%,transparent 65%);transform:translateX(-100%);transition:transform .65s;pointer-events:none}.btn:hover::before{transform:translateX(90%)}.btn:active,.btn-primary:active,.btn-secondary:active,.icon-button:active{transform:translateY(2px) scale(.955);box-shadow:inset 0 2px 7px #62071c28,0 2px 4px #3322220d;transition-duration:.09s}.button-ripple{position:absolute;border-radius:50%;background:radial-gradient(circle,#ffffff80 0,#ffffff35 60%,transparent 70%);pointer-events:none;transform:scale(0);opacity:.8;animation:button-ripple .65s cubic-bezier(.1,.5,.2,1) forwards;z-index:0}.btn>svg{position:relative;transition:transform .35s}.btn:hover>svg{transform:translate(2px,-2px)}@keyframes button-ripple{to{transform:scale(2.8);opacity:0}} :root[data-theme=dark] .btn-primary{color:#fff}:root[data-theme=dark] .btn-secondary,:root[data-theme=dark] .icon-button{background:radial-gradient(circle at var(--pointer-x,30%) var(--pointer-y,0%),#64768b54,transparent 65%),linear-gradient(135deg,#34425388,#202b3899);border-color:#8499b330;box-shadow:inset 0 1px 1px #ffffff25,inset 0 -1px 2px #0003,0 7px 17px #0003} .home-hero{padding-top:42px;perspective:1400px}.hero-grid{gap:24px;min-height:580px;padding-bottom:25px}.hero-copy h1{font-size:clamp(46px,5.6vw,79px);letter-spacing:-4px}.hero-copy h1 em{color:var(--red)}.hero-copy h1 em::after{border-top-width:3px;opacity:.8;bottom:-12px;transform:rotate(-2deg)}.hero-copy .lead{font-size:15px;line-height:1.85;margin-top:4px}.location-pill{font-size:10px;background:linear-gradient(140deg,#fffffff0,#ffffff80);box-shadow:0 4px 14px #212f4910,inset 0 1px 1px #fff;border:1px solid #e4e9ef;padding:8px 13px}.status-dot{background:var(--red);box-shadow:0 0 0 4px #e5263910;animation:status-pulse 3s infinite}.hero-proof{margin-top:29px}.hero-proof p{font-size:11px}.hero-proof strong{font-size:12px}.hero-art{height:558px;perspective:1000px}.hero-halo{width:455px;height:455px;top:48%;border-radius:46% 54% 45% 55% / 51% 41% 59% 49%;background:radial-gradient(circle at 28% 15%,#ff7e82 0,transparent 32%),linear-gradient(145deg,#ff414d 8%,#e82139 57%,#bf0c29 100%);box-shadow:inset 0 2px 5px #ffffff85,inset -15px -20px 45px #98051d36,0 35px 60px #e41b3829;animation:halo-morph 14s ease-in-out infinite}.hero-halo::before{inset:-17px;border-color:#ee556c35;border-radius:50%;transform:rotate(-18deg) scaleX(1.06)}.hero-halo::after{inset:22px;border:1px solid #ffffff24;border-radius:50%}.scene-mark{color:#ad1227;letter-spacing:2.5px;top:34px;left:54px;font-size:9px}.scene-spark{color:var(--red);right:2px;bottom:103px;font-size:48px;animation:spark-turn 25s linear infinite}.floating-label{padding:15px 17px;border:1px solid #ffffffb8;border-radius:19px;background:linear-gradient(130deg,#ffffffdb,#ffffff80);backdrop-filter:blur(20px) saturate(1.45);-webkit-backdrop-filter:blur(20px) saturate(1.45);box-shadow:inset 0 1px 0 #fff,0 15px 30px #42243616,0 3px 5px #42243607;animation:glass-float 6s ease-in-out infinite;transform:rotate(-3deg)}.floating-label strong{font-size:12px;letter-spacing:-.2px;color:#18212d}.floating-label span{font-size:10px;color:#626d7c}.floating-label .label-icon{background:linear-gradient(135deg,#ffeff0dd,#fff9);color:#d92137;box-shadow:inset 0 1px 0 white,0 2px 6px #b91c2f10;border:1px solid #fff9;width:37px;height:37px;border-radius:12px}.label-top{right:-8px;top:72px;animation-delay:-1s;transform:rotate(5deg)}.label-bottom{left:3px;bottom:88px;animation-delay:-3.5s}.scene-controls{bottom:4px;color:var(--muted);font-size:10px}.scene-controls button{background:#ffffffa0;border-color:#ffffff;box-shadow:0 2px 6px #0001,0 0 0 1px #d7dfe744;backdrop-filter:blur(10px)}.scene-controls button:active{transform:rotate(-40deg) scale(.92)}:root[data-theme=dark] .hero-halo{background:radial-gradient(circle at 28% 15%,#ff6979 0,transparent 30%),linear-gradient(145deg,#f53750,#b7092d 65%,#780c2c);box-shadow:inset 0 2px 5px #ffffff65,0 30px 80px #d9123838}:root[data-theme=dark] .scene-mark{color:#ff7887}:root[data-theme=dark] .floating-label{background:linear-gradient(135deg,#304459ba,#1320338a);border-color:#c3d9f540;box-shadow:inset 0 1px 1px #ffffff38,0 15px 30px #0004}:root[data-theme=dark] .floating-label strong{color:#f7f9ff}:root[data-theme=dark] .floating-label span{color:#bdccda}:root[data-theme=dark] .floating-label .label-icon{background:#f54c6540;border-color:#ffaabb30;color:#ff9ca9;box-shadow:inset 0 1px 0 #ffffff27}:root[data-theme=dark] .location-pill{background:linear-gradient(140deg,#26374acc,#15212ecc);border-color:#ffffff17;box-shadow:inset 0 1px 0 #ffffff20}:root[data-theme=dark] .scene-controls button{background:#243043aa;border-color:#485971} @keyframes glass-float{0%,100%{translate:0 0}50%{translate:0 -12px}}@keyframes halo-morph{50%{border-radius:54% 46% 55% 45% / 43% 58% 42% 57%;rotate:5deg}}@keyframes spark-turn{to{rotate:360deg}}@keyframes status-pulse{50%{box-shadow:0 0 0 6px #e5263908}} .impact-strip{position:relative;padding:29px 10px;background:linear-gradient(125deg,#ffffffa1,#f7f9fb8c);border:1px solid #e8edf0;border-radius:22px;box-shadow:inset 0 1px 0 #fff,0 8px 25px #26355205;backdrop-filter:blur(12px)}.impact-stat:first-child{padding-inline-start:28px}.impact-stat b{font-size:36px}.impact-stat p{font-size:11px}.partners{border-bottom:0;padding:32px 0 9px}.partners p{font-size:11px}.partner-word{color:#66727e}.service-card{border-color:#e5eaf0;background:linear-gradient(150deg,#ffffffef,#f9fafccc);box-shadow:0 5px 18px #20385307;perspective:900px;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .4s}.service-card:hover,.js-motion .service-card.visible:hover{transform:perspective(900px) translateY(-9px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));box-shadow:0 28px 50px #282e451c;border-color:#ed8d9a75}.service-card .service-bottom{border-top-color:#e3e7ed}.service-card:hover .round-arrow{background:var(--red);color:white;border-color:#ffffff70;box-shadow:inset 0 1px 1px #ffffff66,0 7px 15px #dc274532;transform:rotate(-6deg)}.round-arrow{transition:background .3s,color .3s,transform .3s,box-shadow .3s}.service-number{background:#ffffffb8;border:1px solid #ffffffbd;box-shadow:inset 0 1px 0 #fff,0 3px 12px #0001;backdrop-filter:blur(12px)}.photo-note{background:linear-gradient(135deg,#ffffffef,#ffffffad);border-color:#fff;backdrop-filter:blur(18px);box-shadow:inset 0 1px 1px #fff,0 10px 20px #142c4c13}.icon-box{border:1px solid #fff;background:linear-gradient(135deg,#fff4f4e8,#ffd9df88);box-shadow:inset 0 1px 0 #fff,0 5px 15px #de264411}.feature-card{background:linear-gradient(140deg,#fffffff0,#f7f9fccc);box-shadow:inset 0 1px 1px white,0 6px 20px #122a4005;transition:transform .4s,box-shadow .4s}.feature-card:hover,.js-motion .feature-card.visible:hover{transform:perspective(900px) translateY(-4px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));box-shadow:0 18px 34px #12335a12}.process-panel{background:linear-gradient(130deg,#fff7f8,#ffe9ed 65%,#fff5f6);border:1px solid #ffe0e5;box-shadow:inset 0 1px 0 #fff}.process-panel .step{border-top-color:#ea9dab66}.step-number{display:grid!important;place-items:center;height:34px;width:34px;border-radius:11px;background:#ffffff9c;border:1px solid #fff;box-shadow:0 3px 10px #c5213a12,inset 0 1px 0 white}.cta-panel{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(120deg,#e5223c 0,#c70f2c 67%,#ad0626);color:#fff;box-shadow:inset 0 1px 2px #ffb1bf,0 18px 40px #c11e391f}.cta-panel::before{content:'';position:absolute;width:370px;height:370px;border-radius:50%;right:-90px;top:-210px;border:50px solid #ffffff09;z-index:-1}.cta-panel::after{content:'';position:absolute;width:300px;height:300px;right:280px;bottom:-260px;border-radius:50%;border:40px solid #ffffff09;z-index:-1}.cta-panel .eyebrow{color:#ffd7df}.cta-panel p{color:#fff;opacity:.85}.cta-panel .btn{background:linear-gradient(135deg,#ffffff3d,#ffffff19);border-color:#ffffff75;box-shadow:inset 0 1px 0 #ffffff7d,0 9px 20px #59081724;backdrop-filter:blur(14px);color:#fff}.cta-panel .btn:hover{background:linear-gradient(135deg,#ffffff57,#ffffff24)}.chat-float{background:linear-gradient(135deg,#ff5a6bdd,#d81839ef);border:1px solid #ff9dadb0;color:white;box-shadow:inset 0 1px 1px #fff6,0 8px 25px #d71c3738;backdrop-filter:blur(12px)}.section-tint{background:linear-gradient(150deg,#f7f9fc,#f2f5f9)}.mission-form{border:1px solid #e5eaf1;background:linear-gradient(135deg,#ffffffef,#f7f9fcc9);box-shadow:inset 0 1px 0 #fff,0 25px 50px #132a4610}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--red);box-shadow:0 0 0 4px #f5263f0a;outline:0}.field input,.field select,.field textarea{transition:border-color .2s,box-shadow .2s;background:var(--surface)} :root[data-theme=dark] .impact-strip,:root[data-theme=dark] .service-card,:root[data-theme=dark] .feature-card,:root[data-theme=dark] .mission-form{background:linear-gradient(145deg,#24324585,#182230b5);border-color:#6b849c27;box-shadow:inset 0 1px 0 #ffffff0d,0 10px 25px #0002}:root[data-theme=dark] .partners .partner-word{color:#a6b4c4}:root[data-theme=dark] .process-panel{background:linear-gradient(130deg,#282331,#361d2d);border-color:#fa63742a;box-shadow:inset 0 1px 0 #ffffff15}:root[data-theme=dark] .step-number{background:#ff68791f;border-color:#ff8ba333;box-shadow:inset 0 1px 0 #ffffff15}:root[data-theme=dark] .icon-box{background:linear-gradient(135deg,#fa637429,#fa637409);border-color:#ff8ba322;box-shadow:inset 0 1px 0 #ffffff18}:root[data-theme=dark] .section-tint{background:linear-gradient(135deg,#131d2a,#111925)} @view-transition{navigation:auto}::view-transition-old(root){animation:.28s cubic-bezier(.3,0,.5,1) both page-out}::view-transition-new(root){animation:.52s cubic-bezier(.16,1,.3,1) both page-in}@keyframes page-out{to{opacity:0;transform:translateY(-14px) scale(.987);filter:blur(3px)}}@keyframes page-in{from{opacity:0;transform:translateY(28px) scale(.984);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}.enhanced-motion .hero-copy{animation:hero-copy-in .85s cubic-bezier(.16,1,.3,1) both}.enhanced-motion .hero-art{animation:hero-art-in 1.1s cubic-bezier(.16,1,.3,1) both}.enhanced-motion .page-heading h1{animation:hero-copy-in .8s cubic-bezier(.16,1,.3,1) both}.enhanced-motion .page-heading .lead{animation:hero-copy-in .85s .06s cubic-bezier(.16,1,.3,1) both}.enhanced-motion .page-heading .eyebrow{animation:hero-copy-in .7s cubic-bezier(.16,1,.3,1) both}.js-motion .reveal{transform:translateY(32px) scale(.976);transition:opacity .8s var(--reveal-delay,0ms),transform .8s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms)}.js-motion .reveal.visible{transform:translateY(0) scale(1)}.enhanced-motion.page-leaving main{opacity:0;transform:translateY(-12px);filter:blur(2px);transition:opacity .18s,transform .18s,filter .18s}.hero-art .floating-label{will-change:translate}@keyframes hero-copy-in{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}@keyframes hero-art-in{from{opacity:0;transform:translateY(30px) rotate(5deg) scale(.92)}to{opacity:1;transform:none}} @media(max-width:1150px){.brand img{width:115px}.hero-grid{gap:10px;min-height:535px}.hero-art{height:515px}.hero-halo{width:400px;height:400px}.hero-copy h1{font-size:64px;letter-spacing:-3.5px}.label-top{right:0;top:64px}.floating-label{padding:12px 14px}.floating-label strong{font-size:11px}.floating-label span{font-size:9px}.scene-mark{left:27px;top:30px}} @media(max-width:850px){.site-header{height:82px}.header-actions{gap:8px}.desktop-nav{gap:17px}.desktop-nav a{font-size:10px}.brand img{width:100px}.hero-copy h1{font-size:53px;letter-spacing:-2.8px}.hero-art{height:445px}.hero-halo{width:330px;height:330px}.hero-grid{min-height:465px}.hero-copy .lead{font-size:13px}.hero-copy .btn{font-size:11px;padding:14px 16px;gap:12px}.label-top{top:53px;right:-4px}.floating-label{padding:11px 12px;gap:8px}.floating-label strong{font-size:10px}.floating-label span{font-size:8px}.floating-label .label-icon{width:30px;height:30px}.label-bottom{bottom:69px;left:-8px}.hero-proof strong{font-size:10px}.hero-proof p{font-size:9px}.impact-stat b{font-size:30px}.impact-stat p{font-size:10px}} @media(max-width:680px){.site-header{height:76px}.brand img{width:111px;height:48px}.mobile-nav{top:76px}.header-actions{gap:13px}.home-hero{padding-top:27px}.hero-grid{gap:0}.hero-copy h1{font-size:clamp(44px,11vw,66px);letter-spacing:-2.7px;margin-bottom:25px}.hero-copy .lead{font-size:13px;line-height:1.8;margin-bottom:24px}.location-pill{font-size:9px}.hero-copy .btn{font-size:10px;padding:14px 17px;gap:10px;min-height:48px;border-radius:15px}.hero-proof{margin-top:23px}.hero-proof strong{font-size:11px}.hero-proof p{font-size:10px}.hero-art{height:420px;margin-top:21px;margin-bottom:12px}.hero-halo{width:323px;height:323px;top:48%}.hero-art .label-top{top:14px;right:1px}.label-bottom{bottom:49px;left:-2px}.floating-label{border-radius:15px}.floating-label strong{font-size:10px}.floating-label span{font-size:8px}.scene-mark{top:41px;left:9px;font-size:8px}.scene-spark{right:5px;bottom:77px;font-size:35px}.scene-controls{font-size:9px}.impact-strip{padding:3px 18px;margin-top:5px}.impact-stat{padding:20px 15px!important}.impact-stat:first-child{padding-inline-start:0}.impact-stat b{font-size:29px}.impact-stat p{font-size:9px}.partners{padding:27px 0 0}.partners p{font-size:10px}.service-image{height:245px}.section-head h2{font-size:34px}.hero-copy h1 em::after{bottom:-10px}.btn{border-radius:16px}.cta-panel h2{font-size:32px}.chat-float{bottom:18px;inset-inline-end:16px}html[dir=rtl] .hero-copy h1{font-size:43px}} .btn-primary{background:radial-gradient(circle at var(--pointer-x,30%) var(--pointer-y,0%),#ffffff10 0,transparent 56%),linear-gradient(135deg,#dc2039eb,#ca112ded 65%,#b70c28f5)}.btn-primary:hover{background:radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,0%),#ffffff16,transparent 58%),linear-gradient(135deg,#d81933f2,#c80b29f5)}.button-ripple{transform:translate(-50%,-50%) scale(0)}@keyframes button-ripple{to{transform:translate(-50%,-50%) scale(2.8);opacity:0}}.scene-controls button{width:40px;height:40px}.service-card{display:flex;flex-direction:column}.service-card-body,.service-body{display:flex;flex-direction:column;flex:1}.service-card .arrow-link,.service-card .service-bottom{margin-top:auto}.scene-controls{bottom:-4px}.page-heading .breadcrumb{display:flex;gap:10px}.page-heading .breadcrumb a{color:var(--muted)}html[dir=rtl] .floating-label,html[dir=rtl] .scene-controls{direction:rtl;text-align:right}html[dir=rtl] .eyebrow,html[dir=rtl] .location-pill{letter-spacing:0}.hero-art:has(.scene-unavailable) .scene-controls{display:none}.hero-art:has(.scene-unavailable) .scene-mark{display:none} @media(min-width:681px) and (max-width:900px){html[dir=rtl] .service-grid{grid-template-columns:1fr 1fr}} @media(max-width:680px){.floating-label strong{font-size:11px}.floating-label span{font-size:9px}.scene-controls button{width:40px;height:40px}.scene-controls{bottom:-8px}.scene-mark{letter-spacing:1.5px}.hero-art .label-top{top:12px}} @media(prefers-reduced-motion:reduce){@view-transition{navigation:none}::view-transition-old(root),::view-transition-new(root){animation:none!important}*,*::before,*::after{animation:none!important;transition:none!important}.reveal,.js-motion .reveal{opacity:1!important;transform:none!important}.page-leaving main{opacity:1!important;transform:none!important;filter:none!important}} /* ribbon.css */ /* The selected Ribbon Motion composition and approved emblem without taglines. */ :root{--red:#e1060b;--red-dark:#b90006;--rose:#fff0ee;--ink:#212326;--muted:#7b7d85;--bg:#fff;--surface:#fff;--line:#eae7e7} :root[data-theme=dark]{--red:#ff4b50;--red-dark:#ff6267;--rose:#351b20;--ink:#f7f6f6;--muted:#b3acb1;--bg:#100f12;--surface:#1a181d;--surface2:#211d23;--line:#393037} body{background-image:none}:root[data-theme=dark] body{background-image:none} .site-header{height:96px;background:#fffffff0;border-bottom:1px solid #ece9e9;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 3px 25px #28060a04} .header-inner{width:calc(100% - 80px);max-width:1560px;border:0;gap:28px}.brand{background:#f7f7f7;border-radius:4px;overflow:hidden;line-height:0}.brand img,.site-header .brand img{width:140px;height:76px;object-fit:contain}.footer-brand .brand{display:inline-block}.footer-brand .brand img{width:180px;height:auto}.desktop-nav{gap:30px}.desktop-nav a{font-size:13px}.header-actions{gap:14px}.icon-button{width:44px;height:44px}.language-switch summary{min-height:44px;padding:10px;font-size:12px}.header-actions>.btn{border-radius:24px;font-size:12px;min-height:44px;padding:12px 22px} .btn{border-radius:25px;min-height:52px}.btn-primary,.btn-primary:hover{color:#fff;background:radial-gradient(ellipse at var(--pointer-x,40%) 0,#ff919188,transparent 59%),linear-gradient(180deg,#f52528,#dc0004 46%,#ba0003 100%);border:1px solid #ff8a8aaa;box-shadow:inset 0 2px 2px #ffdfdfaa,inset 0 -2px 4px #85000044,0 12px 26px #db050530}.btn-primary:hover{box-shadow:inset 0 2px 3px #ffdfdfaa,inset 0 -2px 4px #85000044,0 18px 32px #db05053a}.btn-primary:active{transform:translateY(2px) scale(.97);box-shadow:inset 0 3px 12px #75000055,0 3px 8px #db05051a} .ribbon-hero{position:relative;isolation:isolate;aspect-ratio:1672/941;width:100%;max-width:1920px;margin-inline:auto;background:#fff;overflow:hidden;color:#242527} .ribbon-visual{position:absolute;inset:0;overflow:hidden;direction:ltr}.ribbon-stage{position:absolute;inset:0;aspect-ratio:1672/941}.ribbon-stage picture{display:block;height:100%}.ribbon-poster,.ribbon-video{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block}.ribbon-video{opacity:0;transition:opacity .5s}.ribbon-video.is-playing{opacity:1}.rider-decal{position:absolute;z-index:2;height:auto;border-radius:2px;pointer-events:none;box-shadow:0 1px 2px #0002}.decal-box{width:7.1%;left:42.5%;top:37.8%;transform:skew(-11deg,3deg);opacity:.99}.decal-tank{width:5.5%;left:60.2%;top:51.5%;transform:rotate(26deg) skew(6deg,1deg)} .ribbon-copy{position:absolute;left:3.7%;top:7.4%;z-index:4;width:43%;text-align:left;direction:ltr}.ribbon-eyebrow{font-size:clamp(9px,.73vw,13px);font-weight:800;letter-spacing:.27em;display:flex;align-items:center;gap:14px;color:#74777f;margin:0 0 10.5%;line-height:1.4}.ribbon-eyebrow::before{content:'';width:31px;height:2px;background:#ed0005;flex-shrink:0}.ribbon-copy h1{font:800 clamp(38px,4.55vw,84px)/1.02 'Manrope',Arial,sans-serif;letter-spacing:-.045em;margin:0 0 4%;color:#222529}.ribbon-copy h1 em{font-style:normal;display:block;color:#e10005;white-space:nowrap}.ribbon-intro{font-size:clamp(16px,1.6vw,29px);color:#8a8b94;margin:0 0 5.5%;line-height:1.5}.ribbon-button{min-width:clamp(205px,18vw,328px);font-size:clamp(13px,1.2vw,21px);padding:clamp(16px,1.65vw,28px) 2.7vw;border-radius:clamp(22px,2.1vw,38px);gap:2.1vw}.ribbon-button svg{width:25px;height:25px} .ribbon-label{position:absolute;z-index:3;display:flex;align-items:center;gap:clamp(9px,1.15vw,20px);padding:1.1% 1.6%;background:linear-gradient(130deg,#ffffffd1,#fff1f173 50%,#fff5f5a3);border:1px solid #ffffffd9;border-radius:clamp(16px,1.65vw,30px);box-shadow:inset 0 2px 2px #fff,inset 0 -1px 2px #c5747426,0 12px 30px #6c262617;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transform:rotate(2deg);animation:ribbon-float 7s ease-in-out infinite}.ribbon-label>span{display:grid;place-items:center;background:linear-gradient(150deg,#fff9,#fff4);border-radius:50%;width:3.8vw;height:3.8vw;color:#e30009;box-shadow:inset 0 1px 1px #fff}.ribbon-label svg{width:2.1vw;height:2.1vw}.ribbon-label p{color:#26292e;font-size:clamp(12px,1.23vw,23px);margin:0;line-height:1.3;font-weight:600}.ribbon-care{top:14%;right:9%;min-width:18.3%}.ribbon-road{top:68%;left:20.5%;animation-delay:-3s} .motion-toggle{position:absolute;z-index:7;right:22px;bottom:19px;display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffffde;box-shadow:0 2px 12px #0001,inset 0 1px 1px #fff;background:#ffffffac;color:#46333a;border-radius:50%;backdrop-filter:blur(10px);font-size:17px}.motion-toggle[hidden]{display:none}.motion-toggle:hover{background:white}.motion-toggle:active{transform:scale(.94)} .ribbon-visual-compact{position:relative;aspect-ratio:1.2;border-radius:36px 36px 90px 36px;min-height:400px;background:white}.ribbon-visual-compact .ribbon-stage{width:180%;height:auto;left:-68%;top:auto;bottom:0}.ribbon-visual-compact .ribbon-video,.ribbon-visual-compact .ribbon-poster{height:100%}.ribbon-summary{padding:14px 0 0;background:var(--bg)}.ribbon-summary .impact-strip{margin-top:0;border-radius:0;background:none;box-shadow:none;border:0;border-bottom:1px solid var(--line);padding:30px 0}.ribbon-summary .impact-stat{padding-inline:28px}.ribbon-summary .impact-stat b{font-size:clamp(28px,3.15vw,45px)}.ribbon-summary .impact-stat p{font-size:12px}.ribbon-summary .partners{border:0;padding:26px 0} :root[data-theme=dark] .ribbon-hero{background:#fff;border-radius:0 0 36px 36px}:root[data-theme=dark] .ribbon-hero .ribbon-copy h1{color:#222529}:root[data-theme=dark] .ribbon-hero .ribbon-copy h1 em{color:#e10005}:root[data-theme=dark] .site-header{background:#151216ed;border-bottom-color:#393037}.site-footer .brand{max-width:none} html[dir=rtl] .ribbon-copy{direction:rtl;text-align:right;left:3.5%;right:auto;width:40%}html[dir=rtl] .ribbon-copy h1{font-family:'Cairo',Tahoma,sans-serif;font-size:clamp(32px,4.1vw,73px);letter-spacing:0;line-height:1.4}html[dir=rtl] .ribbon-eyebrow{letter-spacing:0;margin-bottom:6%}html[dir=rtl] .ribbon-intro{margin-bottom:4%}html[dir=rtl] .ribbon-label{direction:rtl}html[dir=rtl] .ribbon-button{gap:20px} .enhanced-motion .ribbon-copy{animation:ribbon-copy-in .9s cubic-bezier(.16,1,.3,1) both}@keyframes ribbon-copy-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}@keyframes ribbon-float{50%{translate:0 -5px}} @media(min-width:701px) and (max-width:1050px){.header-inner{width:calc(100% - 48px);gap:18px}.desktop-nav{gap:17px}.desktop-nav a{font-size:11px}.site-header .brand img{width:119px;height:64px}.header-actions{gap:8px}.header-actions>.btn{padding:12px 14px;font-size:10px}.ribbon-copy h1{font-size:4.5vw}.ribbon-copy{top:8%}.ribbon-label p{font-size:12px}.ribbon-button{min-width:170px;font-size:12px}.ribbon-summary .impact-stat p{font-size:10px}} @media(max-width:700px){ html{scroll-padding-top:88px}.wrap{width:calc(100% - 40px)}.site-header{height:83px}.header-inner{width:calc(100% - 32px);gap:12px}.site-header .brand img{width:117px;height:64px}.header-actions{margin-inline-start:auto;gap:8px}.desktop-nav,.header-actions>.btn{display:none}.menu-toggle{display:inline-grid}.language-switch summary{padding:10px 5px}.icon-button{width:42px;height:42px}.mobile-nav{top:83px;max-height:calc(100svh - 83px);overflow:auto;padding:15px 22px 24px}.mobile-nav a{font-size:16px;min-height:48px;padding:12px 15px;border-radius:12px}.mobile-nav a[aria-current=page]{background:var(--rose);color:var(--red)} .ribbon-hero{aspect-ratio:auto;min-height:0;display:flex;flex-direction:column;padding:0 0 430px;overflow:hidden;background:#fff}.ribbon-copy,html[dir=rtl] .ribbon-copy{position:relative;order:0;left:auto;right:auto;top:auto;width:auto;margin:0;padding:29px 22px 0;text-align:start;direction:inherit}.ribbon-eyebrow,html[dir=rtl] .ribbon-eyebrow{font-size:8px;letter-spacing:.18em;margin:0 0 20px;gap:9px}.ribbon-eyebrow::before{width:23px}.ribbon-copy h1{font-size:clamp(32px,8.75vw,56px);line-height:1.08;letter-spacing:-.045em;margin-bottom:12px}.ribbon-copy h1 em{white-space:normal}.ribbon-intro{font-size:16px;line-height:1.5;margin-bottom:20px}.ribbon-button{font-size:14px;padding:16px 22px;min-height:54px;min-width:209px;gap:27px;border-radius:24px}.ribbon-button svg{width:21px;height:21px}.ribbon-visual{top:auto;height:440px;bottom:0;inset-inline:0}.ribbon-stage{width:790px;height:445px;inset:auto;left:calc(50% - 492px);bottom:-1px}.ribbon-care{top:auto;right:15px;bottom:331px;min-width:0;padding:10px 12px;gap:8px;border-radius:16px;transform:rotate(3deg)}.ribbon-road{top:auto;left:16px;bottom:91px;padding:10px 12px;gap:8px;border-radius:16px;transform:rotate(-4deg)}.ribbon-label>span{width:34px;height:34px}.ribbon-label svg{width:20px;height:20px}.ribbon-label p{font-size:11px}.motion-toggle{right:17px;bottom:12px;width:40px;height:40px}.rider-decal{border-radius:1px}.ribbon-summary{padding:0}.ribbon-summary .impact-strip{padding:4px 0;grid-template-columns:1fr 1fr}.ribbon-summary .impact-stat{padding:21px 14px!important}.ribbon-summary .impact-stat:nth-child(odd){padding-inline-start:0!important}.ribbon-summary .impact-stat b{font-size:31px}.ribbon-summary .impact-stat p{font-size:10px;max-width:140px}.ribbon-summary .partners{gap:22px;padding:24px 0 0}.ribbon-summary .partners p{font-size:10px}.ribbon-summary .partner-word{font-size:23px}.ribbon-summary .partner-word.sap{font-size:17px}.ribbon-visual-compact{min-height:360px;height:360px;aspect-ratio:auto;position:relative;border-radius:28px 28px 66px 28px}.ribbon-visual-compact .ribbon-stage{width:690px;height:389px;left:calc(50% - 430px);top:auto;bottom:0}html[dir=rtl] .ribbon-copy h1{font-size:clamp(33px,9vw,53px);line-height:1.5;letter-spacing:0}html[dir=rtl] .ribbon-eyebrow{letter-spacing:0}html[dir=rtl] .ribbon-intro{margin-bottom:18px}.footer-brand .brand img{width:169px}.footer-brand .brand{background:#f7f7f7} } @media(max-width:700px){.ribbon-hero .ribbon-stage{mask-image:linear-gradient(to bottom,transparent,#000 9%)}.ribbon-care{bottom:374px}.mobile-nav.is-open{display:grid;grid-template-columns:1fr 1fr;gap:6px}} @media(max-width:374px){.site-header .brand img{width:101px;height:56px}.header-inner{width:calc(100% - 26px)}.header-actions{gap:6px}.icon-button{width:40px;height:40px}.ribbon-copy{padding-inline:20px}.ribbon-copy h1{font-size:31px}.ribbon-hero{padding-bottom:399px}.ribbon-visual{height:408px}.ribbon-stage{width:726px;height:409px;left:calc(50% - 452px)}.ribbon-care{bottom:348px}.ribbon-road{bottom:82px}.ribbon-label p{font-size:10px}.ribbon-label>span{width:29px;height:29px}} .brand{background:transparent;border-radius:0;overflow:visible}.brand img,.site-header .brand img{object-fit:contain;height:auto}.site-header .brand{width:140px}.footer-brand .brand{background:transparent}.rider-decal{border-radius:0;box-shadow:none}.decal-box{width:7.4%;left:42.3%;top:39.2%}.decal-tank{width:6%;left:59.9%;top:52.5%}:root[data-theme=dark] .brand{background:#fff;padding:7px 9px;border-radius:11px}.ribbon-hero .rider-decal{background:transparent} .ribbon-copy h1 em,:root[data-theme=dark] .ribbon-hero .ribbon-copy h1 em{color:#d83b09;background:linear-gradient(115deg,#ef6505,#cb2809 85%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.ribbon-eyebrow::before{background:linear-gradient(90deg,#ff9b05,#e9400d)}.ribbon-label{background:linear-gradient(130deg,#ffffffda,#fff4e993 50%,#fff8f0ab);box-shadow:inset 0 2px 2px #fff,inset 0 -1px 2px #b1774826,0 12px 30px #6c362617}.ribbon-label>span{color:#d54406} @media(max-width:1050px) and (min-width:701px){.site-header .brand{width:125px}.site-header .brand img{width:125px}} @media(max-width:700px){.site-header .brand{width:125px}.site-header .brand img{width:125px;height:auto}.footer-brand .brand{background:transparent}:root[data-theme=dark] .footer-brand .brand{background:#fff}} @media(max-width:374px){.site-header .brand,.site-header .brand img{width:109px}} @media(prefers-reduced-motion:reduce){.ribbon-label,.enhanced-motion .ribbon-copy{animation:none}.ribbon-video{transition:none}.ribbon-video.is-playing{opacity:0}.ribbon-poster{opacity:1}} /* Matched day/night photography; the inactive poster stays out of layout and loading. */ .ribbon-stage .poster-night{display:none} :root[data-theme=dark] .ribbon-stage .poster-day{display:none} :root[data-theme=dark] .ribbon-stage .poster-night{display:block} .ribbon-hero .rider-decal,.rider-decal{background:transparent;padding:0;border:0;border-radius:0;box-shadow:none;filter:url(#mission-night-mark);mix-blend-mode:screen;opacity:.94} .decal-box{width:6.4%;left:41.6%;top:39.6%;transform:skew(-11deg,3deg)} .decal-tank{width:5.2%;left:60.2%;top:52.9%;transform:rotate(25deg) skew(6deg,1deg);mask-image:linear-gradient(120deg,#000 15%,#000c 58%,#000 95%)} :root[data-theme=dark] .ribbon-hero,:root[data-theme=dark] .ribbon-visual-compact{background:#0b1018;border-radius:0} :root[data-theme=dark] .ribbon-visual-compact{border-radius:36px 36px 90px 36px} :root[data-theme=dark] .ribbon-hero .ribbon-copy h1{color:#f7f8fa} :root[data-theme=dark] .ribbon-hero .ribbon-copy h1 em{color:#ff9b43;background:linear-gradient(115deg,#ffaf47,#ff702c 85%);background-clip:text;-webkit-background-clip:text} :root[data-theme=dark] .ribbon-intro{color:#bac3cf} :root[data-theme=dark] .ribbon-eyebrow{color:#abb7c7} :root[data-theme=dark] .ribbon-label{background:linear-gradient(130deg,#303c4eee,#182330ee 60%,#283140eb);border-color:#ffbc7652;box-shadow:inset 0 1px 1px #ffffff38,inset 0 -1px 2px #0008,0 12px 30px #0004} :root[data-theme=dark] .ribbon-label>span{color:#ffad68;background:linear-gradient(150deg,#fff2,#ffffff09);box-shadow:inset 0 1px 1px #ffffff38} :root[data-theme=dark] .ribbon-label p{color:#f4f7fa} :root[data-theme=dark] .motion-toggle{background:#1b273be6;border-color:#6874877d;color:#fff;box-shadow:inset 0 1px 1px #ffffff26,0 2px 12px #0004} :root[data-theme=dark] .motion-toggle:hover{background:#303b50} @media(max-width:700px){:root[data-theme=dark] .ribbon-visual-compact{border-radius:28px 28px 66px 28px}.rider-decal{border-radius:2px}} .brand-filter-defs{position:absolute;pointer-events:none;overflow:hidden} :root[data-theme=dark] .brand,:root[data-theme=dark] .footer-brand .brand{background:transparent;padding:0;border-radius:0} :root[data-theme=dark] .brand img{filter:url(#mission-night-mark)} /* Reveal only a decoded video frame; opacity crossfades can expose an empty GPU surface. */ .ribbon-video{transition:none} .ribbon-stage{isolation:isolate} /* Keep the subtitle legible as the ribbon moves behind the fixed camera. */ .ribbon-intro{width:fit-content;max-width:100%;padding:3px 10px;border-radius:10px;background:#ffffffd9;color:#535963} :root[data-theme=dark] .ribbon-intro{background:#0b1018de;color:#d5dce6} html[dir=rtl] .ribbon-intro{margin-inline-start:0;margin-inline-end:auto} @media(min-width:701px){html[dir=rtl] .ribbon-copy{width:34.5%}} @media(max-width:700px){.ribbon-intro{padding:0;background:none}:root[data-theme=dark] .ribbon-intro{background:none}} /* ribbon-pages.css */ /* Ribbon Motion — the supporting pages share the hero's white, logo orange and glass. */ .section{padding-block:104px} .section-head{margin-bottom:40px;gap:32px} .section-head h2,.people-copy h2,.section .split>div>h2{font-size:clamp(32px,3.4vw,50px);line-height:1.12;letter-spacing:-2px;text-wrap:balance} .section-head .eyebrow,.people-copy>.eyebrow{margin-bottom:17px} .section-head>.arrow-link{padding-block:12px} .section p{line-height:1.85} .section .lead,.people-copy>.lead{font-size:15px;line-height:1.9} .page-heading{position:relative;isolation:isolate;overflow:hidden;padding-block:35px 68px;border-bottom:1px solid var(--line);background:var(--bg)} .page-heading::before{content:"";position:absolute;z-index:-1;inset-block-start:-200px;inset-inline-end:-140px;width:510px;height:610px;border:76px solid #ef5908;border-inline-start-color:#ff8a2b;border-block-end-color:#bc3505;border-radius:49% 35% 53% 37%;transform:rotate(38deg);box-shadow:inset 0 2px 3px #ffd191,0 2px 2px #ffffff80;opacity:.97;pointer-events:none} .page-heading::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,var(--bg) 51%,transparent 83%);pointer-events:none} .page-heading>.wrap{position:relative} .page-heading .breadcrumb{font-size:11px;gap:10px;align-items:center;margin-bottom:43px;flex-wrap:wrap} .page-heading .breadcrumb span{margin-inline:0} .page-heading .breadcrumb a{transition:color .2s} .page-heading .breadcrumb a:hover{color:var(--red)} .page-heading .eyebrow{font-size:10px;letter-spacing:2.3px;margin-bottom:19px;color:var(--red)} .page-heading h1{font-size:clamp(46px,5.4vw,80px);line-height:1.06;letter-spacing:-3.8px;max-width:16ch;margin-bottom:25px;text-wrap:balance} .page-heading .lead{font-size:16px;line-height:1.85;max-width:min(620px,65%);margin-bottom:0} .page-heading+.section{padding-top:72px} .page-heading~.section:has(.cta-panel){padding-top:24px} .split{gap:76px;grid-template-columns:1fr 1fr} .split>*{min-width:0} .split>.photo{min-height:390px;max-height:530px;aspect-ratio:1.07;object-fit:cover;border-radius:30px 90px 30px 30px;box-shadow:0 22px 44px #20232b0a} .split>.photo:first-child{border-radius:80px 28px 28px 28px} .split .lead+p{font-size:14px;max-width:560px} .split>div>h3{font-size:16px;letter-spacing:-.25px;margin-block:29px 12px} .chips{gap:9px;margin-block:26px 30px} .chip{font-size:11px;font-weight:700;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:9px 15px;box-shadow:inset 0 1px 0 #fff} .section-tint{background:linear-gradient(135deg,#fffcf8,var(--surface2));border-block:1px solid var(--line)} .section-spacer{margin-top:58px} /* Numbers stay quiet and confident underneath the full-bleed rider. */ .impact-strip{background:var(--surface);border:0;border-block:1px solid var(--line);border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:38px 0;margin-top:0} .impact-stat{padding-inline:35px;border-color:var(--line)} .impact-stat:first-child{padding-inline-start:0} .impact-stat b{font-size:clamp(32px,3.15vw,47px);line-height:1.1;letter-spacing:-2.2px;color:var(--ink)} .impact-stat b span{color:var(--red)} .impact-stat p{font-size:11px;line-height:1.6;margin-top:12px} .partners{gap:58px;padding:31px 0 0;justify-content:center} .partners p{font-size:10px;max-width:160px} .partners .partner-word{color:var(--ink);opacity:.65;font-size:25px} .partners .partner-word.sap{font-size:19px} /* Real company photography, with room for each service to breathe. */ .service-grid{gap:25px;align-items:stretch} .service-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:0 9px 28px #1e222905;perspective:none;transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s} .service-card:hover,.js-motion .service-card.visible:hover{transform:translateY(-7px);border-color:var(--line);box-shadow:0 22px 45px #54250112} .service-image{height:250px;flex-shrink:0;background:var(--surface2)} .service-image img{height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)} .service-card:hover .service-image img{transform:scale(1.045)} .service-number{width:37px;height:37px;border-radius:12px;top:19px;inset-inline-start:19px;font-size:10px;background:#ffffffcc;border-color:#fff;box-shadow:inset 0 1px 2px #fff,0 5px 16px #0001} .service-body,.service-card-body{display:flex;flex-direction:column;flex:1;padding:29px 29px 25px} .service-body h3,.service-card-body :is(h2,h3){font-size:23px;letter-spacing:-.7px;line-height:1.28;margin-bottom:12px} .service-body p,.service-card-body p{font-size:13px;line-height:1.8;min-height:0;margin-bottom:28px} .service-card-body>.icon-box{width:41px;height:41px;border-radius:13px;margin-bottom:18px} .service-card .arrow-link,.service-bottom{margin-top:auto} .service-bottom{padding-top:18px;font-size:11px;border-top-color:var(--line)} .service-card-body>.arrow-link{border-top:1px solid var(--line);padding-top:20px;justify-content:space-between} .round-arrow{width:37px;height:37px;border-radius:12px;border-color:var(--line);background:var(--surface)} .service-card:hover .round-arrow{background:#ca3c04;border-color:#ffb67999;transform:translate(1px,-1px);color:#fff;box-shadow:inset 0 1px 1px #ffffff88,0 5px 14px #d84a002b} .people-section{padding:14px 0 112px} .people-grid{grid-template-columns:1.08fr 1fr;gap:80px} .people-image{position:relative;padding:0 0 23px 20px;isolation:isolate} .people-image::before{content:"";position:absolute;z-index:-1;inset:30px 26px 0 0;border:1px solid #ed660b38;border-radius:70px 24px 24px 24px;pointer-events:none} .people-image>img{height:485px;object-fit:cover;border-radius:24px 85px 24px 24px} .photo-note{left:39px;right:19px;bottom:43px;border-radius:18px;padding:18px 21px;background:linear-gradient(125deg,#ffffffec,#ffffffa3);box-shadow:inset 0 1px 1px #fff,0 10px 20px #29111612;border:1px solid #ffffffed} .photo-note strong{font-size:12px} .photo-note span{font-size:10px;margin-top:2px} .people-copy h2{max-width:500px;margin-bottom:22px} .people-copy>.lead{margin-bottom:25px} .benefit-row{padding-block:18px;gap:16px} .benefit-row>svg{margin-top:2px;width:21px;height:21px} .benefit-row h3{font-size:14px;margin-bottom:5px} .benefit-row p{font-size:12px;line-height:1.75} .people-copy .arrow-link{margin-top:24px} /* A single flowing shape gives the process its own silhouette. */ .process-panel{padding:59px 54px 56px;border-radius:34px 85px 34px 34px;background:var(--surface);border:1px solid var(--line);box-shadow:0 16px 40px #241c2105;isolation:isolate;overflow:hidden} .process-panel::after{content:"";position:absolute;z-index:-1;width:420px;height:260px;inset-inline-end:-145px;top:-175px;border:42px solid #ec5908;border-radius:50%;transform:rotate(-26deg);box-shadow:inset 0 1px 2px #ffce93;pointer-events:none} .process-panel .section-head{align-items:center;margin-bottom:43px} .process-panel h2{font-size:clamp(31px,3.3vw,47px);line-height:1.14;max-width:590px;letter-spacing:-1.8px;text-wrap:balance} .process-panel .section-head>svg{color:var(--red);width:42px;height:42px;margin-inline-end:18px} .steps{gap:30px;margin:0} .step{border-top:1px solid var(--line);padding-top:23px} .step-number,.step>span:first-child{display:grid!important;place-items:center;width:38px;height:38px;margin-bottom:23px;border-radius:12px;font-size:11px;color:var(--red);background:linear-gradient(130deg,#fff,#ffe5c9);border:1px solid #ffd9b0;box-shadow:inset 0 1px 1px #fff,0 4px 10px #a747000b} .step h3{font-size:17px;letter-spacing:-.35px;line-height:1.35;margin-bottom:10px} .step p{font-size:12px;line-height:1.85} .cta-panel{padding:63px 59px;border-radius:30px 75px 30px 30px;margin-block:96px;background:linear-gradient(116deg,#ce4004,#ba2d03 64%,#962004);box-shadow:inset 0 2px 2px #ffb668,0 21px 40px #c24b001c;gap:40px} .cta-panel::before{width:760px;height:290px;right:-250px;top:-158px;border:52px solid #ffffff17;border-radius:50%;transform:rotate(-27deg);box-shadow:inset 0 2px 1px #ffffff2e} .cta-panel::after{width:580px;height:280px;right:-185px;bottom:-192px;border:36px solid #85260038;border-radius:50%;transform:rotate(-25deg)} .cta-panel>div{max-width:750px} .cta-panel h2{font-size:clamp(30px,3.1vw,45px);line-height:1.14;letter-spacing:-1.7px;margin-bottom:14px;max-width:670px;text-wrap:balance;color:#fff} .cta-panel .eyebrow{color:#fff;font-size:9px;letter-spacing:2px;margin-bottom:17px;opacity:.75} .cta-panel p{font-size:14px;line-height:1.8;color:#fff;opacity:.82;max-width:580px} .cta-panel .btn{min-width:160px;box-shadow:inset 0 1px 1px #fffc,0 9px 22px #78250026} .section .cta-panel{margin:0} /* Inner-page details remain practical and comfortably readable. */ .feature-grid{gap:24px} .feature-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:23px;padding:33px;box-shadow:0 8px 22px #1b171a03;transition:transform .35s,box-shadow .35s} .feature-card:hover,.js-motion .feature-card.visible:hover{transform:translateY(-4px);box-shadow:0 16px 35px #24202409} .feature-card h3{font-size:20px;letter-spacing:-.55px;line-height:1.3;margin-block:24px 12px} .feature-card p{font-size:13px;line-height:1.85} .feature-card>h2{font-size:28px;line-height:1.2;letter-spacing:-.9px;margin-block:24px 14px} .feature-card>.btn{margin-top:27px} .icon-box{width:49px;height:49px;border-radius:15px;border:1px solid #ffd0a2;background:linear-gradient(135deg,#fff8ee,#ffe9d0);color:#bf3b03;box-shadow:inset 0 1px 2px #fff,0 6px 14px #d45d0010} .icon-box svg{width:22px;height:22px} .about-values h2,.section .split>.about-values>h2{font-size:clamp(24px,2.35vw,33px);line-height:1.45;letter-spacing:-1px;font-weight:650;text-wrap:pretty} .about-values>h3{padding-top:28px;border-top:1px solid var(--line);color:var(--red)} .about-values>p{font-size:14px} .form-split{grid-template-columns:.83fr 1.17fr;align-items:start;gap:76px} .feature-stack .feature-grid{gap:0} .feature-stack .feature-card{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none!important;box-shadow:none!important;padding:21px 0;grid-template-columns:43px 1fr;column-gap:17px} .feature-stack .feature-card:hover{transform:none} .feature-stack .feature-card .icon-box{width:43px;height:43px;border-radius:13px} .feature-stack .feature-card h3{font-size:16px;margin-bottom:7px} .feature-stack .feature-card p{font-size:12px;line-height:1.8} .section .split>div>h2.form-title{font-size:27px;line-height:1.3;letter-spacing:-.8px;margin-bottom:22px} .mission-form{padding:34px;border:1px solid var(--line);border-radius:26px;background:var(--surface);box-shadow:0 19px 50px #251e2507;position:relative;overflow:hidden} .mission-form::before{content:"";position:absolute;height:3px;top:0;inset-inline:34px;background:linear-gradient(90deg,#ed6108,transparent);pointer-events:none} .form-grid{gap:23px 20px} .field{gap:9px;font-size:12px} .field input,.field select,.field textarea{border-radius:12px;font-size:13px;padding:14px 15px;border-color:var(--line);background:var(--surface2)} .field textarea{min-height:132px} .form-note{font-size:11px;line-height:1.75} .review-card{padding:43px;background:var(--surface);border-color:var(--line);border-radius:26px;box-shadow:0 15px 42px #432b1107} .review-card .eyebrow{margin-block:25px 16px} .review-card h2{font-size:37px;letter-spacing:-1.5px;line-height:1.15} .review-card .lead{font-size:14px} .review-card>.btn{margin-top:12px} .contact-grid{gap:24px} .contact-card{border-radius:25px;background:var(--surface);border:1px solid var(--line);padding:33px;display:flex;flex-direction:column;box-shadow:0 10px 30px #432b1105;min-width:0} .contact-card h2{font-size:25px;letter-spacing:-.7px;line-height:1.25;margin-block:25px 16px} .contact-card h3{font-size:12px;margin-top:20px} .contact-card p{font-size:13px;line-height:1.8} .contact-card a{font-size:12px;line-height:1.7} .contact-card>.arrow-link{margin-top:auto;padding-top:21px;border-top:1px solid var(--line);align-items:center;justify-content:space-between} .contact-card>.contact-detail{font-size:14px} .contact-card .social-links{gap:13px} .metric{border-radius:22px;background:var(--surface);padding:28px} .metric strong,.metric b{font-size:35px;line-height:1.2;margin-bottom:8px} :root[data-theme=dark] .page-heading::after{background:linear-gradient(90deg,var(--bg) 51%,transparent 83%)} :root[data-theme=dark] .section-tint{background:linear-gradient(140deg,#1d140e,var(--surface2))} :root[data-theme=dark] .impact-strip,:root[data-theme=dark] .service-card,:root[data-theme=dark] .feature-card,:root[data-theme=dark] .mission-form,:root[data-theme=dark] .process-panel{background:var(--surface);border-color:var(--line);box-shadow:0 13px 35px #0002} :root[data-theme=dark] .partners .partner-word{color:var(--ink)} :root[data-theme=dark] .chip{box-shadow:inset 0 1px 0 #ffffff0d} :root[data-theme=dark] .icon-box,:root[data-theme=dark] .step-number,:root[data-theme=dark] .step>span:first-child{background:linear-gradient(135deg,#85470d31,#b75b1019);border-color:#fa9b4e4a;box-shadow:inset 0 1px 1px #ffffff1c;color:#ffa36b} :root[data-theme=dark] .photo-note{background:linear-gradient(125deg,#202129f2,#24212ab8);border-color:#ffffff41;color:#fff;box-shadow:inset 0 1px 0 #ffffff3b,0 10px 30px #0003} :root[data-theme=dark] .photo-note span{color:#d0c7ca} :root[data-theme=dark] .photo-note svg{color:#ffaa70} :root[data-theme=dark] .people-image::before{border-color:#f4893152} :root[data-theme=dark] .process-panel .step{border-color:var(--line)} :root[data-theme=dark] .service-card .service-bottom{border-color:var(--line)} html[dir=rtl] .page-heading::before{transform:rotate(-38deg)} html[dir=rtl] .page-heading::after{background:linear-gradient(270deg,var(--bg) 51%,transparent 83%)} html[dir=rtl] .page-heading h1{font-size:clamp(43px,4.75vw,69px);line-height:1.45;letter-spacing:0;max-width:20ch} html[dir=rtl] .page-heading .eyebrow,html[dir=rtl] .cta-panel .eyebrow{letter-spacing:0} html[dir=rtl] .section h2,html[dir=rtl] .section h3,html[dir=rtl] .people-section h3{letter-spacing:0;line-height:1.55} html[dir=rtl] .section-head h2,html[dir=rtl] .people-copy h2,html[dir=rtl] .section .split>div>h2{line-height:1.5;letter-spacing:0} html[dir=rtl] .about-values h2,html[dir=rtl] .section .split>.about-values>h2{font-size:30px;line-height:1.65;letter-spacing:0} html[dir=rtl] .service-body h3,html[dir=rtl] .service-card-body :is(h2,h3){font-size:22px;line-height:1.65;letter-spacing:0} html[dir=rtl] .cta-panel h2,html[dir=rtl] .process-panel h2{line-height:1.5;letter-spacing:0} html[dir=rtl] .people-image{padding:0 20px 23px 0} html[dir=rtl] .photo-note{left:19px;right:39px} html[dir=rtl] .service-card:hover .round-arrow{transform:translate(-1px,-1px)} @media(min-width:1600px){.section{padding-block:120px}.people-section{padding-bottom:125px}.page-heading{padding-bottom:83px}.page-heading::before{inset-inline-end:0}.service-image{height:280px}} @media(max-width:1100px){ .section{padding-block:78px}.split,.people-grid,.form-split{gap:42px}.page-heading::before{inset-inline-end:-250px}.page-heading .lead{max-width:65%} .service-grid{gap:18px}.service-image{height:215px}.service-body,.service-card-body{padding:24px}.service-body h3,.service-card-body :is(h2,h3){font-size:21px}.service-body p,.service-card-body p{font-size:12px} .feature-card,.contact-card{padding:26px}.feature-grid,.contact-grid{gap:18px}.contact-card a{font-size:11px}.contact-card>.contact-detail{font-size:12px}.contact-card h2{font-size:23px} .people-image>img{height:445px}.people-section{padding-bottom:84px}.process-panel{padding:44px}.steps{gap:24px}.cta-panel{padding:49px 44px;margin-block:78px}.cta-panel h2{font-size:37px}.cta-panel p{font-size:13px} .impact-stat{padding-inline:25px}.impact-stat b{font-size:36px}.review-card{padding:30px}.mission-form{padding:27px} } @media(max-width:850px){ .section{padding-block:65px}.page-heading{padding-bottom:53px}.page-heading h1{font-size:59px;letter-spacing:-2.8px}.page-heading .lead{font-size:14px}.page-heading::before{inset-inline-end:-315px;opacity:.75} .page-heading+.section{padding-top:55px}.section-head h2,.people-copy h2,.section .split>div>h2{font-size:37px;letter-spacing:-1.6px}.split,.people-grid{gap:32px}.split>.photo{min-height:330px;max-height:450px;border-top-right-radius:64px} .service-body,.service-card-body{padding:22px}.service-image{height:180px}.service-body h3,.service-card-body :is(h2,h3){font-size:20px}.service-bottom{font-size:10px}.service-card-body>.arrow-link{font-size:11px}.service-body p,.service-card-body p{font-size:12px} .feature-grid{gap:14px}.feature-card{padding:23px}.feature-card h3{font-size:18px}.feature-card p{font-size:12px}.feature-card .icon-box{width:44px;height:44px}.people-grid{grid-template-columns:1fr 1fr}.people-image{padding-left:10px}.people-image>img{height:420px}.photo-note{left:23px;right:13px;bottom:36px;padding:14px}.photo-note strong{font-size:10px}.photo-note span{font-size:9px} .people-copy>.lead{font-size:13px}.benefit-row{gap:12px;padding-block:14px}.benefit-row p{font-size:11px}.process-panel{padding:37px}.process-panel h2{font-size:35px}.step h3{font-size:15px}.step p{font-size:11px}.cta-panel{padding:40px;margin-block:65px;gap:25px}.cta-panel h2{font-size:32px}.cta-panel .btn{min-width:145px} .contact-grid{gap:15px}.contact-card{padding:23px}.contact-card h2{font-size:21px}.contact-card>.contact-detail{font-size:11px}.contact-card p{font-size:12px}.contact-card .social-links{gap:7px}.form-split{gap:30px}.form-grid{gap:18px 14px}.field input,.field select,.field textarea{font-size:12px;padding:12px}.mission-form{padding:24px}.review-card h2{font-size:31px} .impact-stat b{font-size:30px}.impact-stat{padding-inline:22px}.impact-stat p{font-size:10px}.partners{gap:35px}.partners .partner-word{font-size:22px}.partners .partner-word.sap{font-size:17px} html[dir=rtl] .about-values h2,html[dir=rtl] .section .split>.about-values>h2{font-size:25px} } @media(max-width:700px){ .section{padding-block:57px}.section-head{margin-bottom:28px;gap:18px}.section-head h2,.people-copy h2,.section .split>div>h2{font-size:34px;letter-spacing:-1.5px;line-height:1.2} .page-heading{padding-block:26px 40px}.page-heading::before{width:330px;height:420px;border-width:49px;inset-inline-end:-234px;inset-block-start:-131px;opacity:.28}.page-heading::after{background:linear-gradient(90deg,var(--bg) 35%,transparent)} .page-heading .breadcrumb{font-size:10px;margin-bottom:30px;gap:8px}.page-heading .eyebrow{font-size:9px;letter-spacing:1.7px;margin-bottom:15px}.page-heading h1{font-size:clamp(40px,10.3vw,58px);line-height:1.08;letter-spacing:-2.2px;max-width:16ch;margin-bottom:20px}.page-heading .lead{font-size:14px;max-width:95%;line-height:1.85}.page-heading+.section{padding-top:42px}.page-heading~.section:has(.cta-panel){padding-top:10px} .split,.people-grid,.form-split{grid-template-columns:1fr;gap:32px}.split>.photo{min-height:280px;max-height:415px;aspect-ratio:1.17;border-radius:22px 62px 22px 22px}.split>.photo:first-child{border-radius:60px 22px 22px 22px}.section .lead{font-size:14px}.split .lead+p{font-size:13px}.chips{gap:8px;margin-block:22px 25px}.chip{font-size:10px;padding:8px 12px;border-radius:11px}.split>div>h3{margin-block:23px 11px} .impact-strip{grid-template-columns:1fr 1fr;padding:4px 0}.impact-stat{padding:24px 15px!important}.impact-stat:nth-child(odd){padding-inline-start:0!important}.impact-stat:nth-child(even){padding-inline-start:23px!important}.impact-stat b{font-size:34px;letter-spacing:-1.5px}.impact-stat p{font-size:10px;margin-top:8px}.partners{padding-top:24px;gap:18px;justify-content:space-between}.partners p{font-size:10px;width:100%;max-width:none}.partners .partner-word{font-size:23px}.partners .partner-word.sap{font-size:17px} .service-grid{grid-template-columns:1fr;gap:23px}.service-card{border-radius:22px}.service-image{height:auto;aspect-ratio:1.55}.service-body,.service-card-body{padding:27px 25px 23px}.service-body h3,.service-card-body :is(h2,h3){font-size:24px}.service-body p,.service-card-body p{font-size:13px;margin-bottom:25px}.service-number{top:17px;inset-inline-start:17px}.service-bottom{font-size:12px}.service-card-body>.arrow-link{font-size:12px}.service-card-body>.icon-box{margin-bottom:17px} .people-section{padding:4px 0 61px}.people-grid{gap:35px}.people-image{padding:0 0 17px 12px}.people-image::before{inset:25px 25px 0 0;border-radius:52px 22px 22px 22px}.people-image>img{height:365px;border-radius:22px 65px 22px 22px}.photo-note{left:28px;right:16px;bottom:33px;padding:16px;border-radius:16px}.photo-note strong{font-size:12px}.photo-note span{font-size:10px}.people-copy h2{margin-bottom:20px}.people-copy>.lead{font-size:14px}.benefit-row{padding-block:17px}.benefit-row h3{font-size:14px}.benefit-row p{font-size:12px}.people-copy .arrow-link{margin-top:20px} .process-panel{padding:32px 25px;border-radius:25px 54px 25px 25px}.process-panel::after{width:270px;height:180px;inset-inline-end:-145px;top:-150px;border-width:28px}.process-panel h2{font-size:32px;line-height:1.2;letter-spacing:-1.3px}.process-panel .section-head{margin-bottom:31px;align-items:start}.process-panel .section-head>svg{display:none}.steps{grid-template-columns:1fr 1fr;gap:29px 23px}.step{padding-top:20px}.step-number,.step>span:first-child{width:34px;height:34px;font-size:10px;margin-bottom:18px}.step h3{font-size:16px}.step p{font-size:11px;line-height:1.85} .cta-panel{padding:35px 27px;margin-block:59px;border-radius:25px 54px 25px 25px;gap:26px;flex-direction:column;align-items:start}.cta-panel h2{font-size:33px;line-height:1.15;letter-spacing:-1.4px}.cta-panel p{font-size:13px;line-height:1.8}.cta-panel::before{right:-425px;top:-175px}.cta-panel::after{right:-240px;bottom:-230px}.cta-panel .btn{min-width:165px}.cta-panel .eyebrow{font-size:9px;margin-bottom:14px} .feature-grid,.contact-grid{grid-template-columns:1fr;gap:18px}.feature-card{padding:28px;border-radius:22px}.feature-card h3{font-size:21px;margin-top:23px}.feature-card p{font-size:13px}.feature-card>h2{font-size:27px}.feature-card .icon-box{width:48px;height:48px}.feature-card>.btn{margin-top:24px}.section-spacer{margin-top:39px}.about-values h2,.section .split>.about-values>h2{font-size:25px;line-height:1.5;letter-spacing:-.6px}.about-values>p{font-size:13px}.about-values>h3{padding-top:24px} .form-split{gap:39px}.section .split>div>h2.form-title{font-size:26px}.mission-form{padding:26px 23px;border-radius:23px}.form-grid{grid-template-columns:1fr;gap:21px}.field{font-size:12px}.field input,.field select,.field textarea{padding:14px;font-size:13px}.mission-form::before{inset-inline:23px}.feature-stack .feature-card{padding-block:19px}.feature-stack .feature-card p{font-size:12px}.review-card{padding:29px 25px;border-radius:23px}.review-card h2{font-size:33px}.review-card .lead{font-size:14px}.contact-card{padding:28px;border-radius:23px}.contact-card h2{font-size:25px;margin-block:23px 15px}.contact-card p,.contact-card a{font-size:13px}.contact-card>.contact-detail{font-size:15px}.contact-card>.arrow-link{margin-top:9px;padding-top:21px}.contact-card .social-links{gap:20px}.metric{padding:23px}.metric strong,.metric b{font-size:30px} html[dir=rtl] .page-heading::after{background:linear-gradient(270deg,var(--bg) 35%,transparent)}html[dir=rtl] .page-heading h1{font-size:clamp(35px,9.5vw,49px);line-height:1.5;max-width:19ch}html[dir=rtl] .section-head h2,html[dir=rtl] .people-copy h2,html[dir=rtl] .section .split>div>h2{font-size:31px}html[dir=rtl] .section .split>.about-values>h2{font-size:25px;line-height:1.7}html[dir=rtl] .service-body h3,html[dir=rtl] .service-card-body :is(h2,h3){font-size:23px}html[dir=rtl] .people-image{padding:0 12px 17px 0}html[dir=rtl] .photo-note{left:16px;right:28px} } @media(max-width:380px){.process-panel{padding:29px 22px}.steps{gap:26px 18px}.step h3{font-size:14px}.step p{font-size:10px}.impact-stat b{font-size:30px}.impact-stat p{font-size:9px}.contact-card{padding:25px}.section-head h2,.people-copy h2,.section .split>div>h2{font-size:31px}.page-heading h1{font-size:38px}} @media(prefers-reduced-motion:reduce){.service-card,.feature-card,.service-image img{transition:none!important}.service-card:hover,.feature-card:hover,.service-card:hover .service-image img,.js-motion .service-card.visible:hover,.js-motion .feature-card.visible:hover{transform:none!important}} /* brand-polish.css */ /* Final brand finish: the orange-to-red spectrum of the Mission emblem. */ :root{--brand-amber:#ff8b28;--brand-orange:#f3660b;--brand-vermilion:#db4008;--brand-deep:#b92e06;--red:#cb3b05;--red-dark:#a92a04;--rose:#fff1e3;--surface2:#faf7f3;--muted:#737171} :root[data-theme=dark]{--brand-amber:#ffab58;--brand-orange:#ff8641;--brand-vermilion:#f26734;--brand-deep:#dc4c20;--red:#ff965b;--red-dark:#ffad7e;--rose:#362318;--surface2:#211c19;--muted:#beb6af} .page-heading h1{font-weight:800;letter-spacing:-.045em;text-wrap:balance} .section-head h2,.people-copy h2{font-weight:780;letter-spacing:-.045em;text-wrap:balance} .section .split>div>h2{font-weight:750;letter-spacing:-.04em} .section .split>.about-values>h2{font-weight:650;letter-spacing:-.02em} .service-body h3,.service-card-body :is(h2,h3),.feature-card h3{font-weight:750;letter-spacing:-.035em} .section .eyebrow,.people-section .eyebrow,.process-panel .eyebrow,.page-heading .eyebrow{font-size:10px;font-weight:800;letter-spacing:.19em;color:var(--red)} .section .eyebrow::before,.people-section .eyebrow::before,.process-panel .eyebrow::before,.page-heading .eyebrow::before{width:28px;border-radius:2px;background:linear-gradient(90deg,var(--brand-amber),var(--brand-vermilion))} .section .lead,.people-copy>.lead{font-weight:500;color:var(--muted)} .section-head>.arrow-link,.people-copy>.arrow-link{font-weight:750;color:var(--red);font-size:12px;gap:14px} .section-head>.arrow-link svg,.people-copy>.arrow-link svg{width:19px;height:19px} .impact-stat b{font-weight:780;letter-spacing:-.055em} .impact-stat b span{color:var(--brand-orange)} .impact-stat p{font-weight:550} .service-number{color:#a83a09;font-variant-numeric:tabular-nums;letter-spacing:.06em} .service-bottom,.service-card-body>.arrow-link{font-weight:750} .benefit-row>svg{color:var(--red)} .step-number,.step>span:first-child{font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.04em} .cta-panel h2{font-weight:780;letter-spacing:-.04em} .cta-panel .eyebrow{color:#fff;opacity:.88} .cta-panel .eyebrow::before{background:#ffb86c} .cta-panel p{opacity:.9} /* Bright glass at the edges; deep vermilion under the white labels. */ .btn{font-weight:750;letter-spacing:-.02em;border-radius:23px;transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s,background .28s,border-color .28s} .btn-primary,.btn-primary:hover{color:#fff;background:radial-gradient(ellipse at var(--pointer-x,35%) -35%,#ffbc64b0 0,transparent 60%),linear-gradient(165deg,#ee670c -30%,#cc3a04 49%,#b32206 100%);border:1px solid #f9934fc4;box-shadow:inset 0 2px 2px #ffe0b9c9,inset 0 -2px 3px #7f23005e,0 8px 21px #d84b0726} .btn-primary:hover{transform:translateY(-3px);box-shadow:inset 0 2px 2px #ffeacbd9,inset 0 -2px 4px #7f230054,0 16px 30px #cb460c36} .btn-primary:active{transform:translateY(2px) scale(.966);box-shadow:inset 0 3px 9px #6e200073,0 2px 5px #c34e001c;transition-duration:.1s} .btn-secondary{color:var(--ink);background:radial-gradient(ellipse at var(--pointer-x,30%) 0,#fff 0,transparent 75%),linear-gradient(145deg,#ffffffeb,#fff4e8b3);border:1px solid #fff;box-shadow:inset 0 1px 2px #fff,inset 0 -1px 2px #dfcbb473,0 0 0 1px #ddc5ab6e,0 7px 17px #4527110b} .btn-secondary:hover{background:linear-gradient(145deg,#fff,#fff1dfdd);border-color:#fff;box-shadow:inset 0 1px 2px #fff,0 0 0 1px #e6ac787d,0 13px 24px #6c381614} .btn-secondary:active{transform:translateY(2px) scale(.966);box-shadow:inset 0 3px 8px #aa733b21,0 2px 5px #00000008} :where(.section,.people-section,.cta-panel,.review-card,.form-grid) .btn{font-size:13px;min-height:55px;padding:17px 25px} .btn::before{background:linear-gradient(115deg,transparent 10%,#fff5df38 35%,#fff1cf08 43%,transparent 65%)} .icon-button{border-radius:16px} .icon-button:hover{border-color:#ffc692;box-shadow:inset 0 1px 1px #fff,0 0 0 1px #eda65d4d,0 8px 20px #95491612} .round-arrow{border-radius:13px;background:linear-gradient(145deg,#fff,#fff5e9);border-color:#efdfce;color:#bc3f09;box-shadow:inset 0 1px 1px #fff} .service-card:hover .round-arrow{background:linear-gradient(145deg,#f4841c,#d34a06 55%,#bb2f04);box-shadow:inset 0 1px 2px #ffe0b9,0 6px 14px #d34b072b;border-color:#f3b07b} .cta-panel .btn,.cta-panel .btn:hover{color:#fff;background:linear-gradient(145deg,#ffffff39,#ffcda018);border:1px solid #ffd9bca8;box-shadow:inset 0 1px 2px #fff4dfb8,inset 0 -1px 2px #75240528,0 10px 22px #76200421} .cta-panel .btn:hover{background:linear-gradient(145deg,#ffffff4f,#ffcda026);transform:translateY(-3px)} .cta-panel .btn:active{transform:translateY(2px) scale(.966);box-shadow:inset 0 3px 8px #73230245,0 2px 5px #7527041c} .chip{color:var(--ink);background:linear-gradient(145deg,var(--surface),var(--surface2));border-color:var(--line);font-weight:650} .mission-form::before{height:3px;background:linear-gradient(90deg,var(--brand-amber),var(--brand-vermilion) 60%,transparent)} .field{font-weight:750} .field input:focus,.field textarea:focus,.field select:focus{border-color:var(--brand-orange);box-shadow:0 0 0 4px #f7800914} .chat-float{background:linear-gradient(145deg,#f88828,#dc510c 46%,#c33208);border-color:#ffa86b;color:#fff;box-shadow:inset 0 1px 2px #ffdcabc2,0 7px 23px #cf470c36} :root[data-theme=dark] .btn-secondary{color:var(--ink);background:radial-gradient(ellipse at var(--pointer-x,30%) 0,#70523c42,transparent 75%),linear-gradient(145deg,#302923eb,#221c17de);border-color:#76564163;box-shadow:inset 0 1px 1px #ffcf9c21,inset 0 -1px 2px #0004,0 8px 20px #0003} :root[data-theme=dark] .btn-secondary:hover{background:linear-gradient(145deg,#3a2b21,#2c2119);border-color:#a96e417a;box-shadow:inset 0 1px 2px #ffc99124,0 12px 23px #0003} :root[data-theme=dark] .icon-button:hover{border-color:#e99c605c;box-shadow:inset 0 1px 1px #fff1db29,0 8px 20px #0003} :root[data-theme=dark] .round-arrow{background:linear-gradient(145deg,#34281f,#251c17);border-color:#654831;color:#ffae70;box-shadow:inset 0 1px 1px #ffc99124} :root[data-theme=dark] .service-card:hover .round-arrow{background:linear-gradient(145deg,#ed791c,#ca3f06);color:#fff} :root[data-theme=dark] .service-number{color:#a83a09} html[dir=rtl] .page-heading h1,html[dir=rtl] .section h2,html[dir=rtl] .section h3,html[dir=rtl] .people-copy h2,html[dir=rtl] .people-copy h3,html[dir=rtl] .btn{letter-spacing:0} html[dir=rtl] .section .eyebrow,html[dir=rtl] .people-section .eyebrow,html[dir=rtl] .process-panel .eyebrow,html[dir=rtl] .page-heading .eyebrow{letter-spacing:0;font-size:11px} :root[data-theme=dark][dir=rtl] .page-heading::after{background:linear-gradient(270deg,var(--bg) 51%,transparent 83%)} html[dir=rtl] .mission-form::before{background:linear-gradient(270deg,var(--brand-amber),var(--brand-vermilion) 60%,transparent)} @media(max-width:700px){ .mobile-nav{position:absolute;inset-inline:0;top:83px;border-bottom:1px solid var(--line);box-shadow:0 20px 35px #3121160d} .mobile-nav.is-open{display:grid;grid-template-columns:1fr 1fr;gap:8px} .mobile-nav a{display:flex;align-items:center;min-height:49px;font-size:14px} .mobile-nav a[aria-current=page]{background:var(--rose);color:var(--red)} :where(.section,.people-section,.cta-panel,.review-card,.form-grid) .btn{font-size:13px;min-height:54px;padding:16px 23px;border-radius:20px} .section .eyebrow,.people-section .eyebrow,.process-panel .eyebrow,.page-heading .eyebrow{font-size:9px;letter-spacing:.16em} .section-head h2,.people-copy h2{letter-spacing:-.04em} .service-body h3,.service-card-body :is(h2,h3){letter-spacing:-.03em} .section-head>.arrow-link,.people-copy>.arrow-link{min-height:44px;font-size:12px} .form-grid .btn{width:100%} .impact-stat:nth-child(2){border-inline-end:0} .impact-stat:nth-child(-n+2){border-bottom:1px solid var(--line)} .impact-stat:nth-child(odd){padding-inline-start:0!important} .partners{flex-wrap:wrap} .partners p{width:100%;max-width:none;text-align:center} .full{grid-column:auto} .footer-top{grid-template-columns:1fr 1fr;gap:26px} .footer-brand{grid-column:1/-1} :root[data-theme=dark][dir=rtl] .page-heading::after{background:linear-gradient(270deg,var(--bg) 35%,transparent)} html[dir=rtl] .section .eyebrow,html[dir=rtl] .people-section .eyebrow,html[dir=rtl] .process-panel .eyebrow,html[dir=rtl] .page-heading .eyebrow{font-size:10px;letter-spacing:0} } @media(prefers-reduced-motion:reduce){.btn,.round-arrow,.icon-button{transition:none!important}.btn:hover,.btn:active,.cta-panel .btn:hover,.cta-panel .btn:active{transform:none!important}} /* Client artwork keeps its own colors on quiet glass-framed cards. */ .partners.partner-strip{display:block;padding-block:32px 8px;scroll-margin-top:160px} .partner-strip>h2{font-size:20px;font-weight:750;letter-spacing:-.4px;line-height:1.5;margin:0 0 20px;color:var(--ink)} .client-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;list-style:none;padding:0;margin:0} .client-grid .client-mark{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;height:138px;padding:16px;border:1px solid #e3dcd480;border-radius:18px;background:linear-gradient(145deg,#fff,#faf9f7);box-shadow:inset 0 1px 0 #fff,0 5px 20px #4e341106;transition:transform .18s ease,box-shadow .18s ease} .client-grid .client-mark:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 #fff,0 9px 22px #4e341110} .client-brand-link{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:8px} .client-brand-link:focus-visible{outline:2px solid var(--brand-orange);outline-offset:5px} .client-grid .client-standalone{display:block;max-width:100%;width:145px;height:auto;max-height:100px;object-fit:contain} .client-logo-window{display:block;position:relative;overflow:hidden;isolation:isolate;flex:none;width:min(100%,var(--logo-size));aspect-ratio:var(--logo-ratio);mix-blend-mode:multiply;direction:ltr} .client-grid .client-logo-window img{position:absolute;width:var(--sheet-width);height:auto;max-width:none;left:var(--sheet-left);top:var(--sheet-top)} :root[data-theme=dark] .client-grid .client-mark{background:linear-gradient(145deg,#fff,#efefec);border-color:#ffffff40;box-shadow:inset 0 1px 0 #fff,0 5px 18px #0002} @media(max-width:1100px){.client-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:700px){.client-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.client-grid .client-mark{height:126px;padding:12px;border-radius:15px}.partners.partner-strip{padding-block:26px 8px}.partner-strip>h2{font-size:19px;margin-bottom:17px}} @media(max-width:520px){.client-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(prefers-reduced-motion:reduce){.client-grid .client-mark{transition:none}.client-grid .client-mark:hover{transform:none}} /* Individual glass navigation controls with room between their touch targets. */ .desktop-nav a,.mobile-nav a{color:var(--ink);border-radius:13px;background:linear-gradient(145deg,#ffffffa8,#fff6ec42);box-shadow:inset 0 1px 0 #fff,0 0 0 1px #bba59036,0 3px 9px #713d1007;transition:transform .16s ease-out,box-shadow .16s ease-out,color .16s ease-out;-webkit-tap-highlight-color:transparent} .desktop-nav{gap:12px}.desktop-nav a{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;margin:0;line-height:1.5;border-radius:15px;white-space:nowrap} .mobile-nav a{margin:0;min-height:49px;box-shadow:inset 0 1px 0 #fff,0 0 0 1px #bba59042,0 3px 9px #713d1005} .desktop-nav a:hover,.mobile-nav a:hover{color:var(--red);background:linear-gradient(145deg,#ffffffed,#ffe9d578);box-shadow:inset 0 1px 0 #fff,0 0 0 1px #e7a46770,0 5px 12px #713d100b;transform:translateY(-1px)} .desktop-nav a[aria-current=page],.mobile-nav a[aria-current=page]{color:var(--red);background:linear-gradient(145deg,#fff7efde,#ffdbb98a);box-shadow:inset 0 1px 0 #fff,0 0 0 1px #e29b5e85,0 3px 10px #a9490d0c} .desktop-nav a:active,.mobile-nav a:active{transform:translateY(1px) scale(.97);box-shadow:inset 0 2px 5px #9c54241c,0 0 0 1px #d7936099;transition-duration:.08s} .desktop-nav a:focus-visible,.mobile-nav a:focus-visible{outline:2px solid var(--brand-orange);outline-offset:4px} :root[data-theme=dark] .desktop-nav a,:root[data-theme=dark] .mobile-nav a{background:linear-gradient(145deg,#ffffff12,#ffffff05);box-shadow:inset 0 1px 0 #ffffff16,0 0 0 1px #ffffff21,0 3px 10px #00000012} :root[data-theme=dark] .desktop-nav a:hover,:root[data-theme=dark] .mobile-nav a:hover{background:linear-gradient(145deg,#ffe8d124,#ffc49a0b);box-shadow:inset 0 1px 0 #ffffff24,0 0 0 1px #ffbd8554,0 5px 12px #00000020} :root[data-theme=dark] .desktop-nav a[aria-current=page],:root[data-theme=dark] .mobile-nav a[aria-current=page]{background:linear-gradient(145deg,#ffa55926,#f0803310);box-shadow:inset 0 1px 0 #ffdcb52b,0 0 0 1px #ffa36373,0 3px 10px #00000018} :root[data-theme=dark] .desktop-nav a:active,:root[data-theme=dark] .mobile-nav a:active{box-shadow:inset 0 2px 6px #00000050,0 0 0 1px #ffbd8580} @media(min-width:701px) and (max-width:1050px){.desktop-nav{gap:10px}.desktop-nav a{padding:9px 10px;min-height:42px;border-radius:14px}} @media(max-width:700px){.mobile-nav a{border-radius:14px;padding:12px 15px}} @media(prefers-reduced-motion:reduce){.desktop-nav a,.mobile-nav a{transition:none}.desktop-nav a:hover,.mobile-nav a:hover,.desktop-nav a:active,.mobile-nav a:active{transform:none}} /* A light sweep stays inside each glass control; only transform/opacity animate. */ .desktop-nav a::before{content:"";position:absolute;z-index:-1;inset:-50% -15%;background:linear-gradient(110deg,transparent 35%,#ffffffb8 48%,transparent 62%);transform:translateX(-110%);opacity:0;pointer-events:none;transition:transform .5s ease,opacity .2s ease} @media(hover:hover){.desktop-nav a:hover::before{transform:translateX(110%);opacity:.8}.desktop-nav a:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 0 0 1px #e7a46770,0 8px 20px #713d1014}} .desktop-nav a:active{transform:translateY(1px) scale(.97)} :root[data-theme=dark] .desktop-nav a::before{background:linear-gradient(110deg,transparent 35%,#ffffff30 48%,transparent 62%)} @media(max-width:700px){.mobile-nav{background:#fffffffC}.mobile-nav.is-open{gap:12px}.mobile-nav a{min-height:52px}:root[data-theme=dark] .mobile-nav{background:#151216fc}} @media(prefers-reduced-motion:reduce){.desktop-nav a::before{display:none}.desktop-nav a:hover,.desktop-nav a:active{transform:none}} /* Service photography leads; quiet borders and steady layouts keep it credible. */ .service-grid .service-card{border-radius:16px;background:var(--surface);border-color:var(--line);box-shadow:0 3px 12px #1e222904;perspective:none;transition:border-color .18s ease,box-shadow .18s ease} .service-grid .service-card:hover,.js-motion .service-grid .service-card.visible:hover{transform:none;border-color:#c8bcb0;box-shadow:0 6px 18px #27221c08} .service-grid .service-card:focus-visible{outline:2px solid var(--brand-orange);outline-offset:5px} .service-card .service-image::after{display:none} .service-card .service-image img,.service-card:hover .service-image img{transform:none;transition:none} .service-card .service-number{width:33px;height:29px;top:16px;inset-inline-start:16px;border-radius:6px;background:#fffffff0;border:1px solid #ffffffd9;color:#484039;box-shadow:0 2px 5px #0000000d;font-weight:650;letter-spacing:.04em} .service-card .service-body,.service-card .service-card-body{padding:26px 25px 22px} .service-card .service-body h3,.service-card .service-card-body :is(h2,h3){margin-bottom:10px;text-wrap:balance} html[lang=en] .service-card .service-body h3,html[lang=en] .service-card .service-card-body :is(h2,h3){font-size:22px;font-weight:700;line-height:1.35;letter-spacing:-.025em} .service-card .service-body p,.service-card .service-card-body p{margin-bottom:24px} .service-card .service-bottom,.service-card .service-card-body>.arrow-link{min-height:49px;padding-top:16px;border-top:1px solid var(--line);font-weight:650} .service-card .round-arrow{width:33px;height:33px;border-radius:8px;background:transparent;border-color:var(--line);box-shadow:none;color:var(--red)} .service-grid .service-card:hover .round-arrow{transform:none;background:var(--surface2);border-color:#d6c1b0;box-shadow:none;color:var(--red)} .service-card .service-card-body>.icon-box{width:34px;height:34px;border-radius:8px;margin-bottom:15px;background:var(--surface2);border-color:var(--line);box-shadow:none} :root[data-theme=dark] .service-grid .service-card{background:var(--surface);border-color:var(--line);box-shadow:none} :root[data-theme=dark] .service-grid .service-card:hover{border-color:#766457;box-shadow:0 6px 18px #00000016} :root[data-theme=dark] .service-card .service-number{color:#484039} :root[data-theme=dark] .service-grid .service-card:hover .round-arrow{background:var(--surface2);border-color:#766457;box-shadow:none;color:var(--red)} @media(min-width:701px) and (max-width:1050px){.service-card .service-body,.service-card .service-card-body{padding:22px 21px 20px}html[lang=en] .service-card .service-body h3,html[lang=en] .service-card .service-card-body :is(h2,h3){font-size:20px}} @media(max-width:700px){.service-grid .service-card{border-radius:14px}.service-card .service-body,.service-card .service-card-body{padding:24px 23px 21px}} @media(prefers-reduced-motion:reduce){.service-grid .service-card{transition:none}} .service-contact-details{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;line-height:1.7} .service-contact-details a{overflow-wrap:anywhere} .service-contact-details .arrow-link{font-size:13px;margin-top:6px} /* google-reviews.css */ .google-reviews-section{padding:56px 0 62px;scroll-margin-top:110px} .google-reviews-grid{display:grid;grid-template-columns:1fr 1.08fr;align-items:center;gap:clamp(28px,5vw,76px)} .google-reviews-copy{min-width:0} .google-review-symbol{display:grid;place-items:center;width:52px;height:52px;margin-bottom:22px;border:1px solid #ffd2af;border-radius:17px;background:linear-gradient(140deg,#fff9f0,#ffecdb);color:var(--brand-orange);box-shadow:inset 0 1px 1px #fff,0 9px 22px #d8600710} .google-review-symbol svg{width:26px;height:26px;fill:#ff9a2020} .google-reviews-copy .eyebrow{font-size:9px;letter-spacing:.17em;margin-bottom:15px;color:var(--muted)} .google-reviews-copy h2{margin:0 0 19px;font-size:clamp(32px,3.6vw,49px);font-weight:780;line-height:1.1;letter-spacing:-.045em} .google-reviews-copy h2 em{display:block;font-style:normal;color:var(--red)} .google-reviews-intro{max-width:400px;color:var(--muted);font-size:14px;line-height:1.85;margin:0 0 24px} .google-reviews-actions{display:flex;flex-wrap:wrap;gap:12px} .google-reviews-actions .btn{font-size:12px;padding:15px 18px;min-height:51px;border-radius:18px;gap:12px} .google-reviews-actions .btn svg{width:18px;height:18px} .google-reviews-note{display:flex;align-items:center;gap:7px;margin:19px 0 0;font-size:10px;color:var(--muted)} .google-reviews-note svg{width:14px;height:14px;flex-shrink:0} .google-profile{min-width:0;overflow:hidden;border-radius:26px;border:1px solid #fff;background:linear-gradient(145deg,#ffffffc9,#fff6eb75);box-shadow:inset 0 1px 1px #fff,0 0 0 1px #eadfd4,0 18px 45px #40220d0a;padding:10px} .google-profile-header{display:flex;align-items:center;flex-wrap:wrap;column-gap:8px;row-gap:5px;padding:12px 12px 18px} .google-profile-header strong{font-size:11px;font-weight:750} .google-profile-header>span:last-child{margin-inline-start:auto;font-size:9px;color:var(--muted)} .google-profile-dot{width:6px;height:6px;background:var(--brand-orange);border-radius:50%;box-shadow:0 0 0 4px #ff870015} .google-profile-canvas{position:relative;height:330px;overflow:hidden;border-radius:17px;background:var(--surface2)} .google-profile-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:25px;text-align:center;background:radial-gradient(ellipse at 70% 20%,#ff880011,transparent 70%)} .google-profile-placeholder>span{display:grid;place-items:center;color:var(--brand-orange);width:52px;height:52px;border-radius:50%;background:#ff870012} .google-profile-placeholder>span svg{width:25px;height:25px} .google-profile-placeholder strong{font-size:14px} .google-profile-placeholder p{font-size:11px;color:var(--muted);max-width:240px;margin:0} .google-profile-placeholder .arrow-link{font-size:11px;margin-top:5px} .google-profile-canvas iframe{position:absolute;inset:0;border:0;display:block;width:100%;height:100%;visibility:hidden} .google-profile-canvas.is-loaded iframe{visibility:visible} .google-profile-canvas.is-loaded .google-profile-placeholder{display:none} .google-profile-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:10px;font-weight:650;padding:16px 12px 6px;color:var(--muted)} .google-profile-footer svg{width:16px;height:16px;color:var(--red)} .google-profile-footer:hover{color:var(--ink)} :root[data-theme=dark] .google-review-symbol{background:linear-gradient(140deg,#382719,#231e18);border-color:#705036;box-shadow:inset 0 1px 1px #ffd7a526,0 9px 22px #0002} :root[data-theme=dark] .google-profile{background:linear-gradient(145deg,#ffffff0b,#ffffff03);border-color:#ffffff16;box-shadow:inset 0 1px 1px #ffffff08,0 18px 45px #0003} html[dir=rtl] .google-reviews-copy h2{letter-spacing:0;line-height:1.4} html[dir=rtl] .google-reviews-copy .eyebrow{letter-spacing:0} html[dir=rtl] .google-reviews-actions .btn{letter-spacing:0} @media(max-width:850px){.google-reviews-grid{gap:25px}.google-reviews-actions .btn{font-size:11px}.google-profile-header>span:last-child{width:100%;margin-inline-start:14px}} @media(max-width:700px){.google-reviews-section{padding:45px 0 34px;scroll-margin-top:95px}.google-reviews-grid{grid-template-columns:1fr;gap:27px}.google-review-symbol{width:45px;height:45px;margin-bottom:18px;border-radius:14px}.google-reviews-copy h2{font-size:36px;line-height:1.13}.google-reviews-intro{font-size:13px;max-width:370px;margin-bottom:21px}.google-reviews-actions .btn{font-size:11px;padding:14px 15px;gap:9px}.google-profile{padding:8px;border-radius:23px}.google-profile-canvas{height:320px}.google-profile-header{padding:10px 10px 15px}.google-profile-header>span:last-child{width:auto;margin-inline-start:auto;font-size:8px}.google-profile-header strong{font-size:10px}.google-profile-footer{padding:14px 10px 7px}.google-reviews-note{font-size:9px}} @media(max-width:370px){.google-reviews-actions{flex-direction:column;align-items:stretch}.google-profile-header>span:last-child{width:100%;margin-inline-start:14px}} /* performance.css */ /* Immediate native navigation; lightweight local polish only. Load this last. */ @view-transition{navigation:none} html{view-transition-name:none} ::view-transition-group(root),::view-transition-image-pair(root),::view-transition-old(root),::view-transition-new(root){animation:none!important;filter:none!important} main,.enhanced-motion.page-leaving main{opacity:1;transform:none;filter:none;transition:none;will-change:auto} .enhanced-motion .hero-copy,.enhanced-motion .hero-art,.enhanced-motion .ribbon-copy{animation:none} .enhanced-motion .page-heading h1,.enhanced-motion .page-heading .lead,.enhanced-motion .page-heading .eyebrow,.enhanced-motion .ribbon-copy h1,.enhanced-motion .ribbon-intro,.enhanced-motion .ribbon-eyebrow{animation:text-arrive .16s ease-out both} @keyframes text-arrive{from{opacity:.88}to{opacity:1}} .js-motion .reveal{opacity:1;transform:none;transition:none;will-change:auto} .js-motion .reveal.visible{opacity:1;transform:none} .js-motion .reveal.reveal-entering{animation:section-enter .34s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms) both} @keyframes section-enter{from{opacity:.18;transform:translateY(12px)}to{opacity:1;transform:none}} .impact-stat b{font-variant-numeric:tabular-nums} .impact-stat b .stat-number{color:inherit} .stat-accessible{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important} .site-header,.mobile-nav,.btn,.cta-panel .btn,.icon-button,.impact-strip,.service-number,.icon-box,.scene-controls button,.chat-float{backdrop-filter:none;-webkit-backdrop-filter:none} .ribbon-label,.floating-label{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);will-change:auto} .photo-note{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .service-card,.feature-card{perspective:none;will-change:auto;transition:transform .16s ease-out,box-shadow .16s ease-out} .service-card:hover,.js-motion .service-card.visible:hover{transform:translateY(-4px)} .feature-card:hover,.js-motion .feature-card.visible:hover{transform:translateY(-3px)} .btn,.icon-button,.round-arrow{transition-duration:.16s} .btn::before{transition-duration:.26s} .button-ripple{animation-duration:.42s} .service-image img{transition-duration:.25s} .hero-art .floating-label{will-change:auto} @media(prefers-reduced-motion:reduce){ .enhanced-motion .page-heading h1,.enhanced-motion .page-heading .lead,.enhanced-motion .page-heading .eyebrow,.enhanced-motion .ribbon-copy h1,.enhanced-motion .ribbon-intro,.enhanced-motion .ribbon-eyebrow{animation:none} .js-motion .reveal,.js-motion .reveal.reveal-entering{opacity:1;transform:none;transition:none;animation:none} .service-card:hover,.js-motion .service-card.visible:hover,.feature-card:hover,.js-motion .feature-card.visible:hover{transform:none} } /* kurdish-type.css */ /* Sorani keeps connected letters, open counters and room for dots/diacritics. */ html[lang=ckb] { --font: 'Vazirmatn', Tahoma, sans-serif; } html[lang=ckb] body { font-weight: 400; line-height: 1.9; } html[lang=ckb] :is(h1,h2,h3,h4,.btn,.eyebrow,.ribbon-eyebrow,.label,.ribbon-label p) { font-family: var(--font); letter-spacing: 0; text-transform: none; } html[lang=ckb] :is(h1,h2) { font-weight: 750; } html[lang=ckb] h3 { font-weight: 700; } html[lang=ckb] :is(p,li) { word-break: normal; } html[lang=ckb] :is(button,input,select,textarea) { font-family: var(--font); } html[lang=ckb] .btn { font-weight: 650; line-height: 1.75; white-space: normal; } html[lang=ckb] .desktop-nav a { font-size: 14px; font-weight: 600; } html[lang=ckb] .mobile-nav a { font-weight: 600; line-height: 1.8; } html[lang=ckb] .ribbon-copy h1 { font-family: var(--font); font-size: clamp(32px,3.8vw,68px); line-height: 1.55; font-weight: 750; } html[lang=ckb] .ribbon-eyebrow { font-size: clamp(11px,.85vw,14px); line-height: 1.9; font-weight: 600; margin-bottom: 5%; } html[lang=ckb] .ribbon-intro { line-height: 1.9; } html[lang=ckb] .ribbon-label p { font-weight: 600; line-height: 1.8; } html[lang=ckb] .ribbon-summary .impact-stat p { font-size: 13px; line-height: 1.9; } html[lang=ckb] .partner-strip>p { font-size: 12px; line-height: 1.9; } html[lang=ckb] :is(.eyebrow,.google-eyebrow) { font-size: 12px; line-height: 1.9; font-weight: 600; } html[lang=ckb] :is(.field label,.field-label) { font-weight: 600; line-height: 1.9; } html[lang=ckb] :is(input,select,textarea) { line-height: 1.8; } html[lang=ckb] :is(a[href^='mailto:'],a[href^='tel:']) { direction: ltr; unicode-bidi: isolate; } @media (min-width:701px) and (max-width:1050px) { html[lang=ckb] .desktop-nav a { font-size: 12px; } html[lang=ckb] .ribbon-copy { top: 6%; } html[lang=ckb] .ribbon-summary .impact-stat p { font-size: 11px; } } @media (max-width:700px) { html[lang=ckb] .ribbon-copy h1 { font-size: clamp(30px,8vw,48px); line-height: 1.55; } html[lang=ckb] .ribbon-eyebrow { font-size: 11px; margin-bottom: 16px; } html[lang=ckb] .ribbon-label p { font-size: 12px; } html[lang=ckb] .ribbon-summary .impact-stat p { font-size: 12px; } html[lang=ckb] .partner-strip>p { font-size: 12px; } html[lang=ckb] .page-heading h1 { font-size: clamp(32px,8.6vw,47px); line-height: 1.55; } } /* brand-lockup.css */ .brand.brand-lockup{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;min-height:74px;width:140px;flex-shrink:0} .brand.brand-lockup>.brand-logo{display:block;width:100%;height:auto} .brand .brand-partner{display:flex;align-items:center;justify-content:center;gap:5px;direction:ltr;white-space:nowrap;font-family:Manrope,Arial,sans-serif;font-size:8px;line-height:1.4;font-weight:600;color:var(--muted)} html[lang=ckb] .brand .brand-partner{font-family:Vazirmatn,Tahoma,sans-serif} html[lang=ar] .brand .brand-partner{font-family:Cairo,Tahoma,sans-serif} .brand .brand-partner img{width:43px;height:auto;filter:none;object-fit:contain} .brand .brand-partner .brand-talabat-night{display:none} :root[data-theme=dark] .brand .brand-partner .brand-talabat-day{display:none} :root[data-theme=dark] .brand .brand-partner .brand-talabat-night{display:block} .footer-brand .brand.brand-lockup{width:180px;align-items:flex-start} .footer-brand .brand .brand-partner{font-size:10px;gap:7px} .footer-brand .brand .brand-partner img{width:55px} .rider-partner{position:absolute;z-index:2;pointer-events:none;height:auto;opacity:.94;mix-blend-mode:screen} .partner-box{width:3.6%;left:43%;top:43%;transform:skew(-11deg,3deg)} .partner-tank{width:2.6%;left:60.5%;top:55.8%;transform:rotate(25deg) skew(6deg,1deg)} /* Keep the complete training scene and rider group visible rather than cropping faces. */ .photo:has(img[src*="training-delivery"]){aspect-ratio:2.47;min-height:0;align-self:center} .photo:has(img[src*="about-riders-delivery"]){aspect-ratio:1.5;min-height:0} @media(max-width:1050px){.site-header .brand.brand-lockup{width:125px}} @media(max-width:374px){.site-header .brand.brand-lockup{width:109px}.brand .brand-partner{font-size:7px;gap:4px}.brand .brand-partner img{width:36px}} /* page-navigation.css */ /* Drag the page itself; no extra navigation row or gesture control. */ [data-page-swipe-zone]{touch-action:pan-y pinch-zoom} html.is-page-dragging body,html.is-page-dragging body *{cursor:grabbing!important;user-select:none;-webkit-user-select:none} html.client-navigation-ready body{overflow-x:clip} html.page-drag-ready main{transform:var(--page-drag-transform,none);transition:transform .28s cubic-bezier(.22,.7,.28,1)} html.is-page-dragging main{transition:none;will-change:transform} /* The router keeps the old page visible, then slides two opaque surfaces together. */ @view-transition{navigation:none} main{view-transition-name:none} .route-stage{position:fixed;left:0;right:0;z-index:45;overflow:hidden;contain:layout paint;background:var(--bg);isolation:isolate} .route-stage.is-preparing{visibility:hidden;pointer-events:none} .route-panel{position:absolute;left:0;width:100%;min-height:100%;background:var(--bg);will-change:transform;transform-origin:0 0} .route-panel main{transform:none!important;transition:none!important} .route-incoming .reveal,.route-incoming [data-reveal]{opacity:1!important;transform:none!important;animation:none!important;transition:none!important} .route-incoming :is(.page-heading h1,.page-heading .lead,.page-heading .eyebrow){animation:none!important} .route-incoming[lang=ckb]{--font:'Vazirmatn',Tahoma,sans-serif} .route-incoming[lang=ar]{--font:'Cairo',Tahoma,sans-serif} .is-route-transitioning .site-header{pointer-events:none} .is-route-transitioning .chat-float{visibility:hidden} .route-message{position:fixed;z-index:100;bottom:25px;left:50%;transform:translateX(-50%);width:min(430px,calc(100% - 40px));padding:18px 22px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow);display:flex;align-items:center;gap:18px} .route-message p{margin:0;font-size:13px;line-height:1.6} .route-message button{flex-shrink:0;border:0;border-radius:12px;padding:10px 14px;background:var(--red);color:#fff;font-size:12px;font-weight:700} @media(prefers-reduced-motion:reduce){html.page-drag-ready main{transform:none!important;transition:none!important;will-change:auto}} /* home-nav.css */ /* Keep Home visible with the four main pages, without squeezing the controls. */ .desktop-nav{flex-shrink:0} @media(min-width:801px) and (max-width:1050px){ .header-inner{gap:12px} .desktop-nav{gap:8px} .desktop-nav a{padding-inline:8px} } /* Small tablets get a full-width navigation row; phones retain the menu. */ @media(min-width:701px) and (max-width:800px){ .site-header{height:auto} .site-header .header-inner{height:auto;min-height:132px;padding-block:8px;flex-wrap:wrap;gap:4px 12px} .header-actions{margin-inline-start:auto} .desktop-nav{order:3;flex:0 0 100%;justify-content:center;gap:10px;margin:0} .desktop-nav a{padding:9px 12px} html{scroll-padding-top:144px} } /* photo-clarity.css */ /* Landscape photographs retain their detail and full team instead of being enlarged to fill a portrait box. The caption never covers a rider. */ .people-image>img,.team-photo-link>img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;border-radius:22px} .team-photo-link{display:block;border-radius:22px;cursor:zoom-in} .team-photo-link:focus-visible{outline:3px solid var(--brand-orange);outline-offset:4px} html[dir] .people-image .photo-note{position:relative;inset:auto;margin:12px 0 0;min-height:74px;padding:16px 18px} .people-image::before{inset:24px 16px 0 0;border-radius:26px} .photo.photo-team{height:auto;min-height:0;aspect-ratio:3/2} .photo.photo-training{position:relative;overflow:hidden;height:auto;min-height:0;aspect-ratio:1973/797} .photo-training picture,.photo-training img{display:block;width:100%;border-radius:inherit} .photo-training .training-branding{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .split:has(>.photo-training){grid-template-columns:1fr;gap:28px} .split:has(>.photo-training)>div:first-child{max-width:760px} .photo-detail-link{position:absolute;inset-block-start:20px;inset-inline-end:44px;display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid #ffffff70;border-radius:11px;background:#181c22c9;color:#fff;font-size:11px;font-weight:650;line-height:1.5;box-shadow:0 2px 8px #0002;transition:background .15s ease,transform .15s ease} .photo-detail-link svg{width:16px;height:16px} .photo-detail-link:hover{background:#181c22;transform:translateY(-1px)} .photo-detail-link:focus-visible{outline:3px solid var(--brand-orange);outline-offset:3px} @media(prefers-reduced-motion:reduce){.photo-detail-link{transition:none}.photo-detail-link:hover{transform:none}} @media(max-width:700px){ .people-image>img,.team-photo-link,.team-photo-link>img{border-radius:18px} .people-image .photo-note{margin-top:10px;padding:14px;min-height:70px} } /* pest-profile.css */ /* Pest-control process: the brochure's practical steps, in the site's visual system. */ .pest-process-panel{padding:clamp(27px,4.5vw,58px);border:1px solid var(--line);border-radius:30px;background:var(--surface2);box-shadow:inset 0 1px 0 #ffffff50} .pest-process .section-head{align-items:start;margin-bottom:34px} .pest-process .section-head>div{flex:1;min-width:0} .pest-process .section-head h2{max-width:19ch;font-size:clamp(30px,3.1vw,44px);line-height:1.2} .pest-process .section-head>p{flex:0 1 330px;font-size:13px;line-height:1.9;margin:0} .pest-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-block:0} .pest-process .step{padding-top:25px;border-top-color:var(--line)} .pest-process .step-number{margin-bottom:20px;color:var(--red)} .pest-process .step h3{font-size:19px;line-height:1.5;margin-bottom:11px} .pest-process .step p{font-size:13px;line-height:1.9} .pest-places{margin-top:38px;padding-top:30px;border-top:1px solid var(--line)} .pest-places h3{font-size:16px;line-height:1.6;letter-spacing:0;margin-bottom:16px} .pest-places .chips{list-style:none;padding:0;margin:0;gap:10px} .pest-places .chip{gap:9px;font-size:11px} .pest-places .chip svg{width:15px;height:15px;flex:none;color:var(--red)} html[dir=rtl] .pest-process :is(h2,h3){letter-spacing:0} @media(max-width:850px){.pest-process .section-head{flex-direction:column;gap:18px}.pest-process .section-head>p{flex:none;max-width:580px}.pest-steps{gap:22px}} @media(max-width:680px){.pest-process-panel{border-radius:23px;padding:27px 24px}.pest-steps{grid-template-columns:1fr;gap:26px}.pest-process .section-head{margin-bottom:28px}.pest-process .section-head h2{font-size:30px;max-width:none}.pest-process .step{padding-top:22px}.pest-process .step-number{margin-bottom:14px}.pest-process .step h3{font-size:19px}.pest-places{margin-top:30px;padding-top:25px}.pest-places .chip{font-size:11px;padding:9px 12px}} /* glass-navigation.css */ /* Frosted navigation: quiet edges and a diffuse reflection, without a bevel. */ :root .site-header :is(.desktop-nav,.mobile-nav) a{ --nav-surface:linear-gradient(140deg,#ffffffb8,#f2f0ec7a); --nav-hover:linear-gradient(140deg,#ffffffd1,#f9eee080); --nav-edge:#aca29638; --nav-reflection:#ffffffb3; --nav-shadow:#49392a09; position:relative; isolation:isolate; overflow:hidden; border-radius:14px; color:var(--ink); font-weight:600; background:var(--nav-surface); box-shadow:0 0 0 1px var(--nav-edge),0 3px 10px var(--nav-shadow); -webkit-backdrop-filter:blur(12px) saturate(1.22); backdrop-filter:blur(12px) saturate(1.22); text-shadow:none; transform:none; transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s ease,color .16s ease; -webkit-tap-highlight-color:transparent; } :root .site-header :is(.desktop-nav,.mobile-nav) a::before{ content:""; position:absolute; z-index:-1; inset:0; border-radius:inherit; background:radial-gradient(ellipse at 20% -45%,var(--nav-reflection),transparent 68%); pointer-events:none; opacity:.6; transform:none; transition:opacity .2s ease; } :root .site-header :is(.desktop-nav,.mobile-nav) a::after{content:none} :root[data-theme=dark] .site-header :is(.desktop-nav,.mobile-nav) a{ --nav-surface:linear-gradient(140deg,#ffffff12,#ffffff07); --nav-hover:linear-gradient(140deg,#ffffff19,#ffffff0c); --nav-edge:#ffffff1e; --nav-reflection:#ffffff24; --nav-shadow:#00000012; background:var(--nav-surface); box-shadow:0 0 0 1px var(--nav-edge),0 3px 10px var(--nav-shadow); } @media(hover:hover){ :root .site-header :is(.desktop-nav,.mobile-nav) a:hover{ color:var(--ink); background:var(--nav-hover); box-shadow:0 0 0 1px #dba16a61,0 4px 12px var(--nav-shadow); transform:translateY(-1px); } :root[data-theme=dark] .site-header :is(.desktop-nav,.mobile-nav) a:hover{ background:var(--nav-hover); box-shadow:0 0 0 1px #e5ab763b,0 4px 12px var(--nav-shadow); } :root .site-header :is(.desktop-nav,.mobile-nav) a:hover::before{opacity:.8;transform:none} } /* Orange remains translucent so the active page reads as tinted glass. */ :root .site-header :is(.desktop-nav,.mobile-nav) a:is([aria-current=page],:active){ --nav-reflection:#fff4e5a6; color:#8b370c; background:linear-gradient(135deg,#ffb36355,#ff8d3742); box-shadow:0 0 0 1px #e697506b,0 4px 14px #e9781a12; text-shadow:none; } :root[data-theme=dark] .site-header :is(.desktop-nav,.mobile-nav) a:is([aria-current=page],:active){ --nav-reflection:#ffcf8a2e; color:#ffba80; background:linear-gradient(135deg,#ffb15a2c,#f5762220); box-shadow:0 0 0 1px #f5a25f63,0 4px 15px #f77f1112; } :root .site-header :is(.desktop-nav,.mobile-nav) a:active{ transform:translateY(1px) scale(.985); box-shadow:0 0 0 1px #e697507d,0 1px 5px #e9781a0d; transition-duration:.1s; } :root[data-theme=dark] .site-header :is(.desktop-nav,.mobile-nav) a:active{box-shadow:0 0 0 1px #f5a25f7a,0 1px 5px #f77f110d} :root .site-header :is(.desktop-nav,.mobile-nav) a:focus-visible{outline:2px solid var(--brand-orange);outline-offset:4px} /* Add breathing room where the full header has space; preserve tablet fitting. */ @media(min-width:961px){:root .site-header .desktop-nav a{padding-inline:14px}} @media(prefers-reduced-motion:reduce){ :root .site-header :is(.desktop-nav,.mobile-nav) a, :root .site-header :is(.desktop-nav,.mobile-nav) a::before{transition:none} :root .site-header :is(.desktop-nav,.mobile-nav) a:is(:hover,:active){transform:none} } /* readability.css */ /* Shared readable type scale, after component and language styles. */ :root{--muted:#50545b} :root[data-theme=dark]{--muted:#cbd0d7} html[lang] body{font-size:17px;font-weight:600;line-height:1.75} html[lang=ckb] body{line-height:1.95} html[lang] :is(.section .lead,.people-copy>.lead,.page-heading .lead,.review-card .lead){ font-size:18px;font-weight:600;line-height:1.85;color:var(--muted); } html[lang] :is(.benefit-row p,.service-body p,.service-card-body p,.feature-card p, .feature-stack .feature-card p,.step p,.pest-process .step p,.pest-process .section-head>p, .about-values>p,.split .lead+p,.bullet-list li,.contact-card p,.faq details p, .google-reviews-intro,.google-profile-placeholder p){ font-size:16px;font-weight:600;line-height:1.85;color:var(--muted); } html[lang] :is(.benefit-row h3,.feature-stack .feature-card h3,.split>div>h3, .pest-places h3,.faq summary){font-size:18px;font-weight:750;line-height:1.55} html[lang] :is(.service-body h3,.service-card-body h2,.service-card-body h3){ font-size:26px;font-weight:800;line-height:1.3; } html[lang] .feature-card h3{font-size:23px;font-weight:750;line-height:1.4} html[lang] .feature-stack .feature-card h3{font-size:19px} html[lang] :is(.step h3,.pest-process .step h3){font-size:21px;font-weight:750;line-height:1.5} html[lang] :is(.section-head h2,.people-copy h2,.section .split>div>h2){ font-size:clamp(36px,3.6vw,54px);font-weight:800; } html[lang] :is(.process-panel h2,.pest-process .section-head h2){font-size:clamp(35px,3.3vw,50px)} html[lang] .cta-panel h2{font-size:clamp(36px,3.3vw,49px)} html[lang] .cta-panel p{font-size:17px;font-weight:650;line-height:1.8;opacity:1} html[lang] :is(.about-values h2,.section .split>.about-values>h2,.feature-card>h2, .contact-card h2,.section .split>div>h2.form-title){font-size:31px;font-weight:800} html[lang] .page-heading h1{font-size:clamp(49px,5.6vw,86px);font-weight:800} html[lang][dir=rtl] .page-heading h1{font-size:clamp(46px,5vw,75px)} html[lang] :is(.review-card h2,.google-reviews-copy h2){font-size:clamp(37px,3.8vw,53px);font-weight:800} /* Small labels remain secondary through spacing and color, never tiny type. */ html[lang] :is(.eyebrow,.ribbon-eyebrow,.section .eyebrow,.people-section .eyebrow, .process-panel .eyebrow,.page-heading .eyebrow,.google-reviews-copy .eyebrow){ font-size:12px;font-weight:800;line-height:1.7;letter-spacing:.13em; } html[lang][dir=rtl] :is(.eyebrow,.ribbon-eyebrow){letter-spacing:0;font-size:14px} html[lang] .ribbon-eyebrow{color:var(--muted)} html[lang] .cta-panel .eyebrow{color:#fff;opacity:1} html[lang] :is(.breadcrumb,.breadcrumbs,.page-heading .breadcrumb,.chip,.pest-places .chip, .service-number,.step-number,.step>span:first-child,.metric span,.partners p){ font-size:14px;font-weight:700;line-height:1.6; } html[lang] :is(.arrow-link,.section-head>.arrow-link,.people-copy>.arrow-link, .service-card-body>.arrow-link,.service-bottom,.photo-detail-link){font-size:15px;font-weight:750;line-height:1.65} html[lang] :is(.photo-caption,.photo-note span){font-size:14px;font-weight:600;line-height:1.65;color:var(--muted)} html[lang] .photo-note strong{font-size:16px;font-weight:750;line-height:1.6} html[lang] .partner-strip>h2{font-size:23px;font-weight:750} html[lang] :is(.ribbon-summary .impact-stat p,.impact-stat p){font-size:15px;font-weight:650;line-height:1.65} html[lang] .ribbon-summary .impact-stat b{font-size:clamp(34px,3.4vw,49px)} html[lang] :is(.metric strong,.metric b){font-size:39px} html[lang] .ribbon-copy h1{font-size:clamp(42px,4.8vw,88px)} html[lang][dir=rtl] .ribbon-copy h1{font-size:clamp(35px,4.25vw,76px)} html[lang=ckb] .ribbon-copy h1{font-size:clamp(35px,4vw,72px)} html[lang] .ribbon-intro{font-size:clamp(19px,1.8vw,31px);font-weight:600} html[lang] .ribbon-label p{font-size:clamp(14px,1.3vw,24px);font-weight:700;line-height:1.6;white-space:normal} html[lang] .ribbon-label{max-width:calc(100% - 32px)} html[lang] .site-header :is(.desktop-nav,.mobile-nav) a{font-size:15px;font-weight:700} html[lang] :is(.btn,.section .btn,.people-section .btn,.cta-panel .btn,.review-card .btn, form .btn,.google-reviews-actions .btn,.header-actions>.btn){font-size:15px;font-weight:750;line-height:1.55} html[lang] .ribbon-button{font-size:clamp(16px,1.3vw,23px)} html[lang] :is(.language-switch summary,.language-options a){font-size:14px;font-weight:700} html[lang] .brand .brand-partner{font-size:11px;font-weight:700;white-space:normal;text-align:center;line-height:1.35} html[lang] .brand .brand-partner img{flex-shrink:0} html[lang] .footer-brand .brand .brand-partner{font-size:12px} .site-header .brand.brand-lockup{width:170px} .site-header .brand.brand-lockup>.brand-logo{width:140px;max-width:100%} html[lang] :is(.contact-card h3,.field){font-size:15px;font-weight:750;line-height:1.6} html[lang] :is(.contact-card a,.contact-card>.contact-detail,.social-links a){font-size:16px;font-weight:700;line-height:1.65} html[lang] .field :is(input,select,textarea){font-size:16px;font-weight:600;line-height:1.6} html[lang] :is(.form-note,.form-status,input[type=file]){font-size:14px;font-weight:600;line-height:1.75} html[lang] .field :is(input,textarea)::placeholder{color:var(--muted);opacity:1} html[lang] :is(.google-reviews-note,.google-profile-header strong,.google-profile-header>span:last-child, .google-profile-footer){font-size:14px;font-weight:650;line-height:1.65} html[lang] .google-profile-placeholder strong{font-size:18px;font-weight:750} html[lang] .google-profile-placeholder .arrow-link{font-size:15px} .google-profile-header,.google-profile-footer{flex-wrap:wrap;gap:8px} html[lang] .footer-brand p{font-size:15px;font-weight:600;line-height:1.8} html[lang] .footer-col h3{font-size:16px;font-weight:800} html[lang] .footer-col a{font-size:15px;font-weight:600;line-height:1.75;overflow-wrap:anywhere} html[lang] .footer-bottom{font-size:14px;font-weight:600;line-height:1.75} .footer-col{min-width:0} /* Give larger text room instead of shrinking it at tablet widths. */ @media(min-width:701px) and (max-width:1200px){ .site-header{height:auto} .site-header .header-inner{height:auto;min-height:146px;padding-block:10px;flex-wrap:wrap;gap:8px 12px} .header-actions{margin-inline-start:auto} .site-header .desktop-nav{order:3;flex:0 0 100%;justify-content:center;gap:10px;margin:0} :root .site-header .desktop-nav a{padding:10px 14px} html{scroll-padding-top:158px} } @media(max-width:700px){ .site-header .brand.brand-lockup{width:156px} .site-header .brand.brand-lockup>.brand-logo{width:125px} html[lang] .site-header .mobile-nav a{font-size:16px} html[lang] :is(.section-head h2,.people-copy h2,.section .split>div>h2, .process-panel h2,.pest-process .section-head h2,.cta-panel h2,.review-card h2, .google-reviews-copy h2){font-size:36px} html[lang][dir=rtl] :is(.section-head h2,.people-copy h2,.section .split>div>h2){font-size:34px} html[lang] .page-heading h1{font-size:clamp(42px,10.8vw,62px)} html[lang][dir=rtl] .page-heading h1{font-size:clamp(37px,9.8vw,53px)} html[lang] :is(.about-values h2,.section .split>.about-values>h2,.feature-card>h2, .contact-card h2,.section .split>div>h2.form-title){font-size:29px} html[lang] .ribbon-copy h1{font-size:clamp(36px,9.3vw,60px)} html[lang][dir=rtl] .ribbon-copy h1{font-size:clamp(35px,9vw,56px)} html[lang=ckb] .ribbon-copy h1{font-size:clamp(33px,8.5vw,52px)} html[lang] .ribbon-label p{font-size:14px} html[lang] .ribbon-summary .impact-stat b{font-size:35px} html[lang] .ribbon-summary .impact-stat p{max-width:none} html[lang] :is(.metric strong,.metric b){font-size:34px} } @media(max-width:480px){ .steps{grid-template-columns:1fr} html[lang] .brand .brand-partner{font-size:11px} } @media(max-width:374px){ .site-header .brand.brand-lockup{width:110px} .site-header .brand.brand-lockup>.brand-logo{width:109px} .site-header{height:94px} .site-header .header-inner{height:94px} .mobile-nav{top:94px;max-height:calc(100svh - 94px)} html{scroll-padding-top:106px} } /* liquid.css */ /* liquid.css: one shape and motion system in the spirit of iOS 26. Continuous corners, frosted glass, spring motion. Loaded last; colours, type, content and the motorcycle hero artwork are unchanged. */ :root{ --r-sm:12px;--r-md:18px;--r-lg:26px;--r-xl:34px;--r-pill:999px; --ease-ios:cubic-bezier(.32,.72,0,1); --ease-out:cubic-bezier(.22,1,.36,1); --spring-pop:linear(0,.0307,.1034,.2013,.3115,.4244,.5331,.6332,.7221,.7913,.8561,.9087,.9499,.9812,1.0038,1.0193,1.0291,1.0339,1.036,1.0355,1.0333,1.03,1.0261,1.0221,1.0181,1.0147,1.0113,1.0084,1.0059,1.0039,1.0022,1.001,1.0001,.9995,.9991,.9988,.9987,.9987,.9988,.9989,1); --spring-soft:linear(0,.0273,.0842,.1595,.253,.341,.4273,.5169,.5916,.6589,.724,.7751,.819,.8596,.8902,.9154,.9379,.9542,.9671,.9782,.9858,.9916,.9963,.9993,1.0014,1.0028,1.0036,1.004,1.0041,1.004,1.0038,1.0034,1.0031,1.0027,1.0023,1.002,1.0017,1.0014,1.0011,1.0009,1); --hairline:rgb(24 22 28 / .08); --glass:rgb(255 255 255 / .74); --glass-strong:rgb(255 255 255 / .9); --glass-edge:rgb(255 255 255 / .75); --glass-fill:rgb(118 118 128 / .1); --glass-fill-hover:rgb(118 118 128 / .16); --glass-shine:inset 0 1px 0 rgb(255 255 255 / .9),inset 0 -1px 0 rgb(24 22 28 / .03); --glass-shadow:0 1px 2px rgb(24 22 28 / .05),0 10px 30px -10px rgb(24 22 28 / .16); --lift-1:0 1px 2px rgb(24 22 28 / .04),0 8px 24px -14px rgb(24 22 28 / .14); --lift-2:0 2px 6px rgb(24 22 28 / .05),0 24px 48px -20px rgb(24 22 28 / .24); --focus-ring:0 0 0 4px rgb(235 110 20 / .28); } :root[data-theme=dark]{ --hairline:rgb(255 255 255 / .09); --glass:rgb(28 26 31 / .7); --glass-strong:rgb(44 41 47 / .92); --glass-edge:rgb(255 255 255 / .1); --glass-fill:rgb(255 255 255 / .08); --glass-fill-hover:rgb(255 255 255 / .13); --glass-shine:inset 0 1px 0 rgb(255 255 255 / .1),inset 0 -1px 0 rgb(0 0 0 / .25); --glass-shadow:0 1px 2px rgb(0 0 0 / .3),0 12px 32px -10px rgb(0 0 0 / .6); --lift-1:0 1px 2px rgb(0 0 0 / .3),0 10px 26px -14px rgb(0 0 0 / .55); --lift-2:0 2px 6px rgb(0 0 0 / .35),0 26px 50px -20px rgb(0 0 0 / .7); --focus-ring:0 0 0 4px rgb(255 160 80 / .32); } html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent} ::selection{background:#ffd9b5;color:#3a1a05} :root[data-theme=dark] ::selection{background:#7a3410;color:#fff} @media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} /* ---------- Floating glass header ---------- */ html[lang] .site-header{ position:sticky;top:10px;z-index:60; width:min(1560px,calc(100% - 24px));height:auto;margin:10px auto 0;padding:0; border:1px solid var(--glass-edge);border-radius:28px; background:transparent; -webkit-backdrop-filter:none;backdrop-filter:none; box-shadow:var(--glass-shine),var(--glass-shadow); transition:box-shadow .35s var(--ease-out),opacity .2s ease; } /* The frosted layer sits on a pseudo-element so the menu and language popovers inside the header can frost the page behind them too. */ html[lang] .site-header::before{ content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none; background:var(--glass); -webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8); } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){html[lang] .site-header::before{background:var(--glass-strong)}} html[lang] .site-header .header-inner{ width:100%;max-width:none;height:auto;min-height:0;margin:0; padding:7px 8px;padding-inline-start:18px; display:flex;flex-wrap:nowrap;align-items:center;gap:12px;border:0; } html[lang] .site-header .header-actions{margin-inline-start:auto;gap:8px;flex-shrink:0} html{scroll-padding-top:118px} /* Navigation: one glass track with a gliding selection, like an iOS segmented control. */ html[lang] .site-header .desktop-nav{ position:relative;order:0;flex:0 1 auto;margin:0 auto; display:flex;gap:2px;padding:4px;border-radius:var(--r-pill); background:var(--glass-fill);box-shadow:inset 0 0 0 1px var(--hairline); } html[lang] .site-header .desktop-nav a{ position:relative;z-index:1;min-height:40px;padding:9px 16px;border-radius:var(--r-pill); display:inline-flex;align-items:center;white-space:nowrap; color:var(--muted);background:transparent;box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none;transform:none; transition:color .25s ease,background-color .25s ease,transform .5s var(--spring-pop); } html[lang][data-theme=dark] .site-header .desktop-nav a{background:transparent;box-shadow:none} html[lang] .site-header .desktop-nav a::before,html[lang] .site-header .desktop-nav a::after{content:none} @media(hover:hover){ html[lang] .site-header .desktop-nav a:hover, html[lang][data-theme=dark] .site-header .desktop-nav a:hover{color:var(--ink);background:var(--glass-fill);box-shadow:none;transform:none} } html[lang] .site-header .desktop-nav a:active, html[lang][data-theme=dark] .site-header .desktop-nav a:active{transform:scale(.95);background:var(--glass-fill-hover);box-shadow:none;transition-duration:.12s} html[lang] .site-header .desktop-nav a[aria-current=page], html[lang][data-theme=dark] .site-header .desktop-nav a[aria-current=page]{ color:var(--ink);background:var(--glass-strong); box-shadow:0 1px 2px rgb(24 22 28 / .08),0 6px 16px -6px rgb(24 22 28 / .18); } html[lang][data-theme=dark] .site-header .desktop-nav a[aria-current=page]{background:rgb(255 255 255 / .16);box-shadow:inset 0 1px 0 rgb(255 255 255 / .12)} html[lang] .site-header .desktop-nav.has-glider a[aria-current=page], html[lang][data-theme=dark] .site-header .desktop-nav.has-glider a[aria-current=page]{background:transparent;box-shadow:none} .nav-glider{ position:absolute;z-index:0;top:4px;left:0;height:calc(100% - 8px);width:0; border-radius:var(--r-pill);background:var(--glass-strong);pointer-events:none; box-shadow:0 1px 2px rgb(24 22 28 / .08),0 6px 16px -6px rgb(24 22 28 / .18); transition:transform .55s var(--spring-pop),width .55s var(--spring-pop),opacity .2s ease; } :root[data-theme=dark] .nav-glider{background:rgb(255 255 255 / .16);box-shadow:inset 0 1px 0 rgb(255 255 255 / .12),0 6px 16px -6px rgb(0 0 0 / .5)} .nav-glider.no-anim{transition:none} /* Circular glass controls and a capsule language picker. */ html[lang] .site-header .icon-button, html[lang] .site-header .language-switch summary{ min-width:42px;height:42px;min-height:42px;padding:0 12px;border:0;border-radius:var(--r-pill); display:inline-grid;grid-auto-flow:column;place-items:center;gap:4px; color:var(--ink);background:var(--glass-fill);box-shadow:inset 0 0 0 1px var(--hairline); -webkit-backdrop-filter:none;backdrop-filter:none; transition:transform .5s var(--spring-pop),background-color .2s ease; } html[lang] .site-header .icon-button{width:42px;padding:0} html[lang] .site-header .icon-button svg{width:20px;height:20px} @media(hover:hover){html[lang] .site-header :is(.icon-button,.language-switch summary):hover{background:var(--glass-fill-hover)}} html[lang] .site-header :is(.icon-button,.language-switch summary):active{transform:scale(.9);transition-duration:.12s} html[lang] .site-header .language-switch summary svg{width:14px;height:14px;transition:transform .45s var(--spring-pop)} html[lang] .site-header .language-switch[open] summary svg{transform:rotate(180deg)} html[lang] .site-header .header-actions>.btn{display:inline-flex;min-height:42px;padding:10px 18px;border-radius:var(--r-pill)} /* Language menu: a small glass popover that springs from its button. */ html[lang] .site-header .language-options{ top:calc(100% + 8px);min-width:170px;padding:6px;gap:2px;border:1px solid var(--glass-edge);border-radius:20px; background:var(--glass-strong);-webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8); box-shadow:var(--glass-shine),var(--lift-2);transform-origin:top right; } html[dir=rtl] .site-header .language-options{transform-origin:top left} html[lang] .site-header .language-options a{min-height:42px;padding:9px 14px;border-radius:14px;display:flex;align-items:center;transition:background-color .2s ease} html[lang] .site-header .language-options a:hover{background:var(--glass-fill)} html[lang] .site-header .language-options a[aria-current=page]{background:var(--glass-fill-hover);color:var(--ink)} .language-switch[open] .language-options{animation:pop-in .5s var(--spring-pop) both,fade-in .16s ease-out both} @keyframes pop-in{from{transform:translateY(-6px) scale(.9)}to{transform:none}} @keyframes fade-in{from{opacity:0}to{opacity:1}} /* Compact header: menu sheet below the bar. */ html[lang] .site-header .mobile-nav{display:none} html[lang] .site-header .menu-toggle{display:none} html[lang] .menu-toggle svg path{transform-box:fill-box;transform-origin:center;transition:transform .5s var(--spring-pop),opacity .2s ease} html[lang] .menu-toggle[aria-expanded=true] svg .m1{transform:translateY(4px) rotate(45deg)} html[lang] .menu-toggle[aria-expanded=true] svg .m2{transform:translateY(-4px) rotate(-45deg)} @media(max-width:1100px){ html[lang] .site-header .desktop-nav{display:none} html[lang] .site-header .menu-toggle{display:inline-grid} html[lang] .site-header .mobile-nav{ position:absolute;top:calc(100% + 8px);inset-inline:0;z-index:2; display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px; max-height:calc(100svh - 120px);overflow:auto;overscroll-behavior:contain; border:1px solid var(--glass-edge);border-radius:26px;background:var(--glass-strong); -webkit-backdrop-filter:blur(28px) saturate(1.8);backdrop-filter:blur(28px) saturate(1.8); box-shadow:var(--glass-shine),var(--lift-2); transform-origin:top right;opacity:0;visibility:hidden;pointer-events:none; transform:translateY(-10px) scale(.96); transition:opacity .18s ease,transform .35s var(--ease-out),visibility 0s linear .35s; } html[dir=rtl] .site-header .mobile-nav{transform-origin:top left} html[lang] .site-header .mobile-nav.is-open{ opacity:1;visibility:visible;pointer-events:auto;transform:none; transition:opacity .16s ease,transform .55s var(--spring-pop),visibility 0s; } html[lang] .site-header .mobile-nav a, html[lang][data-theme=dark] .site-header .mobile-nav a{ min-height:52px;padding:12px 16px;border-radius:18px;margin:0; display:flex;align-items:center;color:var(--ink); background:var(--glass-fill);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none; transition:transform .5s var(--spring-pop),background-color .2s ease; } html[lang] .site-header .mobile-nav a::before{content:none} html[lang] .site-header .mobile-nav a:active{transform:scale(.96);transition-duration:.12s} html[lang] .site-header .mobile-nav a[aria-current=page], html[lang][data-theme=dark] .site-header .mobile-nav a[aria-current=page]{ color:#a63f08;background:linear-gradient(135deg,#ffb36340,#ff8d3730);box-shadow:inset 0 0 0 1px #e6975055; } html[lang][data-theme=dark] .site-header .mobile-nav a[aria-current=page]{color:#ffba80} .mobile-nav.is-open a{animation:sheet-item .5s var(--ease-out) both} .mobile-nav.is-open a:nth-child(2){animation-delay:.02s}.mobile-nav.is-open a:nth-child(3){animation-delay:.04s} .mobile-nav.is-open a:nth-child(4){animation-delay:.06s}.mobile-nav.is-open a:nth-child(5){animation-delay:.08s} .mobile-nav.is-open a:nth-child(6){animation-delay:.1s}.mobile-nav.is-open a:nth-child(7){animation-delay:.12s} .mobile-nav.is-open a:nth-child(8){animation-delay:.14s} } @keyframes sheet-item{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @media(max-width:700px){ html[lang] .site-header{top:8px;margin-top:8px;width:calc(100% - 16px);border-radius:24px} html[lang] .site-header .header-inner{padding:6px;padding-inline-start:14px;gap:8px} html[lang] .site-header .header-actions{gap:6px} html[lang] .site-header .header-actions>.btn{display:none} html[lang] .site-header .icon-button,html[lang] .site-header .language-switch summary{min-width:40px;height:40px;min-height:40px} html[lang] .site-header .icon-button{width:40px} html{scroll-padding-top:104px} } @media(max-width:374px){ html[lang] .site-header .header-inner{padding-inline-start:10px} html[lang] .site-header .header-actions{gap:4px} html[lang] .site-header .language-switch summary{padding:0 8px} } /* ---------- Buttons: capsules that press in and spring back ---------- */ html[lang] :is(.btn,button.btn,.btn-secondary,.photo-detail-link){border-radius:var(--r-pill)} html[lang] :is(.btn,.chat-float,.client-brand-link,.photo-detail-link,.arrow-link){ transition:transform .55s var(--spring-pop),box-shadow .3s ease,background-color .25s ease,color .2s ease,filter .25s ease; } html[lang] body :is(.btn,.chat-float,.photo-detail-link):active{transform:scale(.95);transition-duration:.12s;transition-timing-function:ease-out} html[lang] body .btn-primary:active{transform:scale(.95)} .button-ripple{display:none!important} html[lang] .btn svg,html[lang] .arrow-link svg{transition:translate .45s var(--spring-pop),transform .45s var(--spring-pop)} @media(hover:hover){ html[lang] .btn:hover>svg{transform:none;translate:2px -2px} html[dir=rtl] .btn:hover>svg{translate:-2px -2px} html[lang] .btn:hover>svg.directional{transform:none} html[dir=rtl] .btn:hover>svg.directional{transform:scaleX(-1)} } html[lang] .chat-float{border-radius:var(--r-pill);box-shadow:0 10px 24px -8px rgb(203 59 5 / .55),inset 0 1px 0 rgb(255 255 255 / .35)} .is-route-transitioning .chat-float{visibility:visible;opacity:0;transform:scale(.8);transition:opacity .15s ease,transform .3s var(--ease-out)} /* ---------- One family of surfaces ---------- */ html[lang] body :is(.service-card,.feature-card,.contact-card,.review-card,.metric){border-radius:var(--r-lg)} html[lang] body :is(.mission-form,.google-profile){border-radius:30px} html[lang] body :is(.cta-panel,.process-panel,.pest-process-panel,.ribbon-visual-compact), html[dir=rtl] body :is(.cta-panel,.process-panel,.pest-process-panel,.ribbon-visual-compact), :root[data-theme=dark] body .ribbon-visual-compact{border-radius:var(--r-xl)} html[lang] body :is(.photo,.photo-team,.photo-training,.team-photo-link,.people-image>img,.service-image,.split>.photo,.split>.photo:first-child), html[dir=rtl] body :is(.photo,.photo-team,.people-image>img,.split>.photo,.split>.photo:first-child){border-radius:30px} /* Photos follow their frame; the logo decals on the motorcycle keep their own edges. */ html[lang] body :is(.photo,.team-photo-link)>img,html[lang] body .photo>picture>img{border-radius:inherit} html[lang] body .people-image::before,html[dir=rtl] body .people-image::before{border-radius:36px} html[lang] body .photo-note{border-radius:var(--r-md)} html[lang] body :is(.client-mark,.partner-mark){border-radius:20px} html[lang] body .client-brand-link{border-radius:14px} html[lang] body .google-profile-canvas{border-radius:20px} html[lang] body :is(.icon-box,.step-number,.step>span:first-child){border-radius:14px} html[lang] body :is(.chip,.service-number,.pest-places .chip){border-radius:var(--r-pill)} html[lang] body .field :is(input,select,textarea){ border-radius:14px;transition:border-color .2s ease,box-shadow .25s var(--ease-out),background-color .2s ease; } html[lang] body .field :is(input,select,textarea):focus{outline:none;box-shadow:var(--focus-ring);border-color:#e3782a} html[lang] body .route-message{border-radius:22px;-webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8);background:var(--glass-strong);box-shadow:var(--glass-shine),var(--lift-2)} html[lang] body .route-message button{border-radius:var(--r-pill)} @supports (corner-shape:squircle){ html[lang] body :is(.service-card,.feature-card,.contact-card,.review-card,.metric,.mission-form,.google-profile,.cta-panel,.process-panel,.pest-process-panel,.photo,.team-photo-link,.client-mark,.icon-box,.step-number,.photo-note,.field input,.field select,.field textarea,.language-options,.mobile-nav,.mobile-nav a){corner-shape:squircle} html[lang] body :is(.service-card,.feature-card,.contact-card,.review-card,.metric){border-radius:38px} html[lang] body :is(.mission-form,.google-profile){border-radius:44px} html[lang] body :is(.photo,.photo-team,.photo-training,.team-photo-link,.people-image>img,.service-image,.split>.photo,.split>.photo:first-child), html[dir=rtl] body :is(.photo,.photo-team,.people-image>img,.split>.photo,.split>.photo:first-child){border-radius:44px;corner-shape:squircle} html[lang] body :is(.cta-panel,.process-panel,.pest-process-panel){border-radius:50px} html[lang] body :is(.client-mark){border-radius:30px} html[lang] body :is(.photo,.team-photo-link)>img,html[lang] body .photo>picture>img{corner-shape:inherit} html[lang] body :is(.icon-box,.step-number){border-radius:20px} } html[lang] .footer-col a[href^="mailto:"] bdi{overflow-wrap:normal;word-break:normal} /* Cards: links lift and press; information cards stay calm. */ html[lang] body .service-card{ box-shadow:var(--lift-1);border-color:var(--hairline); transition:transform .6s var(--spring-pop),box-shadow .4s var(--ease-out),border-color .3s ease; } @media(hover:hover){ html[lang] body .service-grid a.service-card:hover, html[lang].js-motion body .service-grid a.service-card.visible:hover, html[lang] body a.service-card:hover{transform:translateY(-6px);box-shadow:var(--lift-2);border-color:var(--hairline)} html[lang] body .feature-card:hover,html[lang].js-motion body .feature-card.visible:hover{transform:none} html[lang] body a.service-card:hover .service-image img{transform:scale(1.035)} } html[lang] body a.service-card:active{transform:scale(.98);transition-duration:.15s} html[lang] body .service-card .service-image img{transition:transform .9s var(--ease-out)} html[lang] body :is(.feature-card,.contact-card){box-shadow:var(--lift-1);border-color:var(--hairline)} html[lang] body .client-mark{transition:transform .55s var(--spring-pop),box-shadow .3s ease} @media(hover:hover){html[lang] body .client-mark:hover{transform:translateY(-3px);box-shadow:var(--lift-1)}} /* ---------- Motion: reveals that never blink ---------- */ .js-motion .reveal,.js-motion .reveal.visible,.js-motion .reveal.reveal-entering{animation:none} .js-motion .reveal-pending{opacity:0;transform:translate3d(0,28px,0) scale(.985)} .js-motion .reveal-run{ transition:opacity .6s var(--ease-out) var(--reveal-delay,0ms),transform .9s var(--spring-soft) var(--reveal-delay,0ms); } .route-incoming .reveal-pending{opacity:1;transform:none} .enhanced-motion .page-heading :is(h1,.lead,.eyebrow){animation:none} /* First arrival only: later pages slide in already composed. */ .enhanced-motion.page-arrived:not(.client-navigated) .page-heading .eyebrow{animation:rise-in .6s var(--ease-out) both} .enhanced-motion.page-arrived:not(.client-navigated) .page-heading h1{animation:rise-in .75s var(--ease-out) .04s both} .enhanced-motion.page-arrived:not(.client-navigated) .page-heading .lead{animation:rise-in .75s var(--ease-out) .09s both} .enhanced-motion.page-arrived:not(.client-navigated) .ribbon-copy{animation:rise-in .9s var(--ease-out) .05s both} .route-incoming .page-heading :is(h1,.lead,.eyebrow){animation:none!important} @keyframes rise-in{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}} .stat-number{display:inline-block;min-inline-size:3ch} /* Hero video eases in over a frame-identical still. */ html[lang] .ribbon-video{transition:opacity .5s var(--ease-out)} .ribbon-hero.is-offscreen .ribbon-label{animation-play-state:paused} html[lang] .ribbon-label{animation-timing-function:cubic-bezier(.45,0,.55,1)} /* ---------- Page transitions (iOS navigation stack) ---------- */ /* The current page stays in the layout; the stage above it holds the dim and the new page. */ html[lang] .route-stage{position:fixed;inset:0;height:100vh;z-index:45;overflow:hidden;contain:strict;background:transparent} html[lang] .route-stage.is-preparing{visibility:visible;pointer-events:none} .route-panel{position:absolute;left:0;width:100%;background:var(--bg);will-change:transform;backface-visibility:hidden} [data-page-surface].route-outgoing{background:var(--bg);pointer-events:none} [data-page-surface].route-lifted{position:relative;z-index:46} /* Edge shadow as a gradient strip: a blurred box-shadow down a whole page is costly to paint. */ .route-top::before{content:"";position:absolute;top:0;bottom:0;left:-28px;width:28px;pointer-events:none; background:linear-gradient(to left,rgb(0 0 0 / .1),rgb(0 0 0 / .035) 35%,transparent)} html[dir=rtl] .route-top::before{left:auto;right:-28px;background:linear-gradient(to right,rgb(0 0 0 / .1),rgb(0 0 0 / .035) 35%,transparent)} .route-dim{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;will-change:opacity} :root[data-theme=dark] .route-dim{background:#000} html.is-lang-switching .site-header{opacity:0} html.is-lang-switching .route-stage{transition:none} /* Thin progress line while a page is fetched (hidden for fast hops). */ html::after{content:"";position:fixed;z-index:70;inset:0 0 auto;height:3px;pointer-events:none; background:linear-gradient(90deg,#ff9b05,#e9400d);transform:scaleX(0);transform-origin:0 50%;opacity:0} html[dir=rtl]::after{transform-origin:100% 50%} html.is-route-loading::after{opacity:1;transform:scaleX(.8);transition:transform 1.6s cubic-bezier(.1,.6,.2,1) .15s,opacity .15s .15s} /* Theme switch: a soft circular reveal from the toggle. */ html.theme-switching{view-transition-name:root} html.theme-switching::view-transition-old(root){animation:none!important} html.theme-switching::view-transition-new(root){animation:theme-reveal .7s var(--ease-ios) both!important} @keyframes theme-reveal{from{clip-path:circle(0 at var(--vt-x,90%) var(--vt-y,5%))}to{clip-path:circle(150vmax at var(--vt-x,90%) var(--vt-y,5%))}} html[lang] [data-theme-toggle] svg{animation:icon-turn .6s var(--spring-pop)} @keyframes icon-turn{from{transform:rotate(-90deg) scale(.6);opacity:0}to{transform:none;opacity:1}} html[lang] :is(a,button,summary,.btn):focus-visible{outline:2px solid #e3782a;outline-offset:3px} @media(prefers-reduced-motion:reduce){ html[lang] .site-header,html[lang] .site-header *,.nav-glider,.mobile-nav,.mobile-nav a,.language-options, html[lang] :is(.btn,.chat-float,.service-card,.client-mark,.ribbon-video){transition:none!important;animation:none!important} .js-motion .reveal-pending{opacity:1;transform:none} html.theme-switching::view-transition-new(root){animation:none!important} } /* v3.css */ /* ===== Mission v3 — loaded last. Colours come from the logo: black, vermilion #f03c0c, amber #fc8400. ===== */ :root{--v3-grad:linear-gradient(115deg,#f03c0c 0%,#f8660a 45%,#fc8400 100%);--v3-night:#0e0c0d;--v3-ease:cubic-bezier(.16,1,.3,1);--v3-glow:0 30px 80px -30px rgba(240,60,12,.55);--bg:#fcfaf7} :root[data-theme=dark]{--bg:#0d0c0d;--surface:#171516;--surface2:#1e1b1c;--line:#2f2a2b} ::selection{background:#fc8400;color:#120c08} .v3-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .v3-flip{rotate:180deg} :focus-visible{outline:2px solid #f8660a;outline-offset:3px} .v3-btn-glass{background:color-mix(in srgb,var(--surface) 55%,transparent);border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);color:var(--ink);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)} .v3-btn-light{background:#fff;color:#15100d;border:0;font-weight:800} .v3-btn-light svg{color:#f03c0c} .v3-magnetic{transition:translate .35s var(--v3-ease),transform .35s var(--v3-ease),box-shadow .35s var(--v3-ease)} .btn-primary{background:var(--v3-grad);background-size:160% 100%;border:0;box-shadow:0 14px 34px -14px rgba(240,60,12,.75);transition:background-position .6s var(--v3-ease),box-shadow .35s,translate .35s var(--v3-ease)} @media (hover:hover){.btn-primary:hover{background-position:100% 0;box-shadow:0 20px 44px -16px rgba(240,60,12,.85)}} .eyebrow{display:inline-flex;align-items:center;gap:12px;letter-spacing:.2em} .eyebrow::before{content:"";width:28px;height:2px;border-radius:2px;background:var(--v3-grad)} /* ---------- Hero: the big title over the moving rider ---------- */ [data-v3-hero]{isolation:isolate} .v3-hero-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 26%,transparent 52%)} [dir=rtl] .v3-hero-shade{background:linear-gradient(270deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 26%,transparent 52%)} [data-v3-hero] .ribbon-copy{z-index:3;will-change:transform,opacity} .v3-title{font-size:clamp(3.4rem,8.4vw,8.6rem)!important;line-height:.9!important;letter-spacing:-.045em!important;font-weight:800!important;margin:.18em 0 .28em!important} [dir=rtl] .v3-title{letter-spacing:0!important;line-height:1.12!important;font-size:clamp(2.8rem,7vw,7rem)!important} .v3-line{display:block;overflow:hidden;padding:.02em .04em .1em;margin:0 -.04em} .v3-line>*{display:inline-block;animation:v3Up 1.15s var(--v3-ease) var(--d,0s) both} .v3-title em{font-style:normal;background:linear-gradient(100deg,#f03c0c 0%,#fc8400 40%,#ffb15e 50%,#fc8400 60%,#f03c0c 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:v3Up 1.15s var(--v3-ease) var(--d,0s) both} .v3-rise{animation:v3Rise .9s var(--v3-ease) var(--d,0s) both} .v3-hero-intro{max-width:30ch;font-size:clamp(1.02rem,1.25vw,1.18rem);line-height:1.6;color:var(--muted);margin:0 0 26px} .v3-hero-cta{display:flex;flex-wrap:wrap;gap:12px} .v3-trust-chip{position:absolute;z-index:3;inset-inline-start:max(20px,calc((100vw - 1180px)/2));bottom:34px;display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 18px;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.02em;color:var(--ink);text-decoration:none;background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);box-shadow:0 18px 40px -24px rgba(20,10,5,.5);transition:transform .4s var(--v3-ease)} .v3-trust-chip img{height:20px;width:auto} .v3-on-dark{display:none} :root[data-theme=dark] .v3-on-dark{display:inline}:root[data-theme=dark] .v3-on-light{display:none} @media (hover:hover){.v3-trust-chip:hover{transform:translateY(-3px)}} .v3-scroll-cue{position:absolute;z-index:3;left:50%;bottom:30px;width:26px;height:42px;margin-left:-13px;border-radius:14px;border:2px solid color-mix(in srgb,var(--ink) 35%,transparent)} .v3-scroll-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#f8660a;animation:v3Cue 1.8s var(--v3-ease) infinite} @keyframes v3Up{from{transform:translate3d(0,105%,0) rotate(2deg)}to{transform:none}} @keyframes v3Rise{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}} } @keyframes v3Cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}} /* ---------- Impact: four live numbers, each with its own small picture ---------- */ .v3-impact{padding:clamp(40px,6vw,80px) 0 clamp(30px,4vw,56px)} .v3-impact-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0} .v3-stat{position:relative;padding:8px clamp(14px,2.4vw,34px) 0;border-inline-start:1px solid var(--line)} .v3-stat:first-child{border-inline-start:0;padding-inline-start:0} .v3-stat b{display:flex;align-items:baseline;font-size:clamp(2.4rem,4.6vw,4.4rem);font-weight:800;letter-spacing:-.04em;line-height:1} .v3-plus{background:var(--v3-grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-inline-start:2px} .v3-stat p{margin:10px 0 18px;color:var(--muted);font-size:.95rem} .v3-viz{display:flex;height:34px;align-items:flex-end;gap:4px} .v3-viz-bars i{flex:1;height:var(--h);border-radius:3px 3px 1px 1px;background:var(--v3-grad);opacity:.9;transform:scaleY(.08);transform-origin:bottom;transition:transform 1s var(--v3-ease) calc(var(--i)*55ms)} .v3-viz-road{position:relative;align-items:center;overflow:hidden;border-radius:20px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--ink) 22%,transparent) 0 14px,transparent 14px 26px) center/100% 2px no-repeat} .v3-viz-road i{position:absolute;inset:0;will-change:transform;animation:v3Ride 3.6s linear infinite;animation-delay:calc(var(--n,0)*-1.2s)}.v3-viz-road i::before{content:"";position:absolute;left:0;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#f8660a;box-shadow:0 0 0 4px rgba(248,102,10,.18)} .v3-viz-road i:nth-child(2){--n:1}.v3-viz-road i:nth-child(3){--n:2} [dir=rtl] .v3-viz-road i{animation-direction:reverse} @keyframes v3Ride{from{transform:translateX(-12%)}to{transform:translateX(100%)}} .v3-viz-grid{display:grid;grid-template-columns:repeat(22,1fr);gap:3px;align-content:end} .v3-viz-grid i{aspect-ratio:1;border-radius:2px;background:color-mix(in srgb,var(--ink) 12%,transparent);transition:background-color .4s calc(var(--i)*18ms)} .v3-viz-field{background:radial-gradient(circle,#f8660a 1px,transparent 1.6px) 0 0/7px 7px;-webkit-mask:linear-gradient(90deg,#000 30%,transparent);mask:linear-gradient(90deg,#000 30%,transparent);opacity:.25;transition:opacity 1.2s} .v3-stat.visible .v3-viz-bars i,.no-js .v3-viz-bars i{transform:none} .v3-stat.visible .v3-viz-grid i{background:#f8660a} .v3-stat.visible .v3-viz-field{opacity:.8} /* ---------- The talabat partnership ---------- */ .v3-talabat{position:relative;overflow:hidden;isolation:isolate;margin:clamp(30px,4vw,60px) 0;padding:clamp(70px,9vw,130px) 0;color:#fff;background:radial-gradient(60% 70% at 85% 30%,rgba(240,60,12,.32),transparent 60%),radial-gradient(50% 60% at 0% 100%,rgba(252,132,0,.18),transparent 70%),var(--v3-night)} .v3-ribbons{position:absolute;inset:-4% 0;width:100%;height:108%;z-index:-1;fill:none;stroke-linecap:round} .v3-ribbons path{stroke:#f8660a;stroke-width:38;opacity:.16;stroke-dasharray:2600;stroke-dashoffset:2600;animation:v3Draw 3.2s var(--v3-ease) .2s forwards} .v3-ribbons path+path{stroke:#fc8400;stroke-width:14;opacity:.22;animation-delay:.5s} @keyframes v3Draw{to{stroke-dashoffset:0}} .v3-talabat-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,6vw,90px);align-items:center} .v3-talabat .eyebrow{color:#ffab6b} .v3-talabat h2{margin:16px 0 22px;font-size:clamp(2rem,3.6vw,3.3rem);line-height:1.05;letter-spacing:-.03em;color:#fff} .v3-talabat h2 span{display:block;color:rgba(255,255,255,.88)} .v3-talabat-logo{display:block;height:clamp(54px,7vw,96px);width:auto;margin-top:.18em;filter:drop-shadow(0 18px 40px rgba(255,90,0,.35))} .v3-talabat .lead{color:rgba(255,255,255,.76);max-width:52ch} .v3-talabat-points{list-style:none;margin:30px 0 34px;padding:0;display:grid;gap:14px} .v3-talabat-points li{display:flex;gap:16px;align-items:flex-start;padding:16px 18px;border-radius:20px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);transition:background-color .4s,border-color .4s,transform .4s var(--v3-ease)} @media (hover:hover){.v3-talabat-points li:hover{background:rgba(255,255,255,.08);border-color:rgba(255,140,60,.35);transform:translateX(4px)}[dir=rtl] .v3-talabat-points li:hover{transform:translateX(-4px)}} .v3-ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--v3-grad);color:#fff;box-shadow:0 10px 24px -12px rgba(240,60,12,.8)} .v3-ico svg{width:21px;height:21px} .v3-talabat-points h3{margin:2px 0 4px;font-size:1.02rem;color:#fff} .v3-talabat-points p{margin:0;color:rgba(255,255,255,.66);font-size:.92rem;line-height:1.55} .v3-talabat-photo{position:relative;margin:0;perspective:1200px} .v3-tilt{position:relative;border-radius:34px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 50px 100px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--v3-ease)} .v3-tilt>.photo{position:absolute!important;inset:0;height:auto!important;aspect-ratio:auto!important;margin:0!important;border-radius:0!important} .v3-tilt img{height:100%!important;object-fit:cover!important;transition:scale 1.2s var(--v3-ease)} @media (hover:hover){.v3-talabat-photo:hover .v3-tilt img{scale:1.05}} .v3-tilt::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(14,12,13,.55))} .v3-talabat-badge{position:absolute;z-index:2;inset-inline-start:22px;bottom:22px;display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;font-weight:700;font-size:.9rem;color:#fff;background:rgba(20,16,17,.55);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} .v3-live{position:relative;width:9px;height:9px;border-radius:50%;background:#3ddc84}.v3-live::after{content:"";position:absolute;inset:0;border-radius:50%;background:#3ddc84;will-change:transform,opacity;animation:v3Live 2s ease-out infinite} @keyframes v3Live{from{transform:scale(1);opacity:.6}to{transform:scale(3.2);opacity:0}} .v3-orbit{position:absolute;z-index:-1;inset:-7%;border-radius:50%;border:1.5px dashed rgba(255,140,60,.3);will-change:transform;animation:v3Spin 50s linear infinite} @keyframes v3Spin{to{transform:rotate(360deg)}} /* ---------- Kinetic word band ---------- */ .v3-band{overflow:hidden;padding:clamp(18px,3vw,40px) 0;display:grid;gap:4px;user-select:none} .v3-band-row{overflow:hidden} .v3-band-track{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px);width:max-content;direction:ltr;will-change:transform;font-size:clamp(2.6rem,8.4vw,8.2rem);font-weight:800;letter-spacing:-.04em;line-height:1.08} [dir=rtl] .v3-band-track{letter-spacing:0;font-size:clamp(2.2rem,7vw,7rem)} .v3-band-row+.v3-band-row .v3-band-track span{color:transparent;-webkit-text-stroke:1.5px #f8660a} .v3-band-track i{flex:none;width:.32em;height:.32em;border-radius:50%;background:var(--v3-grad)} /* ---------- Service rail: drag, swipe or use the arrows ---------- */ .v3-rail-section .section-head{align-items:flex-end} .v3-rail-controls{display:flex;align-items:center;gap:10px} .v3-rail-hint{display:inline-flex;align-items:center;gap:8px;margin-inline-end:8px;color:var(--muted);font-size:.85rem;font-weight:600} .v3-rail-hint svg{width:20px;height:20px;color:#f8660a} .v3-rail-btn{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;transition:background-color .3s,color .3s,border-color .3s,transform .3s var(--v3-ease),opacity .3s} .v3-rail-btn svg{width:22px;height:22px} @media (hover:hover){.v3-rail-btn:not(:disabled):hover{background:#f03c0c;border-color:#f03c0c;color:#fff;transform:scale(1.06)}} .v3-rail-btn:disabled{opacity:.35;cursor:default} .v3-rail{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:max(20px,calc((100vw - 1180px)/2));padding:10px 0 30px} .v3-rail::-webkit-scrollbar{display:none} .v3-rail.is-scrollable{cursor:grab} .v3-rail.is-dragging{cursor:grabbing;scroll-snap-type:none} .v3-rail.is-dragging a{pointer-events:none} .v3-rail-track{display:flex;gap:20px;list-style:none;margin:0;padding:0 max(20px,calc((100vw - 1180px)/2))} .v3-rail-card{flex:none;width:clamp(290px,40vw,600px);scroll-snap-align:start} .v3-rail-card>a{position:relative;display:flex;flex-direction:column;height:100%;min-height:clamp(470px,44vw,600px);border-radius:32px;overflow:hidden;color:#fff;text-decoration:none;background:#1a1617;box-shadow:0 30px 60px -36px rgba(20,10,5,.55);transition:transform .5s var(--v3-ease),box-shadow .5s} .v3-rail-photo{position:absolute;inset:0} .v3-rail-photo>.photo{position:absolute!important;inset:0;height:auto!important;aspect-ratio:auto!important;margin:0!important;border-radius:0!important} .v3-rail-photo img{height:100%!important;object-fit:cover!important;transition:scale 1.4s var(--v3-ease)} .v3-rail-card>a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,12,13,0) 30%,rgba(14,12,13,.86) 82%)} .v3-rail-body{position:relative;z-index:1;margin-top:auto;padding:clamp(22px,2.6vw,34px)} .v3-rail-num{display:inline-grid;place-items:center;min-width:44px;height:30px;padding:0 10px;border-radius:999px;font-size:.8rem;font-weight:800;background:var(--v3-grad)} .v3-rail-body h3{margin:14px 0 6px;font-size:clamp(1.5rem,2.4vw,2.2rem);letter-spacing:-.02em;color:#fff} .v3-rail-short{margin:0 0 6px;color:#ffb27a;font-weight:700} .v3-rail-body p{color:rgba(255,255,255,.78);max-width:46ch;margin:0 0 16px} .v3-rail-body .arrow-link{color:#fff;font-weight:700} @media (hover:hover){.v3-rail-card>a:hover{transform:translateY(-6px);box-shadow:0 40px 80px -36px rgba(240,60,12,.55)}.v3-rail-card>a:hover .v3-rail-photo img{scale:1.06}} .v3-rail-end>a{align-items:flex-start;justify-content:flex-end;padding:clamp(26px,3vw,40px);background:var(--v3-grad)} .v3-rail-end>a::after{display:none} .v3-rail-end{width:clamp(240px,26vw,360px)} .v3-end-mark{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:rgba(255,255,255,.18);margin-bottom:auto} .v3-end-mark svg{width:30px;height:30px} .v3-rail-end h3{font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1.08;color:#fff;margin:0 0 18px} .v3-end-arrow{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#fff;color:#f03c0c;transition:transform .4s var(--v3-ease)} @media (hover:hover){.v3-rail-end>a:hover .v3-end-arrow{transform:translateX(6px)}[dir=rtl] .v3-rail-end>a:hover .v3-end-arrow{transform:translateX(-6px)}} .v3-rail-progress{height:3px;border-radius:3px;background:var(--line);overflow:hidden} .v3-rail-progress i{display:block;height:100%;width:calc(18% + var(--p,0) * 82%);border-radius:inherit;background:var(--v3-grad);transition:width .2s} [dir=rtl] .v3-rail-progress i{margin-inline-start:0} /* ---------- The delivery network ---------- */ .v3-network{position:relative;overflow:hidden;isolation:isolate;min-height:clamp(560px,52vw,740px);display:grid;align-content:center;color:#fff;background:radial-gradient(55% 70% at 70% 50%,rgba(240,60,12,.16),transparent 70%),#0b0a0b} [dir=rtl] .v3-network{background:radial-gradient(55% 70% at 30% 50%,rgba(240,60,12,.16),transparent 70%),#0b0a0b} .v3-net-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1} .v3-network-copy{max-width:470px;padding:60px 0} .v3-network .eyebrow{color:#ffab6b} .v3-network h2{color:#fff;font-size:clamp(2.1rem,4vw,3.6rem);line-height:1.04;letter-spacing:-.03em;margin:14px 0 18px} .v3-network .lead{color:rgba(255,255,255,.72)} .v3-legend{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px} .v3-legend li{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.75);font-size:.95rem} .v3-legend b{color:#fff;font-size:1.25rem;font-weight:800;min-width:3.4em} .v3-legend i{flex:none;width:12px;height:12px;border-radius:50%} .v3-legend .k-hub{background:#ff6a1a;box-shadow:0 0 0 5px rgba(255,106,26,.25)} .v3-legend .k-hyper{border-radius:3px;background:#ff9650} .v3-legend .k-mini{width:6px;height:6px;margin:3px;background:rgba(255,255,255,.55)} .v3-legend .k-rider{background:#ffd2a8;box-shadow:0 0 10px #ffa060} /* ---------- Clients, people ---------- */ .v3-clients{padding-top:clamp(50px,6vw,90px)} .v3-clients .client-mark{transition:transform .45s var(--v3-ease),box-shadow .45s,border-color .45s} @media (hover:hover){.v3-clients .client-mark:hover{transform:translateY(-4px);box-shadow:0 20px 40px -26px rgba(240,60,12,.55)}} .v3-people .people-image img{transition:scale 1.2s var(--v3-ease)} @media (hover:hover){.v3-people .people-image:hover img{scale:1.04}} /* ---------- Journey road: a motorcycle rides through the four steps ---------- */ .v3-journey{padding:clamp(70px,8vw,120px) 0 clamp(40px,5vw,70px)} .v3-road{position:relative;padding-top:78px} .v3-road-line{position:absolute;top:30px;inset-inline:12.5%;height:4px;border-radius:4px;background:repeating-linear-gradient(90deg,var(--line) 0 18px,transparent 18px 30px)} .v3-road-fill{position:absolute;inset-block:0;inset-inline-start:0;width:100%;border-radius:inherit;background:var(--v3-grad);transform-origin:0 50%;transform:scaleX(0);will-change:transform}[dir=rtl] .v3-road-fill{transform-origin:100% 50%} .v3-road-rider{position:absolute;top:-22px;inset-inline-start:0;margin-inline-start:-24px;will-change:transform;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--v3-grad);color:#fff;box-shadow:0 14px 30px -12px rgba(240,60,12,.85)} .v3-road-rider svg{width:26px;height:26px} [dir=rtl] .v3-road-rider svg{scale:-1 1} .v3-stops{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,30px)} .v3-stop{text-align:center;opacity:.45;transform:translateY(12px);transition:opacity .6s,transform .6s var(--v3-ease)} .v3-stop.is-on{opacity:1;transform:none} .v3-stop-dot{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;margin-bottom:14px;font-weight:800;font-size:.9rem;border:1.5px solid var(--line);background:var(--surface);transition:background-color .4s,color .4s,border-color .4s,scale .5s var(--v3-ease)} .v3-stop.is-on .v3-stop-dot{background:#15100d;border-color:#15100d;color:#fff;scale:1.08} :root[data-theme=dark] .v3-stop.is-on .v3-stop-dot{background:#fff;border-color:#fff;color:#15100d} .v3-stop h3{margin:0 0 8px;font-size:1.15rem} .v3-stop p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.6} /* ---------- Closing call ---------- */ .v3-cta-wrap{padding-bottom:clamp(50px,6vw,90px)} .v3-cta{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(70% 120% at 100% 0%,#fc8400,transparent 60%),linear-gradient(120deg,#d92f06,#f03c0c 45%,#f8660a)!important;color:#fff;border-radius:40px!important;padding:clamp(40px,6vw,80px)!important;box-shadow:var(--v3-glow)} .v3-cta h2{color:#fff;font-size:clamp(2rem,4.4vw,4rem)!important;letter-spacing:-.035em;line-height:1.02} .v3-cta p{color:rgba(255,255,255,.88)} .v3-cta-ribbons path{stroke:#fff;opacity:.13} .v3-cta-ribbons path+path{stroke:#ffd29e;opacity:.2} /* looping details pause while their section is off screen (site.js adds .v3-on) */ .v3-impact:not(.v3-on) .v3-viz-road i,.v3-talabat:not(.v3-on) .v3-orbit,.v3-talabat:not(.v3-on) .v3-live::after,[data-v3-hero]:not(.v3-on) .v3-scroll-cue span{animation-play-state:paused} /* ---------- Every page: headings that rise in, livelier cards, one CTA style, a night footer ---------- */ .v3-progress{position:fixed;z-index:200;inset:0 0 auto;height:3px;pointer-events:none;background:var(--v3-grad);transform-origin:0 50%;transform:scaleX(0);will-change:transform} [dir=rtl] .v3-progress{transform-origin:100% 50%} .page-heading h1{animation:v3Rise 1s var(--v3-ease) .05s both} .page-heading .lead,.page-heading .eyebrow{animation:v3Rise 1s var(--v3-ease) .2s both} .page-heading .breadcrumb{animation:v3Rise .8s var(--v3-ease) both} .feature-card{transition:transform .5s var(--v3-ease),box-shadow .5s,border-color .5s!important} .feature-card .icon-box{transition:background .4s,color .4s,transform .5s var(--v3-ease)} @media (hover:hover){ .feature-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,#f8660a 40%,var(--line));box-shadow:0 30px 60px -36px rgba(240,60,12,.45)} .feature-card:hover .icon-box{background:var(--v3-grad);color:#fff;transform:rotate(-6deg) scale(1.06)} .service-card img{transition:scale 1.2s var(--v3-ease)} .service-card:hover img{scale:1.06} } .cta-panel{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(70% 120% at 100% 0%,#fc8400,transparent 60%),linear-gradient(120deg,#d92f06,#f03c0c 45%,#f8660a)!important;box-shadow:var(--v3-glow)!important} .site-footer{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(60% 90% at 100% 0%,rgba(240,60,12,.18),transparent 60%),var(--v3-night)!important;color:rgba(255,255,255,.72);border-top:0!important;margin-top:clamp(30px,4vw,60px)} .site-footer::before{content:"MISSION";position:absolute;z-index:-1;inset-inline-start:-.04em;bottom:-.2em;font:800 clamp(5rem,19vw,17rem)/1 Manrope,Arial,sans-serif;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);pointer-events:none;direction:ltr} .site-footer h3{color:#fff!important} .site-footer a,.site-footer p,.site-footer span,.site-footer .footer-bottom{color:rgba(255,255,255,.66)!important} @media (hover:hover){.site-footer a:hover,.site-footer a:hover span{color:#ffab6b!important}} .site-footer .footer-bottom{border-color:rgba(255,255,255,.1)!important} .site-footer .brand-logo{filter:url(#mission-night-mark)} .site-footer .brand-talabat-day{display:none!important}.site-footer .brand-talabat-night{display:block!important} .site-footer .footer-social a{border-color:rgba(255,255,255,.16)!important;color:#fff!important} .v3-foot-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:clamp(40px,6vw,80px) 0 clamp(30px,4vw,50px);margin-bottom:clamp(26px,3vw,40px);border-bottom:1px solid rgba(255,255,255,.1)} .v3-foot-cta h2{margin:0;color:#fff;font-size:clamp(2rem,5vw,4.4rem);line-height:1;letter-spacing:-.04em;max-width:14ch} [dir=rtl] .v3-foot-cta h2{letter-spacing:0;line-height:1.25} /* ---------- Header: logo, the talabat partner line, navigation ---------- */ html[lang] header.site-header.v3-header{overflow:visible} .v3-brand{display:flex;align-items:center;flex-shrink:0} .v3-brand .brand-logo{width:128px;height:auto;display:block} :root[data-theme=dark] .v3-brand .brand-logo{filter:url(#mission-night-mark)} .v3-partnerbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:34px;padding:0 18px;border-radius:27px 27px 0 0;background:linear-gradient(90deg,#141012,#1d1517);color:#fff;font-size:.78rem;font-weight:700;overflow:hidden;max-height:40px;transition:max-height .45s var(--v3-ease),opacity .3s,min-height .45s var(--v3-ease)} .v3-pb-link{display:inline-flex;align-items:center;gap:9px;color:#fff;text-decoration:none;white-space:nowrap} .v3-pb-text{opacity:.86;letter-spacing:.01em} .v3-pb-logo{height:17px;width:auto;display:block} .v3-pb-live{position:relative;width:7px;height:7px;border-radius:50%;background:#ff7a2f} .v3-pb-live::after{content:"";position:absolute;inset:0;border-radius:50%;background:#ff7a2f;animation:v3Live 2.2s ease-out infinite} .v3-pb-motto{font-size:.68rem;letter-spacing:.22em;color:rgba(255,255,255,.55);white-space:nowrap} [dir=rtl] .v3-pb-motto{letter-spacing:0} @media (hover:hover){.v3-pb-link:hover .v3-pb-text{opacity:1;text-decoration:underline;text-underline-offset:3px}} html.v3-scrolled .v3-partnerbar{max-height:0;min-height:0;opacity:0} html[lang] .site-header.v3-header .desktop-nav a[aria-current=page]{color:#fff!important;background:var(--v3-grad)!important;box-shadow:0 8px 20px -10px rgba(240,60,12,.8)!important} html[lang] .site-header.v3-header .desktop-nav.has-glider a[aria-current=page]{background:transparent!important;box-shadow:none!important} .v3-header .desktop-nav .nav-glider,.v3-header .desktop-nav [class*=glider]{background:var(--v3-grad)!important;box-shadow:0 8px 20px -10px rgba(240,60,12,.8)!important} /* ---------- Page heroes: words rise, one living graphic per page ---------- */ .v3-ph{position:relative;overflow:hidden;padding:clamp(40px,6vw,90px) 0 clamp(50px,7vw,100px);isolation:isolate} .v3-ph::before{content:"";position:absolute;z-index:-1;inset:auto -10% -40% 30%;height:90%;background:radial-gradient(closest-side,rgba(248,102,10,.16),transparent);filter:blur(10px)} [dir=rtl] .v3-ph::before{inset:auto 30% -40% -10%} .v3-ph-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,5vw,80px);align-items:center} .v3-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:26px;font-size:.84rem;color:var(--muted)} .v3-crumbs a{color:var(--muted);text-decoration:none} @media (hover:hover){.v3-crumbs a:hover{color:#f03c0c}} .v3-crumbs i{width:5px;height:5px;border-radius:50%;background:#f8660a} .v3-crumbs [aria-current]{color:var(--ink);font-weight:700} .v3-ph-title{margin:14px 0 20px;font-size:clamp(2.6rem,6vw,5.6rem);line-height:.98;letter-spacing:-.045em;font-weight:800} [dir=rtl] .v3-ph-title{letter-spacing:0;line-height:1.2;font-size:clamp(2.2rem,5vw,4.6rem)} .v3-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em} .v3-w>span{display:inline-block;animation:v3Up 1s var(--v3-ease) calc(.15s + var(--i)*.07s) both} .v3-ph-title .v3-w:last-child>span{background:var(--v3-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .v3-ph-lead{max-width:56ch;font-size:clamp(1.02rem,1.3vw,1.2rem);line-height:1.65;color:var(--muted);margin:0} .v3-ph-art{position:relative;aspect-ratio:1/1;max-width:460px;width:100%;justify-self:end;border-radius:40px;overflow:hidden;background:radial-gradient(70% 70% at 70% 20%,rgba(248,102,10,.35),transparent 60%),radial-gradient(60% 60% at 10% 100%,rgba(240,60,12,.25),transparent 60%),#121011;box-shadow:0 50px 100px -50px rgba(20,8,4,.7)} [dir=rtl] .v3-ph-art{justify-self:start} .v3-art{position:absolute;inset:0;color:#fff} .v3-art-svg{position:absolute;inset:8%;width:84%;height:84%;overflow:visible} .v3-ph:not(.v3-on) .v3-art *,.v3-ph:not(.v3-on) .v3-art{animation-play-state:paused!important} /* orbit */ .v3-orbit-core{position:absolute;inset:36%;display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:0 0 0 12px rgba(255,255,255,.06),0 0 60px rgba(248,102,10,.6)} .v3-orbit-core img{width:64%;height:auto} .v3-orbit-ring{position:absolute;inset:14%;border-radius:50%;border:1.5px dashed rgba(255,170,110,.4);animation:v3Spin 26s linear infinite} .v3-orbit-ring2{inset:4%;border-style:solid;border-color:rgba(255,255,255,.06);animation-duration:60s;animation-direction:reverse} .v3-orbit-ring span{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(calc(-1 * 36cqw))} .v3-art-orbit{container-type:inline-size} .v3-orbit-ring span i{position:absolute;left:-28px;top:-28px;display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:var(--v3-grad);box-shadow:0 14px 30px -12px rgba(240,60,12,.9);animation:v3Spin 26s linear infinite reverse} .v3-orbit-ring span i svg{width:26px;height:26px;transform:rotate(calc(-1 * var(--a)))} /* route */ .v3-road{fill:none;stroke:rgba(255,255,255,.12);stroke-width:30;stroke-linecap:round} .v3-road-mid{fill:none;stroke:rgba(255,190,140,.7);stroke-width:2.5;stroke-dasharray:10 12;animation:v3Dash 1.2s linear infinite} @keyframes v3Dash{to{stroke-dashoffset:-22}} .v3-node{fill:#fff}.v3-node-end{fill:#f8660a;stroke:rgba(248,102,10,.35);stroke-width:12} .v3-mover circle{fill:rgba(248,102,10,.35)}.v3-mover .v3-mover-core{fill:#fff} .v3-art-tag{position:absolute;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .v3-art-tag svg{width:24px;height:24px} .v3-tag-a{left:8%;bottom:10%}.v3-tag-b{right:8%;top:6%;background:var(--v3-grad);border:0} /* grid */ .v3-cells{position:absolute;inset:14% 12% 26%;display:grid;grid-template-columns:repeat(11,1fr);gap:6px} .v3-cells i{border-radius:4px;background:rgba(255,255,255,.08);animation:v3Cell 4.4s ease-in-out infinite;animation-delay:calc(var(--i)*45ms)} @keyframes v3Cell{0%,100%{background:rgba(255,255,255,.08);transform:scale(.86)}40%,60%{background:#f8660a;transform:scale(1)}} .v3-art-grid b{position:absolute;left:12%;bottom:8%;font-size:clamp(2.6rem,8cqw,4rem);font-weight:800;letter-spacing:-.04em;color:#fff} .v3-art-grid{container-type:inline-size} [dir=rtl] .v3-art-grid b{left:auto;right:12%} /* radar */ .v3-radar{position:absolute;inset:12%;border-radius:50%;background:repeating-radial-gradient(circle,rgba(255,255,255,.08) 0 1px,transparent 1px 18%);border:1px solid rgba(255,255,255,.12);overflow:hidden} .v3-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(248,102,10,.55),rgba(248,102,10,0) 28%);animation:v3Spin 3.6s linear infinite} .v3-radar em{position:absolute;width:9px;height:9px;margin:-4px;border-radius:50%;background:#ffb27a;opacity:0;animation:v3Blip 3.6s ease-out infinite;animation-delay:calc(var(--i)*.7s)} @keyframes v3Blip{0%,100%{opacity:0;transform:scale(.4)}10%{opacity:1;transform:scale(1.2)}50%{opacity:0}} .v3-radar-core{position:absolute;inset:38%;display:grid;place-items:center;border-radius:50%;background:var(--v3-grad);box-shadow:0 0 40px rgba(248,102,10,.7)} .v3-radar-core svg{width:48%;height:48%} /* checks */ .v3-art-checks{display:grid;align-content:center;gap:14px;padding:12%} .v3-check{display:flex;align-items:center;gap:14px;padding:14px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)} .v3-check span{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);animation:v3CheckBg 6s infinite;animation-delay:calc(var(--i)*.8s)} .v3-check svg{position:static;width:20px;height:20px;inset:auto;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round} .v3-check svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:v3Tick 6s infinite;animation-delay:calc(var(--i)*.8s)} .v3-check i{height:10px;border-radius:5px;flex:1;background:linear-gradient(90deg,rgba(255,255,255,.22),rgba(255,255,255,.05))} @keyframes v3Tick{0%,8%{stroke-dashoffset:24}18%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:24}} @keyframes v3CheckBg{0%,8%{background:rgba(255,255,255,.1)}18%,85%{background:#f03c0c}100%{background:rgba(255,255,255,.1)}} /* pin */ .v3-ring{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;margin:-23% 0 0 -23%;border-radius:50%;border:1.5px solid rgba(248,102,10,.6);animation:v3Ring 3.6s ease-out infinite;animation-delay:calc(var(--i,0)*1.2s)} @keyframes v3Ring{from{transform:scale(.3);opacity:1}to{transform:scale(1.9);opacity:0}} .v3-pin{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:84px;height:84px;margin:-42px;border-radius:28px;background:var(--v3-grad);box-shadow:0 20px 50px -14px rgba(240,60,12,.9);animation:v3Bob 3s ease-in-out infinite} .v3-pin svg{width:42px;height:42px} @keyframes v3Bob{50%{transform:translateY(-8px)}} .v3-art-pin em,.v3-art-pin+em{position:absolute;width:8px;height:8px;margin:-4px;border-radius:50%;background:rgba(255,255,255,.75);box-shadow:0 0 14px rgba(255,170,110,.8);animation:v3Twinkle 3s ease-in-out infinite;animation-delay:calc(var(--i)*.5s)} @keyframes v3Twinkle{50%{opacity:.25;transform:scale(.6)}} /* chart */ .v3-bars{position:absolute;inset:16% 10% 16%;display:flex;align-items:flex-end;gap:5%} .v3-bars i{flex:1;height:var(--h);border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,#fc8400,#f03c0c);transform-origin:bottom;animation:v3Grow 5s var(--v3-ease) infinite;animation-delay:calc(var(--i)*.12s)} @keyframes v3Grow{0%{transform:scaleY(.1)}25%,80%{transform:scaleY(1)}100%{transform:scaleY(.1)}} .v3-trend{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:520;stroke-dashoffset:520;animation:v3Trend 5s var(--v3-ease) infinite} @keyframes v3Trend{0%{stroke-dashoffset:520}35%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:520}} /* steps */ .v3-stairs{position:absolute;inset:auto 10% 14% 10%;height:62%;display:flex;align-items:flex-end;gap:6px} .v3-stairs i{flex:1;height:calc(20% + var(--i)*20%);border-radius:12px 12px 4px 4px;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.05));border-top:3px solid #f8660a} .v3-climber{position:absolute;left:10%;bottom:26%;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--v3-grad);box-shadow:0 14px 30px -10px rgba(240,60,12,.9);animation:v3Climb 6s var(--v3-ease) infinite} .v3-climber svg{width:28px;height:28px} @keyframes v3Climb{0%,8%{transform:translate(0,0)}20%{transform:translate(110%,-62%)}36%{transform:translate(220%,-124%)}52%{transform:translate(330%,-186%)}68%,88%{transform:translate(440%,-248%)}100%{transform:translate(0,0)}} [dir=rtl] .v3-stairs{flex-direction:row-reverse} [dir=rtl] .v3-climber{left:auto;right:10%;animation-name:v3ClimbR} @keyframes v3ClimbR{0%,8%{transform:translate(0,0)}20%{transform:translate(-110%,-62%)}36%{transform:translate(-220%,-124%)}52%{transform:translate(-330%,-186%)}68%,88%{transform:translate(-440%,-248%)}100%{transform:translate(0,0)}} /* bubbles */ .v3-bubble{position:absolute;display:flex;align-items:center;gap:10px;width:62%;padding:16px 18px;border-radius:22px 22px 22px 6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);animation:v3Pop 6s var(--v3-ease) infinite;animation-delay:calc(var(--i)*.6s)} .v3-bubble:nth-child(2){border-radius:22px 22px 6px 22px;background:var(--v3-grad);border:0} .v3-bubble svg{flex:none;width:24px;height:24px} .v3-bubble i{height:9px;border-radius:5px;background:rgba(255,255,255,.4);flex:1} .v3-bubble i+i{flex:.6;opacity:.6} @keyframes v3Pop{0%{opacity:0;transform:translateY(16px) scale(.94)}12%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}} /* ---------- Shared page sections ---------- */ .v3-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,90px);align-items:center} .v3-split-copy h2{font-size:clamp(1.9rem,3.6vw,3.2rem);line-height:1.04;letter-spacing:-.03em;margin:12px 0 18px} [dir=rtl] .v3-split-copy h2{letter-spacing:0;line-height:1.3} .v3-media{position:relative;margin:0;border-radius:36px;overflow:hidden;aspect-ratio:5/4;box-shadow:0 40px 90px -50px rgba(20,8,4,.6)} .v3-media>.photo,.v3-media>img{position:absolute!important;inset:0;width:100%!important;height:100%!important;object-fit:cover!important;aspect-ratio:auto!important;margin:0!important;border-radius:0!important} .v3-media img{object-fit:cover!important;height:100%!important} .v3-mask.reveal-pending,.v3-mask.reveal-run{clip-path:inset(0 0 0 0 round 36px)} .js-motion .v3-mask.reveal-pending{clip-path:inset(18% 18% 18% 18% round 36px);opacity:1!important;transform:none!important} .js-motion .v3-mask.reveal-run{animation:v3Unmask 1.2s var(--v3-ease) both!important} @keyframes v3Unmask{from{clip-path:inset(18% 18% 18% 18% round 36px)}to{clip-path:inset(0 0 0 0 round 36px)}} .v3-frame{transform:rotate(-1.5deg);border:10px solid var(--surface);box-shadow:0 40px 90px -40px rgba(20,8,4,.55)} [dir=rtl] .v3-frame{transform:rotate(1.5deg)} .v3-video-frame{aspect-ratio:auto;overflow:visible;box-shadow:none;border-radius:0} .v3-tint{background:linear-gradient(180deg,transparent,color-mix(in srgb,#f8660a 5%,var(--bg)) 20%,color-mix(in srgb,#f8660a 5%,var(--bg)) 80%,transparent)} .v3-places{margin-top:clamp(40px,6vw,70px)} .v3-places h3{font-size:1rem;color:var(--muted);margin:0 0 14px} .v3-place-row{display:flex;flex-wrap:wrap;gap:10px} .v3-place-row span{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:700;transition:transform .4s var(--v3-ease),border-color .4s} .v3-place-row svg{width:18px;height:18px;color:#f03c0c} @media (hover:hover){.v3-place-row span:hover{transform:translateY(-3px);border-color:#f8660a}} .v3-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .v3-bento>:first-child{grid-row:span 2;display:flex;flex-direction:column;justify-content:flex-end;min-height:340px;background:radial-gradient(80% 60% at 100% 0%,rgba(248,102,10,.35),transparent 60%),#141012;color:#fff;border-color:transparent} .v3-bento>:first-child p{color:rgba(255,255,255,.72)}.v3-bento>:first-child h3{color:#fff;font-size:1.5rem} .v3-tile{position:relative;overflow:hidden;isolation:isolate;padding:28px;border-radius:28px;background:var(--surface);border:1px solid var(--line);transition:transform .5s var(--v3-ease),box-shadow .5s,border-color .5s} .v3-tile::before,.v3-ccard::before,.v3-sector::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(248,102,10,.18),transparent 70%);transition:opacity .3s} @media (hover:hover){.v3-tile:hover,.v3-ccard:hover{transform:translateY(-6px);border-color:color-mix(in srgb,#f8660a 45%,var(--line));box-shadow:0 30px 60px -36px rgba(240,60,12,.5)}.v3-tile:hover::before,.v3-ccard:hover::before,.v3-sector:hover::before{opacity:1}} .v3-tile-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;margin-bottom:20px;background:var(--v3-grad);color:#fff;box-shadow:0 12px 26px -12px rgba(240,60,12,.8);transition:transform .5s var(--v3-ease)} .v3-tile-ico svg{width:24px;height:24px} @media (hover:hover){.v3-tile:hover .v3-tile-ico{transform:rotate(-8deg) scale(1.08)}} .v3-tile-num{position:absolute;top:22px;inset-inline-end:26px;font-weight:800;font-size:.85rem;color:var(--muted);letter-spacing:.1em} .v3-tile h3{margin:0 0 8px;font-size:1.15rem} .v3-tile p{margin:0;color:var(--muted);line-height:1.6} .v3-dark-split{position:relative;padding:clamp(70px,9vw,120px) 0;margin:clamp(30px,4vw,60px) 0;color:#fff;background:radial-gradient(60% 80% at 100% 0%,rgba(240,60,12,.25),transparent 60%),var(--v3-night)} .v3-dark-split .eyebrow{color:#ffab6b} .v3-big-quote{color:#fff;font-size:clamp(1.8rem,3.4vw,3rem)!important} .v3-mission-note{margin-top:28px;padding:24px 26px;border-radius:24px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)} .v3-mission-note h3{margin:0 0 6px;color:#ffab6b}.v3-mission-note p{margin:0;color:rgba(255,255,255,.76)} .v3-dark-split .v3-frame{border-color:#221c1e} /* services index: rows with a photo that follows the cursor */ .v3-index{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .v3-index-row a{position:relative;display:grid;grid-template-columns:80px minmax(0,1.1fr) minmax(0,1fr) 64px;gap:24px;align-items:center;padding:34px 8px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;transition:padding .5s var(--v3-ease),background-color .4s} .v3-index-num{font-weight:800;font-size:1rem;color:#f03c0c} .v3-index-main b{display:block;font-size:clamp(1.6rem,3.2vw,2.8rem);letter-spacing:-.03em;line-height:1.05;transition:transform .5s var(--v3-ease)} .v3-index-main em{display:block;margin-top:8px;font-style:normal;font-weight:700;color:var(--muted)} .v3-index-body{color:var(--muted);line-height:1.6} .v3-index-go{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:1px solid var(--line);transition:background-color .4s,color .4s,border-color .4s,transform .5s var(--v3-ease)} .v3-index-go svg{width:22px;height:22px} .v3-index-thumb{position:absolute;z-index:5;left:0;top:0;width:300px;aspect-ratio:4/3;border-radius:22px;overflow:hidden;pointer-events:none;opacity:0;transform:translate3d(var(--tx,0),var(--ty,0),0) scale(.85) rotate(-4deg);transition:opacity .35s,transform .45s var(--v3-ease);box-shadow:0 30px 60px -20px rgba(20,8,4,.6)} .v3-index-thumb .photo,.v3-index-thumb picture{position:absolute!important;inset:0;height:100%!important;aspect-ratio:auto!important;margin:0!important} .v3-index-thumb img{height:100%!important;object-fit:cover!important} @media (hover:hover) and (pointer:fine){ .v3-index-row a:hover{padding-inline:24px;background:color-mix(in srgb,#f8660a 6%,transparent)} .v3-index-row a:hover .v3-index-main b{transform:translateX(10px)} [dir=rtl] .v3-index-row a:hover .v3-index-main b{transform:translateX(-10px)} .v3-index-row a:hover .v3-index-go{background:#f03c0c;border-color:#f03c0c;color:#fff;transform:rotate(-45deg)} [dir=rtl] .v3-index-row a:hover .v3-index-go{transform:rotate(45deg)} .v3-index-row a:hover .v3-index-thumb{opacity:1;transform:translate3d(var(--tx,0),var(--ty,0),0) scale(1) rotate(-3deg)} } .v3-overview .lead{margin-bottom:20px} .v3-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;padding:0} .v3-chips li{padding:8px 14px;border-radius:999px;font-weight:700;font-size:.88rem;background:color-mix(in srgb,#f8660a 10%,var(--surface));color:color-mix(in srgb,#f03c0c 80%,var(--ink));border:1px solid color-mix(in srgb,#f8660a 25%,transparent)} .v3-btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px} .v3-direct{display:grid;gap:10px;padding:22px 24px;border-radius:24px;background:var(--surface);border:1px solid var(--line)} .v3-direct h3{margin:0 0 4px;font-size:1rem} .v3-direct a,.v3-cline a,.v3-mail{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:700;width:fit-content} .v3-direct svg,.v3-cline svg,.v3-mail svg{width:18px;height:18px;color:#f03c0c} .v3-wa{color:#1e9e57!important}.v3-wa svg{color:#1e9e57!important} @media (hover:hover){.v3-direct a:hover,.v3-cline a:hover,.v3-mail:hover{color:#f03c0c}} .v3-quality-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(30px,4vw,50px)} .v3-quality-head h2{font-size:clamp(1.9rem,3.6vw,3.2rem);line-height:1.04;letter-spacing:-.03em;margin:12px 0 0} .v3-wide-photo{border-radius:36px;overflow:hidden} .v3-standards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .v3-standards li{position:relative;display:flex;gap:18px;padding:26px;border-radius:26px;background:var(--surface);border:1px solid var(--line)} .v3-std-check{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#15100d;color:#fff;transition:background-color .5s,transform .5s var(--v3-ease)} :root[data-theme=dark] .v3-std-check{background:#fff;color:#15100d} .v3-standards li.visible .v3-std-check{background:var(--v3-grad);color:#fff;transform:scale(1.06)} .v3-std-check svg{width:22px;height:22px} .v3-standards h3{margin:4px 0 6px;font-size:1.1rem}.v3-standards p{margin:0;color:var(--muted);line-height:1.6} .v3-std-num{position:absolute;inset-inline-end:22px;top:18px;font-weight:800;color:var(--line);font-size:2rem} .v3-journey-page{padding-top:clamp(50px,6vw,90px)} /* forms */ .v3-form-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,80px);align-items:start} .v3-form-side h2{font-size:clamp(1.8rem,3.2vw,2.8rem);line-height:1.06;letter-spacing:-.03em;margin:10px 0 24px} .v3-timeline{list-style:none;margin:0 0 28px;padding:0;position:relative} .v3-timeline::before{content:"";position:absolute;inset-block:10px;inset-inline-start:21px;width:2px;background:linear-gradient(180deg,#f03c0c,#fc8400,transparent)} .v3-timeline li{position:relative;display:flex;gap:18px;padding-bottom:22px} .v3-timeline li>span{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--surface);border:1px solid var(--line);color:#f03c0c;z-index:1} .v3-timeline li>span svg{width:20px;height:20px} .v3-timeline h3{margin:4px 0 4px;font-size:1.05rem}.v3-timeline p{margin:0;color:var(--muted)} .v3-mail-note{color:var(--muted);margin:0 0 8px} .v3-form-card{position:relative;padding:clamp(22px,3vw,40px);border-radius:34px;background:var(--surface);border:1px solid var(--line);box-shadow:0 40px 90px -50px rgba(20,8,4,.45)} .v3-form-card::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:var(--v3-grad);opacity:.5;filter:blur(18px)} .v3-form-card .form-title{margin-top:0} .v3-form-card .mission-form{padding:0!important;border:0!important;box-shadow:none!important;background:none!important} .v3-apply{padding:clamp(70px,9vw,120px) 0;background:radial-gradient(60% 80% at 0% 100%,rgba(240,60,12,.2),transparent 60%),var(--v3-night);color:#fff} .v3-apply h2{color:#fff}.v3-apply .lead{color:rgba(255,255,255,.75)}.v3-apply .eyebrow{color:#ffab6b} .v3-apply .v3-form-card{color:var(--ink)} /* contact */ .v3-contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .v3-ccard{position:relative;overflow:hidden;isolation:isolate;padding:30px;border-radius:30px;background:var(--surface);border:1px solid var(--line);transition:transform .5s var(--v3-ease),box-shadow .5s,border-color .5s} .v3-ccard h2{font-size:1.35rem;margin:0 0 12px}.v3-ccard p{color:var(--muted)} .v3-cline{padding:12px 0;border-top:1px solid var(--line);display:grid;gap:6px} .v3-cline h3{margin:0;font-size:.85rem;color:var(--muted);font-weight:700} .v3-social{display:flex;gap:14px;flex-wrap:wrap} .v3-social a{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-weight:700} .v3-social svg{width:18px;height:18px;color:#f03c0c} .v3-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px} .v3-duo-card{position:relative;overflow:hidden;display:block;padding:clamp(28px,4vw,46px);border-radius:32px;color:#fff;text-decoration:none;background:radial-gradient(70% 90% at 100% 0%,#fc8400,transparent 60%),linear-gradient(120deg,#d92f06,#f03c0c);transition:transform .5s var(--v3-ease),box-shadow .5s} .v3-duo-alt{background:radial-gradient(70% 90% at 100% 0%,rgba(248,102,10,.4),transparent 60%),#141012} .v3-duo-card .v3-tile-ico{background:rgba(255,255,255,.16);box-shadow:none} .v3-duo-card h2{color:#fff;font-size:clamp(1.5rem,2.6vw,2.2rem);margin:0 0 8px}.v3-duo-card p{color:rgba(255,255,255,.82);margin:0 0 22px} .v3-duo-go{display:inline-flex;align-items:center;gap:10px;font-weight:800} .v3-duo-go svg{width:20px;height:20px;transition:transform .4s var(--v3-ease)} @media (hover:hover){.v3-duo-card:hover{transform:translateY(-6px);box-shadow:0 40px 70px -36px rgba(240,60,12,.7)}.v3-duo-card:hover .v3-duo-go svg{transform:translateX(6px)}[dir=rtl] .v3-duo-card:hover .v3-duo-go svg{transform:translateX(-6px)}} .v3-eyebrow-light{color:#ffe0c7!important}.v3-eyebrow-light::before{background:#fff!important} /* sectors */ .v3-sector-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .v3-sector{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:14px;align-items:center;min-height:118px;padding:20px 20px;border-radius:26px;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:transform .5s var(--v3-ease),box-shadow .5s,border-color .5s,background-color .5s} .v3-sector-ico{grid-row:span 2;display:grid;place-items:center;width:54px;height:54px;border-radius:18px;background:color-mix(in srgb,#f8660a 12%,var(--surface));color:#f03c0c;transition:background .45s,color .45s,transform .55s var(--v3-ease)} .v3-sector-ico svg{width:26px;height:26px} .v3-sector-name{font-weight:800;font-size:1.08rem;line-height:1.25} .v3-sector-tag{grid-column:2;font-size:.8rem;font-weight:700;color:var(--muted)} .v3-sector-go{grid-row:span 2;grid-column:3;grid-row-start:1;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);transition:transform .5s var(--v3-ease),background-color .4s,color .4s,border-color .4s} .v3-sector-go svg{width:17px;height:17px} @media (hover:hover){ .v3-sector:hover{transform:translateY(-6px);border-color:transparent;box-shadow:0 30px 60px -32px rgba(240,60,12,.55)} .v3-sector:hover .v3-sector-ico{background:var(--v3-grad);color:#fff;transform:rotate(-8deg) scale(1.08)} .v3-sector:hover .v3-sector-go{background:#f03c0c;border-color:#f03c0c;color:#fff;transform:translateX(4px)} [dir=rtl] .v3-sector:hover .v3-sector-go{transform:translateX(-4px)} } .v3-sector:active{transform:scale(.98)} .v3-reviews-wrap{padding-bottom:20px} /* ---------- Tablets and phones ---------- */ @media (max-width:900px){ .v3-impact-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px} .v3-stat:nth-child(3){border-inline-start:0;padding-inline-start:0} .v3-talabat-grid{grid-template-columns:1fr} .v3-talabat-photo{max-width:520px} .v3-network{display:block;min-height:0} .v3-net-canvas{position:relative;display:block;height:380px;z-index:0} .v3-network-copy{padding:10px 0 70px;max-width:none} } @media (max-width:760px){ .v3-hero-intro{max-width:none} .v3-trust-chip{position:relative;inset:auto;bottom:auto;width:fit-content;margin:20px 20px 4px} .v3-scroll-cue{display:none} .v3-rail-hint{display:none} .v3-rail-card{width:84vw} .v3-rail-end{width:66vw} .v3-road{padding-top:0;padding-inline-start:70px} .v3-road-line{top:10px;bottom:10px;inset-inline:auto;inset-inline-start:22px;width:4px;height:auto;background:repeating-linear-gradient(180deg,var(--line) 0 18px,transparent 18px 30px)} .v3-road-fill{inset-inline:0;width:auto;height:100%;transform-origin:50% 0!important;transform:scaleY(0)} .v3-road-rider{top:0;inset-inline-start:-22px;margin-inline-start:0;margin-top:-24px} .v3-stops{grid-template-columns:1fr;gap:34px} .v3-stop{text-align:start} .v3-stop-dot{position:absolute;inset-inline-start:-70px;margin:0;width:44px;height:44px} .v3-stop{position:relative} } @media (max-width:520px){ .v3-stat b{font-size:2.3rem} .v3-stat{padding-inline:12px} .v3-band-track{font-size:3rem} } @media (prefers-reduced-motion:reduce){ .v3-line>*,.v3-title em,.v3-rise,.v3-ribbons,.v3-ribbons path,.v3-orbit,.v3-live::after,.v3-scroll-cue span,.v3-viz-road i{animation:none!important} .v3-ribbons path{stroke-dashoffset:0} .v3-viz-bars i{transform:none} .v3-stop{opacity:1;transform:none} } /* ---------- v3 pages: tablets and phones ---------- */ @media (max-width:980px){ .v3-ph-grid,.v3-split,.v3-quality-head,.v3-form-grid{grid-template-columns:1fr} .v3-ph-art{justify-self:start;max-width:420px} [dir=rtl] .v3-ph-art{justify-self:start} .v3-bento{grid-template-columns:repeat(2,minmax(0,1fr))} .v3-bento>:first-child{grid-row:auto;grid-column:1/-1;min-height:240px} .v3-standards,.v3-contact-grid,.v3-duo{grid-template-columns:1fr} .v3-sector-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .v3-index-row a{grid-template-columns:48px minmax(0,1fr) 52px;gap:14px;padding:26px 4px} .v3-index-body{grid-column:2/4} .v3-index-go{grid-row:1;grid-column:3;width:48px;height:48px} .v3-index-thumb{display:none} .v3-pb-motto{display:none} .v3-partnerbar{justify-content:center} } @media (max-width:560px){ .v3-bento{grid-template-columns:1fr} .v3-sector-grid{gap:10px} .v3-sector{grid-template-columns:1fr;grid-template-rows:auto;row-gap:10px;min-height:150px;padding:16px;align-content:start} .v3-sector-ico{grid-row:auto;width:46px;height:46px} .v3-sector-tag{grid-column:auto} .v3-sector-go{display:none} .v3-sector-name{font-size:1rem} .v3-brand .brand-logo{width:104px} .v3-partnerbar{min-height:30px;font-size:.72rem;padding:0 12px} .v3-pb-logo{height:15px} .v3-ph-title{font-size:clamp(2.3rem,11vw,3.2rem)} .v3-frame{border-width:6px} .v3-media{border-radius:26px} } @media (prefers-reduced-motion:reduce){ .v3-w>span,.v3-art *,.v3-pb-live::after{animation:none!important} .js-motion .v3-mask.reveal-pending{clip-path:none} } /* v6-polish.css */ /* v6-polish.css - v6 (2026-10-20). Site-wide polish and wayfinding. Loads after v3.css. Scope: header, footer and every page except the contact page and the home clients section (other lanes own those). Inner pages are matched by their v6 hero (.v6-ph, added in v3-pages.mjs for every page but contact); the home page by its rider hero. */ /* ---------- v6: one spacing step between sections (was 114-217px on phones, 200-357px on desktop) ---------- */ :root{--v6-pad:clamp(40px,5vw,72px)} @media (max-width:700px){:root{--v6-pad:36px}} :is(main:has(>.v6-ph),main:has(>.ribbon-hero)) .section:not(.v3-clients){padding-block:var(--v6-pad)} main .v6-ph{padding:clamp(20px,3vw,48px) 0 var(--v6-pad)} :is(main:has(>.v6-ph),main:has(>.ribbon-hero)) :is(.v3-journey,.people-section,.google-reviews-section){padding-block:var(--v6-pad)} main:has(>.ribbon-hero) .v3-impact{padding-block:var(--v6-pad)} :is(main:has(>.v6-ph),main:has(>.ribbon-hero)) :is(.v3-talabat,.v3-dark-split){margin-block:0;padding-block:calc(var(--v6-pad)*1.25)} main:has(>.v6-ph) .v3-apply{padding-block:calc(var(--v6-pad)*1.25)} main:has(>.ribbon-hero) .v3-band{padding-block:clamp(10px,2vw,26px)} :is(main:has(>.v6-ph),main:has(>.ribbon-hero)) .v3-cta-wrap{padding-block:var(--v6-pad)} :is(main:has(>.v6-ph),main:has(>.ribbon-hero)) .v3-cta-wrap>.v3-cta{margin-block:0} main:has(>.v6-ph) .v3-places{margin-top:clamp(28px,3.6vw,48px)} html[lang] .site-footer{margin-top:0;padding-top:var(--v6-pad)} html[lang] .site-footer .v3-foot-cta{padding-top:0} /* The page already closes with the orange call to action, so the footer does not repeat it. */ body:has(main>.v3-cta-wrap) .site-footer .v3-foot-cta{display:none} @media (max-width:700px){ main:has(>.ribbon-hero) .v3-network-copy{padding-bottom:calc(var(--v6-pad)*1.5)} :is(main:has(>.v6-ph),main:has(>.ribbon-hero)) .section-head{margin-bottom:22px} } /* ---------- v6: headings keep their word spaces ---------- styles.css tracks every h2 at -2px and h3 at -.6px. On small headings that eats the word space ("Comesayhello"). Track in em so it scales, and give tightly tracked display headings back a little word space. Low specificity on purpose: component rules still set their own tracking. */ :where(main:has(>.v6-ph),main:has(>.ribbon-hero),.site-footer) h2:not(:where(.v3-clients *)){letter-spacing:-.02em} :where(main:has(>.v6-ph),main:has(>.ribbon-hero),.site-footer) h3:not(:where(.v3-clients *)){letter-spacing:-.01em} html[lang=en] :is(main:has(>.v6-ph),main:has(>.ribbon-hero),.site-footer) h2:not(:where(.v3-clients *)){word-spacing:.06em} html[dir=rtl] :is(main:has(>.v6-ph),main:has(>.ribbon-hero),.site-footer) :is(h2,h3):not(:where(.v3-clients *)){letter-spacing:0} /* ---------- v6: readable small type on phones (labels >= 13px, secondary >= 15px, reading >= 16px) ---------- */ html[lang=en] :is(.eyebrow,.ribbon-eyebrow,.section .eyebrow,.people-section .eyebrow,.process-panel .eyebrow,.page-heading .eyebrow,.google-reviews-copy .eyebrow){font-size:13px} html[lang] .v3-partnerbar{font-size:13px} html[lang] .v3-pb-motto{font-size:12px} html[lang] .footer-brand .brand .brand-partner{font-size:13px} html[lang] .v3-rail-num{font-size:13px} html[lang] .v3-sector-tag{font-size:13.5px} html[lang] .form-grid>.form-note.full{font-size:15px} html[lang] .field small{font-size:13.5px} html[lang] .v3-talabat-points p{font-size:15px} @media (max-width:700px){ html[lang=en] :is(.eyebrow,.ribbon-eyebrow,.section .eyebrow,.people-section .eyebrow,.process-panel .eyebrow,.page-heading .eyebrow,.google-reviews-copy .eyebrow){letter-spacing:.1em} html[lang] .v3-stop p,html[lang] .v3-talabat-points p{font-size:16px} html[lang] .site-footer .footer-brand p{font-size:16px} html[lang]:not(.v3-scrolled) .v3-partnerbar{min-height:40px} html[lang] .v3-pb-link{align-self:stretch} html[lang] .v3-pb-logo{height:16px} } /* ---------- v6: tap targets of at least 48px on phones ---------- */ @media (max-width:700px){ html[lang] .site-header .icon-button,html[lang] .site-header .language-switch summary{min-width:48px;height:48px;min-height:48px} html[lang] .site-header .icon-button{width:48px} html[lang] .site-header .language-options a{min-height:48px} html[lang] .site-footer .footer-col a{padding-block:11px;margin-bottom:0} html[lang] .site-footer .footer-col h3{margin-bottom:6px} html[lang] .site-footer .footer-social{gap:6px} html[lang] .site-footer .footer-social a{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%} html[lang] .site-footer .back-top{display:inline-flex;align-items:center;gap:8px;min-height:48px} html[lang] .chat-float{width:52px;height:52px} html[lang] .v3-direct a,html[lang] .v3-mail{min-height:48px} main:has(>.v6-ph) .v3-direct{gap:0;padding-block:16px} html[lang] :is(.people-copy,.google-reviews-copy) .arrow-link,html[lang] .photo-detail-link{min-height:48px;display:inline-flex;align-items:center} html[lang] .google-profile .google-profile-footer{min-height:48px} } @media (max-width:700px){html[lang] .site-header .v3-brand{min-height:48px}} /* ---------- v6: wayfinding — current page in the navigation ---------- */ /* Phone menu: the current page is a solid brand pill with a dot, not a faint tint. */ html[lang] .site-header .mobile-nav a[aria-current=page], html[lang][data-theme=dark] .site-header .mobile-nav a[aria-current=page]{color:#fff;background:var(--v3-grad);box-shadow:0 10px 22px -12px rgba(240,60,12,.85)} html[lang] .site-header .mobile-nav a[aria-current=page]::after{content:"";flex:none;width:8px;height:8px;margin-inline-start:auto;border-radius:50%;background:#fff} /* Service pages (delivery, distribution, pest control) light up "Services" as their parent. */ html:has(.v6-ph .v3-crumbs a[href$="/services/"]) .site-header .desktop-nav a[href$="/services/"]{color:#fff;background:var(--v3-grad);box-shadow:0 8px 20px -10px rgba(240,60,12,.8)} html:has(.v6-ph .v3-crumbs a[href$="/services/"]) .site-header .mobile-nav a[href$="/services/"]{color:#fff;background:var(--v3-grad);box-shadow:0 10px 22px -12px rgba(240,60,12,.85)} html:has(.v6-ph .v3-crumbs a[href$="/services/"]) .site-header .mobile-nav a[href$="/services/"]::after{content:"";flex:none;width:8px;height:8px;margin-inline-start:auto;border-radius:50%;background:#fff} /* ---------- v6: breadcrumb with chevrons, readable size and full-height tap targets ---------- */ .v6-ph .v3-crumbs{gap:0 10px;margin-bottom:clamp(10px,1.6vw,18px);font-size:15px;font-weight:700} .v6-ph .v3-crumbs a{display:inline-flex;align-items:center;min-height:48px;color:var(--muted);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--muted) 35%,transparent);text-underline-offset:5px} .v6-ph .v3-crumbs>i{flex:none;width:7px;height:7px;border-radius:0;background:none;border:solid #f8660a;border-width:2px 2px 0 0;transform:rotate(45deg)} [dir=rtl] .v6-ph .v3-crumbs>i{transform:rotate(-135deg)} .v6-ph .v3-crumbs [aria-current]{color:var(--ink)} .v6-ph .v3-crumbs .v6-dots{margin-inline-start:auto} /* Page indicator: one dot per page in this group, the current one stretched. */ .v6-dots{display:inline-flex;align-items:center;gap:6px} .v6-dots i{width:8px;height:8px;border-radius:4px;background:color-mix(in srgb,var(--ink) 24%,transparent)} .v6-dots i.is-on{width:26px;background:var(--v3-grad)} /* ---------- v6: previous / next pager at the end of each page ---------- */ .v6-pager{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px 18px;padding-bottom:var(--v6-pad)} .v6-pager-mid{display:grid;justify-items:center;gap:8px;text-align:center} .v6-pager-count{font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--muted)} .v6-pager-hint{display:none;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--muted)} .v6-pager-hint svg{width:18px;height:18px;color:#f8660a} @media (hover:none) and (pointer:coarse){.v6-pager-swipe .v6-pager-hint{display:inline-flex}} .v6-pager-link{display:flex;align-items:center;gap:14px;min-height:76px;padding:14px 20px;border-radius:24px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;transition:border-color .3s,transform .4s var(--v3-ease),box-shadow .4s} .v6-pager-next{justify-content:flex-end;text-align:end} .v6-pager-link>span{min-width:0} .v6-pager-link small{display:block;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} [dir=rtl] .v6-pager-link small,[dir=rtl] .v6-pager-count{letter-spacing:0} .v6-pager-link b{display:block;font-size:17px;font-weight:800;line-height:1.3;overflow-wrap:break-word} .v6-pager-link svg{flex:none;width:22px;height:22px;color:#f03c0c} .v6-pager-next{border-color:color-mix(in srgb,#f8660a 45%,var(--line))} .v6-pager-empty{visibility:hidden} @media (hover:hover){.v6-pager a.v6-pager-link:hover{border-color:#f8660a;transform:translateY(-3px);box-shadow:0 24px 50px -30px rgba(240,60,12,.6)}} .v6-pager a.v6-pager-link:active{transform:scale(.98)} @media (max-width:700px){ .v6-pager{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px} .v6-pager-mid{grid-column:1/-1;grid-row:1;padding-bottom:4px} .v6-pager-link{min-height:72px;padding:12px 16px;gap:12px;border-radius:20px} .v6-pager-link b{font-size:16px} .v6-pager-empty{display:none} .v6-pager:has(.v6-pager-empty) .v6-pager-link{grid-column:1/-1} } /* Narrow phones: one link per row, so long names (Kurdish, Arabic) never break mid-word. */ @media (max-width:520px){ .v6-pager{grid-template-columns:minmax(0,1fr)} .v6-pager-next{justify-content:space-between;text-align:start} } /* ---------- v6: page heroes ---------- */ /* The glow under the hero stays inside the section, and the graphic's shadow may fall past the section's bottom (overflow is clipped sideways only), so neither leaves a hard line. */ main .v6-ph{overflow:clip visible} .v6-ph::before{inset:auto -10% 0 30%;height:85%} [dir=rtl] .v6-ph::before{inset:auto 30% 0 -10%} /* Phones: the decorative graphic becomes a short banner so the content starts sooner. */ @media (max-width:700px){ .v6-ph .v3-ph-grid{gap:22px} .v6-ph .v3-ph-art{aspect-ratio:auto;height:196px;max-width:none;border-radius:26px} .v6-ph .v3-art{inset:0 auto;left:50%;width:196px;translate:-50% 0} .v6-ph :is(.v3-art-route,.v3-art-chart,.v3-art-grid){width:250px} .v6-ph .v3-art-tag{width:42px;height:42px;border-radius:13px} .v6-ph .v3-art-tag svg{width:20px;height:20px} .v6-ph .v3-art-checks{left:0;right:0;width:auto;translate:none;padding:14px 18%;gap:8px} .v6-ph .v3-check{padding:6px 12px;gap:10px;border-radius:14px} .v6-ph .v3-check span{width:26px;height:26px} .v6-ph .v3-check svg{width:15px;height:15px} .v6-ph .v3-art-bubbles{left:0;right:0;width:auto;translate:none} .v6-ph .v3-bubble{padding:12px 16px;width:56%} .v6-ph .v3-pin{width:68px;height:68px;margin:-34px;border-radius:22px} .v6-ph .v3-pin svg{width:34px;height:34px} } /* ---------- v6: cards ---------- */ /* Even grid: the tall first tile left empty cells (3 tiles: a hole beside it; 6 tiles: a lone last row). */ main:has(>.v6-ph) .v3-bento>:first-child{grid-row:auto;min-height:0;justify-content:flex-start;border-color:color-mix(in srgb,#f8660a 32%,transparent)} @media (max-width:980px){ main:has(>.v6-ph) .v3-bento>:first-child{grid-column:auto} main:has(>.v6-ph) .v3-bento>:first-child:nth-last-child(odd){grid-column:1/-1} } @media (max-width:560px){ main:has(>.v6-ph) .v3-tile{padding:22px 22px 24px;border-radius:24px} main:has(>.v6-ph) .v3-tile-ico{width:46px;height:46px;margin-bottom:14px;border-radius:14px} main:has(>.v6-ph) .v3-bento{gap:12px} } /* Standards: the big number no longer runs into the heading. */ main:has(>.v6-ph) .v3-standards li>div{padding-inline-end:46px} @media (max-width:560px){ main:has(>.v6-ph) .v3-standards li{padding:20px;gap:14px} main:has(>.v6-ph) .v3-standards li>div{padding-inline-end:0} main:has(>.v6-ph) .v3-std-num{display:none} } /* Service contact card: one style for phone, email and WhatsApp (WhatsApp green was off-palette). */ main:has(>.v6-ph) .v3-direct .v3-wa{color:var(--ink)!important} main:has(>.v6-ph) .v3-direct .v3-wa svg{color:#f03c0c!important} /* Forms: the inner form kept a 44px rounded, clipped corner that cut the first letter of "Required fields"; the card around it already draws the shape. Its old top line is dropped too. */ html[lang] body main:has(>.v6-ph) .v3-form-card .mission-form{border-radius:0} main:has(>.v6-ph) .v3-form-card .mission-form::before{display:none} /* ---------- v6: one solid white button on every orange panel (it was a see-through ghost) ---------- */ html[lang] .cta-panel .btn.v3-btn-light,html[lang] .cta-panel .btn.v3-btn-light:hover{background:#fff;color:#15100d;border:0;box-shadow:0 16px 34px -16px rgba(70,16,0,.6)} html[lang] .cta-panel .btn.v3-btn-light svg{color:#f03c0c} /* Footer "Let's talk": the footer's 66% white link colour had reached the button text. */ html[lang] .site-footer .btn-primary,html[lang] .site-footer .btn-primary span{color:#fff!important} /* ---------- v6: photos fill their frames (the old .photo max-height left a dark strip) ---------- */ main:has(>.ribbon-hero) :is(.v3-tilt,.v3-rail-photo)>.photo{max-height:none!important;min-height:0!important} /* With the photo now full height, the text needs a deeper shade behind it. */ main:has(>.ribbon-hero) .v3-rail-card>a::after{background:linear-gradient(180deg,rgba(14,12,13,0) 22%,rgba(14,12,13,.62) 48%,rgba(14,12,13,.93) 78%)} /* Phones: service cards stack photo over text so the text never sits on a bright photo. */ @media (max-width:700px){ main:has(>.ribbon-hero) .v3-rail-card>a{min-height:0} main:has(>.ribbon-hero) .v3-rail-photo{position:relative;flex:none;height:210px} main:has(>.ribbon-hero) .v3-rail-card>a::after{inset:0 0 auto;height:210px;background:linear-gradient(180deg,transparent 55%,rgba(26,22,23,.85))} main:has(>.ribbon-hero) .v3-rail-body{margin-top:-46px;padding:0 22px 22px} main:has(>.ribbon-hero) .v3-rail-end>a{min-height:340px} } /* ---------- v6: night sections — glows stay inside their section, so no hard bands at the edges ---------- */ main:has(>.ribbon-hero) .v3-talabat{background:radial-gradient(50% 55% at 80% 45%,rgba(240,60,12,.3),transparent 70%),radial-gradient(40% 38% at 8% 70%,rgba(252,132,0,.16),transparent 70%),var(--v3-night)} main:has(>.v6-ph) .v3-dark-split{background:radial-gradient(45% 55% at 90% 45%,rgba(240,60,12,.24),transparent 70%),var(--v3-night)} main:has(>.v6-ph) .v3-apply{background:radial-gradient(45% 55% at 8% 55%,rgba(240,60,12,.2),transparent 70%),var(--v3-night)} html[lang] .site-footer{background:radial-gradient(45% 60% at 92% 45%,rgba(240,60,12,.16),transparent 70%),var(--v3-night)!important} /* ---------- v6: logo colours only ---------- */ /* The "On the road with talabat" live dot was green; it now pulses in brand orange like the header dot. */ main:has(>.ribbon-hero) .v3-talabat-badge .v3-live,main:has(>.ribbon-hero) .v3-talabat-badge .v3-live::after{background:#fc8400} /* The page-loading line used a yellower amber (#ff9b05); it now uses the logo gradient. */ html[lang]::after{background:var(--v3-grad)} /* ---------- v6: Google reviews card — one "Open in Google Maps" link, not two ---------- */ :is(main:has(>.v6-ph),main:has(>.ribbon-hero)) .google-profile-placeholder .arrow-link{display:none} /* Reviews page: the star badge repeated the hero graphic right above it. */ main:has(>.v6-ph) .v3-reviews-wrap .google-review-symbol{display:none} /* ---------- v6 review fixes ---------- */ /* Phones: these night sections are much taller than wide, so the %-sized glows above became narrow vertical stripes with a visible edge. Fixed-size glows read as one soft corner light instead. */ @media (max-width:700px){ main:has(>.ribbon-hero) .v3-talabat{background:radial-gradient(380px 460px at 100% 16%,rgba(240,60,12,.28),transparent 70%),radial-gradient(320px 380px at 0% 84%,rgba(252,132,0,.13),transparent 70%),var(--v3-night)} main:has(>.v6-ph) .v3-dark-split{background:radial-gradient(360px 420px at 100% 58%,rgba(240,60,12,.22),transparent 70%),var(--v3-night)} main:has(>.v6-ph) .v3-apply{background:radial-gradient(360px 420px at 0% 18%,rgba(240,60,12,.18),transparent 70%),var(--v3-night)} html[lang] .site-footer{background:radial-gradient(380px 440px at 100% 0%,rgba(240,60,12,.16),transparent 70%),var(--v3-night)!important} /* The 48px social tap boxes centred the icons 16px in from the text edge; pull the row back in line. */ html[lang] .site-footer .footer-social{margin-inline-start:-16px} } /* Footer "Trusted partner of talabat": at 13px the Kurdish and Arabic label wrapped onto two lines beside the logo (the lockup is only 180px wide). Keep it on one line; there is free space beside it. */ html[lang] .footer-brand .brand .brand-partner{white-space:nowrap;width:max-content} /* RTL: the lockup is forced left-to-right, so Arabic and Kurdish read "talabat" before "Trusted partner of". Follow the page direction, as the header partner bar already does. */ html[dir=rtl] .footer-brand .brand .brand-partner{direction:rtl} /* Careers ends with the night form section, so the pager needs its own top space (in day mode it sat flush against the dark edge). */ main>.v3-apply+.v6-pager{padding-top:var(--v6-pad)} /* Phones: the orange panel's 40px padding squeezed headings into three lines and wrapped the button text inside its pill (three lines in Kurdish at 320px). Less padding, and a full-width button. */ @media (max-width:560px){ :is(main:has(>.v6-ph),main:has(>.ribbon-hero)) .v3-cta-wrap>.v3-cta{padding:32px 24px!important} :is(main:has(>.v6-ph),main:has(>.ribbon-hero)) .v3-cta-wrap>.v3-cta .btn{width:100%;min-width:0;padding-inline:20px;gap:12px} } @media (max-width:374px){ :is(main:has(>.v6-ph),main:has(>.ribbon-hero)) .v3-cta-wrap>.v3-cta{padding:28px 20px!important} :is(main:has(>.v6-ph),main:has(>.ribbon-hero)) .v3-cta-wrap>.v3-cta .btn{padding-inline:16px;gap:10px} } @media (prefers-reduced-motion:reduce){ .v6-pager-link{transition:none} .v6-pager a.v6-pager-link:hover,.v6-pager a.v6-pager-link:active{transform:none} } /* v6-clients.css */ /* v6-clients.css - v8 (2026-10-21): the home "Our clients" section (markup: src/partners.mjs). Two parts, each in its own panel: 1. Logistics - talabat only: a name bar (Logistics icon, the service name = link to its page, "Logistics · 1 client", an arrow), the service's one line, then one large light logo plate with talabat's official artwork, "Trusted partner of [talabat]", leading to the home talabat section. 2. Distribution and other services - every other client: a name bar ("11 clients"), links to the Retail distribution and Pest control pages, then one light logo board divided by hairlines. Each name bar is tinted in its part's colour from the logo palette (#f03c0c red-orange, #fc8400 amber). Desktop (>= 1120px): side by side, Logistics the narrower panel (5 : 7), both the same height (mirrored in RTL), their name bars, second rows and plate / board aligned row for row (subgrid). Below that the panels stack; the name bar of a part with a logo board stays in view (sticky) while its logos scroll past, and lifts into a floating card while it is held (v6-clients.js sets .is-stuck). Logos keep their original artwork: the board is light in night and day mode, every board logo gets the same visual area (its --lw) within its cell's caps, and the sheet's white paper melts into the board; the talabat plate is light paper by day and a dark spotlight at night, where its orange badge reads best. Motion is CSS only, calm and quick: the shared reveal, the part's top line drawing in, the logos settling in one after another, an arrow nudge on hover. Reduced motion: nothing moves. */ .v6-clients{ --v6-gap:20px; /* between the two panels */ --v6-pad:28px; /* inside a panel */ --v6-r:30px; /* panel corners */ --v6-panel-bg:#ffffff; --v6-panel-line:#ebe6e1; --v6-band-mix:9%; /* how much of the part's colour tints the name bar */ --v6-paper:#fdfdfd; /* plate and board; the same white as the client sheet's paper */ --v6-hair:#ece8e4; /* the hairlines between logos */ --v6-board-ring:#e6e1dc; --v6-board-shadow:0 18px 36px -30px rgb(60 30 10 / .35); --v6-chip-bg:#faf7f4; --v6-chip-line:rgb(24 22 28 / .10); --v6-k1:#c2360a; /* the sector word in the subline: about 5:1 on the bar */ --v6-k2:#a65300; /* logo board: row height, logo base size, the logo's height / width caps inside a cell */ --row-h:clamp(122px,9.2vw,134px); /* tall enough that the tall logos reach their equal-area size */ --la:102px; --mh:.72; --mw:84%; /* the talabat plate: light paper by day (like the board), a dark spotlight at night, where talabat's orange badge reads best; a warm light behind the logo either way */ --plate-bg:radial-gradient(54% 62% at 50% 44%,rgb(252 132 0 / .13),rgb(252 132 0 / 0) 72%),var(--v6-paper); --plate-ring:0 0 0 1px var(--v6-board-ring); --plate-ink:#2b2425; --plate-lead:#4a4142; --plate-thread:.5; /* the fine line of the plate's silk ribbon */ --plate-band:.13; /* its soft band */ --plate-min:240px; /* the plate's height when it does not stand beside the board */ --v6-stick:84px; /* below the floating site header (stacked layouts only) */ } :root[data-theme=dark] .v6-clients{ --v6-panel-bg:#161415; --v6-panel-line:#2c2728; --v6-band-mix:22%; --v6-paper:#f4f2ef; /* a softer white at night; the paper of the sheet melts into it */ --v6-hair:#e2ded9; --v6-board-ring:rgb(255 255 255 / .06); --v6-board-shadow:0 24px 44px -30px rgb(0 0 0 / .9); --v6-chip-bg:rgb(255 255 255 / .04); --v6-chip-line:rgb(255 255 255 / .12); --v6-k1:#ff7c4d; /* about 6:1 on the night bar */ --v6-k2:#ffa443; --plate-bg:radial-gradient(58% 62% at 50% 46%,rgb(240 60 12 / .22),rgb(240 60 12 / 0) 72%),linear-gradient(180deg,#1f1a1b,#171314); --plate-ring:inset 0 0 0 1px rgb(255 255 255 / .07); --plate-ink:#f6f5f0; --plate-lead:#d9d2cc; /* about 11:1 on the plate */ --plate-thread:.75; --plate-band:.2; } /* Heading: the same eyebrow + big title as the other home sections, then one short line. */ .v6-clients .v6-cl-head{margin-bottom:clamp(28px,3vw,44px)} /* English eyebrows are 12px site-wide, below the 13px label floor; ar/ku ones are already 14px. */ html[lang=en] .v6-clients .v6-cl-head .eyebrow{font-size:13px} html[lang] .v6-clients .v6-cl-head .lead{max-width:60ch;margin:16px 0 0;text-wrap:pretty} @media (min-width:880px){ .v6-cl-head>div{display:grid;grid-template-columns:minmax(0,auto) minmax(0,600px);justify-content:start;align-items:end;column-gap:56px} .v6-cl-head .eyebrow{grid-column:1} .v6-cl-head h2{grid-column:1;grid-row:2} html[lang] .v6-clients .v6-cl-head .lead{grid-column:2;grid-row:1/span 2;align-self:end;margin:0} } /* ---------- The two panels ---------- */ .v6-cl-sectors{display:grid;grid-template-columns:minmax(0,1fr);gap:16px} /* --tint = the part's colour; --gx = where its glow comes from (each panel's outer corner when side by side, so the pair reads as one mirrored set; the start corner when stacked). */ .v6-cl-panel{--tint:#f03c0c;--kind:var(--v6-k1);--gx:0%; position:relative;display:flex;flex-direction:column;min-width:0;border-radius:var(--v6-r); background:var(--v6-panel-bg);border:1px solid var(--v6-panel-line);overflow:clip; box-shadow:0 1px 2px rgb(40 20 10 / .04),0 24px 48px -36px rgb(40 20 10 / .22)} .v6-cl-panel[data-sector=distribution]{--tint:#fc8400;--kind:var(--v6-k2)} :root[data-theme=dark] .v6-cl-panel{background:linear-gradient(180deg,#181516,#121011 85%);box-shadow:inset 0 1px 0 rgb(255 255 255 / .045),0 30px 60px -40px rgb(0 0 0 / .9)} [dir=rtl] .v6-cl-panel{--gx:100%} @media (min-width:1120px){ .v6-cl-panel[data-sector=distribution]{--gx:100%} [dir=rtl] .v6-cl-panel[data-sector=distribution]{--gx:0%} } /* a fine line of the part's colour along the top edge, brightest above the glow */ .v6-cl-panel::before{content:"";position:absolute;z-index:4;top:0;inset-inline:0;height:1px;pointer-events:none; background:linear-gradient(90deg,color-mix(in srgb,var(--tint) 85%,transparent),transparent 62%)} @media (min-width:1120px){ .v6-cl-panel[data-sector=distribution]::before{background:linear-gradient(270deg,color-mix(in srgb,var(--tint) 85%,transparent),transparent 62%)} [dir=rtl] .v6-cl-panel[data-sector=distribution]::before{background:linear-gradient(90deg,color-mix(in srgb,var(--tint) 85%,transparent),transparent 62%)} } [dir=rtl] .v6-cl-panel[data-sector=logistics]::before{background:linear-gradient(270deg,color-mix(in srgb,var(--tint) 85%,transparent),transparent 62%)} @media (max-width:1119px){[dir=rtl] .v6-cl-panel::before{background:linear-gradient(270deg,color-mix(in srgb,var(--tint) 85%,transparent),transparent 62%)}} /* at night the line carries a soft glow of its own colour (it rides the same draw-in) */ :root[data-theme=dark] .v6-cl-panel::before{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--tint) 55%,transparent))} /* Name bar: the part's glow, the service icon, its name, the subline ("Logistics · 1 client" / "11 clients") and, when the name is a link, an arrow; the whole bar is then the link's hit area. */ .v6-cl-bar{position:relative;z-index:3;display:flex;align-items:center;gap:18px;min-width:0;isolation:isolate; padding:26px var(--v6-pad) 24px;border-radius:calc(var(--v6-r) - 1px) calc(var(--v6-r) - 1px) 0 0; background:radial-gradient(120% 190% at var(--gx) 0%,color-mix(in srgb,var(--tint) var(--v6-band-mix),transparent),transparent 60%),var(--v6-panel-bg); box-shadow:inset 0 -1px 0 var(--v6-panel-line)} /* on devices with a fine pointer, the site's soft spotlight follows the cursor over a linked bar (v3.js sets --mx/--my on [data-v3-spot], as on the "Pick your sector" tiles) */ .v6-cl-bar::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;pointer-events:none; background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--tint) 16%,transparent),transparent 70%)} @media (hover:hover) and (pointer:fine){.v6-cl-bar[data-v3-spot]:hover::before{opacity:1}} /* the ribbon: rises from the panel's outer side and fades out before the end of the bar */ .v6-cl-ribbon{position:absolute;inset:0;z-index:-2;width:100%;height:100%;fill:none;stroke-linecap:round;pointer-events:none; -webkit-mask-image:linear-gradient(90deg,transparent 4%,#000 22%,#000 46%,transparent 86%);mask-image:linear-gradient(90deg,transparent 4%,#000 22%,#000 46%,transparent 86%)} .v6-cl-ribbon path{vector-effect:non-scaling-stroke;stroke:var(--tint);stroke-width:34;opacity:.09} .v6-cl-ribbon path+path{stroke:#fc8400;stroke-width:10;opacity:.15} :root[data-theme=dark] .v6-cl-ribbon path{opacity:.16} :root[data-theme=dark] .v6-cl-ribbon path+path{opacity:.26} /* mirrored on the part whose glow sits on the right */ [dir=rtl] .v6-cl-ribbon{transform:scaleX(-1)} @media (min-width:1120px){ .v6-cl-panel[data-sector=distribution] .v6-cl-ribbon{transform:scaleX(-1)} [dir=rtl] .v6-cl-panel[data-sector=distribution] .v6-cl-ribbon{transform:none} } .v6-cl-ico{flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:19px;color:#fff; background:linear-gradient(140deg,#f03c0c,#f8660a 70%);box-shadow:0 16px 28px -16px color-mix(in srgb,var(--tint) 95%,transparent),inset 0 1px 0 rgb(255 255 255 / .24)} .v6-cl-panel[data-sector=distribution] .v6-cl-ico{background:linear-gradient(140deg,#f8660a,#fc8400 75%)} .v6-cl-ico svg{width:27px;height:27px;stroke-width:1.8} .v6-cl-bar-text{flex:1;min-width:0} html[lang] .v6-clients .v6-cl-title{margin:0;font-size:clamp(24px,2.15vw,31px);font-weight:800;line-height:1.2;letter-spacing:-.024em;color:var(--ink);text-wrap:balance} html[lang][dir=rtl] .v6-clients .v6-cl-title{letter-spacing:0;line-height:1.35} .v6-cl-title a{color:inherit;text-decoration:none;outline:none} /* the ring goes round the whole bar (the link's ::after), never round the title text: this beats the site-wide html[lang] :is(a,button,summary,.btn):focus-visible ring (liquid.css) */ html[lang] .v6-clients .v6-cl-title a:focus-visible{outline:none} .v6-cl-title a::after{content:"";position:absolute;inset:0;border-radius:inherit} .v6-cl-title a:focus-visible::after{outline:2px solid #f8660a;outline-offset:-4px;border-radius:calc(var(--v6-r) - 4px)} /* subline: the sector word in its colour, a small dot, then the client count */ html[lang] .v6-clients .v6-cl-count{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:0;margin:5px 0 0;font-size:15px;font-weight:650;line-height:1.4;color:var(--muted)} .v6-cl-kind{font-weight:750;color:var(--kind)} .v6-cl-dot{flex:none;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.55} .v6-cl-count b{font-weight:800;color:var(--ink)} .v6-cl-go{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:var(--ink); background:color-mix(in srgb,var(--ink) 4%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 15%,transparent)} .v6-cl-go svg{width:18px;height:18px} .v6-cl-bar:has(a:focus-visible) .v6-cl-go{background:var(--v3-grad);box-shadow:0 10px 22px -12px rgb(240 60 12 / .8);color:#fff} @media (hover:hover){.v6-cl-bar:has(a):hover .v6-cl-go{background:var(--v3-grad);box-shadow:0 10px 22px -12px rgb(240 60 12 / .8);color:#fff}} /* Second row. Logistics: the service's one line. Distribution and other services: one link to each of its service pages (icon, name, arrow), 52px tall. */ html[lang] .v6-clients .v6-cl-desc{margin:22px var(--v6-pad) 0;max-width:54ch;font-size:16px;font-weight:500;line-height:1.6;color:var(--muted);text-wrap:pretty} .v6-cl-links{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;margin:22px var(--v6-pad) 0;padding:0;list-style:none} .v6-cl-links>li{display:flex;min-width:0} .v6-cl-link{display:flex;align-items:center;gap:12px;min-width:0;min-height:52px;padding-block:6px;padding-inline:6px 18px;border-radius:999px; color:var(--ink);text-decoration:none;background:var(--v6-chip-bg);box-shadow:inset 0 0 0 1px var(--v6-chip-line)} .v6-cl-link-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--kind); background:color-mix(in srgb,var(--tint) 13%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tint) 22%,transparent)} .v6-cl-link-ico svg{width:19px;height:19px;stroke-width:1.8} html[lang] .v6-clients .v6-cl-link-text{min-width:0;font-size:16px;font-weight:750;line-height:1.3} .v6-cl-link-go{flex:none;display:grid;place-items:center;color:var(--muted)} .v6-cl-link-go svg{width:17px;height:17px} html[lang] .v6-clients .v6-cl-link:focus-visible{outline:2px solid #f8660a;outline-offset:3px} /* Third row: the talabat plate and / or the logo board. */ .v6-cl-body{display:flex;flex-direction:column;gap:14px;min-width:0;margin:24px var(--v6-pad) var(--v6-pad)} /* The talabat plate: talabat's own badge, large, under "Trusted partner of"; a warm light behind it and the site's silk ribbon (a soft band and a fine thread) across its foot; a quiet arrow in the end corner. The whole plate is the link to the home talabat section. */ .v6-cl-plate{position:relative;flex:1 1 auto;display:grid;place-items:center;min-height:var(--plate-min);border-radius:20px;overflow:hidden;isolation:isolate; container-type:inline-size;color:var(--plate-ink);text-decoration:none;background:var(--plate-bg); box-shadow:var(--plate-ring),var(--v6-board-shadow)} .v6-cl-plate-ribbon{position:absolute;inset:0;z-index:-1;width:100%;height:100%;fill:none;stroke-linecap:round;pointer-events:none; -webkit-mask-image:linear-gradient(90deg,transparent 2%,#000 30%,#000 70%,transparent 98%);mask-image:linear-gradient(90deg,transparent 2%,#000 30%,#000 70%,transparent 98%)} .v6-cl-plate-ribbon path{vector-effect:non-scaling-stroke;stroke:#fc8400;stroke-width:18;opacity:var(--plate-band)} .v6-cl-plate-ribbon path+path{stroke:#f03c0c;stroke-width:2;opacity:var(--plate-thread)} [dir=rtl] .v6-cl-plate-ribbon{transform:scaleX(-1)} .v6-cl-plate-art{display:grid;justify-items:center;gap:16px;padding:30px 24px 38px;text-align:center} html[lang] .v6-clients .v6-cl-plate-lead{font-size:17px;font-weight:700;line-height:1.35;letter-spacing:-.01em;color:var(--plate-lead)} html[lang][dir=rtl] .v6-clients .v6-cl-plate-lead{letter-spacing:0;line-height:1.5} .v6-cl-plate-logo{display:block;width:232px;width:clamp(168px,56cqi,292px);height:auto} .v6-cl-plate-go{position:absolute;bottom:16px;inset-inline-end:16px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--plate-ink); background:color-mix(in srgb,var(--plate-ink) 5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--plate-ink) 16%,transparent)} .v6-cl-plate-go svg{width:17px;height:17px} html[lang] .v6-clients .v6-cl-plate:focus-visible{outline:2px solid #f8660a;outline-offset:3px} .v6-cl-plate:focus-visible .v6-cl-plate-go{background:var(--v3-grad);box-shadow:0 10px 22px -12px rgb(240 60 12 / .8);color:#fff} /* Logo board: one light board, divided by hairlines (the 1px gaps show the board's own colour). A cell is one or more columns wide (--sd/--st/--sp, set by partners.mjs so every row is exactly full, in list order). Logos keep their artwork and sit centred. Each logo is drawn with mix-blend-mode:darken: every colour of the artwork darker than the board stays exactly as it is, and the sheet's white paper takes the board's own tone, so a logo window never shows an edge. */ .v6-cl-board{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:var(--row-h);gap:1px; border-radius:20px;overflow:hidden;isolation:isolate;background:var(--v6-hair); box-shadow:0 0 0 1px var(--v6-board-ring),var(--v6-board-shadow)} .v6-cl-cell{--span:var(--st,1);--b:calc(1 + (var(--span) - 1) * .14);grid-column:span var(--span);display:grid;place-items:center;min-width:0;background:var(--v6-paper)} /* One logo: a window onto the client sheet (or the LANAZ file). Physical offsets, so keep it LTR. Width = the smallest of: the cell's width cap (and never closer than 10px to the cell's sides, which only bites in the narrow desktop cells around 1120px), the logo's equal-area size (larger in a wider cell), the cell's height cap (.72 of the row, a little more in a wider cell). */ .v6-logo{position:relative;display:block;width:min(var(--mw),calc(100% - 20px),calc(var(--la) * var(--lw) * var(--b,1)),calc(var(--row-h) * (var(--mh) + (var(--b,1) - 1) * .3) * var(--r)));aspect-ratio:var(--r);direction:ltr;mix-blend-mode:darken} .v6-logo-sheet{overflow:hidden} .v6-logo-sheet>img{position:absolute;left:var(--sheet-x);top:var(--sheet-y);width:var(--sheet-w);max-width:none;height:auto} .v6-logo-file{display:block;width:100%;height:100%;object-fit:contain} /* Desktop: side by side, Logistics the narrower panel; the same rows in both (bar, second row, body), so the talabat plate stands exactly as tall as the board beside it. */ @media (min-width:1120px){ .v6-cl-sectors.is-split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--v6-gap)} .v6-cl-cell{--span:var(--sd,1)} .v6-cl-board{grid-template-columns:repeat(var(--dcols,4),minmax(0,1fr))} .v6-clients{--plate-min:300px} @supports (grid-template-rows:subgrid){ .v6-cl-sectors.is-split{grid-template-rows:repeat(3,auto);row-gap:0} .v6-cl-sectors.is-split>.v6-cl-panel{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0} /* a shared row can be taller than this panel's content (e.g. a Kurdish line wrapping once more in the other panel): keep the line and the links at their own height, at the top of the row */ .v6-cl-sectors.is-split .v6-cl-desc,.v6-cl-sectors.is-split .v6-cl-links{align-self:start} /* should the owner move a logo into Logistics, that panel gets a small board under a lower plate; if it still stands taller, the board beside it shares the extra height over its rows, so both parts end on the same line */ .v6-cl-sectors.is-split .v6-cl-panel.has-plate.has-board{--plate-min:220px} .v6-cl-sectors.is-split .v6-cl-body>.v6-cl-board:only-child{flex:1 0 auto;grid-auto-rows:minmax(var(--row-h),1fr)} } } @media (min-width:1360px){.v6-clients{--v6-pad:32px}} /* "Become a client": one quiet invitation under both parts. */ .v6-cl-foot{display:flex;justify-content:center;margin-top:clamp(24px,2.6vw,36px)} .v6-cl-join{display:inline-flex;align-items:center;gap:14px;min-height:56px;padding-block:6px;padding-inline:24px 6px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);background:color-mix(in srgb,var(--ink) 3%,transparent);color:var(--ink);text-decoration:none} html[lang] .v6-clients .v6-cl-join-text{font-size:16px;font-weight:800;line-height:1.35} .v6-cl-join-ico{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--v3-grad);color:#fff;box-shadow:0 10px 22px -12px rgba(240,60,12,.85)} .v6-cl-join-ico svg{width:18px;height:18px} html[lang] .v6-clients .v6-cl-join:focus-visible{outline:2px solid #f8660a;outline-offset:3px} /* Motion: calm and quick. The site's shared reveal (transitions.js, 70ms stagger) with a shorter travel and no scale; as a panel arrives its logos settle in one after another (opacity and a few pixels, 32ms apart), talabat's first. On devices that hover, arrows move a few pixels toward where they lead. */ .js-motion .v6-clients .reveal-pending{transform:translate3d(0,16px,0)} .js-motion .v6-clients .reveal-run{transition:opacity .38s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms),transform .45s var(--v3-ease) var(--reveal-delay,0ms)} .js-motion .v6-cl-panel.reveal-pending :is(.v6-logo,.v6-cl-plate-art){opacity:0;transform:translate3d(0,8px,0)} .js-motion .v6-cl-panel.reveal-run :is(.v6-logo,.v6-cl-plate-art){transition:opacity .34s ease-out,transform .4s var(--v3-ease);transition-delay:calc(var(--reveal-delay,0ms) + 90ms + var(--i,0) * 32ms)} /* the part's top line draws in from the panel's outer corner as the panel arrives */ .js-motion .v6-cl-panel.reveal-pending::before{transform:scaleX(0)} .js-motion .v6-cl-panel.reveal-run::before{transition:transform .4s var(--v3-ease) calc(var(--reveal-delay,0ms) + 80ms)} .v6-cl-panel::before{transform-origin:left center} .v6-cl-panel[data-sector=distribution]::before{transform-origin:right center} [dir=rtl] .v6-cl-panel[data-sector=logistics]::before{transform-origin:right center} [dir=rtl] .v6-cl-panel[data-sector=distribution]::before{transform-origin:left center} @media (max-width:1119px){ .v6-cl-panel[data-sector=distribution]::before{transform-origin:left center} [dir=rtl] .v6-cl-panel[data-sector]::before{transform-origin:right center} } @media (hover:hover){ .v6-cl-join:hover{border-color:color-mix(in srgb,#f8660a 55%,transparent)} .v6-cl-panel:has(.v6-cl-bar a:hover){border-color:color-mix(in srgb,var(--tint) 34%,var(--v6-panel-line))} .v6-cl-link:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tint) 55%,transparent)} .v6-cl-link:hover .v6-cl-link-go{color:var(--kind)} .v6-cl-plate:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,#f03c0c 42%,transparent),var(--v6-board-shadow)} .v6-cl-plate:hover .v6-cl-plate-go{background:var(--v3-grad);box-shadow:0 10px 22px -12px rgb(240 60 12 / .8);color:#fff} } @media (hover:hover) and (prefers-reduced-motion:no-preference){ .v6-cl-panel{transition:border-color .3s ease-out} .v6-cl-bar::before{transition:opacity .3s ease-out} .v6-cl-go,.v6-cl-plate-go{transition:background-color .25s ease-out,box-shadow .25s ease-out,color .25s ease-out,transform .3s var(--v3-ease)} .v6-cl-link,.v6-cl-plate{transition:box-shadow .25s ease-out} .v6-cl-link-go{transition:color .25s ease-out,transform .3s var(--v3-ease)} .v6-cl-join{transition:border-color .25s ease-out,transform .3s var(--v3-ease)} .v6-cl-join-ico{transition:transform .3s var(--v3-ease)} .v6-cl-bar:hover .v6-cl-go,.v6-cl-link:hover .v6-cl-link-go{transform:translateX(3px)} [dir=rtl] .v6-cl-bar:hover .v6-cl-go,[dir=rtl] .v6-cl-link:hover .v6-cl-link-go{transform:translateX(-3px)} .v6-cl-plate:hover .v6-cl-plate-go,.v6-cl-join:hover .v6-cl-join-ico{transform:translate(2px,-2px)} [dir=rtl] .v6-cl-plate:hover .v6-cl-plate-go,[dir=rtl] .v6-cl-join:hover .v6-cl-join-ico{transform:translate(-2px,-2px)} .v6-cl-join:active{transform:scale(.98)} } /* Stacked panels (tablet and phone): the name bar of a part with a logo board stays under the site header while its logos scroll past, then leaves with its panel. While it is held it lifts into a floating card: rounded all round, a soft shadow, and a 2px line of the part's colour along its foot, starting 24px in from the start corner (clear of the corner curve) and fading out by 72% (v6-clients.js adds .is-stuck; without it the bar simply stays). A third, upward shadow in the panel's own colour fills the small slot between the site header and the bar, so the light logo board never shows through it (its edge sits 20px above the bar and its 12px blur fades out behind the header, so the whole 8-10px slot is covered). */ @media (max-width:1119px){ .v6-cl-panel.has-board .v6-cl-bar{position:sticky;top:var(--v6-stick); background-image:linear-gradient(var(--v6-foot,90deg),color-mix(in srgb,var(--tint) 90%,transparent),transparent 72%),radial-gradient(120% 190% at var(--gx) 0%,color-mix(in srgb,var(--tint) var(--v6-band-mix),transparent),transparent 60%); background-color:var(--v6-panel-bg);background-repeat:no-repeat;background-position:24px 100%,0 0;background-size:0% 2px,100% 100%} [dir=rtl] .v6-cl-panel.has-board .v6-cl-bar{--v6-foot:270deg;background-position:calc(100% - 24px) 100%,0 0} .v6-cl-panel.has-board .v6-cl-bar.is-stuck{border-radius:calc(var(--v6-r) - 1px);background-size:calc(100% - 48px) 2px,100% 100%; box-shadow:inset 0 0 0 1px var(--v6-panel-line),0 18px 30px -18px rgb(0 0 0 / .45),0 -24px 12px -4px var(--v6-panel-bg)} :root[data-theme=dark] .v6-cl-panel.has-board .v6-cl-bar.is-stuck{box-shadow:inset 0 0 0 1px rgb(255 255 255 / .09),0 20px 34px -16px rgb(0 0 0 / .85),0 -24px 12px -4px var(--v6-panel-bg)} } /* the site header grows above 1050px (the full desktop bar): keep the same small gap under it */ @media (min-width:1051px) and (max-width:1119px){.v6-clients{--v6-stick:90px}} @media (max-width:1119px) and (prefers-reduced-motion:no-preference){ .v6-cl-panel.has-board .v6-cl-bar{transition:border-radius .22s ease-out,box-shadow .22s ease-out,background-size .3s cubic-bezier(.2,.7,.2,1)} } /* mounting (first paint, or back through the router with the scroll restored): a bar that is already held shows its stuck look at once, with no morph and no line drawing in (v6-clients.js) */ .v6-cl-mounting .v6-cl-bar{transition:none !important} /* Phone: two cells across; the bars are compact so the logos keep the screen; the service links are full-width rows. */ @media (max-width:599px){ .v6-clients{--v6-pad:16px;--v6-r:26px;--row-h:clamp(104px,29vw,116px);--la:80px;--mw:82%;--v6-stick:80px;--plate-min:clamp(216px,60vw,244px)} .v6-cl-board{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:18px} .v6-cl-plate{border-radius:18px} .v6-cl-cell{--span:var(--sp,1)} .v6-cl-body{margin-top:18px} .v6-cl-bar{gap:12px;padding:14px 14px 13px} .v6-cl-ico{width:46px;height:46px;border-radius:15px} .v6-cl-ico svg{width:22px;height:22px} html[lang] .v6-clients .v6-cl-title{font-size:19px;line-height:1.3} html[lang][dir=rtl] .v6-clients .v6-cl-title{line-height:1.4} html[lang] .v6-clients .v6-cl-count{margin-top:1px;font-size:14px} .v6-cl-go{width:40px;height:40px} html[lang] .v6-clients .v6-cl-desc{margin-top:16px} .v6-cl-links{flex-direction:column;align-items:stretch;gap:8px;margin-top:16px} .v6-cl-link{flex:1} .v6-cl-link-text{flex:1} html[lang] .v6-clients .v6-cl-plate-lead{font-size:16px} .v6-cl-plate-art{gap:12px;padding:24px 20px 30px} .v6-cl-plate-go{bottom:12px;inset-inline-end:12px} .v6-cl-join{width:100%;justify-content:space-between} } @media (max-width:374px){ .v6-clients{--v6-pad:12px;--la:72px} .v6-cl-bar{padding-inline:12px} .v6-cl-go{display:none} } @media (prefers-reduced-motion:reduce){ .v6-cl-go,.v6-cl-plate-go,.v6-cl-link-go,.v6-cl-join,.v6-cl-join:active,.v6-cl-join-ico,.v6-cl-bar{transition:none;transform:none} .v6-clients .reveal,.v6-clients .reveal-pending,.v6-clients .reveal-run,.v6-clients .v6-logo,.v6-clients .v6-cl-plate-art{opacity:1;transform:none;transition:none} } /* v6-contact.css */ /* v6-contact.css - v6 (2026-10-20): the contact ("address") page. A compact hero with the one-tap panel (call / WhatsApp for each team, email, directions) beside the title, or straight under it on phones; then email, office and the two routes as quiet cards in one style. Accents are the logo colours only (the WhatsApp glyph keeps its own green, as elsewhere on the site). Heading fix: the base sheet sets h2{letter-spacing:-2px}, a fixed value made for 32-49px titles; on these ~20px card headings it ate the word spaces ("Comesayhello"). Every v6c heading uses an em value instead. */ .v6c{ --v6c-soft:color-mix(in srgb,var(--ink) 4%,var(--surface)); --v6c-edge:color-mix(in srgb,var(--ink) 12%,transparent); --v6c-tint:color-mix(in srgb,#f8660a 12%,var(--surface)); --v6c-link:#c8320a; /* logo red-orange, deepened for small text on white */ --v6c-wa:#1e9e57; } :root[data-theme=dark] .v6c{--v6c-link:#fc8400;--v6c-soft:color-mix(in srgb,var(--ink) 6%,var(--surface));--v6c-edge:color-mix(in srgb,var(--ink) 14%,transparent)} .v6c :is(h1,h2,h3){letter-spacing:-.01em} /* Sorani and Arabic headings never take negative tracking (connected letters). */ [dir=rtl] .v6c :is(h1,h2,h3){letter-spacing:0} /* The Kurdish sheet forces mailto:/tel: links to LTR; here only the number or address itself is LTR (bdi). */ html[lang] .v6c :is(a[href^='mailto:'],a[href^='tel:']){direction:inherit;unicode-bidi:normal} /* ---------- Hero: title and one line, the action panel beside it ---------- */ .v6c-hero{padding:clamp(22px,3vw,44px) 0 clamp(20px,3vw,40px)} /* the base glow sits 40% below the hero and is cut off by its overflow; here it fades out inside the hero */ .v6c-hero::before{inset:0 -6% 0 34%;height:auto;background:radial-gradient(closest-side,rgba(248,102,10,.14),transparent)} [dir=rtl] .v6c-hero::before{inset:0 34% 0 -6%} .v6c-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:clamp(28px,5vw,80px);align-items:center} .v6c-hero .v3-crumbs{margin-bottom:clamp(8px,1.6vw,20px)} html[lang] .v6c-hero .eyebrow{font-size:13px} .v3-ph-title.v6c-title{margin:12px 0 18px;font-size:clamp(2.6rem,4.4vw,4.4rem);line-height:1.02;letter-spacing:-.04em;text-wrap:balance} [dir=rtl] .v3-ph-title.v6c-title{font-size:clamp(2.2rem,3.8vw,3.7rem);line-height:1.3;letter-spacing:0} .v6c-lead{max-width:42ch} .v6c-panel{position:relative;padding:22px 24px 24px;border-radius:30px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--lift-2)} .v6c-panel-title{margin:0 0 2px;font-size:14px;line-height:1.5;font-weight:800;color:var(--muted)} .v6c-team{padding:14px 0 18px;border-bottom:1px solid var(--line)} .v6c-team-name{margin:0;font-size:16px;line-height:1.45;font-weight:800;color:var(--ink)} .v6c-num{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 12px} .v6c-num bdi{font-size:clamp(20px,5.6vw,25px);line-height:1.3;font-weight:800;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums} .v6c-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .v6c-quick{padding-top:18px} /* ---------- Buttons: one shape for every action on the page ---------- */ .v6c-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:11px 16px;border-radius:999px;border:1px solid transparent;font:inherit;font-size:16px;font-weight:750;line-height:1.25;text-align:center;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .45s var(--v3-ease),background-color .25s,border-color .25s,box-shadow .3s} .v6c-btn svg{flex:none;width:20px;height:20px} .v6c-btn span{min-width:0} .v6c-btn-call{color:#fff;background:linear-gradient(115deg,#dc340a 0%,#f03c0c 55%,#f5570b 100%);box-shadow:0 12px 26px -14px rgba(240,60,12,.85)} .v6c-btn-soft{color:var(--ink);background:var(--v6c-soft);border-color:var(--v6c-edge)} .v6c-btn-soft svg{color:#f03c0c} .v6c-btn-wa svg{color:var(--v6c-wa)} .v6c-btn:active{transform:scale(.97);transition-duration:.12s} @media (hover:hover){ .v6c-btn-call:hover{box-shadow:0 16px 30px -14px rgba(240,60,12,.95);filter:saturate(1.08)} .v6c-btn-soft:hover{border-color:color-mix(in srgb,#f8660a 50%,var(--line));background:var(--v6c-tint)} } /* ---------- Copy to clipboard (v6-contact.js) ---------- */ .v6c-copy{position:relative;flex:none;display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:16px;border:1px solid var(--v6c-edge);background:transparent;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .25s,border-color .25s,color .25s,transform .45s var(--v3-ease)} .v6c-copy svg{grid-area:1/1;width:20px;height:20px;transition:opacity .2s,transform .35s var(--v3-ease)} .v6c-copy .v6c-done-ico{opacity:0;transform:scale(.5);color:var(--v6c-link);stroke-width:2.2} .v6c-copy[data-state=copied]{border-color:color-mix(in srgb,#f8660a 55%,var(--line));color:var(--v6c-link)} .v6c-copy[data-state=copied] .v6c-copy-ico{opacity:0;transform:scale(.5)} .v6c-copy[data-state=copied] .v6c-done-ico{opacity:1;transform:none} .v6c-copy:active{transform:scale(.94);transition-duration:.12s} @media (hover:hover){.v6c-copy:hover{color:var(--ink);background:var(--v6c-soft)}} .v6c-tip{position:absolute;z-index:2;bottom:calc(100% + 8px);inset-inline-end:0;padding:6px 11px;border-radius:10px;background:var(--ink);color:var(--surface);font-size:13px;font-weight:750;line-height:1.4;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .3s var(--v3-ease)} .v6c-copy:is([data-state=copied],[data-state=failed]) .v6c-tip{opacity:1;transform:none} /* ---------- Email, office, routes and socials: one card style ---------- */ .v6c-more{padding:0 0 clamp(28px,3vw,40px)} .v6c-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} .v6c-routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px} .v6c-card{padding:clamp(20px,2.4vw,30px);border-radius:28px;background:var(--surface);border:1px solid var(--line)} .v6c-visit{display:flex;flex-direction:column} .v6c-visit .v6c-btn-map{margin-top:auto} /* the footer starts straight after this page's last cards (its night colour matches the page, so its top spacing read as one big empty band) */ main:has(> .v6c-more) + .site-footer{margin-top:0} main:has(> .v6c-more) + .site-footer .v3-foot-cta{padding-top:clamp(22px,3vw,40px)} /* v6 review: the site's floating WhatsApp shortcut repeats the WhatsApp buttons this page shows first, and on phones (375x667, 360x640, 320x568) it sat on top of the pest-control WhatsApp button and, while scrolling, on the end-aligned copy buttons. Hidden on this page only (main is inside the router's surface after the first visit). */ main:has(> .v6c-more) ~ .chat-float,[data-page-surface]:has(> main > .v6c-more) ~ .chat-float{display:none} .v6c-head{display:flex;align-items:center;gap:14px;margin-bottom:12px} .v6c-ico{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:var(--v6c-tint);color:#f03c0c} .v6c-ico svg{width:22px;height:22px} .v6c .v6c-h{margin:0;font-size:clamp(1.2rem,1.5vw,1.35rem);line-height:1.3;font-weight:800} .v6c-lines{list-style:none;margin:0;padding:0} .v6c-line{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line)} .v6c-link{flex:1;min-width:0;min-height:68px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:10px 0;color:var(--ink);text-decoration:none} .v6c-lbl{margin:0;font-size:14px;line-height:1.45;font-weight:700;color:var(--muted)} .v6c-val{max-width:100%;font-size:16px;line-height:1.45;font-weight:750;overflow-wrap:anywhere;transition:color .2s} [dir=rtl] .v6c-val{text-align:right} /* v6 review: a wrapped LTR address lines up under its RTL label */ @media (hover:hover){.v6c-link:hover .v6c-val{color:var(--v6c-link)}} .v6c-addr{margin:0 0 16px;font-size:17px;line-height:1.6;font-weight:650;color:var(--ink)} .v6c-btn-map{width:100%} .v6c-btn-map .directional{width:17px;height:17px;opacity:.7} .v6c-nowrap{white-space:nowrap} .v6c-route,.v6c-follow{display:flex;flex-direction:column;align-items:flex-start} .v6c-route{color:var(--ink);text-decoration:none;transition:transform .5s var(--v3-ease),border-color .3s,box-shadow .4s} .v6c-route .v6c-head,.v6c-follow .v6c-head{margin-bottom:10px} .v6c-route p{margin:0 0 14px;font-size:16px;line-height:1.6;font-weight:600;color:var(--muted)} .v6c-route .v6c-go,.v6c-follow .v6c-social-row{margin-top:auto} .v6c-social-row{display:flex;flex-wrap:wrap;gap:10px} .v6c-chip{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:10px 18px;border-radius:999px;border:1px solid var(--v6c-edge);color:var(--ink);font-size:16px;font-weight:750;text-decoration:none;transition:border-color .25s,background-color .25s} .v6c-chip svg{width:19px;height:19px;color:#f03c0c} @media (hover:hover){.v6c-chip:hover{border-color:color-mix(in srgb,#f8660a 50%,var(--line));background:var(--v6c-tint)}} .v6c-go{display:inline-flex;align-items:center;gap:8px;min-height:28px;font-size:16px;font-weight:800;color:var(--v6c-link)} .v6c-go svg{width:19px;height:19px;transition:translate .4s var(--v3-ease)} .v6c-route:active{transform:scale(.985);transition-duration:.12s} @media (hover:hover){ .v6c-route:hover{transform:translateY(-4px);border-color:color-mix(in srgb,#f8660a 45%,var(--line));box-shadow:0 26px 50px -34px rgba(240,60,12,.5)} .v6c-route:hover .v6c-go svg{translate:5px 0} [dir=rtl] .v6c-route:hover .v6c-go svg{translate:-5px 0} } /* ---------- Tablets and phones ---------- */ @media (max-width:980px){ .v6c-hero-grid{grid-template-columns:1fr;gap:22px} .v6c-lead{max-width:56ch} .v6c-grid,.v6c-routes{grid-template-columns:1fr} } @media (min-width:700px) and (max-width:980px){ /* tablets: two columns, socials across the bottom */ .v6c-grid,.v6c-routes{grid-template-columns:repeat(2,minmax(0,1fr))} .v6c-follow{grid-column:1/-1} } @media (max-width:560px){ .v6c-hero{padding:14px 0 16px} .v6c-hero .v3-crumbs{margin-bottom:8px} .v6c-hero .eyebrow{display:none} /* the breadcrumb already says "Contact" */ .v3-ph-title.v6c-title{margin:4px 0 10px;font-size:clamp(1.95rem,8.6vw,2.45rem);line-height:1.06} [dir=rtl] .v3-ph-title.v6c-title{font-size:clamp(1.8rem,7.8vw,2.2rem);line-height:1.4} .v6c-lead{font-size:16px;line-height:1.6} .v6c-hero-grid{gap:16px} .v6c-panel{padding:14px 16px 16px;border-radius:26px} .v6c-team{padding:10px 0 14px} .v6c-num{margin:0 0 10px} .v6c-quick{padding-top:14px} .v6c-btn{padding-inline:12px;gap:8px} .v6c-grid,.v6c-routes{gap:12px} .v6c-routes{margin-top:12px} .v6c-card{padding:18px;border-radius:24px} .v6c-more{padding-bottom:28px} } @media (max-width:420px){ .v6c-btn-map .directional{display:none} /* keeps "Find us on Google Maps" on one line */ } @media (max-width:359px){ .v6c-panel{padding-inline:12px} .v6c-btn{font-size:15px;padding-inline:8px;gap:6px} .v6c-btn svg{width:18px;height:18px} } @media (prefers-reduced-motion:reduce){ .v6c :is(.v6c-btn,.v6c-copy,.v6c-copy svg,.v6c-tip,.v6c-route,.v6c-go svg,.v6c-chip){transition:none!important} .v6c :is(.v6c-btn,.v6c-copy,.v6c-route):active,.v6c-route:hover{transform:none!important} .v6c-route:hover .v6c-go svg{translate:none!important} } /* v6-motion.css */ /* v6-motion.css - v7 (2026-10-21): page changes and calm motion. Loaded last. Everything in the first part applies only while a page is moving or has sections that have not been rendered yet, so pages at rest look exactly as before. None of it changes an inherited property (inert, visibility, pointer-events, cursor) on a whole page: that re-styles every element of the page (~300 ms on a phone). */ /* ---------- Page changes (page-router.js) ---------- */ /* The incoming page sits in its final place in the document, lifted out as one fixed layer while it moves (clipped to the screen, so the document never gets longer or wider). */ html[lang] [data-page-surface].v6-in{position:fixed;left:0;right:0;bottom:0;z-index:46;overflow:clip;will-change:transform} /* A parked page (rendered ahead while idle) waits behind everything and paints nothing; it keeps its style and layout, so showing it costs almost nothing. */ html[lang] [data-page-surface].v6-in.v6-park{z-index:-1} html[lang] [data-page-surface].v6-in.v6-parked{content-visibility:hidden;will-change:auto;transform:translate(-400vw,0)} /* Going back, it waits underneath the page that slides away (which lifts above it). */ html[lang] [data-page-surface].v6-in.v6-below{z-index:41} html[lang] .v6-lift{position:relative;z-index:44} /* The dim over the page underneath; the opaque back of the page on top, with a soft shadow along its leading edge (pages themselves have no background: the body paints it). */ .v6-dim{position:fixed;inset:0;z-index:44;background:#000;opacity:0;pointer-events:none;will-change:opacity} .v6-dim.v6-below{z-index:42} .v6-sheet{position:fixed;inset:0;z-index:45;pointer-events:none;background-color:inherit;will-change:transform} /* the edge shadow is a narrow gradient just outside the sheet (a blurred box-shadow the height of the screen is costly to rasterise) */ .v6-sheet::before{content:"";position:absolute;top:0;bottom:0;right:100%;width:28px;background:linear-gradient(to left,rgb(0 0 0 / .22),rgb(0 0 0 / .07) 40%,transparent)} html[dir=rtl] .v6-sheet::before{right:auto;left:100%;background:linear-gradient(to right,rgb(0 0 0 / .22),rgb(0 0 0 / .07) 40%,transparent)} .v6-sheet.v6-below{z-index:43} /* Input waits for the new page on one transparent layer. */ .v6-shield{position:fixed;inset:0;z-index:2147483000;background:transparent} /* A language switch fades the whole screen under one cover. */ .v6-cover{position:fixed;inset:0;z-index:2147482990;background-color:inherit;opacity:0;pointer-events:none} /* Sections of a new page below its first screen: not styled, laid out or painted while the page moves (hidden), then rendered by the browser when needed (auto) until the router renders them. */ .v6-defer{content-visibility:hidden} .v6-defer-auto{content-visibility:auto} /* The grabbing cursor of a mouse drag lives on one transparent layer (transitions.js). */ .v6-drag-shield{position:fixed;inset:0;z-index:2147483000;cursor:grabbing;background:transparent;touch-action:none} /* ---------- Calm motion ---------- The owner asked for no cheap motion: nothing bounces, spins, bobs, blinks or loops. What stays is short (150-500 ms), ease-out and tied to something the visitor did. (Plain selector lists, not :is(), so every rule stays in a class bucket and costs nothing on other elements.) */ /* No overshoot anywhere: the two spring curves become one plain ease-out. */ :root{--spring-pop:cubic-bezier(.22,1,.36,1);--spring-soft:cubic-bezier(.22,1,.36,1)} /* Looping decorations stand still, each in a frame that reads well on its own. */ html[lang] .v3-orbit,html[lang] .v3-orbit-ring,html[lang] .v3-orbit-ring span i,html[lang] .v3-sweep,html[lang] .v3-radar em, html[lang] .v3-pin,html[lang] .v3-ring,html[lang] .v3-art-pin em,html[lang] .v3-art-pin+em,html[lang] .v3-bars i,html[lang] .v3-trend, html[lang] .v3-climber,html[lang] .v3-bubble,html[lang] .v3-check span,html[lang] .v3-check svg path,html[lang] .v3-cells i, html[lang] .v3-road-mid,html[lang] .v3-viz-road i,html[lang] .v3-scroll-cue span,html[lang] .status-dot,html[lang] .floating-label, html[lang] .ribbon-label,html[lang] .hero-halo,html[lang] .scene-spark{animation:none!important} /* "live" dots: a steady dot, no pulsing ring */ html[lang] .v3-live::after,html[lang] .v3-pb-live::after{animation:none!important;opacity:0} html[lang] .v3-radar em{opacity:.85} html[lang] .v3-ring{opacity:calc(.5 - var(--i,0)*.14);transform:scale(calc(.72 + var(--i,0)*.42))} html[lang] .v3-trend{stroke-dashoffset:0} html[lang] .v3-check span{background:#f03c0c} html[lang] .v3-check svg path{stroke-dashoffset:0} html[lang] .v3-cells i{background:#f8660a;transform:none;opacity:calc(1 - var(--i,0)*.011)} html[lang] .v3-climber{transform:translate(440%,-248%)} html[lang][dir=rtl] .v3-climber{transform:translate(-440%,-248%)} /* Review fix: in RTL the steps did not mirror (v3.css adds row-reverse on top of the RTL row, which turns them back to left-to-right), so the resting climber floated above the low steps. A plain row already runs right to left in RTL. */ html[lang][dir=rtl] .v3-stairs{flex-direction:row} /* Review fix: the business chart's bars mirror in RTL (tallest on the left) but its trend line did not, so the line fell where the bars rose. */ html[lang][dir=rtl] .v3-art-chart .v3-art-svg{transform:scaleX(-1)} html[lang] .v3-viz-road i:nth-child(1){transform:translateX(14%)} html[lang] .v3-viz-road i:nth-child(2){transform:translateX(48%)} html[lang] .v3-viz-road i:nth-child(3){transform:translateX(80%)} /* the background ribbons are simply drawn (they were traced over 3.2 s) */ html[lang] .v3-ribbons path{animation:none!important;stroke-dashoffset:0} /* every button was its own compositor layer (translateZ(0)); their hover lift still applies */ .btn,.icon-button{transform:none} /* what no longer moves no longer needs its own compositor layer */ html[lang] .v3-viz-road i,html[lang] .v3-orbit,html[lang] .v3-live::after,html[lang] .v3-pb-live::after{will-change:auto} /* First arrival on a page: one short rise, no wobble, little stagger. */ @keyframes v3Up{from{transform:translate3d(0,100%,0)}to{transform:none}} html[lang] .v3-w>span{animation-duration:.5s;animation-delay:calc(.04s + var(--i,0)*.035s)} html[lang] .v3-line>*,html[lang] .v3-title em{animation-duration:.55s} html[lang] .v3-rise{animation-duration:.5s} html[lang].enhanced-motion.page-arrived:not(.client-navigated) .page-heading .eyebrow, html[lang].enhanced-motion.page-arrived:not(.client-navigated) .page-heading h1, html[lang].enhanced-motion.page-arrived:not(.client-navigated) .page-heading .lead{animation-duration:.45s} html[lang].enhanced-motion.page-arrived:not(.client-navigated) .ribbon-copy{animation-duration:.5s} /* Entrances hold their first frame while they wait, but let go once done: a finished animation that still "fills" keeps its element on its own compositor layer for good (Home had dozens). */ html[lang] .v3-w>span,html[lang] .v3-line>*,html[lang] .v3-title em,html[lang] .v3-rise,html[lang] .page-heading h1, html[lang] .page-heading .lead,html[lang] .page-heading .eyebrow,html[lang] .page-heading .breadcrumb,html[lang] .ribbon-copy, html[lang] .ribbon-copy h1,html[lang] .ribbon-intro,html[lang] .ribbon-eyebrow{animation-fill-mode:backwards} /* A page shown after a client-side change arrives composed: the slide was its entrance. */ [data-page-surface] .v3-w>span,[data-page-surface] .v3-line>*,[data-page-surface] .v3-title em,[data-page-surface] .v3-rise, [data-page-surface] .page-heading h1,[data-page-surface] .page-heading .lead,[data-page-surface] .page-heading .eyebrow, [data-page-surface] .page-heading .breadcrumb,[data-page-surface] .ribbon-copy{animation:none!important} /* Reveals further down: a short fade and a 16 px rise (was 28 px with a scale, over 0.9 s). A 2D translate: translate3d gave every waiting element its own compositor layer. */ html[lang].js-motion .reveal-pending{opacity:0;transform:translateY(16px)} html[lang].js-motion .reveal-run{transition:opacity .4s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms),transform .45s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms)} /* Masked photos reveal the same way (the 1.2 s clip-path unmask ran on the main thread). */ html[lang].js-motion .v3-mask.reveal-pending{clip-path:inset(0 0 0 0 round 36px)!important;opacity:0!important;transform:translateY(16px)!important} html[lang].js-motion .v3-mask.reveal-run{animation:none!important} /* Header controls: quick and plain. */ .nav-glider{transition:transform .32s cubic-bezier(.22,1,.36,1),width .32s cubic-bezier(.22,1,.36,1),opacity .2s ease} @keyframes icon-turn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}} html[lang] [data-theme-toggle] svg{animation-duration:.22s} @keyframes pop-in{from{transform:translateY(-4px)}to{transform:none}} html[lang] .language-switch[open] .language-options{animation-duration:.2s,.16s} html[lang] .site-header .mobile-nav.is-open{transition-duration:.16s,.3s,0s} html[lang] .mobile-nav.is-open a{animation-duration:.26s} /* The theme switch spreads from the toggle in 0.45 s (was 0.7 s). */ html.theme-switching::view-transition-new(root){animation-duration:.45s!important} /* The talabat photo no longer tilts after the pointer (v3.js); its hover zoom is quicker. */ html[lang] .v3-tilt img{transition-duration:.5s} /* Review fix: the services list's hover photo followed the cursor (v3.js no longer moves it); left where it was, it covered the hovered row's number and title. The row's own hover (tint, inset, arrow) stays. */ html[lang] .v3-index-thumb{display:none}