@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 - v6 (2026-10-20): the home "Our clients" section (markup: src/partners.mjs). Featured clients first (logo, name, sector), then an even logo wall that ends in a "Become a client" tile. Logos keep their artwork on white zones in night and day mode. Zone shapes come from the section's custom properties (--card-d/t/p, --tile-d/t/p), and each logo carries its own optically balanced width per breakpoint (--w-d/t/p) and ratio (--r). */ .v6-clients{ --v6-gap:14px; --v6-card-bg:#f3f0eb; --v6-card-line:rgb(24 22 28 / .06); --v6-tile-ring:rgb(24 22 28 / .09); /* the client sheet's own paper (253,253,253): logo windows melt into the zone, no faint boxes */ --v6-paper:#fdfdfd; } :root[data-theme=dark] .v6-clients{ --v6-card-bg:var(--surface); --v6-card-line:var(--line); --v6-tile-ring:rgb(255 255 255 / 0); } /* 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,40px)} /* v6 review: English eyebrows are 12px site-wide, below the 13px label floor; ar/ku ones are already 14px, so only English is raised (forcing 13px made ar/ku smaller than every other eyebrow). */ html[lang=en] .v6-clients .v6-cl-head .eyebrow{font-size:13px} html[lang] .v6-clients .v6-cl-head .lead{max-width:58ch;margin:16px 0 0;text-wrap:pretty} /* Desktop: the short line sits beside the title, so the logos start higher on the screen. */ @media (min-width:880px){ .v6-cl-head>div{display:grid;grid-template-columns:minmax(0,auto) minmax(0,520px);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} } /* Both grids share columns and gaps, so the wall lines up under the featured cards. */ .v6-cl-featured,.v6-cl-wall{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--v6-gap)} .v6-cl-featured>li,.v6-cl-wall>li{display:grid;grid-template-columns:minmax(0,1fr);min-width:0} /* Featured client: a framed card, white logo zone on top, name and sector below. */ .v6-cl-card{display:flex;flex-direction:column;min-width:0;min-height:100%;padding:8px;border-radius:24px;background:var(--v6-card-bg);border:1px solid var(--v6-card-line)} .v6-cl-zone{display:grid;place-items:center;aspect-ratio:var(--card-d);border-radius:17px;background:var(--v6-paper);overflow:hidden} .v6-cl-text{display:grid;gap:4px;padding:14px 10px 8px} html[lang] .v6-clients .v6-cl-name{margin:0;font-size:19px;font-weight:800;line-height:1.35;letter-spacing:-.01em;color:var(--ink)} html[lang][dir=rtl] .v6-clients .v6-cl-name{letter-spacing:0} html[lang] .v6-clients .v6-cl-sector{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:15px;font-weight:650;line-height:1.5;color:var(--muted)} /* each part stays whole when it fits (Energy · / Oil refining) and still wraps inside when it cannot */ .v6-cl-sector-text{min-width:0} .v6-cl-sector-text>span{display:inline-block} .v6-cl-sector::before{content:"";flex:none;width:7px;height:7px;margin-top:calc(.75em - 3.5px);border-radius:50%;background:var(--v3-grad)} html[lang=ckb] .v6-clients .v6-cl-sector{line-height:1.7} html[lang=ckb] .v6-cl-sector::before{margin-top:calc(.85em - 3.5px)} /* "More of our clients": a quiet label with a hairline running to the edge. */ html[lang] .v6-clients .v6-cl-more{display:flex;align-items:center;gap:16px;margin:clamp(30px,3.4vw,44px) 0 16px;font-size:15px;font-weight:750;line-height:1.5;letter-spacing:0;color:var(--muted)} .v6-cl-more::after{content:"";flex:1;height:1px;background:var(--line)} /* Logo wall: identical white tiles, logo centred; a tile grows with its row, never alone. */ .v6-cl-tile{display:grid;place-items:center;aspect-ratio:var(--tile-d);min-height:100%;border-radius:18px;background:var(--v6-paper);box-shadow:0 0 0 1px var(--v6-tile-ring);overflow:hidden} /* One logo: a window onto the client sheet (or the LANAZ file). Physical offsets, so keep it LTR. */ .v6-logo{position:relative;display:block;width:var(--w-d);aspect-ratio:var(--r);direction:ltr} .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} /* Last wall tile: an invitation, drawn as an empty slot. */ .v6-cl-join{display:flex;align-items:center;justify-content:center;gap:12px;min-height:100%;padding:12px 14px;border-radius:18px;border:1.5px dashed color-mix(in srgb,var(--ink) 28%,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:40px;height:40px;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} /* Desktop hover: a gentle lift, nothing more. */ @media (hover:hover) and (prefers-reduced-motion:no-preference){ .v6-cl-card,.v6-cl-tile,.v6-cl-join{transition:transform .5s var(--v3-ease),box-shadow .5s var(--v3-ease),border-color .35s ease,background-color .35s ease} .v6-cl-join-ico{transition:transform .5s var(--v3-ease)} .v6-cl-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,#f8660a 32%,var(--v6-card-line));box-shadow:0 26px 50px -32px rgba(240,60,12,.5)} .v6-cl-tile:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--v6-tile-ring),0 18px 34px -24px rgba(240,60,12,.55)} .v6-cl-join:hover{transform:translateY(-3px);border-color:#f8660a;background:color-mix(in srgb,#f8660a 7%,transparent)} .v6-cl-join:hover .v6-cl-join-ico{transform:scale(1.06)} } .v6-cl-join:active{transform:scale(.98)} /* Tablet: featured cards two by two, wall stays four across. */ @media (max-width:879px){ .v6-cl-featured{grid-template-columns:repeat(2,minmax(0,1fr))} .v6-cl-zone{aspect-ratio:var(--card-t)} .v6-cl-tile{aspect-ratio:var(--tile-t)} .v6-logo{width:var(--w-t)} } /* Phone: featured clients become rows (logo beside name and sector), so each label reads at a glance and keeps its width; the wall goes two across with tighter gaps. */ @media (max-width:599px){ .v6-clients{--v6-gap:12px} .v6-cl-featured{grid-template-columns:minmax(0,1fr)} .v6-cl-wall{grid-template-columns:repeat(2,minmax(0,1fr))} .v6-cl-card{flex-direction:row;align-items:center;gap:6px;padding:6px;border-radius:22px} .v6-cl-zone{flex:0 0 44%;aspect-ratio:var(--card-p);border-radius:16px} .v6-cl-text{flex:1;min-width:0;padding:6px 10px} .v6-cl-tile{aspect-ratio:var(--tile-p);border-radius:16px} .v6-logo{width:var(--w-p)} html[lang] .v6-clients .v6-cl-name{font-size:18px} .v6-cl-join{gap:10px;padding:10px;border-radius:16px} .v6-cl-join-ico{width:36px;height:36px} html[lang] .v6-clients .v6-cl-more{margin:28px 0 14px} } /* Narrow phones (320-374px): slightly taller tiles so the invitation can stack. */ @media (max-width:374px){ .v6-clients{--v6-gap:10px} .v6-cl-zone{flex-basis:42%} .v6-cl-tile{aspect-ratio:1.25} .v6-cl-join{flex-direction:column;gap:6px;text-align:center} } @media (prefers-reduced-motion:reduce){ .v6-cl-card,.v6-cl-tile,.v6-cl-join,.v6-cl-join:active,.v6-cl-join-ico{transition:none;transform: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 - v6 (2026-10-20) */