@font-face{font-family:Cairo;src:url('assets/fonts/cairo-400.ttf');font-weight:400;font-display:swap}@font-face{font-family:Cairo;src:url('assets/fonts/cairo-600.ttf');font-weight:600;font-display:swap}@font-face{font-family:Cairo;src:url('assets/fonts/cairo-700.ttf');font-weight:700;font-display:swap}@font-face{font-family:Cairo;src:url('assets/fonts/cairo-800.ttf');font-weight:800;font-display:swap}
:root{--ink:#123b40;--muted:#5c7374;--paper:#f7f8f2;--teal:#087c79;--lime:#d8ee9a;--line:#dbe3db}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Cairo,Arial,sans-serif;line-height:1.85}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}img{max-width:100%;display:block}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #b0be26;outline-offset:5px}.wrap{width:min(1240px,calc(100% - 64px));margin:auto}.skip{position:absolute;top:-100px}.skip:focus{top:10px;background:white;z-index:100;padding:12px}.topbar{background:#113a40;color:#ecf3de;text-align:center;font-size:12px;padding:7px 20px}.nav{position:sticky;top:0;z-index:20;background:#f7f8f2f5;backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.nav-inner{height:94px;display:flex;align-items:center;gap:32px;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px}.brand img{width:45px;height:54px}.brand strong{font-size:23px;display:block;font-weight:800;line-height:1.5}.brand small{display:block;font-size:10px;letter-spacing:2.6px}.nav-links{display:flex;gap:28px;font-size:14px;font-weight:700}.nav-links a:hover{color:var(--teal)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:26px;padding:13px 26px;background:var(--ink);color:white;border:1px solid var(--ink);border-radius:7px;font-weight:700;font-size:14px;transition:transform .2s,background .2s}.btn:hover{background:#086b68;transform:translateY(-2px)}.btn.lime{background:var(--lime);border-color:var(--lime);color:var(--ink)}.btn.outline{color:var(--ink);background:transparent;border-color:#b9c9c4}.arrow{font-size:21px;font-family:Arial}.menu-toggle{display:none;background:none;border:1px solid var(--line);padding:7px 13px;border-radius:5px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.4px;display:flex;align-items:center;gap:10px;color:var(--teal)}.eyebrow:before{content:'';width:7px;height:7px;background:currentColor;border-radius:50%}.hero{padding:80px 0 40px;position:relative;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:65px;align-items:center}.hero h1{font-size:clamp(42px,4.7vw,68px);font-weight:800;line-height:1.43;letter-spacing:-2px;margin:23px 0}.hero h1 em{font-style:normal;color:var(--teal);position:relative}.hero h1 em:after{content:'';position:absolute;right:0;left:0;bottom:-4px;height:8px;background:var(--lime);z-index:-1;transform:rotate(-2deg)}.lead{font-size:17px;color:var(--muted);max-width:540px;line-height:2}.actions{display:flex;align-items:center;gap:17px;flex-wrap:wrap;margin-top:30px}.text-link{font-size:14px;font-weight:700;border-bottom:1px solid #99afaa;padding:9px 0}.micro{font-size:12px;color:var(--muted);margin-top:22px}.hero-art{height:510px;position:relative;display:grid;place-items:center;background:radial-gradient(ellipse,#d9eae1 0%,transparent 65%)}.orbit{position:absolute;width:390px;height:390px;border:1px solid #afc8bb;border-radius:50%;transform:rotate(-25deg)}.orbit:before,.orbit:after{content:'';position:absolute;inset:35px;border:1px dashed #b4cfc2;border-radius:50%}.orbit:after{inset:-42px;border-style:solid;border-color:#d7e4d8}.compass{width:210px;height:210px;border-radius:50%;background:linear-gradient(150deg,#fff,#e0eee4);border:10px solid #fff;box-shadow:0 30px 80px #224c4720;display:grid;place-items:center;position:relative;transform:rotate(-8deg)}.compass:after{content:'';position:absolute;inset:15px;border:1px solid #c5d9cf;border-radius:50%}.compass img{height:120px;filter:drop-shadow(0 10px 10px #26717525);z-index:1}.north{position:absolute;top:4px;font-family:Arial;font-size:12px;color:#6b9d90}.float{position:absolute;border:1px solid #d8e5dc;background:#fff;box-shadow:0 18px 42px #143e3810;border-radius:12px;padding:13px 18px;display:flex;align-items:center;gap:13px;z-index:2}.float img{height:45px;width:36px;object-fit:contain}.float b{font-size:16px;display:block}.float small{display:block;font-size:11px;color:var(--muted)}.float.hr{top:18px;right:5px;min-width:210px;border-bottom:3px solid #4e81c8}.float.care{bottom:67px;right:-15px}.float.go{top:175px;left:-20px}.art-caption{position:absolute;bottom:4px;font-size:11px;letter-spacing:2px;color:#799087}.section{padding:85px 0}.section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:38px}h2{font-size:clamp(30px,3vw,44px);line-height:1.55;letter-spacing:-1px;margin:12px 0;font-weight:800}.section-head p{max-width:380px;color:var(--muted);font-size:14px}.clients{padding:34px 0 45px;border-top:1px solid var(--line)}.client-heading{display:flex;align-items:center;justify-content:space-between;font-size:13px}.client-heading small{color:var(--muted);font-size:11px}.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;margin-top:24px}.logos div{height:85px;background:white;border:1px solid #e5e9e1;display:grid;place-items:center;border-radius:6px;padding:13px}.logos img{max-height:55px;max-width:110px;object-fit:contain;filter:grayscale(1);opacity:.75;transition:.2s}.logos div:hover img{filter:none;opacity:1}.hr-section{background:var(--ink);color:#f4f7ed;position:relative;overflow:hidden}.hr-section .eyebrow{color:var(--lime)}.hr-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:70px;align-items:center}.hr-section p{color:#bfd2cf}.hr-section h2{font-size:43px}.product-mark{display:flex;gap:14px;align-items:center}.product-mark img{height:54px}.product-mark b{font-size:24px}.feature-list{list-style:none;padding:0;margin:26px 0}.feature-list li{padding:12px 0;border-bottom:1px solid #ffffff1a;font-size:14px;display:flex;gap:14px}.feature-list li span{color:var(--lime)}.demo-board{background:#f7f9f5;color:var(--ink);border-radius:16px;padding:24px;box-shadow:0 35px 80px #00191630;transform:rotate(1deg)}.demo-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:17px}.demo-top small{font-size:10px;background:#e4ece6;padding:3px 10px;border-radius:20px}.demo-tabs{display:flex;gap:6px;margin:18px 0}.demo-tabs button{flex:1;background:transparent;border:0;padding:9px 5px;color:#617874;font-size:12px;border-radius:5px}.demo-tabs button[aria-selected=true]{background:#dcebcf;color:#21483d;font-weight:700}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.metric{background:white;border:1px solid #e5ebe2;padding:13px;border-radius:8px}.metric b{font-size:28px;display:block;line-height:1.6}.metric small{font-size:10px;color:#74887e}.chart{height:135px;display:flex;align-items:end;gap:12px;padding:20px 10px 0;margin:10px 0;background:repeating-linear-gradient(to top,transparent 0,transparent 32px,#e4ebe3 33px,#e4ebe3 34px)}.bar{flex:1;background:#79a99b;border-radius:5px 5px 0 0;transition:height .4s}.bar:nth-child(3n){background:#c3d89a}.demo-bottom{display:flex;justify-content:space-between;font-size:10px;color:#6d8075;padding-top:12px}.products-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}.product-card{border-top:1px solid #b8ccc4;padding:28px 0 0;display:grid;grid-template-columns:1fr 135px;gap:24px}.product-card img{width:105px;max-height:150px;object-fit:contain;justify-self:center;align-self:center}.product-card h3{font-size:27px;margin:4px 0}.product-card p{font-size:14px;color:var(--muted)}.tag{font-size:11px;color:var(--teal)}.services{background:#eaf0e5}.service-row{display:grid;grid-template-columns:60px 1fr 1fr 40px;gap:30px;align-items:center;padding:30px 0;border-bottom:1px solid #cad7c8}.service-row h3{font-size:25px;margin:0}.service-row p{font-size:14px;color:var(--muted)}.service-row:hover h3{color:var(--teal)}.num{font-family:Arial;font-size:13px;color:#758f82}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:42px}.step{border-top:1px solid var(--line);padding-top:22px}.step .num{font-size:28px;color:var(--teal)}.step h3{font-size:21px}.step p{font-size:14px;color:var(--muted)}.contact{background:#ddecba;border-radius:22px;padding:55px;display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-bottom:70px}.contact p{color:#456052}.contact h2{font-size:42px}.contact form{display:grid;grid-template-columns:1fr 1fr;gap:15px}.field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600}.field.full,.form-note,.contact form .btn{grid-column:1/-1}input,select,textarea{width:100%;border:1px solid #b7c99f;border-radius:5px;padding:11px 12px;background:#f8fbef;color:var(--ink);min-width:0;font-size:13px}textarea{resize:vertical;min-height:90px}.form-note{font-size:11px!important;margin:0}.contact-details{font-size:14px;display:grid;gap:12px;margin-top:28px}.footer{background:#102f35;color:#e0ebe3;padding:48px 0 20px}.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:50px}.footer .brand img{height:50px}.footer p{font-size:13px;color:#a7c0b9;max-width:330px}.footer h4{margin:0 0 15px;font-size:14px}.footer-links{display:grid;gap:9px;font-size:12px;color:#bfd2ca}.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid #ffffff18;margin-top:35px;padding-top:20px;font-size:11px;color:#98b7af}.detail-hero{padding:70px 0;background:#edf2e8}.detail-hero h1{font-size:48px;max-width:850px;line-height:1.5;margin:20px 0}.detail-hero .product-mark img{height:75px}.detail-body{max-width:900px}.detail-list{display:grid;grid-template-columns:1fr 1fr;gap:25px}.detail-item{border-bottom:1px solid var(--line);padding:20px 0}.detail-item h3{font-size:21px}.detail-item p{font-size:14px;color:var(--muted)}details{border-bottom:1px solid var(--line);padding:20px 0}summary{font-weight:700;cursor:pointer}details p{color:var(--muted);font-size:14px}.noscript{padding:12px;background:#fff1d3;text-align:center;font-size:13px}
@media(min-width:1000px){.compass{animation:float 7s ease-in-out infinite}@keyframes float{50%{transform:translateY(-12px) rotate(-3deg)}}}@media(max-width:1000px){.nav-links{gap:15px}.nav-inner{gap:15px}.nav .btn{padding:11px 15px}.hero-grid{gap:20px}.hero-art{transform:scale(.87)}.hr-layout{gap:35px}.contact{gap:35px;padding:35px}}@media(max-width:760px){.wrap{width:calc(100% - 36px)}.topbar{font-size:10px}.nav-inner{height:77px}.brand strong{font-size:20px}.brand small{font-size:8px}.brand img{height:44px;width:36px}.menu-toggle{display:block}.nav .nav-cta{display:none}.nav-links{display:none;position:absolute;top:77px;right:0;left:0;padding:24px;background:var(--paper);box-shadow:0 15px 20px #173c3010;flex-direction:column}.nav-links.open{display:flex}.hero{padding-top:40px}.hero-grid,.hr-layout{grid-template-columns:1fr;gap:25px}.hero h1{font-size:43px;letter-spacing:-1px}.lead{font-size:15px}.hero-art{height:385px;transform:scale(.9);margin:0 10px}.orbit{width:290px;height:290px}.compass{width:165px;height:165px}.compass img{height:95px}.float.hr{top:0;right:0;min-width:185px}.float.go{top:130px;left:-20px}.float.care{bottom:22px;right:-10px}.float{padding:10px 12px}.art-caption{bottom:-22px}.section{padding:55px 0}.section-head{display:block}.section-head p{font-size:13px}.client-heading{display:block}.client-heading small{display:block;margin-top:5px}.logos{grid-template-columns:repeat(3,1fr);gap:10px}.logos div{height:70px;padding:10px}.logos img{max-width:80px;max-height:45px}.hr-section h2{font-size:34px}.demo-board{padding:17px;transform:none}.products-grid,.steps,.contact,.footer-top,.detail-list{grid-template-columns:1fr}.products-grid{gap:35px}.product-card{grid-template-columns:1fr 95px;gap:15px}.product-card img{width:90px}.service-row{grid-template-columns:28px 1fr 20px;gap:12px}.service-row p{grid-column:2;grid-row:2;margin:0}.service-row .arrow{grid-column:3;grid-row:1}.service-row h3{font-size:21px}.steps{gap:25px}.contact{padding:27px 20px;gap:30px;border-radius:14px;margin-bottom:45px}.contact h2{font-size:32px}.contact form{grid-template-columns:1fr}.field{grid-column:1/-1}.footer-top{gap:25px}.footer-bottom{gap:14px;flex-direction:column}.detail-hero h1{font-size:34px}.detail-hero{padding:45px 0}.actions{gap:12px}.btn{padding:12px 20px;font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
/* Integrated orbital product labels */
.hero-art .float{border-radius:100px;background:#f6faf4dd;border:1px solid #b9d3c5;box-shadow:0 10px 30px #28534a0c;padding:12px 20px;backdrop-filter:blur(10px);animation:orbital-drift 8s ease-in-out infinite}.hero-art .float:after{content:'';position:absolute;width:8px;height:8px;background:#5e9f8b;border:4px solid var(--paper);box-sizing:content-box;border-radius:50%;bottom:-11px;left:50%}.hero-art .float.hr{border-bottom:1px solid #b9d3c5}.hero-art .float.go{animation-delay:-2.6s}.hero-art .float.care{animation-delay:-5.2s}.hero-art .float img{height:41px}.orbit{animation:orbit-turn 55s linear infinite}.orbit:after{border-style:dashed}.hero-art .compass{animation:orbital-drift 8s ease-in-out infinite}@keyframes orbital-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}@keyframes orbit-turn{to{transform:rotate(335deg)}}
/* Full-color, complete client collection */
.clients{padding-top:45px;padding-bottom:50px}.client-heading h2{font-size:30px;margin:6px 0}.motion-toggle{background:transparent;color:var(--ink);border:1px solid #b6cac1;border-radius:40px;padding:9px 17px;font-size:12px}.logo-marquee{overflow:hidden;direction:ltr;margin-top:30px;mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent)}.logo-track{display:flex;width:max-content;animation:client-roll 140s linear infinite}.logo-group{display:flex;flex-shrink:0;gap:18px;padding-right:18px}.client-logo{width:195px;height:126px;flex-shrink:0;background:#fff;border:1px solid #dce4d8;border-radius:12px;padding:18px;display:grid;place-items:center}.client-logo img{width:100%;height:90px;object-fit:contain;filter:none;opacity:1}.logo-marquee.paused .logo-track,.logo-marquee:focus-visible .logo-track{animation-play-state:paused}@media(hover:hover) and (pointer:fine){.logo-marquee:hover .logo-track{animation-play-state:paused}}.all-clients{margin-top:18px;padding:10px 0;border:0}.all-clients summary{font-size:12px;color:var(--teal)}.all-logo-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:24px}.all-logo-grid .client-logo{width:100%}@keyframes client-roll{to{transform:translateX(-50%)}}
/* Real HR screen inside a CSS phone frame */
.phone-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:590px;isolation:isolate}.phone-orbit{position:absolute;width:420px;height:420px;border:1px solid #73a59b40;border-radius:50%;z-index:-1}.phone-orbit:before,.phone-orbit:after{content:'';position:absolute;inset:35px;border:1px solid #83b2a62b;border-radius:50%}.phone-orbit:after{inset:-35px}.phone{position:relative;width:250px;margin:0;background:#142c32;border:7px solid #25464d;border-radius:36px;padding:4px;box-shadow:0 0 0 1px #668b88,18px 32px 60px #001b2455;transform:rotate(-5deg);overflow:hidden}.phone img{width:100%;height:auto;border-radius:24px}.phone-camera{position:absolute;z-index:2;top:9px;left:50%;transform:translateX(-50%);width:68px;height:14px;border-radius:20px;background:#17343c}.phone-caption{position:absolute;bottom:28px;left:0;background:#254d50ed;border:1px solid #6d9c8c60;border-radius:12px;padding:16px 21px;backdrop-filter:blur(12px)}.phone-caption strong{display:block;font-size:16px}.phone-caption small{display:block;font-size:11px;color:#c4d8ce}.phone-caption .eyebrow{font-size:10px;margin-bottom:4px}
/* A tangible payroll story */
.payroll-story{display:grid;grid-template-columns:.8fr 1.2fr;gap:55px;align-items:center;margin-top:65px;padding-top:55px;border-top:1px solid #91b7a82b}.payroll-intro h3{font-size:30px;line-height:1.6;margin:12px 0}.payroll-intro p{font-size:14px}.payroll-intro label{display:flex;justify-content:space-between;gap:20px;font-size:13px;margin-top:24px}.payroll-intro output{color:var(--lime);font-weight:700}.payroll-intro input[type=range]{padding:0;margin:18px 0;accent-color:#d8ee9a;background:transparent;direction:ltr;cursor:pointer;min-height:28px}.payroll-intro .payroll-note{font-size:11px;line-height:1.8;color:#a6c2bb}.payslip{background:#fafbf6;color:var(--ink);border-radius:18px;padding:26px;box-shadow:0 20px 50px #001d2126}.payslip-heading{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dce5d6;padding-bottom:17px}.payslip-heading h3{font-size:24px;margin:3px 0}.payslip-heading small{font-size:10px;color:#6b8073}.salary-chip{font-size:10px;border:1px solid #d1dfc7;border-radius:30px;padding:4px 10px}.payslip-columns{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:18px}.payslip h4{font-size:14px;margin:8px 0 18px;color:#17745e}.payslip .deductions h4{color:#a25b45}.payslip dl{margin:0}.payslip dl div{display:flex;justify-content:space-between;gap:10px;font-size:12px;margin:14px 0}.payslip dd{margin:0;font-variant-numeric:tabular-nums;font-weight:700;direction:ltr}.salary-subtotal{display:flex;justify-content:space-between;gap:8px;padding-top:12px;border-top:1px dashed #c7d5c3;font-size:12px}.salary-net{display:flex;justify-content:space-between;align-items:center;gap:15px;background:#e1eecb;padding:18px;border-radius:10px;margin-top:25px;font-size:13px}.salary-net strong{font-size:29px;white-space:nowrap}.salary-net small{display:block;font-size:10px;font-weight:400;color:#4b6b55}.salary-net strong small{display:inline;font-size:12px}
@media(max-width:760px){.hero-art .float{padding:9px 15px}.hero-art .float b{font-size:14px}.hero-art .float small{font-size:10px}.hero-art .float.hr{min-width:180px}.client-heading{display:flex;align-items:center;gap:14px}.client-heading h2{font-size:25px}.client-heading small{max-width:210px;font-size:10px}.motion-toggle{font-size:10px;padding:8px 12px;flex-shrink:0}.client-logo{width:170px;height:112px;padding:12px}.client-logo img{height:85px}.all-logo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.all-logo-grid .client-logo{height:105px}.phone-stage{min-height:560px;margin-top:12px;overflow:hidden}.phone{width:230px}.phone-orbit{width:320px;height:320px}.phone-caption{bottom:15px;left:8px;padding:12px 16px}.payroll-story{grid-template-columns:1fr;gap:24px;margin-top:40px;padding-top:35px}.payroll-intro h3{font-size:28px}.payslip{padding:18px 15px}.payslip-columns{gap:16px}.salary-net{padding:14px 10px}.salary-net strong{font-size:25px}.salary-net>span{font-size:12px}.payslip dl div{font-size:11px}.payslip-heading h3{font-size:21px}}
@media(prefers-reduced-motion:reduce){.hero-art .float,.hero-art .compass,.orbit,.logo-track{animation:none!important}.logo-marquee{overflow-x:auto}.logo-group[aria-hidden=true]{display:none}.motion-toggle{display:none}}
/* Compact logo ribbon and useful visitor messages */
.client-logo{width:142px;height:84px;padding:12px;border-radius:8px}.client-logo img{height:60px;width:118px;max-width:100%;object-fit:contain}.client-logo.dark-logo{background:#fff;border-color:#dce4d8}.logo-group{gap:14px;padding-right:14px}.logo-marquee{mask-image:none;margin-top:20px}.clients{padding-top:32px;padding-bottom:32px}.topbar{padding:7px 0;overflow:hidden;direction:ltr}.benefit-track{display:flex;width:max-content;animation:benefit-roll 35s linear infinite}.benefit-group{display:flex;align-items:center;gap:42px;padding-right:42px;flex-shrink:0;white-space:nowrap;direction:rtl}.benefit-group span{font-size:12px}.benefit-group i{color:#d8ee9a;font-style:normal;font-size:10px}.topbar:hover .benefit-track,.topbar:focus .benefit-track{animation-play-state:paused}@keyframes benefit-roll{to{transform:translateX(-50%)}}
.pay-item{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:11px 7px;background:transparent;border:0;border-bottom:1px solid #e5e9df;color:#204740;text-align:right;font-size:12px;border-radius:5px}.pay-item i{font-style:normal;color:#7a9487;font-size:10px}.pay-item b{white-space:nowrap;font-size:12px;font-variant-numeric:tabular-nums;direction:ltr}.pay-item:hover,.pay-item:focus-visible,.pay-item[aria-pressed=true]{background:#e5eedc;color:#164f42}.deductions .pay-item:hover,.deductions .pay-item[aria-pressed=true]{background:#f4e9df}.pay-detail{border:1px solid #d2dfca;border-right:3px solid #6b9b80;background:#eff4e9;border-radius:8px;padding:15px;margin-top:20px;min-height:145px}.pay-detail strong{font-size:13px}.pay-detail p{font-size:12px!important;color:#45644f!important;margin:7px 0 0;line-height:1.9}.salary-net strong{font-size:26px}
@media(max-width:760px){.client-logo{width:126px;height:78px;padding:10px}.client-logo img{width:106px;height:58px}.logo-group{gap:10px;padding-right:10px}.client-heading small{max-width:none}.benefit-group{gap:26px;padding-right:26px}.benefit-group span{font-size:11px}.pay-item,.pay-item b{font-size:11px}.pay-item{padding:10px 3px}.pay-detail{min-height:156px}.salary-net strong{font-size:23px}}
@media(prefers-reduced-motion:reduce){.benefit-track{animation:none!important}.topbar{overflow-x:auto}.benefit-group[aria-hidden=true]{display:none}}
.employee-profile{display:flex;align-items:center;gap:15px;padding:22px 0;border-bottom:1px solid #dce5d6}.employee-profile img{border-radius:50%;object-fit:cover;width:78px;height:78px;border:3px solid #dbe6cf}.employee-profile h4{font-size:19px;margin:0;color:#173e3e}.employee-profile p{font-size:12px!important;color:#4d695b!important;margin:2px 0}.employee-profile span{font-size:9px;color:#7a897e}.employee-code{margin-right:auto;font-size:10px;color:#67816f}.employee-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;background:#f0f4e9;border-radius:8px;padding:14px!important;margin-top:16px!important}.payslip .employee-meta div{display:block;margin:0;font-size:10px}.employee-meta dt{color:#738474}.payslip .employee-meta dd{direction:rtl;margin-top:3px;font-size:11px}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 24px}.web-project{min-width:0}.project-cover{background:#e9e8df;border-radius:12px;overflow:hidden;border:1px solid #d7dfd4;transition:transform .25s}.web-project:hover .project-cover{transform:translateY(-5px)}.project-browser{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#ffffffb0;padding:10px 14px;color:#75867c;font:11px Arial;direction:ltr;border-bottom:1px solid #ffffff70}.project-browser small{font-size:11px}.project-brand{min-height:190px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:30px}.project-brand img{width:180px;height:90px;object-fit:contain}.project-brand>strong{font-family:Arial,sans-serif;font-size:40px;letter-spacing:5px}.project-brand>span{font-size:11px}.project-bastet .project-brand{background:#eee4d7;color:#72512f}.project-karma .project-brand{background:#e7dedf;color:#6f4258}.project-metawires .project-brand{background:#e1e8ec;color:#274a61}.project-u4e .project-brand{background:#dce9f0;color:#244b8d}.project-yafta .project-brand{background:#183a43;color:#ecdc99}.project-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 2px}.project-caption small{font-size:10px;color:#6d8377}.project-caption h3{font:700 18px Arial;margin:7px 0}.visit-project{font-size:11px;border-bottom:1px solid #9db5a7;padding-bottom:5px}@media(max-width:900px){.project-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.project-grid{grid-template-columns:1fr;gap:23px}.project-brand{min-height:180px}.employee-meta{grid-template-columns:repeat(2,1fr)}.employee-profile{gap:11px;flex-wrap:wrap}.employee-profile img{width:65px;height:65px}.employee-profile h4{font-size:17px}.employee-code{font-size:9px}.employee-profile span{font-size:8px}}
/* Compact payslip presentation */
.payroll-story{gap:32px;margin-top:40px;padding-top:35px;grid-template-columns:1fr 1fr;align-items:start}.payslip{width:100%;max-width:440px;justify-self:center;padding:18px;border-radius:13px}.payslip-heading{padding-bottom:10px}.payslip-heading h3{font-size:19px;margin:0}.payslip-heading small{font-size:9px}.employee-profile{padding:12px 0;gap:10px}.employee-profile img{width:52px;height:52px;border-width:2px}.employee-profile h4{font-size:15px}.employee-profile p{font-size:11px!important;margin:0}.employee-profile span{font-size:8px}.payslip .employee-meta{padding:10px!important;margin-top:10px!important;gap:7px 12px;grid-template-columns:repeat(3,minmax(0,1fr))}.payslip .employee-meta dt{font-size:9px}.payslip .employee-meta dd{font-size:10px;margin-top:1px}.payslip-columns{margin-top:10px;gap:18px}.payslip h4{margin:4px 0 8px;font-size:12px}.payslip .employee-profile h4{font-size:15px;margin:0}.pay-item{padding:7px 3px;font-size:11px;min-height:34px}.pay-item b{font-size:11px}.salary-subtotal{padding-top:8px;font-size:11px}.pay-detail{min-height:0;padding:10px 12px;margin-top:12px}.pay-detail strong{font-size:11px}.pay-detail p{font-size:11px!important;margin-top:4px;line-height:1.7}.salary-net{margin-top:12px;padding:11px 12px}.salary-net strong{font-size:23px}.salary-net>span{font-size:11px}.salary-net small{font-size:9px}.payroll-intro h3{font-size:27px}.payroll-intro p{font-size:13px}.payroll-intro label{margin-top:16px}.payroll-intro input[type=range]{margin:10px 0}
@media(max-width:760px){.payroll-story{grid-template-columns:1fr;gap:20px;margin-top:30px;padding-top:25px}.payslip{max-width:390px;padding:15px}.employee-profile{flex-wrap:nowrap}.employee-code{font-size:8px}.payslip .employee-meta{grid-template-columns:repeat(3,minmax(0,1fr))}.payslip .employee-meta dd{font-size:9px}.payroll-intro h3{font-size:25px}.payroll-intro p{font-size:12px}.salary-net strong{font-size:22px}}
@media(max-width:370px){.payslip{padding:12px}.payslip-columns{gap:10px}.payslip .employee-meta{grid-template-columns:repeat(2,minmax(0,1fr))}.employee-code{display:none}}

/* Homepage refinement: readable headline and accessible controls. */
.hero h1{font-size:clamp(34px,4.2vw,58px);line-height:1.6;letter-spacing:-1px}.hero h1 em{display:inline;box-decoration-break:clone}.client-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}#salary-demo{scroll-margin-top:115px}.hero-grid>div,.hr-layout>div{min-width:0}
@media(max-width:760px){.hero h1{font-size:clamp(29px,7.7vw,43px)}.hero-art{margin:0;transform:scale(.85)}.client-heading{flex-wrap:wrap}.motion-toggle{min-height:44px}input,select,textarea{font-size:16px}.pay-item{min-height:44px}}
/* Company identity and connected attendance/payroll demonstration. */
.purpose-section{background:#edf2e8;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.purpose-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.purpose-card{background:var(--paper);border:1px solid #d4dfd2;border-radius:14px;padding:30px}.purpose-number{color:var(--teal);font-size:12px;font-weight:700}.purpose-card h3{font-size:25px;line-height:1.6;margin:15px 0}.purpose-card p,.purpose-values p{color:var(--muted);font-size:14px}.purpose-values{margin-top:34px}.purpose-values>h3{font-size:17px}.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.values-grid article{border-top:2px solid #a5bca7;padding-top:16px}.values-grid h4{margin:0;font-size:19px}.values-grid p{margin-bottom:0}
.client-logo{width:174px;height:112px;padding:10px;overflow:hidden}.client-logo img{width:154px;height:92px;object-fit:contain}.client-logo.logo-metawires img{width:154px;height:154px;max-width:none;flex-shrink:0}.client-logo.logo-metawires{display:flex;justify-content:center;align-items:center}.client-entry{margin:0;min-width:0}.client-entry figcaption{text-align:center;font-size:11px;color:var(--muted);margin-top:8px;overflow-wrap:anywhere}.all-logo-grid .client-logo{width:100%;height:112px}.all-clients summary{width:fit-content;padding:10px 0;min-height:44px}
.payroll-story{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start;gap:24px}.payroll-intro{grid-column:1/-1;max-width:780px}.payroll-intro h3{font-size:32px;margin:12px 0}.payroll-intro h3 br{display:none}.payroll-intro h3 br:after{content:' '}.payroll-intro p{max-width:720px}.payroll-story>.payslip{max-width:none;min-width:0}.attendance-board{min-width:0;background:#fafbf6;color:var(--ink);border:1px solid #dce5d6;border-radius:13px;padding:20px}.attendance-heading{display:flex;justify-content:space-between;gap:12px;align-items:start}.attendance-heading h3{font-size:23px;margin:7px 0}.attendance-heading .eyebrow{color:var(--teal)}.attendance-heading p{font-size:11px;color:var(--muted);margin:0}.demo-badge{font-size:9px;border:1px solid #cfdbc8;border-radius:20px;padding:4px 8px;white-space:nowrap}.attendance-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:18px}.attendance-summary span{font-size:10px;text-align:center;background:#edf2e5;padding:8px 3px;border-radius:6px}.attendance-summary b{display:block;font:700 23px Arial;margin-bottom:4px}.attendance-board .attendance-shift{font-size:11px;color:#4c6b5a;line-height:1.9}.attendance-filters{display:flex;gap:8px;margin:12px 0}.attendance-filters button{border:1px solid #cbdac5;border-radius:6px;background:transparent;color:var(--ink);padding:8px 10px;font-size:11px;min-height:44px}.attendance-filters button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}.attendance-scroll{max-height:350px;overflow:auto;border:1px solid #dce5d6;border-radius:8px;scrollbar-gutter:stable}.attendance-scroll table{border-collapse:separate;border-spacing:0;width:100%;font-size:11px}.attendance-scroll thead th{position:sticky;top:0;background:#e8efe0;padding:11px 6px;z-index:1;text-align:right}.attendance-scroll tbody th,.attendance-scroll td{padding:8px 6px;border-bottom:1px solid #e2e8dc;text-align:right}.attendance-scroll td[dir=ltr]{text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}.attendance-scroll tbody th small{display:block;font-weight:400;font-size:9px;color:#6b8073}.attendance-scroll tbody th b{white-space:nowrap}.attendance-scroll button{background:#f1eadf;color:#77533a;border:0;border-radius:5px;font-size:10px;padding:8px 6px;min-height:40px;text-align:right;width:100%}.attendance-overtime button{background:#e4eddb;color:#345f39}.attendance-rest{color:#7b877d;background:#f1f3ec}.linked-day td,.linked-day th{background:#e0ebd2}.attendance-scroll button[aria-pressed=true]{outline:2px solid #53794f;outline-offset:-2px}.day-status{font-size:10px}.attendance-explanation{padding:13px;background:#edf3e5;border-right:3px solid #6b9b80;border-radius:7px;margin-top:14px}.attendance-explanation strong{font-size:12px}.attendance-board .attendance-explanation p{color:#45644f;font-size:11px;margin:5px 0;line-height:1.8}.attendance-board .attendance-footnote{font-size:10px;line-height:1.9;color:#5b7162;margin-bottom:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:950px){.payroll-story{grid-template-columns:1fr}.payroll-story>.payslip,.attendance-board{max-width:600px;width:100%;justify-self:center}.values-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.purpose-grid{grid-template-columns:1fr}.purpose-card{padding:23px}.purpose-card h3{font-size:23px}.values-grid{gap:20px}.attendance-board{padding:13px}.attendance-heading{flex-wrap:wrap}.attendance-heading h3{font-size:21px}.payroll-intro h3{font-size:27px}.attendance-filters{gap:6px}.attendance-filters button{font-size:10px;padding:7px}.attendance-scroll td,.attendance-scroll tbody th{padding:7px 4px}.attendance-scroll button{font-size:9px;padding:6px 4px}.client-logo{width:160px;height:105px}.client-logo img{width:140px;height:85px}.client-logo.logo-metawires img{width:140px;height:140px}.all-logo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Editorial rhythm: a light process interlude, followed by a compact paired demo. */
.workflow-break{background:#e3edce;padding:48px 0}.workflow-break>.wrap{display:grid;grid-template-columns:1fr 1.6fr;gap:55px;align-items:center}.workflow-break h2{font-size:32px;margin-bottom:0}.workflow-break ol{list-style:none;padding:0;margin:0;display:flex;gap:24px}.workflow-break li{flex:1;border-top:1px solid #b6c99f;padding-top:15px}.workflow-break li>span{font:12px Arial;color:#648066}.workflow-break h3{font-size:16px;margin:10px 0 5px}.workflow-break p{font-size:12px;color:#526b59;margin:0}
.payroll-section{background:#f0f3eb}.payroll-section .payroll-story{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:0;padding:0;border:0;align-items:stretch;max-width:1050px;margin-inline:auto}.payroll-section .payroll-intro{grid-column:1/-1;max-width:740px;margin-bottom:12px}.payroll-section .payroll-intro h3{font-size:34px;color:var(--ink);margin:12px 0}.payroll-section .payroll-intro p{color:var(--muted)}.payroll-section .payroll-intro .payroll-note{font-size:10px;color:#758374;max-width:640px}.payroll-section .attendance-board,.payroll-section .payslip{width:100%;max-width:none;min-width:0;margin:0;padding:22px;background:#fcfdf8;border:1px solid #d9e2d2;border-radius:14px;box-shadow:0 10px 30px #153b3010;display:flex;flex-direction:column}.attendance-heading{border-bottom:1px solid #dce5d6;padding-bottom:12px}.attendance-heading small{font-size:10px;color:#6b8073}.attendance-heading h3{font-size:20px;margin:3px 0}.attendance-person{display:flex;align-items:center;gap:10px;margin:16px 0 0}.attendance-person img{border-radius:50%;width:44px;height:44px}.attendance-person strong{font-size:14px;display:block}.attendance-person small{font-size:10px;color:var(--muted);display:block}.attendance-summary{margin-top:16px}.attendance-summary span{padding:9px 2px}.attendance-summary b{font-size:22px}.impact-heading{display:flex;justify-content:space-between;align-items:center;margin:23px 0 6px;font-size:12px;font-weight:700}.impact-heading small{font-size:10px;font-weight:400;color:var(--muted)}.attendance-impacts{display:grid}.attendance-impacts button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:right;background:transparent;border:0;border-bottom:1px solid #e0e6da;padding:10px 7px;color:var(--ink);border-radius:5px;min-height:52px}.attendance-impacts strong{display:block;font-size:12px;font-weight:600}.attendance-impacts small{display:block;font-size:10px;color:var(--muted)}.attendance-impacts b{font-size:12px;font-variant-numeric:tabular-nums}.positive{color:#2e7350}.negative{color:#9b614b}.attendance-impacts button:hover,.attendance-impacts button[aria-pressed=true]{background:#e5eedc}.attendance-explanation{margin-top:16px;min-height:100px}.attendance-footnote{margin-top:auto;padding-top:14px}.payroll-section .salary-net{margin-top:auto}.payroll-section .pay-detail{margin-bottom:14px;min-height:100px}.payroll-section .payslip .employee-profile{padding:16px 0}.payroll-section .payslip-columns{margin-top:17px}.payroll-section .pay-item{min-height:40px}
/* Company story with a clear visual hierarchy. */
.purpose-section{background:var(--paper);border:0}.purpose-intro{display:grid;grid-template-columns:1.1fr 1fr;gap:0 60px;align-items:end;margin-bottom:36px}.purpose-intro>.eyebrow{grid-column:1/-1}.purpose-intro h2{font-size:42px;margin-bottom:0}.purpose-intro>p{max-width:360px;font-size:15px;color:var(--muted);margin-bottom:8px}.purpose-editorial{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:stretch}.vision-panel{position:relative;overflow:hidden;background:var(--ink);color:#f7f8f2;padding:40px;border-radius:16px;display:flex;flex-direction:column;justify-content:center;min-height:440px}.purpose-label{font-size:12px;font-weight:700;color:var(--teal);display:block;letter-spacing:.5px}.vision-panel .purpose-label{color:var(--lime)}.vision-panel h3{font-size:38px;line-height:1.6;margin:25px 0 16px;position:relative}.vision-panel p{font-size:14px;color:#bed2cc;max-width:350px;position:relative}.vision-compass{position:absolute;left:-30px;top:-40px;width:220px;height:220px;border:1px solid #ffffff18;border-radius:50%;font:130px Arial;text-align:center;line-height:220px;color:#ffffff09}.purpose-detail{padding:8px 0}.mission-panel{border-bottom:1px solid #d6e0d2;padding-bottom:25px;margin-bottom:25px}.mission-panel h3{font-size:29px;line-height:1.6;margin:13px 0}.mission-panel h3 br{display:none}.mission-panel p{font-size:14px;line-height:2;color:var(--muted);max-width:520px}.values-panel .values-grid{grid-template-columns:repeat(2,1fr);gap:22px;margin-top:20px}.values-panel article{border:0;padding:0 15px 0 0;border-right:2px solid #c7dba9}.values-panel h4{font-size:16px}.values-panel p{font-size:12px;color:var(--muted);margin:6px 0 0}
/* Native vector illustrations share the brand palette and remain sharp on mobile. */
.service-row{grid-template-columns:200px minmax(0,1fr) 35px;gap:38px;padding:30px 0}.service-visual{display:block;width:200px}.service-visual svg{display:block;width:100%;height:auto}.service-copy h3{margin:10px 0;font-size:28px}.service-copy p{max-width:590px;margin:0;font-size:14px}.service-copy .eyebrow{font-size:11px}.service-row>.arrow{font-size:26px}
@media(max-width:950px){.workflow-break>.wrap{grid-template-columns:1fr;gap:25px}.workflow-break h2 br{display:none}.payroll-section .payroll-story{grid-template-columns:1fr;max-width:510px}.payroll-section .attendance-board,.payroll-section .payslip{min-height:0}.payroll-section .salary-net{margin-top:12px}.purpose-editorial{gap:28px}.vision-panel{padding:28px}.vision-panel h3{font-size:30px}.purpose-intro{gap:24px}.service-row{grid-template-columns:150px minmax(0,1fr) 24px;gap:24px}.service-visual{width:150px}}
@media(max-width:760px){.purpose-intro{grid-template-columns:1fr;gap:8px}.purpose-intro h2{font-size:34px}.purpose-intro>p{max-width:100%}.purpose-editorial{grid-template-columns:1fr;gap:28px}.vision-panel{min-height:0;padding:28px}.vision-panel h3{font-size:30px;margin:15px 0}.vision-panel h3 br{display:none}.vision-panel p{max-width:none}.mission-panel h3{font-size:26px}.purpose-detail{padding:0}.service-row .arrow{grid-column:3;grid-row:1}.service-copy p{grid-row:auto;grid-column:auto}.service-copy h3{font-size:22px}.payroll-section .payroll-intro h3{font-size:28px}}
@media(max-width:480px){.workflow-break{padding:35px 0}.workflow-break h2{font-size:27px}.workflow-break ol{flex-direction:column;gap:16px}.workflow-break li{display:flex;gap:14px;padding-top:12px}.workflow-break li>span{padding-top:12px}.workflow-break h3{margin:0 0 4px}.payroll-section .attendance-board,.payroll-section .payslip{padding:16px}.attendance-heading{gap:8px;flex-wrap:wrap}.attendance-heading h3{font-size:19px}.service-row{grid-template-columns:80px minmax(0,1fr) 18px;gap:13px}.service-visual{width:80px}.service-copy h3{font-size:19px;line-height:1.7}.service-copy p{font-size:12px}.service-copy .eyebrow{font-size:9px}.service-row>.arrow{font-size:20px}.values-panel .values-grid{gap:18px}.purpose-intro h2{font-size:32px}}
.attendance-impacts button{min-height:46px;padding:9px 7px}.attendance-impacts button>span{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.attendance-impacts small{font-size:10px}.attendance-explanation{min-height:90px}.payroll-section .pay-detail{min-height:90px}
@media(max-width:380px){.attendance-impacts button>span{gap:6px}.attendance-impacts strong{font-size:11px}.attendance-impacts b{font-size:11px}}
.shared-employee{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid #d9e2d2;border-radius:12px;background:#e6eddd;padding:16px 22px}.shared-employee .employee-profile{padding:0;border:0;min-width:0;flex:1;max-width:460px}.shared-employee .employee-profile img{width:52px;height:52px}.shared-employee .employee-profile h4{margin:0;font-size:16px}.shared-employee .employee-profile p{margin:0;color:#4d695b}.shared-period{font-size:11px;color:#526b59}.payroll-section .shared-employee .employee-code{margin-inline-start:20px}.payroll-section .payslip .employee-meta{margin-top:16px!important}.clients h2{font-size:28px}.client-heading small{max-width:650px;display:block;line-height:1.9}
@media(max-width:600px){.shared-employee{flex-direction:column;align-items:stretch;gap:12px;padding:15px}.shared-employee .employee-profile{max-width:none}.shared-period{font-size:10px;border-top:1px solid #cfdbc5;padding-top:10px}.clients h2{font-size:24px}}
/* Compact hero action with a comfortable touch target at every viewport. */
.hero .actions>.btn{min-height:44px;padding:8px 17px;gap:12px;border-radius:12px;font-size:13px;line-height:1.7;box-shadow:0 3px 8px #143d4210}
.hero .actions>.btn .arrow{font-size:17px;line-height:1}
/* Contextual photography: airy editorial crops, natural color, and responsive sources. */
.media-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(28px,5vw,72px)}
.media-hero-copy{min-width:0}.media-hero h1{font-size:clamp(30px,3.6vw,50px)}.media-hero .lead{font-size:17px;max-width:540px}
.editorial-photo{margin:0;position:relative;min-width:0}.editorial-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:24px 24px 64px 24px;background:#e1e9e2}
.media-hero .editorial-photo img{aspect-ratio:1.12;max-height:510px}.editorial-photo figcaption{font-size:10px;color:var(--muted);margin-top:9px;padding-inline:3px}
.media-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(25px,6vw,85px);align-items:center;padding-top:65px;padding-bottom:65px;border-top:1px solid var(--line)}
.media-story h2{font-size:clamp(27px,3vw,40px);line-height:1.6;margin:15px 0}.media-story p{font-size:15px;color:var(--muted);max-width:470px;margin-bottom:22px}.media-story .editorial-photo img{aspect-ratio:16/10;max-height:400px}
.product-card-photo>img:first-child{grid-column:1/-1;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:16px;margin-bottom:8px}.product-card-photo{align-content:start}
.service-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px}.contact-media{padding-top:45px;padding-bottom:45px}.contact-media h1{font-size:clamp(28px,3vw,42px)}.contact-media .editorial-photo img{aspect-ratio:16/9;max-height:300px}
@media(max-width:760px){.media-hero,.media-story{grid-template-columns:1fr;gap:28px}.media-hero .editorial-photo img{aspect-ratio:16/11;max-height:360px;border-radius:18px 18px 42px 18px}.media-hero .lead{font-size:15px}.media-story{padding-top:36px;padding-bottom:36px}.media-story h2 br{display:none}.media-story .editorial-photo img{max-height:300px;border-radius:18px 18px 42px 18px}.product-card-photo>img:first-child{width:100%}.contact-media .editorial-photo img{aspect-ratio:16/9}.service-photo img{aspect-ratio:1}}
/* Actual Care app screen: preserve the complete UI inside a compact device. */
.care-app-story{grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:radial-gradient(ellipse at 25% 50%,#e1ece6,transparent 65%)}
.care-app-preview{margin:0;text-align:center;min-width:0}.care-device{width:240px;max-width:85%;margin:0 auto;padding:5px;border:6px solid #25464d;border-radius:34px;background:#fff;box-shadow:12px 20px 40px #123b4020;overflow:hidden}.care-device img{display:block;width:100%;height:auto;border-radius:23px}.care-app-preview figcaption{font-size:10px;color:var(--muted);margin:18px auto 0;max-width:280px;line-height:1.8}.care-app-story .feature-list{margin:20px 0 25px}
@media(max-width:760px){.care-app-story{grid-template-columns:1fr}.care-device{width:220px}.care-app-story .feature-list{font-size:13px}}
/* Refined header action and service previews. */
.nav .nav-cta{min-height:40px;padding:7px 14px;gap:10px;font-size:12px;line-height:1.7;border-radius:10px;background:transparent;color:var(--ink);border-color:#9eb6ad;white-space:nowrap}.nav .nav-cta .arrow{font-size:15px}.nav .nav-cta:hover{background:var(--ink);color:#fff}
.services .service-row{grid-template-columns:250px minmax(0,1fr) 24px;gap:30px}.services .service-photo{width:250px}.services .service-photo img{aspect-ratio:3/2;object-fit:cover;border-radius:14px}.services .service-copy p{max-width:660px;line-height:1.95}
@media(max-width:950px){.services .service-row{grid-template-columns:190px minmax(0,1fr) 20px;gap:22px}.services .service-photo{width:190px}}
@media(max-width:600px){.services .service-row{grid-template-columns:minmax(0,1fr) 20px;gap:18px}.services .service-photo{grid-column:1/-1;width:100%}.services .service-photo img{max-height:230px}.services .service-copy{grid-column:1;grid-row:2}.services .service-row>.arrow{grid-column:2;grid-row:2}.services .service-copy h3{font-size:24px}.services .service-copy p{font-size:13px}}
/* Two complementary service images, alongside the page's main photograph. */
.service-gallery{padding-block:50px 65px;border-top:1px solid var(--line)}.service-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.service-gallery-grid figure{margin:0;min-width:0}.service-gallery-grid img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:18px}.service-gallery-grid figcaption{padding:16px 2px 0}.service-gallery-grid h3{font-size:22px;margin:0 0 8px}.service-gallery-grid p{font-size:14px;color:var(--muted);margin:0;max-width:480px}.service-gallery .section-head h2{font-size:clamp(26px,3vw,38px)}
@media(max-width:650px){.service-gallery{padding-block:35px 45px}.service-gallery-grid{grid-template-columns:1fr;gap:30px}.service-gallery-grid h3{font-size:21px}}
.footer .footer-contact{display:flex;align-items:center;justify-content:flex-start;gap:10px;direction:rtl;text-align:right;min-height:30px}.contact-icon{width:18px;height:18px;flex:0 0 18px;color:#a9c9b8}.footer-contact bdi{unicode-bidi:isolate;overflow-wrap:anywhere}.footer-contact:hover .contact-icon{color:var(--lime)}
.hr-attendance-device{background:#f3f7fa}.hr-screen-brand{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 10px;border-bottom:1px solid #dce5eb;background:#f3f7fa}.care-device .hr-screen-brand img{width:30px;height:38px;border-radius:0;object-fit:contain}.hr-screen-brand strong{font-size:18px;color:#24456a}.care-device .hr-actual-screen{border-radius:0 0 23px 23px}
/* Keep the supplied app screen intact; crop only the system status strip in its presentation. */
.hr-screen-brand{direction:ltr}.hr-screen-crop{aspect-ratio:600/1250;overflow:hidden;border-radius:0 0 23px 23px}.care-device .hr-screen-crop .hr-actual-screen{width:100%;height:auto;max-width:none;border-radius:0;transform:translateY(-5.3030303%)}.hr-device-stage{position:relative;isolation:isolate;overflow:hidden;padding:38px 24px;border-radius:28px;background:radial-gradient(ellipse at 25% 20%,#e3edcf 0,transparent 52%),linear-gradient(145deg,#e8f0e4,#dcebe5 55%,#c9dfdc);border:1px solid #d3e1d6}.hr-device-stage:before,.hr-device-stage:after{content:'';position:absolute;z-index:-1;border:1px solid #8bb2a65c;border-radius:50%;width:360px;height:360px;left:-170px;top:40px}.hr-device-stage:after{width:440px;height:440px;left:auto;right:-250px;top:auto;bottom:-60px}.hr-device-stage .hr-attendance-device{position:relative;max-width:100%;box-shadow:15px 22px 40px #183f432b}.hr-app-visual figcaption{margin-top:14px}@media(max-width:480px){.hr-device-stage{padding:28px 18px;border-radius:20px}}
.hr-screen-brand{justify-content:space-between;gap:8px;padding:12px 8px}.hr-screen-logo{display:flex;align-items:center;gap:5px;direction:ltr;flex-shrink:0}.hr-screen-logo strong{font-size:12px;white-space:nowrap}.care-device .hr-screen-logo img{width:22px;height:28px}.hr-screen-employee{display:flex;align-items:center;gap:5px;min-width:0;text-align:right}.care-device .hr-screen-employee img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0}.hr-screen-employee strong{display:block;font-size:9px;line-height:1.6}.hr-screen-employee small{display:block;font-size:7px;line-height:1.6;color:#6b8073}
/* English product lockups: icon immediately left of B, with the group aligned to the RTL content. */
.product-mark{direction:ltr;justify-content:flex-end}.product-mark>b{direction:ltr;unicode-bidi:isolate}.hero-art .float{direction:ltr}.hero-art .float>.float-copy{direction:rtl;text-align:right}.hero-art .float b{direction:ltr;unicode-bidi:isolate}
/* Shared scroll entrances preserve existing transforms and never hide content at rest. */
@media(prefers-reduced-motion:no-preference){
  .scroll-reveal{animation:content-arrive .55s cubic-bezier(.22,.61,.36,1) var(--reveal-delay,0ms) both}
  @keyframes content-arrive{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
  .hero-art .compass{animation:compass-hover 7s ease-in-out infinite}
  .hero-art .compass>img{transform-origin:50% 60%;animation:compass-bearing 7s cubic-bezier(.45,0,.55,1) infinite}
  .hero-art .compass:after{animation:compass-halo 7s ease-in-out infinite}
  @keyframes compass-hover{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}
  @keyframes compass-bearing{0%,100%{transform:rotate(0deg) scale(1)}32%{transform:rotate(-9deg) scale(1.025)}68%{transform:rotate(6deg) scale(1.025)}}
  @keyframes compass-halo{0%,100%{opacity:.6;scale:1}50%{opacity:1;scale:1.04}}
}
@media(prefers-reduced-motion:reduce){.scroll-reveal{animation:none!important;opacity:1!important;translate:none!important}}
@media print{.scroll-reveal{animation:none!important;opacity:1!important;translate:none!important}}
/* Full editorial photos must not inherit the product logo's height cap. */
.product-card-photo>img:first-child{max-height:none;height:auto;aspect-ratio:auto;object-fit:contain}
.header-socials{display:flex;align-items:center;gap:6px;margin-inline-start:auto}
.social-link{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;transition:background .2s,color .2s}
.social-link .contact-icon{color:inherit;width:16px;height:16px}
.social-link:hover{background:var(--ink);color:white}
.contact-details>.footer-contact{display:flex;align-items:center;gap:12px;direction:rtl;text-align:right;min-height:34px}
.contact-details .contact-icon{color:var(--teal)}
.contact-details bdi{overflow-wrap:anywhere;min-width:0}
.purpose-section{background:linear-gradient(145deg,#edf3e9,var(--paper) 65%);border-block:1px solid #e0e8dc}
.purpose-intro{grid-template-columns:1fr 1fr;align-items:center;margin-bottom:36px;gap:32px}
.purpose-intro h2{font-size:clamp(32px,4vw,48px);line-height:1.5;margin:14px 0 0}
.purpose-intro h2 em{font-style:normal;color:var(--teal)}
.purpose-intro>p{max-width:360px;justify-self:end;font-size:16px;line-height:2;border-inline-start:2px solid #accbb5;padding-inline-start:22px}
.purpose-editorial{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.purpose-editorial>.vision-panel,.purpose-editorial>.mission-panel{padding:clamp(24px,3vw,42px);border-radius:24px;min-height:0;margin:0;display:flex;flex-direction:column;justify-content:flex-start;position:relative;overflow:hidden}
.purpose-editorial>.vision-panel{background:linear-gradient(140deg,#123b40,#1d5657);box-shadow:0 18px 40px #123b4010}
.purpose-editorial>.mission-panel{background:#fffdf7;border:1px solid #dce5d6}
.purpose-card-top{display:flex;align-items:center;gap:12px}
.purpose-symbol{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#ffffff12;border:1px solid #ffffff26;color:var(--lime)}
.purpose-symbol svg,.value-icon svg{width:25px;height:25px}
.mission-panel .purpose-symbol{background:#edf3e7;color:var(--teal);border-color:#dce8d6}
.purpose-index{margin-inline-start:auto;font:14px Arial;opacity:.5;letter-spacing:2px}
.purpose-editorial h3{font-size:clamp(27px,3vw,36px);line-height:1.6;margin:26px 0 16px}
.purpose-editorial h3 br{display:block}
.purpose-editorial p{font-size:14px;line-height:2.1;max-width:440px;margin:0 0 26px}
.vision-panel p{color:#d0e2dc}
.mission-panel p{color:var(--muted)}
.purpose-line{display:flex;align-items:center;gap:12px;margin-top:auto;height:30px;opacity:.6}
.purpose-line span{height:1px;flex:1;background:#b8d6c5}.purpose-line i{width:10px;height:10px;background:var(--lime);transform:rotate(45deg)}
.mission-steps{display:flex;align-items:center;gap:18px;margin-top:auto;color:var(--teal);font-size:12px;font-weight:700}.mission-steps i{font-style:normal;color:#94b2a6}
.purpose-section .values-panel{margin-top:36px;padding-top:28px;border-top:1px solid #d7e2d3}
.values-heading{display:flex;align-items:center;gap:18px}.values-heading h3{font-size:20px;margin:0}
.purpose-section .values-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:24px}
.purpose-section .values-grid article{border:0;border-inline-start:1px solid #d1dece;padding:0 18px 0 0}
.value-icon{color:var(--teal);display:block;margin-bottom:12px}
.purpose-section .values-grid h4{margin:0;font-size:16px}.purpose-section .values-grid p{line-height:1.9;margin:6px 0 0}
@media(max-width:1150px) and (min-width:761px){.nav-inner{gap:12px}.nav-links{gap:12px;font-size:12px}.nav .nav-cta{display:none}}
@media(max-width:760px){.nav-inner{gap:10px}.header-socials{gap:6px}.purpose-intro{grid-template-columns:1fr;gap:12px}.purpose-intro>p{justify-self:start;max-width:100%;margin:0}.purpose-editorial{grid-template-columns:1fr;gap:18px}.purpose-editorial h3 br{display:none}.purpose-section .values-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}.values-heading{align-items:flex-start;flex-direction:column;gap:6px}}
@media(max-width:380px){.nav .brand strong{font-size:16px}.nav .brand small{font-size:7px;letter-spacing:1.5px}.nav .brand{gap:7px}.social-link{width:30px;height:30px}.menu-toggle{padding:6px 9px}}
/* Balanced navigation with equal outer columns keeps links at the true center. */
@media(min-width:761px){.nav-inner{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:20px}.nav-inner>.brand{justify-self:start}.nav-links{justify-self:center}.header-socials{justify-self:end;margin:0}.nav-inner>.menu-toggle{display:none}}
@media(min-width:761px) and (max-width:960px){.nav-inner{gap:12px}.nav .brand strong{font-size:17px}.nav .brand small{font-size:7px;letter-spacing:1.5px}.nav .brand img{width:32px;height:40px}.nav .brand{gap:8px}.nav-links{gap:12px;font-size:12px}}
.hero{padding-top:24px}.hero-top-action{display:flex;justify-content:flex-end;margin-bottom:24px}.hero-top-action .btn{font-size:12px;padding:8px 18px;border-radius:30px}
/* A luminous compass scene gives the vision its own visual identity. */
.purpose-editorial>.vision-panel{isolation:isolate;background:radial-gradient(ellipse at 10% 20%,#a7e7cf 0,transparent 50%),radial-gradient(ellipse at 75% 100%,#b4c9f1 0,transparent 62%),linear-gradient(135deg,#eef8df,#d9ede6 55%,#e1edf7);color:#123b40;border:1px solid #bbd7cc;box-shadow:0 20px 50px #2e777b17,inset 0 1px 0 #fff;border-radius:28px 28px 70px 28px}
.vision-panel .purpose-card-top,.vision-panel h3,.vision-panel p,.vision-panel .purpose-line{position:relative;z-index:1}
.vision-panel .purpose-card-top{margin-bottom:70px}.vision-panel .purpose-label{color:#176e70}.vision-panel .purpose-symbol{color:#176e70;background:#ffffff8a;border-color:#ffffffaa}.vision-panel p{color:#355e62!important;max-width:410px}.vision-panel h3{color:#103e49;text-shadow:0 1px 0 #ffffff80}.vision-panel .purpose-line span{background:#568f94}.vision-panel .purpose-line i{background:#208b98}
.vision-atmosphere{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}.vision-atmosphere>img{position:absolute;width:86px;height:104px;object-fit:contain;top:48px;left:52px;filter:drop-shadow(0 14px 18px #36778c30);transform:rotate(-14deg)}
.vision-orbit{position:absolute;width:280px;height:280px;left:-45px;top:-52px;border:1px solid #ffffffb0;border-radius:50%;box-shadow:0 0 0 24px #ffffff15,0 0 0 25px #ffffff70,0 0 0 62px #ffffff10,0 0 0 63px #ffffff60}
.vision-orbit:after{content:'';position:absolute;inset:32px;border:1px dashed #5d9c9c60;border-radius:50%}.vision-star{position:absolute;top:40px;left:210px;width:12px;height:12px;background:#fff;transform:rotate(45deg);box-shadow:0 0 24px 10px #ffffff80}
.purpose-editorial>.mission-panel{background:linear-gradient(145deg,#fffef9,#f1f4e8);border-radius:28px 28px 28px 70px;box-shadow:0 16px 40px #123b4008}
@media(prefers-reduced-motion:no-preference){.vision-atmosphere>img{animation:vision-bearing 9s ease-in-out infinite}.vision-star{animation:vision-glow 5s ease-in-out infinite}@keyframes vision-bearing{50%{transform:translateY(-8px) rotate(2deg)}}@keyframes vision-glow{50%{opacity:.4;scale:.7}}}
@media(max-width:760px){.hero-top-action{margin-bottom:18px}.vision-panel .purpose-card-top{margin-bottom:55px}.vision-atmosphere>img{width:68px;height:82px;left:36px}.vision-orbit{left:-75px;top:-70px}.vision-star{left:160px}.purpose-editorial>.vision-panel,.purpose-editorial>.mission-panel{border-radius:24px}}
/* Compact identity cards, retaining the compass composition. */
.purpose-editorial>.vision-panel,.purpose-editorial>.mission-panel{padding:26px 30px}
.vision-panel .purpose-card-top{margin-bottom:30px}
.purpose-editorial h3{font-size:clamp(25px,2.6vw,31px);line-height:1.5;margin:18px 0 12px}
.purpose-editorial p{line-height:1.95;margin-bottom:16px;font-size:13px}
.vision-atmosphere>img{width:60px;height:74px;top:40px;left:42px}
.vision-orbit{width:210px;height:210px;left:-35px;top:-55px}
.vision-star{left:155px;top:30px}
.purpose-line{height:18px}.mission-steps{padding-top:12px}
.header-socials{direction:ltr}
.service-copy h3 bdi{display:inline-block;font-size:.7em;color:var(--teal);font-weight:600;margin-inline:8px}
.back-to-top{position:fixed;right:22px;bottom:22px;z-index:19;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:1px solid #b7cfc3;background:var(--paper);color:var(--ink);box-shadow:0 6px 20px #123b4020;transition:background .2s,color .2s}
.back-to-top[hidden]{display:none}.back-to-top svg{width:20px;height:20px}.back-to-top:hover{background:var(--ink);color:white}
@media(max-width:760px){.purpose-editorial>.vision-panel,.purpose-editorial>.mission-panel{padding:22px}.vision-panel .purpose-card-top{margin-bottom:24px}.vision-atmosphere>img{left:26px;width:50px;height:62px}.back-to-top{right:16px;bottom:20px}}
/* Light numbering on the vision card; retain the original unboxed style. */

@media(prefers-reduced-motion:no-preference){
  .back-to-top:not([hidden]) svg{animation:back-arrow-nudge 3.2s ease-in-out infinite}
  .back-to-top:hover svg,.back-to-top:focus-visible svg{animation-play-state:paused}
  @keyframes back-arrow-nudge{0%,65%,100%{transform:translateY(0)}78%{transform:translateY(-3px)}89%{transform:translateY(0)}}
}
/* Locale-aware navigation: three desktop zones, compact mobile controls. */
.nav .nav-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px;align-items:center}
.nav-inner>.brand{justify-self:start;min-width:0}.nav .nav-links{justify-self:center;gap:20px;white-space:nowrap}.header-tools{display:flex;align-items:center;justify-self:end;gap:12px}.header-tools .header-socials{display:flex;margin:0;gap:6px}.language-switch{display:inline-flex;align-items:center;justify-content:center;flex:none;width:auto;min-width:64px;min-height:36px;margin:0;padding:5px 10px;border:1px solid #c3d1c6;border-radius:8px;color:var(--ink);font:600 12px/1.5 Cairo,Arial,sans-serif;white-space:nowrap}.language-switch:hover{background:#e7eee2}.nav .menu-toggle{display:none}
html[dir=rtl] body{direction:rtl}html[dir=ltr] body{direction:ltr}body{text-align:start}
.pay-item,.attendance-impacts button,.attendance-scroll button,.employee-meta,.field,.form-note,.pay-detail,.attendance-explanation{text-align:start}
.footer .footer-contact,.contact-details>.footer-contact{direction:inherit;text-align:start}
.hero-art .float>.float-copy{direction:inherit;text-align:start}
html[lang=en] body{font-family:Arial,Helvetica,sans-serif;line-height:1.7}
html[lang=en] h1,html[lang=en] h2,html[lang=en] h3{letter-spacing:-.025em}
html[lang=en] .brand strong{font-size:22px;white-space:nowrap}html[lang=en] .brand small{letter-spacing:2px}
html[lang=en] .hero h1{line-height:1.2;margin-bottom:25px}html[lang=en] .hero .lead{line-height:1.7}
html[lang=en] .product-mark{justify-content:flex-start}html[lang=en] .hero-art .float>.float-copy{direction:ltr;text-align:left}
html[lang=en] .wa-dialog{direction:ltr;text-align:left}html[lang=en] .wa-form textarea,html[lang=en] .wa-send{font-family:Arial,Helvetica,sans-serif}
html[lang=en] .attendance-scroll th,html[lang=en] .attendance-scroll td{text-align:start}html[lang=en] .attendance-scroll td[dir=ltr]{text-align:center}
html[lang=en] .detail-hero h1{line-height:1.25}html[lang=en] .hr-screen-employee{text-align:left}html[lang=en] .arrow{transform:scaleX(-1)}
html[lang=en] .field input,html[lang=en] .field select,html[lang=en] .field textarea{direction:ltr;text-align:left}
@media(min-width:761px) and (max-width:1100px){.nav .nav-inner{gap:16px}.nav .nav-links{gap:12px}.nav .nav-links a{font-size:12px}.header-tools .header-socials{display:none}.nav .brand strong,html[lang=en] .nav .brand strong{font-size:18px}}
@media(max-width:760px){.nav .nav-inner{grid-template-columns:minmax(0,1fr) auto auto;height:77px;gap:10px}.nav .nav-links{display:none;position:absolute;inset-inline:0;top:77px;white-space:normal;text-align:start;justify-self:stretch}.nav .nav-links.open{display:flex}.nav .menu-toggle{display:block;width:40px;height:40px;padding:0;justify-self:end}.header-tools{gap:0}.header-tools .header-socials{display:none}.language-switch{min-width:58px;min-height:36px;padding:5px 8px;font-size:11px}.nav .brand strong,html[lang=en] .nav .brand strong{font-size:18px}.nav .brand small,html[lang=en] .nav .brand small{font-size:7px;letter-spacing:1.5px}.nav .brand img{width:32px;height:40px}.nav .brand{gap:8px}html[lang=en] .hero h1{font-size:clamp(32px,7.5vw,48px)}html[lang=en] .hero-art .float small{font-size:9px}}
@media(max-width:360px){.nav .brand strong,html[lang=en] .nav .brand strong{font-size:15px}.nav .brand small{letter-spacing:1px}.nav .nav-inner{gap:7px}}
html[lang=ar] .hero-art .float>.float-copy{direction:rtl;text-align:right}html[lang=en] .payslip .employee-meta dd{direction:ltr;text-align:left}html[lang=en] .benefit-group{direction:ltr}
/* English brand lockup and balanced headline. */
html[lang=en] .brand .brand-arabic,html[lang=en] .nav .brand .brand-arabic{font-family:Cairo,Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:0;line-height:1.7;text-align:left}
html[lang=en] .hero-grid>div:first-child{container-type:inline-size}html[lang=en] .hero h1{font-size:clamp(28px,8cqi,48px);line-height:1.3}html[lang=en] .hero h1 em{font-size:clamp(21px,7.3cqi,44px);white-space:nowrap}
/* Mirror decoration positions without reversing the brand mark itself. */
html[lang=en] .vision-atmosphere{transform:scaleX(-1)}html[lang=en] .vision-atmosphere>img{scale:-1 1}
html[lang=en] .purpose-editorial>.vision-panel{background:radial-gradient(ellipse at 90% 20%,#a7e7cf 0,transparent 50%),radial-gradient(ellipse at 25% 100%,#b4c9f1 0,transparent 62%),linear-gradient(225deg,#eef8df,#d9ede6 55%,#e1edf7);border-radius:28px 28px 28px 70px}html[lang=en] .mission-steps i{transform:scaleX(-1)}
html[lang=en] #wa-launcher{left:auto;right:max(20px,env(safe-area-inset-right))}html[lang=en] .back-to-top{right:auto;left:22px}
#hr-app{scroll-margin-top:105px}#hr-app .media-story-copy{align-self:center}
@media(max-width:760px){html[lang=en] .purpose-editorial>.vision-panel{border-radius:24px}html[lang=en] .nav .brand .brand-arabic{font-size:10px}html[lang=en] .back-to-top{left:16px;right:auto}}
@media(max-width:600px){html[lang=en] #wa-launcher{right:14px;left:auto}}
/* English wordmark: match the blue logo identity with contrasting weights. */
html[lang=en] .brand .brand-wordmark{font-family:Arial,Helvetica,sans-serif;letter-spacing:-.6px;line-height:1.3;color:#396b9b;font-weight:400}
html[lang=en] .brand-digital{font-weight:400;color:#507696}html[lang=en] .brand-bwsla{font-weight:700;color:#396b9b}
html[lang=en] .brand .brand-arabic{color:#607d8d;margin-top:3px}html[lang=en] .footer .brand-wordmark{font-size:26px}
.brand-tagline{display:inline-block;color:#50718a;font-size:13px;font-weight:500;line-height:1.6;margin:3px 0 7px}
/* Compact bilingual wordmark; scope footer colours to English only. */
html[lang=en] .brand>span{display:flex;flex-direction:column;gap:0;justify-content:center}
html[lang=en] .brand .brand-wordmark{line-height:1.1}
html[lang=en] .brand .brand-arabic,html[lang=en] .nav .brand .brand-arabic{margin-top:0;line-height:1.3}
html[lang=ar] .nav .brand strong{color:#396b9b}
html[lang=ar] .nav .brand small{color:#607d8d}
html[lang=en] .footer .brand .brand-wordmark,html[lang=en] .footer .brand-digital,html[lang=en] .footer .brand-bwsla{color:#e0ebe3}
html[lang=en] .footer .brand .brand-arabic{color:#bfd2ca}
html[lang=en] .footer .brand-tagline{color:#a7c0b9}
/* Gentle concentric pulses behind the HR phone. */
@media(prefers-reduced-motion:no-preference){
  .phone-orbit{animation:phone-ring-pulse 3.8s ease-in-out infinite;transform-origin:center}
  .phone-orbit:before{animation:none}
  .phone-orbit:after{animation:none}
  @keyframes phone-ring-pulse{0%,100%{transform:scale(.98);opacity:.65}50%{transform:scale(1.045);opacity:1}}
}
/* Two-tone Arabic header wordmark, drawn from the logo palette. */
html[lang=ar] .nav .brand-ar-bwsla{color:#111111}
html[lang=ar] .nav .brand-ar-digital{color:#396b9b}
/* Match the Arabic header: company name in black, Digital in blue. */
html[lang=en] .nav .brand-bwsla{color:#111111}
html[lang=en] .nav .brand-digital{color:#396b9b}
/* White vision card with the existing animated compass decoration. */
.purpose-editorial>.vision-panel,html[lang=en] .purpose-editorial>.vision-panel{background:#fff}

.vision-panel .purpose-symbol{background:#f0f7f4;border-color:#d6e6df}
.vision-orbit{border-color:#bfdfd7;background:radial-gradient(circle,#e4f4ee80,transparent 70%);box-shadow:0 0 0 24px #eaf6f34d,0 0 0 25px #cbe5dd80,0 0 0 62px #f0f8f54d,0 0 0 63px #dceee780}
.vision-star{background:#91cfc7;box-shadow:0 0 24px 10px #b9e4dc40}

.vision-panel .purpose-index{color:var(--ink);opacity:.5}
/* Product cards: image, compact identity, copy and action in one clear column. */
#products .products-grid{gap:24px;align-items:stretch}
#products .product-card-photo{display:flex;flex-direction:column;gap:0;padding:0;border:1px solid #dce6df;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 10px 30px #123b4007;min-width:0}
#products .product-card-photo>img:first-child{display:block;width:100%;height:auto;max-height:none;aspect-ratio:16/9;object-fit:contain;border-radius:0;margin:0}
#products .product-card-photo>div{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:26px 28px}
#products .product-card-photo .tag{font-size:11px;color:var(--muted);margin:0 0 14px}
#products .product-card-heading{display:flex;align-items:center;gap:12px;margin-bottom:12px}
#products .product-card-heading img{width:34px;height:42px;max-height:none;object-fit:contain;flex-shrink:0}
#products .product-card-heading h3{margin:0;font-size:26px;line-height:1.5}
#products .product-card-photo p{font-size:14px;line-height:1.95;margin:0 0 24px;max-width:100%}
#products .product-card-photo .text-link{margin-top:auto;padding:12px 0 0;border-bottom:0;border-top:1px solid #e1e9e3;width:100%;color:var(--teal)}
#products .product-card-photo:last-child .text-link{color:#76528f}
@media(max-width:760px){#products .product-card-photo>div{padding:22px}#products .products-grid{gap:24px}}
/* Quiet product-colour accents stay behind the card copy. */
#products .product-card-photo{--card-glow:8,124,121}
#products .product-card-photo:last-child{--card-glow:118,82,143}
#products .product-card-photo>div{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 0 100%,rgba(var(--card-glow),.055),transparent 65%),#fff}
#products .product-card-photo>div:before{content:'';position:absolute;z-index:-1;pointer-events:none;inset-inline-end:-78px;top:28px;width:180px;height:180px;border:1px solid rgba(var(--card-glow),.09);border-radius:50%;box-shadow:0 0 0 24px rgba(var(--card-glow),.025),0 0 0 48px rgba(var(--card-glow),.015)}
@media(prefers-reduced-motion:no-preference){
  #products .product-card-photo{transition:box-shadow .35s,border-color .35s}
  #products .product-card-photo>div:before{transition:transform .6s ease,opacity .6s ease}
  #products .product-card-photo:hover,#products .product-card-photo:focus-within{border-color:rgba(var(--card-glow),.28);box-shadow:0 14px 32px rgba(var(--card-glow),.09)}
  #products .product-card-photo:hover>div:before,#products .product-card-photo:focus-within>div:before{transform:scale(1.08) translateY(-5px)}
}

/* Product activation, training and onboarding information. */
#getting-started .detail-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media(max-width:760px){#getting-started .detail-list{grid-template-columns:1fr}}



/* Mobile spacing: keep the centre mark clear and footer links readable. */
@media(max-width:760px){
  .hero-art .float.go{top:80px}
  .media-story .media-story-copy h2 br{display:block}
  .footer-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 18px}
  .footer-top>div:first-child{grid-column:1/-1}
  .footer-top>div{min-width:0}
  .footer .footer-links{font-size:11px}
  .footer .footer-contact{gap:6px;align-items:flex-start}
  .footer .footer-contact .contact-icon{width:15px;height:15px;flex-basis:15px;margin-top:4px}
  .footer .footer-contact bdi{min-width:0;overflow-wrap:anywhere}
}

/* Balanced mobile product triangle with an unobstructed centre emblem. */
@media(max-width:760px){
  .hero-art .float{width:48%;min-width:0;gap:8px;padding:10px 12px;min-height:74px}
  .hero-art .float img{width:30px;height:38px;flex-shrink:0}
  .hero-art .float.hr{top:0;right:0;left:auto;min-width:0}
  .hero-art .float.go{top:0;left:0;right:auto}
  .hero-art .float.care{bottom:20px;left:26%;right:auto}
  .purpose-editorial .mission-panel h3 br{display:block}
}
.phone-orbit{border-color:#8acbb866;box-shadow:none}
.phone-orbit:before,.phone-orbit:after{border-color:#8acbb84d}

/* Product details and complementary services. */
.hero-visual{min-width:0}
.hero-art button.float{font-family:inherit;color:var(--ink);text-align:inherit}
.hero-art .float small{display:none}
.hero-art .float[aria-expanded=true] small,.hero-art .float:focus-visible small{display:block}
.hero-services{text-align:center;margin:18px auto 0;max-width:470px;border-top:1px solid var(--line);padding-top:16px}
.hero-services>p{font-size:12px;color:var(--muted);margin:0 0 12px}
.hero-service-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hero-service-links a{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 4px;border-radius:10px;font-size:12px;font-weight:700;line-height:1.6}
.hero-service-links svg{width:24px;height:24px;color:var(--teal)}
.hero-service-links a:hover{background:#eaf0e5}
@media(hover:hover){.hero-art .float:hover small{display:block}}
@media(max-width:760px){
.hero-art .float b>span{display:block;line-height:1.4;text-transform:uppercase}
.hero-art .float b{text-align:center}
.hero-art .float>.float-copy{flex:1}
.hero-art .float small{position:absolute;top:calc(100% + 13px);left:50%;transform:translateX(-50%);width:max-content;max-width:210px;background:var(--ink);color:white;padding:7px 10px;border-radius:8px;text-align:center;font-size:11px;box-shadow:0 5px 15px #123b4015}
.hero-art .float:focus-visible,.hero-art .float[aria-expanded=true]{z-index:4}
.hero-services{margin-top:0}
.hero-service-links a{font-size:11px}
}

/* Six compact nodes share the compass instead of extending the hero. */
.hero-art .hero-services{position:absolute;inset:0;margin:0;padding:0;border:0;max-width:none;pointer-events:none}
.hero-services>p{display:none}
.hero-art .hero-service-links{display:block}
.hero-art .hero-service-links a{position:absolute;width:130px;min-height:62px;pointer-events:auto;background:#f6faf4ed;border:1px solid #b9d3c5;border-radius:18px;gap:4px;padding:8px;font-size:11px;z-index:2}
.hero-art .hero-service-links a:nth-child(1){right:0;top:calc(50% - 31px)}
.hero-art .hero-service-links a:nth-child(2){left:0;top:calc(50% - 31px)}
.hero-art .hero-service-links a:nth-child(3){left:10%;bottom:35px}
.hero-art .float{width:150px;min-width:0;min-height:62px;padding:9px 12px;gap:9px}
.hero-art .float.hr{top:25px;right:10%;left:auto;min-width:0}
.hero-art .float.go{top:25px;left:10%;right:auto}
.hero-art .float.care{bottom:35px;right:10%;left:auto}
.hero-art .float b{font-size:13px}
.hero-art .float img{width:28px;height:34px}
.hero-art .float small{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);width:max-content;max-width:190px;background:var(--ink);color:white;padding:6px 9px;border-radius:8px;text-align:center;font-size:11px}
.hero-art .float:hover,.hero-art .float[aria-expanded=true]{z-index:4}
@media(max-width:760px){
 .hero-art .float{width:112px;min-height:58px;padding:8px 10px;gap:7px}
 .hero-art .float.hr{right:8%;min-width:0}
 .hero-art .float.go{left:8%}
 .hero-art .float.care{right:8%;left:auto}
 .hero-art .float b{font-size:12px}
 .hero-art .float img{width:25px;height:30px}
 .hero-art .hero-service-links a{width:100px;min-height:58px;font-size:10px;padding:7px 4px}
 .hero-art .hero-service-links a:nth-child(3){left:8%}
 .hero-art .hero-service-links svg{width:20px;height:20px}
 .hero-art .compass{width:135px;height:135px;border-width:7px}
 .hero-art .compass img{height:78px}
}
@media(max-width:380px){
 .hero-art .float{width:100px}
 .hero-art .hero-service-links a{width:82px;font-size:9px}
 .hero-art .compass{width:115px;height:115px}
 .hero-art .compass img{height:65px}
}

/* One additional-solutions card keeps the compass uncluttered. */
.hero-art .float.more{top:auto;bottom:35px;left:10%;right:auto}
.hero-art .float.more small{top:auto;bottom:calc(100% + 12px);min-width:150px;line-height:1.8}
.hero-art .float.more small>span{display:block}
@media(max-width:760px){
 .hero-art .float.more{left:8%}
 .hero-art .float.more b{font-size:12px;line-height:1.5}
}



/* Slightly offset compass cards retain clear space around the centre. */
.hero-art .float.hr{top:12px;right:5%}
.hero-art .float.go{top:55px;left:2%}
.hero-art .float.care{bottom:57px;right:2%}
.hero-art .float.more{bottom:20px;left:9%}
@media(max-width:760px){
 .hero-art .float.hr{top:8px;right:7%}
 .hero-art .float.go{top:43px;left:2%}
 .hero-art .float.care{bottom:53px;right:1%}
 .hero-art .float.more{bottom:22px;left:7%}
}

/* Stagger cards across orbit depths while reserving the central logo area. */
.hero-art .float.hr{top:20px;right:1%}
.hero-art .float.go{top:calc(50% - 135px);left:0}
.hero-art .float.care{bottom:24px;right:0}
.hero-art .float.more{bottom:calc(50% - 170px);left:12%}
@media(max-width:760px){
 .hero-art .float.hr{top:8px;right:2%}
 .hero-art .float.go{top:calc(50% - 100px);left:0}
 .hero-art .float.care{bottom:22px;right:1%}
 .hero-art .float.more{bottom:calc(50% - 130px);left:17%}
}
@media(max-width:380px){
 .hero-art .float.more{left:10%}
}

/* Bring the outer cards slightly closer to the compass. */
.hero-art .float.hr{top:38px;right:6%}
.hero-art .float.care{bottom:42px;right:5%}
@media(max-width:760px){
 .hero-art .float.hr{top:24px;right:6%}
 .hero-art .float.care{bottom:38px;right:5%}
}

/* Bring Care onto its orbit and allow longer service descriptions to wrap. */
.hero-art .float.care{bottom:54px;right:9%}
.hero-art .float.more small{width:230px;max-width:230px;white-space:normal}
@media(max-width:760px){.hero-art .float.care{bottom:50px;right:9%}.hero-art .float.more small{width:210px;max-width:210px}}

.hr-journey .mobile-break{display:none}
@media(max-width:760px){.hr-journey{align-items:flex-start}.hr-journey:before{flex-shrink:0;margin-top:.7em}.hr-journey .mobile-break{display:block}.hr-journey>span{line-height:1.9}}