/* ========================================================================== Unity Facilities Management & Services — shared stylesheet Edit the tokens in :root to rebrand the entire site. ========================================================================== */ :root{ --brand:#E11B22; --brand-dark:#B3131A; --brand-deep:#8E0F14; --brand-soft:#FDECEC; --ink:#111318; --ink-2:#2A2E38; --body:#5C6474; --muted:#8C93A3; --line:#E6E8EE; --surface:#fff; --surface-2:#F5F6F9; --ok:#0E9A6C; --display:'Plus Jakarta Sans',system-ui,sans-serif; --text:'Inter',system-ui,sans-serif; --r-sm:8px; --r-md:14px; --r-lg:22px; --sh-sm:0 2px 10px rgba(17,19,24,.06); --sh-md:0 12px 32px rgba(17,19,24,.10); --sh-lg:0 26px 60px rgba(17,19,24,.16); --wrap:1280px; --gut:24px; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:120px} body{margin:0;font-family:var(--text);font-size:16px;line-height:1.68;color:var(--body); background:#fff;-webkit-font-smoothing:antialiased} /* NOTE: overflow-x lives on , not . On it creates a clipping context that cuts off the Divisions dropdown when it extends past the fold. */ img,svg,iframe{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:0;background:none;color:inherit} ul{margin:0;padding:0;list-style:none} h1,h2,h3,h4{font-family:var(--display);color:var(--ink);line-height:1.16;margin:0; letter-spacing:-.022em;font-weight:800} p{margin:0} :focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)} .narrow{max-width:900px} .skip{position:absolute;left:-9999px;background:var(--brand);color:#fff;padding:12px 20px;z-index:999} .skip:focus{left:0} .section{padding-block:clamp(60px,7.5vw,100px)} .section--tint{background:var(--surface-2)} .section--ink{background:var(--ink);color:#C9CDD8} .section--ink h2,.section--ink h3{color:#fff} .head{text-align:center;max-width:680px;margin:0 auto clamp(36px,5vw,54px)} .head--left{text-align:left;margin-inline:0} .head h2{font-size:clamp(29px,4.2vw,42px)} .head h2 em{font-style:normal;color:var(--brand)} .head p{margin-top:18px;font-size:16.5px} .eyebrow{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.18em; text-transform:uppercase;color:var(--brand);margin-bottom:14px} .rule{width:70px;height:5px;background:var(--brand);border-radius:5px;margin:22px 0} .head:not(.head--left) .rule{margin-inline:auto} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display); font-weight:700;font-size:15px;padding:14px 26px;border-radius:999px;white-space:nowrap; transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s,background .22s,color .22s} .btn svg{flex:none;transition:transform .22s} .btn:hover{transform:translateY(-2px)} .btn:hover svg{transform:translateX(4px)} .btn--brand{background:var(--brand);color:#fff;box-shadow:0 8px 22px rgba(225,27,34,.30)} .btn--brand:hover{background:var(--brand-dark)} .btn--ink{background:var(--ink);color:#fff} .btn--ink:hover{background:#000} .btn--ghost{background:#fff;color:var(--ink);box-shadow:var(--sh-sm)} .btn--outline{border:2px solid rgba(255,255,255,.4);color:#fff} .btn--outline:hover{background:#fff;color:var(--ink)} .btn--lg{padding:17px 32px;font-size:16px} .btn--block{width:100%;justify-content:center} /* ---------- top bar ---------- */ .topbar{background:var(--ink);color:#C9CDD8;font-size:13.5px} .topbar .wrap{display:flex;align-items:center;gap:26px;min-height:44px;flex-wrap:wrap} .topbar a{display:inline-flex;align-items:center;gap:9px;padding-block:6px} .topbar a:hover{color:#fff} .topbar .ic{width:22px;height:22px;flex:none;border-radius:50%;background:var(--brand); color:#fff;display:grid;place-items:center} .topbar .ic svg{width:12px;height:12px} .topbar .tag{margin-left:auto;letter-spacing:.05em;text-transform:uppercase; font-size:10.5px;font-weight:500;color:#6B7280} /* ---------- header ---------- */ .header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line); transition:box-shadow .25s} .header.is-stuck{box-shadow:0 6px 24px rgba(17,19,24,.09)} .header .wrap{display:flex;align-items:center;gap:16px;min-height:90px;flex-wrap:nowrap} .brand{display:flex;align-items:center;gap:13px;flex:none;padding-block:10px} .brand__mark{width:64px;height:64px;flex:none;object-fit:contain} .brand__name{font-family:var(--display);font-weight:800;font-size:28px;color:var(--ink); line-height:1;letter-spacing:.005em;display:block} .brand__sub{display:block;margin-top:6px;font-family:var(--display);font-weight:700; font-size:11.5px;letter-spacing:.105em;text-transform:uppercase;color:var(--ink-2);line-height:1.4} .nav{margin-left:auto;display:flex;align-items:center;gap:0;flex-wrap:nowrap} .nav__link{font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--ink-2); padding:10px 10px;border-radius:var(--r-sm);position:relative;display:inline-flex; align-items:center;gap:5px;transition:color .2s;white-space:nowrap;flex:none} .nav__link::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:2px; background:var(--brand);border-radius:2px;transform:scaleX(0);transform-origin:left; transition:transform .28s cubic-bezier(.2,.8,.3,1)} .nav__link:hover,.nav__link[aria-current]{color:var(--brand)} .nav__link:hover::after,.nav__link[aria-current]::after{transform:scaleX(1)} .has-drop{position:relative} .drop{position:absolute;top:calc(100% + 8px);left:0;min-width:255px;background:#fff; border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-md);padding:8px; opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s} .has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:none} .drop a{display:block;padding:10px 14px;border-radius:var(--r-sm);font-size:14.5px; font-weight:500;color:var(--ink-2);transition:.18s} .drop a:hover{background:var(--brand-soft);color:var(--brand);padding-left:19px} .drop .is-lead{color:var(--brand);font-weight:700} .nav__cta{margin-left:10px;flex:none;padding:12px 20px;font-size:14.5px} .burger{display:none;width:46px;height:46px;border-radius:var(--r-sm);place-items:center;margin-left:auto} .burger span{display:block;width:23px;height:2.5px;background:var(--ink);border-radius:2px;transition:.28s} .burger span+span{margin-top:5px} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)} .drawer{position:fixed;inset:0 0 0 auto;width:min(340px,86vw);background:#fff;z-index:120; transform:translateX(102%);transition:transform .34s cubic-bezier(.2,.8,.3,1);padding:22px; overflow-y:auto;box-shadow:var(--sh-lg);display:flex;flex-direction:column;gap:4px} .drawer.is-open{transform:none} .drawer a{font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink); padding:12px;border-radius:var(--r-sm)} .drawer a:hover{background:var(--surface-2);color:var(--brand)} .drawer .sub a{font-size:14.5px;font-weight:500;color:var(--body);padding-left:26px} .drawer__close{align-self:flex-end;width:42px;height:42px;font-size:26px;color:var(--ink)} .scrim{position:fixed;inset:0;background:rgba(17,19,24,.5);z-index:110;opacity:0; visibility:hidden;transition:.3s} .scrim.is-open{opacity:1;visibility:visible} /* ---------- image placeholders ---------- */ .ph{position:relative;overflow:hidden;background:linear-gradient(150deg,#DDE2EC,#C3CAD8);isolation:isolate} .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2} /* placeholder captions removed — labels no longer render */ .ph::after{content:none} .ph--a{background:linear-gradient(150deg,#E3E8F0,#BFC8D8)} .ph--b{background:linear-gradient(150deg,#F0E1E1,#D6BCBC)} .ph--c{background:linear-gradient(150deg,#DCE6E4,#B6C6C3)} .ph--d{background:linear-gradient(150deg,#E6E3F0,#C2BDD6)} /* ---------- page hero ---------- */ .phero{position:relative;overflow:hidden;isolation:isolate; padding-block:clamp(52px,7vw,86px);background:var(--surface-2)} .phero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden} .phero__bg .ph{display:none} .phero__bg::before{content:"";position:absolute;right:-140px;top:50%;transform:translateY(-50%); width:520px;height:520px;border-radius:50%;border:22px solid var(--brand);opacity:.13} .phero__bg::after{content:"";position:absolute;inset:0;z-index:3; background:linear-gradient(100deg,rgba(255,255,255,.97),rgba(255,255,255,.92) 40%,rgba(255,255,255,.55) 72%,rgba(255,255,255,.25))} .phero h1{font-size:clamp(32px,5.2vw,56px);letter-spacing:-.032em} .phero h1 em{font-style:normal;color:var(--brand)} .phero p{margin-top:20px;font-size:clamp(16px,1.6vw,18px);max-width:56ch;color:var(--ink-2)} .phero__actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px} .crumbs{font-size:13.5px;color:var(--body);margin-bottom:18px} .crumbs a:hover{color:var(--brand)} /* ---------- generic cards ---------- */ .grid{display:grid;gap:24px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden; display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s} .card:hover{transform:translateY(-7px);box-shadow:var(--sh-md);border-color:transparent} .card__media{position:relative;height:136px;display:grid;place-items:center; background:linear-gradient(158deg,#FCFCFD,#EEF0F5);border-bottom:1px solid var(--line); overflow:hidden} .card__media::before{content:"";position:absolute;width:190px;height:190px;border-radius:50%; border:1.5px dashed rgba(225,27,34,.20)} .card__media .ph{display:none} .card__ic{position:relative;width:76px;height:76px;border-radius:26px;background:var(--brand); color:#fff;display:grid;place-items:center;z-index:6; box-shadow:0 12px 26px rgba(225,27,34,.34);transition:transform .34s cubic-bezier(.2,.8,.3,1)} .card:hover .card__ic{transform:translateY(-4px) rotate(-5deg)} .card__ic svg{width:36px;height:36px} .card__body{padding:24px 22px 26px;display:flex;flex-direction:column;gap:10px;flex:1;text-align:center} .card h3{font-size:17.5px} .card p{font-size:14.4px;line-height:1.62} .card__more{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;justify-content:center; gap:8px;color:var(--brand);font-family:var(--display);font-weight:700;font-size:14px} .card:hover .card__more svg{transform:translateX(5px)} .card__more svg{transition:transform .25s} /* ---------- pest grid ---------- */ .pest{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:22px; display:flex;flex-direction:column;gap:9px;transition:.3s} .pest:hover{border-color:var(--brand);box-shadow:var(--sh-md);transform:translateY(-5px)} .pest__ic{width:48px;height:48px;border-radius:12px;background:var(--brand-soft);color:var(--brand); display:grid;place-items:center} .pest__ic svg{width:26px;height:26px} .pest h3{font-size:16.5px} .pest p{font-size:14px;line-height:1.6} .pest b{font-family:var(--display);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--ok);margin-top:auto;padding-top:6px} /* ---------- process steps ---------- */ .steps{counter-reset:s;display:grid;gap:22px} .step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-md); padding:28px 24px 24px;counter-increment:s} .step::before{content:counter(s,decimal-leading-zero);position:absolute;top:-16px;left:24px; font-family:var(--display);font-weight:800;font-size:15px;color:#fff;background:var(--brand); width:40px;height:32px;border-radius:8px;display:grid;place-items:center; box-shadow:0 6px 14px rgba(225,27,34,.32)} .step h3{font-size:17px;margin-bottom:9px} .step p{font-size:14.5px} /* ---------- checklist ---------- */ .checks{display:grid;gap:12px;margin-top:22px} .checks li{display:flex;gap:12px;align-items:flex-start;font-size:15.4px} .checks svg{width:20px;height:20px;flex:none;color:var(--brand);margin-top:4px} .section--ink .checks svg{color:var(--brand)} /* ---------- pricing ---------- */ .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start} .plan{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:30px 26px; display:flex;flex-direction:column;gap:14px;transition:.3s} .plan:hover{box-shadow:var(--sh-md);transform:translateY(-6px)} .plan--feature{border-color:var(--brand);box-shadow:var(--sh-md);position:relative} .plan--feature::before{content:"Most popular";position:absolute;top:-13px;left:50%; transform:translateX(-50%);background:var(--brand);color:#fff;font-family:var(--display); font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase; padding:5px 16px;border-radius:999px} .plan h3{font-size:19px} .plan__price{font-family:var(--display);font-weight:800;font-size:34px;color:var(--ink);line-height:1} .plan__price small{font-size:14px;font-weight:600;color:var(--body)} .plan ul{display:grid;gap:10px;margin-top:4px} .plan li{display:flex;gap:10px;font-size:14.4px;align-items:flex-start} .plan li svg{width:18px;height:18px;flex:none;color:var(--brand);margin-top:3px} .plan .btn{margin-top:auto} /* ---------- FAQ ---------- */ .faq{max-width:860px;margin-inline:auto;display:grid;gap:12px} .faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r-md); padding:0 22px;transition:border-color .25s} .faq details[open]{border-color:var(--brand)} .faq summary{list-style:none;cursor:pointer;padding:20px 0;font-family:var(--display); font-weight:700;font-size:16.5px;color:var(--ink);display:flex;gap:16px;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";margin-left:auto;font-size:26px;font-weight:400;color:var(--brand); line-height:1;transition:transform .25s} .faq details[open] summary::after{transform:rotate(45deg)} .faq p{padding:0 0 22px;font-size:15.2px} /* ---------- stats strip ---------- */ .stats__inner{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-lg); display:grid;grid-template-columns:repeat(4,1fr)} .stat{display:flex;align-items:center;gap:16px;padding:28px 24px;position:relative} .stat+.stat::before{content:"";position:absolute;left:0;top:26%;bottom:26%;width:1px;background:var(--line)} .stat__ic{width:50px;height:50px;flex:none;border-radius:50%;background:var(--brand-soft); color:var(--brand);display:grid;place-items:center} .stat__ic svg{width:26px;height:26px} .stat b{display:block;font-family:var(--display);font-weight:800;font-size:19px;color:var(--ink);line-height:1.2} .stat span{font-size:14px;line-height:1.45;display:block;margin-top:3px} /* ---------- why band ---------- */ .why{position:relative;background:var(--ink);color:#fff;overflow:hidden} .why .wrap{position:relative;z-index:4;padding-block:clamp(54px,7vw,84px)} .why h2{color:#fff;font-size:clamp(28px,4vw,40px);margin-bottom:42px} .why h2 em{font-style:normal;color:var(--brand)} .why__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;max-width:730px} .why__item{display:flex;flex-direction:column;gap:12px} .why__item svg{width:34px;height:34px;color:var(--brand);transition:transform .3s} .why__item:hover svg{transform:translateY(-5px) scale(1.08)} .why__item b{font-family:var(--display);font-weight:700;font-size:13.4px;color:#fff;line-height:1.4} .why__photo{position:absolute;top:0;right:0;bottom:0;width:42%;z-index:1; border-radius:340px 0 0 340px;overflow:hidden} .why__photo .ph{display:none} .why__photo{background:linear-gradient(150deg,#1C2029,#111318)} .why__photo>span{position:absolute;top:50%;right:16%;transform:translate(50%,-50%); width:150px;height:150px;border-radius:50%;background:rgba(225,27,34,.14); border:1.5px dashed rgba(225,27,34,.45);display:grid;place-items:center;z-index:5} .why__photo>span svg{width:64px;height:64px;color:var(--brand)} .why__photo::after{content:"";position:absolute;inset:0;z-index:4; background:linear-gradient(90deg,var(--ink),rgba(17,19,24,.86) 22%,rgba(17,19,24,.1) 62%,transparent)} .why__photo::before{content:"";position:absolute;left:-3px;top:0;bottom:0;width:6px; background:var(--brand);z-index:6;border-radius:340px 0 0 340px} /* ---------- CTA band ---------- */ .cta{background:var(--brand);color:#fff} .cta .wrap{display:flex;align-items:center;gap:26px;flex-wrap:wrap;padding-block:34px} .cta__ic{width:60px;height:60px;flex:none;border-radius:50%;background:#fff;color:var(--brand); display:grid;place-items:center} .cta__ic svg{width:28px;height:28px} .cta__txt p{font-size:15.5px;color:rgba(255,255,255,.9)} .cta__txt b{display:block;font-family:var(--display);font-weight:800; font-size:clamp(21px,3vw,29px);color:#fff;margin-top:4px;letter-spacing:-.02em} .cta .btn{margin-left:auto} /* ---------- forms ---------- */ .quote{display:grid;grid-template-columns:.92fr 1.08fr;gap:50px;align-items:start} .info{margin-top:30px;display:flex;flex-direction:column} .info li{display:flex;gap:15px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line)} .info li:last-child{border-bottom:0} .info .ic{width:42px;height:42px;flex:none;border-radius:12px;background:var(--brand-soft); color:var(--brand);display:grid;place-items:center} .info .ic svg{width:20px;height:20px} .info b{display:block;font-family:var(--display);font-weight:700;font-size:11px; letter-spacing:.13em;text-transform:uppercase;color:var(--body)} .info span{font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink)} .form{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(24px,3.4vw,38px);box-shadow:var(--sh-sm)} .form__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .field{display:flex;flex-direction:column;gap:7px} .field--full{grid-column:1/-1} .field label{font-family:var(--display);font-weight:700;font-size:12.4px;letter-spacing:.05em; text-transform:uppercase;color:var(--ink-2)} .field input,.field select,.field textarea{font:inherit;font-size:15px;color:var(--ink); background:var(--surface-2);border:1.5px solid transparent;border-radius:var(--r-sm); padding:13px 15px;width:100%;transition:.2s} .field textarea{resize:vertical;min-height:118px} .field input:focus,.field select:focus,.field textarea:focus{outline:none;background:#fff;border-color:var(--brand)} .form__note{margin-top:14px;font-size:13.4px;text-align:center} .form__msg{margin-top:16px;padding:14px 16px;border-radius:var(--r-sm);background:var(--brand-soft); color:var(--brand-dark);font-size:14.4px;font-weight:600;display:none} .form__msg.is-on{display:block} .hp{position:absolute;left:-9999px} /* ---------- footer ---------- */ .footer{background:#fff;border-top:1px solid var(--line);padding-block:clamp(46px,6vw,66px) 0} .footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1.2fr 1.2fr;gap:36px} .footer h4{font-size:16.5px;margin-bottom:20px;position:relative;padding-bottom:12px} .footer h4::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:3px; background:var(--brand);border-radius:3px} .footer p{font-size:14.5px;line-height:1.72} .footer .brand{margin-bottom:18px;padding-block:0} .flist li{margin-bottom:10px} .flist a{display:inline-flex;gap:9px;align-items:flex-start;font-size:14.5px;transition:.2s} .flist a:hover{color:var(--brand);transform:translateX(4px)} .flist svg{width:14px;height:14px;flex:none;color:var(--brand);margin-top:4px} .fcontact li{display:flex;gap:11px;align-items:flex-start;margin-bottom:12px;font-size:14.5px} .fcontact svg{width:16px;height:16px;flex:none;color:var(--brand);margin-top:4px} .socials{display:flex;gap:11px;margin-top:22px} .socials a{width:42px;height:42px;border-radius:12px;background:var(--ink);color:#fff; display:grid;place-items:center;transition:.24s} .socials a:hover{background:var(--brand);transform:translateY(-3px)} .socials a[aria-label="Instagram"]:hover{background:#C13584} .socials a[aria-label="Facebook"]:hover{background:#1877F2} .socials a[aria-label="Snapchat"]:hover{background:#FFFC00;color:var(--ink)} .socials a[aria-label="WhatsApp"]:hover{background:#25D366} .socials svg{width:18px;height:18px} .map{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:var(--surface-2)} .map iframe{width:100%;height:100%;border:0} .copy{margin-top:clamp(38px,5vw,54px);background:var(--ink);color:#9AA1B1;text-align:center; font-size:13.6px;padding-block:18px} .copy a:hover{color:#fff} /* ---------- floats ---------- */ .wa{position:fixed;right:20px;bottom:20px;z-index:90;width:56px;height:56px;border-radius:50%; background:#25D366;color:#fff;display:grid;place-items:center; box-shadow:0 10px 26px rgba(37,211,102,.42);transition:transform .25s} .wa:hover{transform:scale(1.08)} .wa svg{width:28px;height:28px} /* ---------- reveal ---------- */ .rv{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)} .rv.is-in{opacity:1;transform:none} /* ---------- responsive ---------- */ @media (max-width:1080px){ .footer__grid{grid-template-columns:1fr 1fr 1fr;gap:32px} .why__photo{width:36%} } @media (max-width:1180px){ .nav__link{font-size:13.8px;padding:10px 8px} .nav__link::after{left:8px;right:8px} .nav__cta{padding:11px 16px;font-size:13.8px} .brand__name{font-size:25px} .brand__mark{width:56px;height:56px} } @media (max-width:1040px){ .nav__link{font-size:12.6px;padding:9px 6px} .nav__link::after{left:6px;right:6px} .nav__cta{padding:10px 14px;font-size:12.8px} .brand__sub{font-size:9.4px} .brand__name{font-size:23px} .brand__mark{width:50px;height:50px} } @media (max-width:980px){ .nav{display:none} .burger{display:grid} .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)} .stats__inner{grid-template-columns:1fr 1fr} .stat:nth-child(1)::before,.stat:nth-child(3)::before{display:none} .stat:nth-child(3),.stat:nth-child(4){border-top:1px solid var(--line)} .why__photo{display:none} .why__grid{grid-template-columns:repeat(3,1fr);max-width:none} .quote{grid-template-columns:1fr;gap:34px} .plans{grid-template-columns:1fr;max-width:520px;margin-inline:auto} } @media (max-width:720px){ .topbar .tag{display:none} .cta .btn{margin-left:0;width:100%;justify-content:center} .footer__grid{grid-template-columns:1fr 1fr} .footer__grid>:first-child{grid-column:1/-1} .map{aspect-ratio:16/9} } @media (max-width:560px){ :root{--gut:18px} .brand__mark{width:52px;height:52px} .brand__name{font-size:23px} .brand__sub{font-size:9.4px;letter-spacing:.09em} .header .wrap{min-height:78px} .g2,.g3,.g4{grid-template-columns:1fr} .stats__inner{grid-template-columns:1fr} .stat+.stat::before{display:none} .stat+.stat{border-top:1px solid var(--line)} .why__grid{grid-template-columns:repeat(2,1fr)} .form__grid{grid-template-columns:1fr} .footer__grid{grid-template-columns:1fr} .phero__actions .btn{width:100%;justify-content:center} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} .rv{opacity:1;transform:none} } @media print{.header,.topbar,.wa,.drawer,.scrim{display:none!important}} /* ========================================================================== CHAT ASSISTANT ========================================================================== */ .chat-launch{position:fixed;right:20px;bottom:86px;z-index:95;display:flex;align-items:center; gap:10px;background:var(--brand);color:#fff;border-radius:999px;padding:13px 20px 13px 16px; font-family:var(--display);font-weight:700;font-size:15px; box-shadow:0 10px 26px rgba(225,27,34,.42);transition:transform .25s,box-shadow .25s} .chat-launch:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(225,27,34,.5)} .chat-launch svg{width:22px;height:22px;flex:none} .chat-launch.is-hidden{opacity:0;visibility:hidden;transform:scale(.9)} .chat-launch__dot{position:absolute;top:10px;right:14px;width:10px;height:10px;border-radius:50%; background:#25D366;border:2px solid var(--brand)} .chat{position:fixed;right:20px;bottom:20px;z-index:130;width:min(384px,calc(100vw - 40px)); height:min(620px,calc(100vh - 40px));background:#fff;border-radius:var(--r-lg); box-shadow:0 30px 80px rgba(17,19,24,.32);display:flex;flex-direction:column;overflow:hidden; opacity:0;visibility:hidden;transform:translateY(20px) scale(.97); transition:opacity .28s cubic-bezier(.2,.8,.3,1),transform .28s cubic-bezier(.2,.8,.3,1),visibility .28s} .chat.is-open{opacity:1;visibility:visible;transform:none} .chat__head{background:var(--ink);color:#fff;padding:16px 18px;display:flex;align-items:center;gap:12px;flex:none} .chat__head img{width:40px;height:40px;flex:none;object-fit:contain;background:#fff;border-radius:10px;padding:3px} .chat__head b{font-family:var(--display);font-weight:800;font-size:15.5px;display:block;line-height:1.2} .chat__head span{font-size:12.5px;color:#9AA1B1;display:flex;align-items:center;gap:6px;margin-top:3px} .chat__head span::before{content:"";width:7px;height:7px;border-radius:50%;background:#25D366} .chat__close{margin-left:auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center; font-size:22px;line-height:1;color:#9AA1B1;transition:.2s} .chat__close:hover{background:rgba(255,255,255,.12);color:#fff} .chat__log{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px; background:var(--surface-2);scroll-behavior:smooth} .msg{max-width:84%;font-size:14.6px;line-height:1.6;padding:12px 15px;border-radius:16px; animation:pop .28s cubic-bezier(.2,.8,.3,1)} @keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .msg--bot{background:#fff;color:var(--ink-2);border-bottom-left-radius:5px; align-self:flex-start;box-shadow:var(--sh-sm)} .msg--me{background:var(--brand);color:#fff;border-bottom-right-radius:5px;align-self:flex-end} .msg strong{color:var(--ink);font-weight:700} .msg--me strong{color:#fff} .msg a{color:var(--brand);font-weight:600;text-decoration:underline} .msg--me a{color:#fff} .typing{align-self:flex-start;background:#fff;border-radius:16px;border-bottom-left-radius:5px; padding:14px 16px;display:flex;gap:5px;box-shadow:var(--sh-sm)} .typing i{width:7px;height:7px;border-radius:50%;background:#B6BCC9;animation:bob 1.2s infinite} .typing i:nth-child(2){animation-delay:.15s} .typing i:nth-child(3){animation-delay:.3s} @keyframes bob{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}} .chat__opts{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 14px;background:var(--surface-2);flex:none} .chip{background:#fff;border:1.5px solid var(--line);color:var(--ink-2);border-radius:999px; padding:9px 15px;font-family:var(--display);font-weight:600;font-size:13.6px;transition:.2s;text-align:left} .chip:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)} .chip--go{background:var(--brand);border-color:var(--brand);color:#fff} .chip--go:hover{background:var(--brand-dark);color:#fff} .chip--wa{background:#25D366;border-color:#25D366;color:#fff} .chip--wa:hover{background:#1EBE5A;color:#fff} .chat__input{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line);background:#fff;flex:none} .chat__input input{flex:1;font:inherit;font-size:14.6px;padding:11px 14px;border-radius:999px; border:1.5px solid var(--line);background:var(--surface-2);color:var(--ink)} .chat__input input:focus{outline:none;border-color:var(--brand);background:#fff} .chat__input button{width:44px;height:44px;flex:none;border-radius:50%;background:var(--brand); color:#fff;display:grid;place-items:center;transition:.2s} .chat__input button:hover{background:var(--brand-dark)} .chat__input button svg{width:19px;height:19px} .chat__input[hidden]{display:none} .chat__foot{padding:9px 14px;background:#fff;border-top:1px solid var(--line);text-align:center; font-size:11.5px;color:var(--muted);flex:none} @media (max-width:560px){ .chat{right:0;bottom:0;width:100vw;height:100dvh;border-radius:0} .chat-launch{right:16px;bottom:82px;padding:12px 17px 12px 14px;font-size:14px} .wa{right:16px;bottom:16px} } @media (prefers-reduced-motion:reduce){ .msg,.typing i{animation:none} } /* ========================================================================== ARABIC / RTL Applied when . Logical properties handle most of it; these rules fix the cases that need explicit mirroring. ========================================================================== */ [dir="rtl"]{ --display:'IBM Plex Sans Arabic','Plus Jakarta Sans',system-ui,sans-serif; --text:'IBM Plex Sans Arabic','Inter',system-ui,sans-serif; } [dir="rtl"] body{line-height:1.85} /* Arabic needs more leading */ [dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{letter-spacing:0} [dir="rtl"] .eyebrow,[dir="rtl"] .brand__sub,[dir="rtl"] .topbar .tag, [dir="rtl"] .field label,[dir="rtl"] .footer h4,[dir="rtl"] .creds b, [dir="rtl"] .pest b,[dir="rtl"] .plan__price small{letter-spacing:0} /* directional icons flip */ [dir="rtl"] .btn svg,[dir="rtl"] .card__more svg,[dir="rtl"] .flist svg{transform:scaleX(-1)} [dir="rtl"] .btn:hover svg{transform:scaleX(-1) translateX(4px)} [dir="rtl"] .card:hover .card__more svg{transform:scaleX(-1) translateX(5px)} [dir="rtl"] .flist a:hover{transform:translateX(-4px)} /* elements pinned with physical properties */ [dir="rtl"] .nav{margin-left:0;margin-right:auto} [dir="rtl"] .nav__cta{margin-left:0;margin-right:10px} [dir="rtl"] .burger{margin-left:0;margin-right:auto} [dir="rtl"] .topbar .tag{margin-left:0;margin-right:auto} [dir="rtl"] .cta .btn{margin-left:0;margin-right:auto} [dir="rtl"] .drop{left:auto;right:0} [dir="rtl"] .drop a:hover{padding-left:14px;padding-right:19px} [dir="rtl"] .nav__link::after{transform-origin:right} [dir="rtl"] .drawer{inset:0 auto 0 0;transform:translateX(-102%)} [dir="rtl"] .drawer.is-open{transform:none} [dir="rtl"] .drawer .sub a{padding-left:12px;padding-right:26px} [dir="rtl"] .drawer__close{align-self:flex-start} [dir="rtl"] .head h2 em::after{left:6%;right:6%} [dir="rtl"] .footer h4::after{left:auto;right:0} [dir="rtl"] .step::before{left:auto;right:24px} [dir="rtl"] .faq summary::after{margin-left:0;margin-right:auto} [dir="rtl"] .stat+.stat::before{left:auto;right:0} [dir="rtl"] .note{border-left:0;border-right:4px solid var(--brand); border-radius:8px 0 0 8px} [dir="rtl"] .wa{right:auto;left:20px} [dir="rtl"] .chat-launch{right:auto;left:20px} [dir="rtl"] .chat{right:auto;left:20px} [dir="rtl"] .msg--bot{align-self:flex-start;border-bottom-left-radius:16px;border-bottom-right-radius:5px} [dir="rtl"] .msg--me{align-self:flex-end;border-bottom-right-radius:16px;border-bottom-left-radius:5px} [dir="rtl"] .chat__close{margin-left:0;margin-right:auto} [dir="rtl"] .why__photo{right:auto;left:0;border-radius:0 340px 340px 0} [dir="rtl"] .why__photo::before{left:auto;right:-3px;border-radius:0 340px 340px 0} [dir="rtl"] .why__photo::after{background:linear-gradient(270deg,var(--ink),rgba(17,19,24,.86) 22%,rgba(17,19,24,.1) 62%,transparent)} [dir="rtl"] .why__photo>span{right:auto;left:16%;transform:translate(-50%,-50%)} [dir="rtl"] .phero__bg::before{right:auto;left:-140px} [dir="rtl"] .hero__bg::after{background:linear-gradient(260deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.93) 34%,rgba(255,255,255,.66) 56%,rgba(255,255,255,.3) 78%,rgba(255,255,255,.18))} [dir="rtl"] .plan--feature::before{left:50%;transform:translateX(-50%)} [dir="rtl"] .card__ic{transform:none} [dir="rtl"] .card:hover .card__ic{transform:translateY(-4px) rotate(5deg)} [dir="rtl"] .tbl th,[dir="rtl"] .tbl td{text-align:right} [dir="rtl"] .amt{text-align:left} /* numbers, phone and email stay left-to-right inside Arabic text */ [dir="rtl"] .ltr,[dir="rtl"] .creds span,[dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href^="mailto:"]{direction:ltr;unicode-bidi:embed;display:inline-block} /* language toggle */ .lang{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:700; font-size:12.4px;color:#C9CDD8;padding:5px 12px;border-radius:999px; border:1px solid rgba(255,255,255,.22);transition:.2s;margin-inline-start:16px} .lang:hover{background:#fff;color:var(--ink);border-color:#fff} .lang svg{width:14px;height:14px} @media (max-width:720px){.lang{margin-inline-start:auto}} /* ========================================================================== CLIENTS ========================================================================== */ .clients{background:var(--surface-2);border-block:1px solid var(--line)} .clients .wrap{padding-block:clamp(46px,6vw,72px)} .clients__lead{text-align:center;max-width:660px;margin:0 auto clamp(30px,4vw,44px)} .clients__lead h2{font-size:clamp(25px,3.6vw,36px)} .clients__lead h2 em{font-style:normal;color:var(--brand)} .clients__lead p{margin-top:16px;font-size:16px} .cwall{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .cw{background:#fff;border:1px solid var(--line);border-radius:var(--r-md); padding:22px 18px;display:flex;flex-direction:column;align-items:center;gap:10px; text-align:center;transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s,border-color .28s} .cw:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:var(--brand)} .cw__mark{width:52px;height:52px;flex:none;border-radius:15px;background:var(--ink);color:#fff; display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:17px; letter-spacing:.01em;transition:background .28s} .cw:hover .cw__mark{background:var(--brand)} .cw b{font-family:var(--display);font-weight:700;font-size:14.4px;color:var(--ink);line-height:1.32} .cw span{font-size:12.4px;color:var(--muted);line-height:1.4} .clients__note{margin-top:26px;text-align:center;font-size:14.2px} .clients__note strong{color:var(--ink)} /* sector credential strip */ .sector-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:10px; margin-top:clamp(26px,3.5vw,36px)} .sector-bar li{display:inline-flex;align-items:center;gap:9px;background:#fff; border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-size:13.8px; font-family:var(--display);font-weight:600;color:var(--ink-2)} .sector-bar svg{width:17px;height:17px;color:var(--brand);flex:none} @media (max-width:900px){.cwall{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.cwall{grid-template-columns:1fr}} /* ========================================================================== CREDENTIALS / CERTIFICATION ========================================================================== */ .cert{background:var(--ink);color:#B6BCC9;position:relative;overflow:hidden} .cert .wrap{padding-block:clamp(50px,6.5vw,80px);position:relative;z-index:3} .cert__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center} .cert h2{color:#fff;font-size:clamp(26px,3.8vw,38px)} .cert h2 em{font-style:normal;color:var(--brand)} .cert p.lead{margin-top:16px;font-size:16.2px} .cert .checks li{color:#C9CDD8} .cert .checks svg{color:var(--brand)} .auth{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} .auth li{display:flex;align-items:center;gap:11px;background:#1A1D25;border:1px solid #2A2E38; border-radius:12px;padding:13px 17px;transition:border-color .25s} .auth li:hover{border-color:var(--brand)} .auth__ic{width:34px;height:34px;flex:none;border-radius:9px;background:rgba(225,27,34,.14); color:var(--brand);display:grid;place-items:center} .auth__ic svg{width:18px;height:18px} .auth b{display:block;font-family:var(--display);font-weight:700;font-size:13.4px;color:#fff;line-height:1.3} .auth span{font-size:11.6px;color:#8C93A3;display:block;margin-top:1px} /* stylised certificate — a representation, not a real document */ .cdoc{position:relative;background:#EDEBE6;border-radius:var(--r-lg);overflow:hidden; aspect-ratio:1/1.36;box-shadow:0 26px 60px rgba(0,0,0,.44); display:flex;flex-direction:column;padding:26px 24px} .cdoc::before{content:"";position:absolute;inset:0; background:linear-gradient(118deg,transparent 0 44%,var(--brand) 44% 100%);z-index:1} .cdoc::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%; background:#EDEBE6;clip-path:polygon(0 42%,100% 0,100% 100%,0 100%);z-index:2} .cdoc>*{position:relative;z-index:4} .cdoc__top{font-family:var(--display);font-weight:800;font-size:13px;color:var(--ink); line-height:1.28;letter-spacing:-.01em;max-width:76%} .cdoc__ttl{margin-top:auto;margin-bottom:auto;text-align:center} .cdoc__ttl b{display:block;font-family:var(--display);font-weight:700;font-size:21px; color:#7A0E12;letter-spacing:.16em} .cdoc__ttl span{display:block;font-family:var(--display);font-weight:700;font-size:9.4px; color:var(--ink-2);letter-spacing:.2em;margin-top:5px} .cdoc__name{text-align:center;padding-block:14px;border-block:1px solid rgba(17,19,24,.22); font-family:var(--display);font-weight:800;font-size:15px;color:var(--ink); letter-spacing:.02em} .cdoc__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:18px} .cdoc__seal{width:52px;height:52px;border-radius:50%;border:2px solid #3B4CA8; display:grid;place-items:center;text-align:center;font-family:var(--display); font-weight:700;font-size:6.4px;color:#3B4CA8;line-height:1.25;padding:5px} .cdoc__sig{font-family:var(--display);font-weight:700;font-size:8.6px;color:var(--ink-2); letter-spacing:.08em;text-align:center} .cdoc__sig i{display:block;width:60px;height:1px;background:var(--ink-2);margin:0 auto 5px;opacity:.5} .cdoc__cap{position:absolute;left:0;right:0;bottom:-34px;text-align:center;font-size:11.8px; color:#8C93A3} .cdoc__wrap{position:relative;padding-bottom:34px;max-width:330px;margin-inline:auto} @media (max-width:900px){ .cert__grid{grid-template-columns:1fr;gap:36px} .cdoc__wrap{max-width:280px} } /* ---------- brochure download ---------- */ .broc{background:var(--ink);color:#B6BCC9;position:relative;overflow:hidden} .broc .wrap{padding-block:clamp(44px,5.5vw,66px);display:flex;align-items:center; gap:38px;flex-wrap:wrap;position:relative;z-index:3} .broc__cover{width:132px;flex:none;aspect-ratio:1/1.414;border-radius:8px; background:linear-gradient(150deg,#1A1D25,#111318);border:1px solid #2A2E38; position:relative;overflow:hidden;display:flex;flex-direction:column; justify-content:flex-end;padding:14px;box-shadow:0 18px 40px rgba(0,0,0,.5)} .broc__cover::after{content:"";position:absolute;right:-26px;bottom:-30px;width:120px; height:76px;background:var(--brand);transform:skewY(-14deg)} .broc__cover b{position:relative;z-index:3;font-family:var(--display);font-weight:800; font-size:14px;color:#fff;line-height:1.2} .broc__cover span{position:relative;z-index:3;font-size:8.4px;letter-spacing:.14em; color:var(--brand);font-weight:700;font-family:var(--display);margin-top:5px;display:block} .broc__body{flex:1;min-width:260px} .broc h2{color:#fff;font-size:clamp(23px,3.2vw,31px)} .broc h2 em{font-style:normal;color:var(--brand)} .broc p{margin-top:14px;font-size:15.5px;max-width:52ch} .broc__meta{display:flex;gap:20px;flex-wrap:wrap;margin-top:18px;font-size:13px;color:var(--muted)} .broc__meta span{display:inline-flex;align-items:center;gap:7px} .broc__meta svg{width:15px;height:15px;color:var(--brand)} .broc .btn{margin-top:22px} @media (max-width:640px){.broc .wrap{gap:26px}.broc__cover{width:104px}} /* ---------- client logo wall ---------- */ .cwall{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .cw{background:#fff;border:1px solid var(--line);border-radius:var(--r-md); padding:0;display:flex;flex-direction:column;align-items:stretch;gap:0;text-align:center; overflow:hidden;transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s,border-color .28s} .cw:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:var(--brand)} .cw__logo{height:104px;display:grid;place-items:center;padding:12px 16px;background:#fff} .cw__logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain; filter:saturate(.96)} .cw__cap{border-top:1px solid var(--line);background:var(--tint,#F5F6F9);padding:9px 10px} .cw__cap b{display:block;font-family:var(--display);font-weight:700;font-size:13px; color:var(--ink);line-height:1.3} .cw__cap span{display:block;font-size:11.4px;color:var(--muted);margin-top:2px} .cw--more{border-style:dashed;background:transparent} .cw--more .cw__logo{background:transparent;font-family:var(--display);font-weight:800; font-size:30px;color:var(--brand)} .cw--more .cw__cap{background:transparent} @media (max-width:900px){.cwall{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.cwall{grid-template-columns:1fr}} /* ---------- iOS: prevent zoom-on-focus (inputs must be >=16px) ---------- */ @media (max-width:980px){ .field input,.field select,.field textarea, .chat__input input{font-size:16px} } /* ---------- very narrow phones (320px, e.g. iPhone SE 1st gen) ---------- */ @media (max-width:360px){ :root{--gut:14px} .brand__name{font-size:20px} .brand__sub{font-size:8.4px;letter-spacing:.07em} .brand__mark{width:44px;height:44px} .header .wrap{min-height:68px} .hero h1{font-size:32px} .cw__logo{height:88px} .chat-launch span{display:none} .chat-launch{padding:13px} } /* ========================================================================== CONSULTANCY DIVISION Cyan accent distinguishes the IT division from the red FM brand. ========================================================================== */ .cy{--brand:#1B8FD4;--brand-dark:#1476B0;--brand-soft:#E8F3FB} .svc-num{display:flex;gap:22px;align-items:flex-start;background:#fff; border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;margin-bottom:18px; transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s} .svc-num:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:#1B8FD4} .svc-num__n{width:56px;height:56px;flex:none;border-radius:16px;background:#1B8FD4;color:#fff; display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:20px; box-shadow:0 8px 20px rgba(27,143,212,.32)} .svc-num__n--r{background:var(--brand);box-shadow:0 8px 20px rgba(225,27,34,.32)} .svc-num h3{font-size:20px;margin-bottom:9px} .svc-num p{font-size:15px;line-height:1.65} .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .tags li{font-size:12.8px;background:var(--surface-2);border:1px solid var(--line); border-radius:999px;padding:6px 13px;color:var(--ink-2);font-weight:500} .prooflist{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .pf{background:#1A1D25;border:1px solid #2A2E38;border-radius:var(--r-md);padding:24px; transition:border-color .28s,transform .28s} .pf:hover{border-color:#1B8FD4;transform:translateY(-4px)} .pf b{display:block;font-family:var(--display);font-weight:800;font-size:16px;color:#fff; margin-bottom:8px} .pf p{font-size:14px;color:#8C93A3;line-height:1.6} .pf span{display:inline-block;font-size:11px;color:#1B8FD4;font-weight:700;letter-spacing:.12em; text-transform:uppercase;margin-top:12px} .painlist{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .pain{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:22px; transition:.28s} .pain:hover{border-color:#1B8FD4;box-shadow:var(--sh-sm)} .pain b{display:block;font-family:var(--display);font-weight:800;font-size:15.5px;color:var(--ink); margin-bottom:7px} .pain p{font-size:14px;line-height:1.6} .cy-band{background:var(--ink);color:#B6BCC9;position:relative;overflow:hidden} .cy-band .wrap{padding-block:clamp(50px,6.5vw,80px);position:relative;z-index:3} .cy-band h2{color:#fff} .cy-band h2 em{font-style:normal;color:#1B8FD4} .cy-band .eyebrow{color:#1B8FD4} .cy-band .checks svg{color:#1B8FD4} .cy-band .checks li{color:#C9CDD8} .div-split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center} .div-card{background:#1A1D25;border:1px solid #2A2E38;border-radius:var(--r-lg);padding:34px; display:grid;place-items:center;min-height:280px;position:relative;overflow:hidden} .div-card::after{content:"";position:absolute;inset:22px;border-radius:var(--r-lg); border:2px dashed rgba(27,143,212,.28);pointer-events:none} .div-ring{width:150px;height:150px;border-radius:50%;background:#1B8FD4;display:grid; place-items:center;box-shadow:0 18px 42px rgba(27,143,212,.32)} .div-ring svg{width:70px;height:70px;color:#fff} .btn--cy{background:#1B8FD4;color:#fff;box-shadow:0 8px 22px rgba(27,143,212,.30)} .btn--cy:hover{background:#1476B0} @media (max-width:980px){ .prooflist{grid-template-columns:repeat(2,1fr)} .div-split{grid-template-columns:1fr;gap:30px} } @media (max-width:560px){ .prooflist,.painlist{grid-template-columns:1fr} .svc-num{flex-direction:column;gap:16px;padding:22px} } /* ---------- chat: keep numbers and Latin text left-to-right in RTL ---------- */ [dir="rtl"] .msg a[href^="tel:"], [dir="rtl"] .chip{unicode-bidi:isolate} [dir="rtl"] .msg strong{unicode-bidi:isolate} /* chat phone direction */ [dir="rtl"] .chat__log{text-align:right} [dir="rtl"] .msg--bot{direction:rtl} [dir="rtl"] .msg--me{direction:rtl} /* ========================================================================== DEBT RECOVERY DIVISION — gold accent ========================================================================== */ .gd{--brand:#B8862B;--brand-dark:#966D21;--brand-soft:#FAF3E6} .btn--gd{background:#B8862B;color:#fff;box-shadow:0 8px 22px rgba(184,134,43,.30)} .btn--gd:hover{background:#966D21} .gd-ring{width:150px;height:150px;border-radius:50%;background:#B8862B;display:grid; place-items:center;box-shadow:0 18px 42px rgba(184,134,43,.32)} .gd-ring svg{width:70px;height:70px;color:#fff} .gd-card::after{border-color:rgba(184,134,43,.28)!important} .gd-band .eyebrow{color:#B8862B} .gd-band h2 em{color:#B8862B} .gd-band .checks svg{color:#B8862B} .pf--gd:hover{border-color:#B8862B} .pf--gd span{color:#B8862B} .svc-num__n--gd{background:#B8862B;box-shadow:0 8px 20px rgba(184,134,43,.32)} .svc-num--gd:hover{border-color:#B8862B} .step--gd::before{background:#B8862B;box-shadow:0 6px 14px rgba(184,134,43,.32)} .note--gd{background:#FAF3E6;border-left-color:#B8862B} [dir="rtl"] .note--gd{border-left:0;border-right:4px solid #B8862B} /* compliance callout */ .legalnote{background:#fff;border:1px solid var(--line);border-left:4px solid #B8862B; border-radius:0 var(--r-md) var(--r-md) 0;padding:22px 26px;margin-top:30px} [dir="rtl"] .legalnote{border-left:0;border-right:4px solid #B8862B; border-radius:var(--r-md) 0 0 var(--r-md)} .legalnote b{display:block;font-family:var(--display);font-weight:800;font-size:15.5px; color:var(--ink);margin-bottom:8px} .legalnote p{font-size:14.4px;line-height:1.65} /* stage timeline */ .stage{display:grid;grid-template-columns:110px 1fr;gap:24px;padding:24px 0; border-bottom:1px solid var(--line)} .stage:last-child{border-bottom:0} .stage__t{font-family:var(--display);font-weight:800;font-size:14px;color:#B8862B; letter-spacing:.04em} .stage__t span{display:block;font-weight:600;font-size:11.5px;color:var(--muted); margin-top:4px;letter-spacing:.1em;text-transform:uppercase} .stage h3{font-size:17.5px;margin-bottom:8px} .stage p{font-size:14.8px} @media (max-width:640px){.stage{grid-template-columns:1fr;gap:8px}} /* ---------- multiple phone numbers in footer ---------- */ .phones a{display:inline-block;line-height:1.75} .phones a:hover{color:var(--brand)} /* ========================================================================== PRODUCT SHOWCASE — software demos ========================================================================== */ .prod{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:18px; margin-top:34px} .pcard{position:relative;display:flex;flex-direction:column;background:#fff; border:1px solid var(--line);border-radius:var(--r-md);padding:26px 24px 22px; transition:.24s;overflow:hidden} .pcard:hover{border-color:var(--cyan);transform:translateY(-3px); box-shadow:0 16px 40px rgba(17,19,24,.10)} .pcard::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px; background:var(--pc,#1B8FD4)} .pcard__top{display:flex;align-items:center;gap:12px;margin-bottom:14px} .pcard__ic{width:44px;height:44px;flex:none;border-radius:12px;display:grid; place-items:center;background:var(--pc,#1B8FD4);color:#fff; font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.02em} .pcard__nm b{display:block;font-family:var(--display);font-weight:800;font-size:18.5px; color:var(--ink);line-height:1.2;letter-spacing:-.01em} .pcard__nm span{display:block;font-size:12.5px;color:var(--muted);font-weight:600; margin-top:2px} .pcard p{font-size:14.6px;line-height:1.68;color:var(--body);flex:1} .pcard ul{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 16px} .pcard li{list-style:none;font-size:11.8px;font-weight:600;color:var(--ink-2); background:var(--tint);border-radius:20px;padding:4px 11px} .pcard__go{display:inline-flex;align-items:center;gap:7px;font-family:var(--display); font-weight:700;font-size:13.6px;color:var(--pc,#1B8FD4);margin-top:auto} .pcard__go svg{width:15px;height:15px;transition:.2s} .pcard:hover .pcard__go svg{transform:translateX(3px)} [dir="rtl"] .pcard:hover .pcard__go svg{transform:translateX(-3px) scaleX(-1)} [dir="rtl"] .pcard__go svg{transform:scaleX(-1)} .demo-note{background:var(--tint);border-left:4px solid var(--cyan); border-radius:0 var(--r-md) var(--r-md) 0;padding:20px 24px;margin-top:30px; font-size:14.4px;line-height:1.7} [dir="rtl"] .demo-note{border-left:0;border-right:4px solid var(--cyan); border-radius:var(--r-md) 0 0 var(--r-md)} .demo-note b{display:block;font-family:var(--display);font-weight:800;font-size:15px; color:var(--ink);margin-bottom:6px} /* client credit on a product card */ .pcard__for{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700; color:var(--cyan);background:rgba(27,143,212,.09);border-radius:20px;padding:4px 11px; margin-bottom:12px;align-self:flex-start} .pcard__for svg{width:13px;height:13px} .pcard__for .ltr{direction:ltr;unicode-bidi:isolate;display:inline-block} /* two-column check list with a lead line */ .checks--2col{display:grid;grid-template-columns:1fr 1fr;gap:16px 30px} .checks--2col li{align-items:flex-start} .checks--2col span b{display:block;font-family:var(--display);font-weight:700; font-size:15.5px;color:var(--ink);margin-bottom:3px;line-height:1.35} .checks--2col span{font-size:14.4px;line-height:1.62;color:var(--body)} @media (max-width:760px){.checks--2col{grid-template-columns:1fr;gap:14px}} /* ---------- small-screen refinements ---------- */ @media (max-width:400px){ /* product cards: 272px minimum can overflow a 320px viewport */ .prod{grid-template-columns:1fr;gap:14px} .pcard{padding:22px 18px 18px} .pcard__nm b{font-size:17px} .pcard p{font-size:14px} } @media (max-width:360px){ .checks--2col span b{font-size:14.6px} .checks--2col span{font-size:13.8px} .demo-note{padding:16px 18px;font-size:13.6px} } /* Stop stray elements scrolling the page sideways — but clip on only. Putting overflow-x on also clips absolutely-positioned dropdowns. */ html{overflow-x:hidden} /* ========================================================================== BEFORE / AFTER SLIDER ========================================================================== */ .ba{position:relative;width:100%;aspect-ratio:16/10;border-radius:var(--r-md); overflow:hidden;background:var(--tint);user-select:none;touch-action:pan-y; box-shadow:0 18px 44px rgba(17,19,24,.14)} .ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; pointer-events:none} .ba__after{clip-path:inset(0 0 0 var(--pos,50%))} [dir="rtl"] .ba__after{clip-path:inset(0 var(--pos,50%) 0 0)} .ba__handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px; background:#fff;transform:translateX(-50%);pointer-events:none; box-shadow:0 0 0 1px rgba(17,19,24,.16)} .ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:48px;height:48px;border-radius:50%;background:#fff;display:grid;place-items:center; box-shadow:0 6px 20px rgba(17,19,24,.3)} .ba__grip svg{width:22px;height:22px;color:var(--brand)} .ba__tag{position:absolute;top:14px;font-family:var(--display);font-weight:800; font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#fff; background:rgba(17,19,24,.72);border-radius:20px;padding:6px 13px;pointer-events:none} .ba__tag--b{left:14px} .ba__tag--a{right:14px;background:rgba(225,27,34,.9)} [dir="rtl"] .ba__tag--b{left:auto;right:14px} [dir="rtl"] .ba__tag--a{right:auto;left:14px} .ba__hint{position:absolute;left:0;right:0;bottom:14px;text-align:center; font-size:12.5px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6);pointer-events:none; transition:opacity .3s} .ba.is-touched .ba__hint{opacity:0} .ba:focus-visible{outline:3px solid var(--brand);outline-offset:3px} /* ========================================================================== COUNTING STATISTICS (kpi — distinct from the home page .stats band) ========================================================================== */ .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px; margin-top:34px} .kpi{background:var(--ink);border-radius:var(--r-md);padding:28px 22px;text-align:center; position:relative;overflow:hidden} .kpi::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px; background:var(--sc,var(--brand))} .kpi b{display:block;font-family:var(--display);font-weight:800; font-size:clamp(30px,4.4vw,42px);color:#fff;line-height:1;letter-spacing:-.02em; font-variant-numeric:tabular-nums} .kpi b i{font-style:normal;color:var(--sc,var(--brand))} .kpi span{display:block;font-size:13.4px;color:#B6BCC9;margin-top:9px;line-height:1.5} @media (max-width:420px){ .kpis{grid-template-columns:1fr 1fr;gap:12px} .kpi{padding:20px 14px} .kpi span{font-size:12.4px} } /* ========================================================================== CLIENT REVIEWS ========================================================================== */ .revs{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px; margin-top:32px} .rev{background:#fff;border:1px solid var(--line);border-radius:var(--r-md); padding:26px 24px;display:flex;flex-direction:column} .rev__stars{color:#E1A21B;font-size:16px;letter-spacing:3px;margin-bottom:12px} .rev__body{font-size:15px;line-height:1.72;color:var(--body);flex:1} .rev__who{display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:16px; border-top:1px solid var(--line)} .rev__ini{width:42px;height:42px;flex:none;border-radius:12px;background:var(--brand); color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:800; font-size:15px} .rev__who b{display:block;font-family:var(--display);font-weight:700;font-size:15px; color:var(--ink);line-height:1.3} .rev__who span{display:block;font-size:13px;color:var(--muted);margin-top:1px} .rev-empty{background:var(--tint);border:1px dashed var(--line);border-radius:var(--r-md); padding:40px 26px;text-align:center;color:var(--muted);font-size:15px} /* star picker */ .rate{display:flex;gap:6px;direction:ltr} .rate input{position:absolute;opacity:0;width:0;height:0} .rate label{cursor:pointer;font-size:30px;line-height:1;color:#D8DAE1;transition:.15s} .rate label:hover,.rate label.on{color:#E1A21B} .rate input:focus-visible + label{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px} /* ---------- cookie notice ---------- */ .ck{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;background:var(--ink); color:#C9CDD8;border-radius:var(--r-md);padding:18px 20px;display:flex;gap:16px; align-items:center;flex-wrap:wrap;box-shadow:0 18px 46px rgba(0,0,0,.4); max-width:640px;margin-inline:auto;opacity:0;transform:translateY(14px); transition:opacity .3s,transform .3s} .ck.is-in{opacity:1;transform:none} .ck p{flex:1;min-width:230px;font-size:13.6px;line-height:1.6;margin:0} .ck a{color:#fff;text-decoration:underline} .ck__b{display:flex;gap:8px} .ck button{font:inherit;font-family:var(--display);font-weight:700;font-size:13.4px; border:0;border-radius:9px;padding:10px 18px;cursor:pointer;background:#2A2E38;color:#C9CDD8} .ck button:hover{background:#343945} .ck__yes{background:var(--brand)!important;color:#fff!important} .ck__yes:hover{background:var(--brand-dark)!important} @media (max-width:520px){.ck{padding:16px;gap:12px}.ck__b{width:100%}.ck button{flex:1}} /* ---------- long-form prose ---------- */ .prose h2{font-family:var(--display);font-weight:800;font-size:20px;color:var(--ink); margin:32px 0 10px;letter-spacing:-.015em} .prose h2:first-child{margin-top:0} .prose p{font-size:15.6px;line-height:1.75;margin-bottom:12px} .prose a{color:var(--brand);font-weight:600} .prose .checks{margin-top:14px} /* ---------- secondary contact lines ---------- */ .info__alt{display:block;margin-top:6px;font-family:var(--display);font-weight:700; font-size:14.6px;line-height:1.7;color:var(--ink-2);letter-spacing:-.005em} .info__alt a{color:var(--ink-2);text-decoration:none;white-space:nowrap} .info__alt a:hover{color:var(--brand)} .info__alt .sep{color:var(--line);font-weight:600;margin:0 4px} @media (max-width:420px){ .info__alt{font-size:14px} .info__alt a{display:block;margin-top:3px} .info__alt .sep{display:none} } /* ========================================================================== WHEEL — interactive segments ========================================================================== */ .wheel__disc a.seg{display:block;cursor:pointer;text-decoration:none; transition:filter .25s cubic-bezier(.22,.61,.36,1), transform .25s cubic-bezier(.22,.61,.36,1); transform-origin:50% 50%} .wheel__disc a.seg:hover, .wheel__disc a.seg:focus-visible{filter:brightness(1.16) saturate(1.08); transform:scale(1.035);z-index:6} .wheel__disc a.seg:focus-visible{outline:none;filter:brightness(1.22)} .wheel__disc a.seg:active{transform:scale(1.01)} /* label lifts with its segment */ .segi{transition:transform .25s cubic-bezier(.22,.61,.36,1)} .segi.is-hot{transform:translate(-50%,-50%) scale(1.09)} .segi.is-hot svg{filter:drop-shadow(0 3px 10px rgba(0,0,0,.35))} .segi.is-hot b{text-shadow:0 2px 10px rgba(0,0,0,.3)} /* a soft ring pulses out from the hub when a segment is entered */ .wheel__pulse{position:absolute;top:50%;left:50%;width:37%;aspect-ratio:1; border-radius:50%;transform:translate(-50%,-50%) scale(1); border:2px solid var(--brand);opacity:0;pointer-events:none;z-index:4} .wheel__pulse.go{animation:wpulse .75s cubic-bezier(.22,.61,.36,1)} @keyframes wpulse{ 0% {opacity:.55;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0; transform:translate(-50%,-50%) scale(1.75)} } /* hub reacts too, so the whole thing feels connected */ .wheel__hub{transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s cubic-bezier(.22,.61,.36,1)} .wheel.is-live .wheel__hub{transform:translate(-50%,-50%) scale(1.04); box-shadow:0 14px 40px rgba(17,19,24,.26)} @media (prefers-reduced-motion:reduce){ .wheel__disc a.seg,.segi,.wheel__hub{transition:none} .wheel__pulse{display:none} } @media (hover:none){ /* on touch a tap should just follow the link, not hover-lift first */ .wheel__disc a.seg:hover{filter:none;transform:none} } /* ========================================================================== DIVISIONS MEGA DROPDOWN ========================================================================== */ .drop--wide{width:min(560px,calc(100vw - 32px));min-width:0;padding:18px; display:grid;grid-template-columns:1fr 1fr;gap:6px 22px; /* centred under its menu item; the translate also carries the slide-up, so it has to be restated in the hover rule below */ left:50%;right:auto;transform:translate(-50%,8px)} [dir="rtl"] .drop--wide{left:50%;right:auto} .has-drop:hover .drop--wide, .has-drop:focus-within .drop--wide{transform:translate(-50%,0)} /* Width is capped to the viewport, so the panel cannot overflow. No JS needed — measuring it while it is still visibility:hidden gives wrong geometry. */ .drop__col{display:flex;flex-direction:column} .drop__hd{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800; font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted); padding:4px 14px 8px;margin-bottom:2px;border-bottom:1px solid var(--line)} .drop__hd i{width:8px;height:8px;border-radius:50%;background:var(--dc,var(--brand));flex:none} .drop--wide a{padding:8px 14px;font-size:14px} .drop--wide a.is-lead{color:var(--ink);font-weight:700} .drop--wide a.is-lead:hover{color:var(--brand)} .drop__div{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--r-sm); transition:.18s} .drop__div:hover{background:var(--tint)} .drop__div i{width:9px;height:9px;border-radius:50%;flex:none;background:var(--dc,var(--brand))} .drop__div b{display:block;font-family:var(--display);font-weight:700;font-size:14.4px; color:var(--ink);line-height:1.3} .drop__div span{display:block;font-size:12.4px;color:var(--muted);margin-top:1px} @media (max-width:1080px){.drop--wide{min-width:440px;grid-template-columns:1fr}} /* drawer grouping on mobile */ .drawer__hd{font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:.13em; text-transform:uppercase;color:var(--muted);padding:16px 4px 6px;margin-top:6px; border-top:1px solid var(--line)} .drawer__hd:first-of-type{border-top:0;margin-top:0} /* ========================================================================== LEGAL ADVISORY DIVISION — deep violet ========================================================================== */ .lg{--brand:#5B4B8A;--brand-dark:#493C6F;--brand-soft:#F2F0F7} .btn--lg2{background:#5B4B8A;color:#fff;box-shadow:0 8px 22px rgba(91,75,138,.30)} .btn--lg2:hover{background:#493C6F} .lg-ring{width:150px;height:150px;border-radius:50%;background:#5B4B8A;display:grid; place-items:center;box-shadow:0 18px 42px rgba(91,75,138,.32)} .lg-ring svg{width:70px;height:70px;color:#fff} .lg-card::after{border-color:rgba(91,75,138,.28)!important} .svc-num__n--lg{background:#5B4B8A;box-shadow:0 8px 20px rgba(91,75,138,.32)} .svc-num--lg:hover{border-color:#5B4B8A} .pf--lg:hover{border-color:#5B4B8A} .pf--lg span{color:#5B4B8A} .note--lg{background:#F2F0F7;border-left-color:#5B4B8A} [dir="rtl"] .note--lg{border-left:0;border-right:4px solid #5B4B8A} .lg-band .eyebrow{color:#5B4B8A} .lg-band h2 em{color:#5B4B8A} .lg-band .checks svg{color:#5B4B8A}