/* Kaido design system v2 (5 Nov 2026, design pass "designfix").
   Loaded after every other stylesheet: the shared header partial links it as its first child
   (src/_includes/partials/header-*.njk, synced into static pages by tools/sync_chrome.py), the
   homepage and /services link it last in <head>, and tools/make_lp.py adds it to /lp/ pages.
   Owns: one content container, one phone booking bar, one FAQ, one closing CTA band, one primary
   and one secondary button, Inter for numbers (no monospace), two hero sizes, mirrored RTL details.
   Selectors start with :root body so they beat page-level rules; !important only where a page or
   kaido-system.css already uses it. */

/* ===== Design tokens (v9, 6 Nov 2026). The single reference for type, radius, spacing and colour.
   kaido-templates.css (--kt-*) and kaido-indexes.css (--ki-*) map their local names onto these; new CSS uses --k-* directly.
   Rules: never write a literal font-size, radius or brand hex in new CSS; snap to the nearest token at or ABOVE the old value
   (text never shrinks). Brand colours, fonts and the #C94208 primary button are fixed by the owner.

   Colour   --k-ink #0A0B0D  --k-ink2 #3D3A35 (body text)  --k-soft #6F6A60 (meta, 4.9:1 on paper)
            --k-paper #FBFAF8 (page)  --k-sand #F4F0EA (cards, bands)  --k-line #E4DED4 (hairlines)
            --k-copper #E8500A: fills, big numbers (24px+), markers. Never small text.
            --k-copper-btn #C94208: the primary button fill (white text 4.6:1). Small text only on white or paper.
            --k-copper-text #B23A07: small copper text and in-text links (style A) on white, paper AND sand (5.2:1 on sand).
            --k-copper-dark #FFB48A: copper text on ink surfaces.
   Type     Inter Tight 400 for headings, Inter for text (Readex for Arabic).
            --k-t-h1 clamp(36px,4vw,56px)   --k-t-h2 clamp(26px,2.6vw,34px)   --k-t-h3 24px   --k-t-h4 20px (card titles)
            --k-t-lead 19px (standfirst)    --k-t-body 17px   --k-t-body-s 15.5px   --k-t-ui 14.5px (buttons, chips, meta)
            --k-t-small 13.5px              --k-t-micro 12.5px (captions only)
   Radius   --k-r-sm 8px (chips, inputs inside cards)  --k-r-md 12px (buttons, inputs, small cards)
            --k-r-lg 16px (cards, panels, bands)        --k-r-pill 999px (pills, dots)
   Spacing  4px base: --k-s-1 4  --k-s-2 8  --k-s-3 12  --k-s-4 16  --k-s-5 24  --k-s-6 32  --k-s-7 48  --k-s-8 64  --k-s-9 96
            --k-sec section rhythm: 72px desktop, 48px phone.  --k-gap card grid gap 16px.
   Layout   --v2-wrap 1120px container, --v2-gutter 24px (18px on phones), --v2-read 720px reading column. */
:root{
  --k-ink:#0A0B0D;--k-ink2:#3D3A35;--k-soft:#6F6A60;--k-paper:#FBFAF8;--k-sand:#F4F0EA;--k-line:#E4DED4;
  --k-copper:#E8500A;--k-copper-btn:#C94208;--k-copper-text:#B23A07;--k-copper-dark:#FFB48A;
  --k-t-h1:clamp(36px,4vw,56px);--k-t-h2:clamp(26px,2.6vw,34px);--k-t-h3:24px;--k-t-h4:20px;--k-t-lead:19px;
  --k-t-body:17px;--k-t-body-s:15.5px;--k-t-ui:14.5px;--k-t-small:13.5px;--k-t-micro:12.5px;
  --k-r-sm:8px;--k-r-md:12px;--k-r-lg:16px;--k-r-pill:999px;
  --k-s-1:4px;--k-s-2:8px;--k-s-3:12px;--k-s-4:16px;--k-s-5:24px;--k-s-6:32px;--k-s-7:48px;--k-s-8:64px;--k-s-9:96px;
  --k-sec:72px;--k-gap:16px;
}
@media (max-width:820px){:root{--k-sec:48px}}

:root{
  --v2-wrap:1120px; --v2-gutter:24px; --v2-read:720px;
  --v2-ink:#0A0B0D; --v2-ink2:#3D3A35; --v2-soft:#6F6A60; --v2-line:#E4DED4; --v2-paper:#FBFAF8; --v2-sand:#F4F0EA;
  --v2-copper:#E8500A; --v2-copper-text:#C94208;
}
@media (max-width:600px){:root{--v2-gutter:18px}}

/* 1. Type: no monospace anywhere; numbers in Inter with tabular figures. Two hero sizes. */
html body{--mono:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif}
html[lang="ar"] body{--mono:'Readex','Inter',sans-serif}
:root body :is(.eh-stats b,.count,.stat .v,.svc-proof b,.lp-cd b,.lp-stat b,.cd .num,.kb-n,.dtile b,.dtable .n,.svc-res .v,.no,.n,.num,.v){font-variant-numeric:tabular-nums}
html body{--t-h1:clamp(36px,4vw,56px);--t-a-h1:clamp(36px,4vw,56px);--t-h1-home:clamp(42px,5.4vw,72px)}
:root body :is(h1,.h1){max-width:22ch}
:root body.home h1{max-width:16ch}
html[lang="ar"] body :is(h1,.h1){max-width:24ch}
/* headline accents: solid copper, never a gradient */
:root body :is(h1,h2) .grad-text,:root body .grad-text{background:none !important;-webkit-background-clip:border-box !important;background-clip:border-box !important;-webkit-text-fill-color:currentColor !important;color:var(--v2-copper-text) !important}
:root body h1 .grad-text{color:var(--v2-copper) !important}

/* 2. One content container: 1120px, 24px gutters (18px on phones), same left edge as the header logo */
:root body :is(.wrap,.wrap2,.container:not(.role-body),.page,.kc-wrap,.eh-in,.controls-in,section.fit,.lp-top,.lp-hero,.lp-sec,.lp-foot){
  max-width:var(--v2-wrap) !important;margin-inline:auto !important;
  padding-inline:var(--v2-gutter) !important;box-sizing:border-box}
:root body :is(.wrap,.container,.page,.wrap2) :is(.wrap,.container,.page,.wrap2){padding-inline:0 !important}
/* reading columns sit inside the container, on its start edge */
:root body main.article .container > :is(.crumbs,.article-head,.prose,.article-cta,.related,.mid-cta){max-width:var(--v2-read);margin-inline-start:0;margin-inline-end:auto}
:root body .wrap:has(h1.met) > *{max-width:780px;margin-inline:0 auto}
:root body .es-wrap{margin-inline:0 auto !important}

/* 3. Phone booking bar: copper booking + outlined WhatsApp, after the hero, mirrored in RTL */
:root body .kbar.msticky{display:none !important}
@media (max-width:820px){
  :root body .kbar.msticky{display:flex !important;position:fixed !important;left:0 !important;right:0 !important;bottom:0 !important;top:auto !important;z-index:70;
    gap:10px !important;align-items:stretch;margin:0 !important;border:0 !important;border-top:1px solid rgba(10,11,13,.08) !important;border-radius:0 !important;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)) !important;background:rgba(251,250,248,.94) !important;
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 -10px 30px -18px rgba(10,11,13,.35) !important;
    transform:translateY(110%);visibility:hidden;transition:transform .22s cubic-bezier(.2,.7,.2,1),visibility 0s linear .22s;
    font-family:var(--kd-body,'Inter',sans-serif);line-height:1;text-align:center}
  html[lang="ar"] body .kbar.msticky{font-family:'Readex','Inter',sans-serif}
  :root body .kbar.msticky.on{transform:none;visibility:visible;transition:transform .22s cubic-bezier(.2,.7,.2,1),visibility 0s}
  :root body .kbar.msticky a{display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;height:52px !important;min-height:52px;
    margin:0 !important;padding:0 16px !important;border-radius:12px !important;font-size:15.5px !important;font-weight:600 !important;line-height:1 !important;
    text-decoration:none !important;white-space:nowrap;box-shadow:none !important;filter:none !important;position:static !important;-webkit-tap-highlight-color:transparent}
  :root body .kbar.msticky a::before,:root body .kbar.msticky a::after{content:none !important;display:none !important}
  :root body .kbar.msticky a.kb-book{flex:1 1 auto !important;background:var(--v2-copper-text) !important;border:1.5px solid var(--v2-copper-text) !important;color:#fff !important}
  :root body .kbar.msticky a.kb-book:active{background:var(--v2-copper) !important}
  :root body .kbar.msticky a.kb-wa{flex:0 0 auto !important;background:#fff !important;border:1.5px solid var(--v2-ink) !important;color:var(--v2-ink) !important}
  :root body .kbar.msticky a.kb-wa svg{width:20px;height:20px;flex:none;display:block}
  :root body .kbar.msticky a.kb-wa span{display:inline}
  /* every older sticky pattern gives way to the shared bar */
  :root body:has(.kbar) :is(.msticky:not(.kbar),.dock2,.wafab){display:none !important}
  :root body:has(.kbar){padding-bottom:calc(76px + env(safe-area-inset-bottom,0px)) !important}
  /* consent bar offset is set by kaido-tracking.js only while the booking bar is on screen (v7 item 22) */
}
@media (max-width:360px){:root body .kbar.msticky a.kb-wa span{display:none}:root body .kbar.msticky a.kb-wa{width:52px;padding:0 !important}}
@media (prefers-reduced-motion:reduce){:root body .kbar.msticky{transition:none !important}}
/* the desktop WhatsApp bubble sits on the reading-end side */
html[dir="rtl"] body .wafab{right:auto !important;left:24px !important}

/* 4. Buttons: one primary (copper), one secondary (outline ink). No gradients, no greens. */
:root body :is(.btn,.btn-p,.btn-g,.btn-ghost,.btn-primary){font-family:var(--kd-body,'Inter',sans-serif) !important;font-weight:600 !important;letter-spacing:0 !important;background-image:none !important}
html[lang="ar"] body :is(.btn,.btn-p,.btn-g,.btn-ghost,.btn-primary){font-family:'Readex','Inter',sans-serif !important}
:root body :is(.btn-g,.btn-ghost){background:#fff !important;color:var(--v2-ink) !important;border:1.5px solid var(--v2-ink) !important}
:root body :is(.btn-g,.btn-ghost):hover{background:var(--v2-ink) !important;color:#fff !important}
:root body :is(.close-in,div.cta,.ei-cta2,.svc-cta,.article-cta) :is(.btn-g,.btn-ghost){background:transparent !important;color:#fff !important;border-color:rgba(255,255,255,.6) !important}
:root body :is(.close-in,div.cta,.ei-cta2,.svc-cta,.article-cta) :is(.btn-g,.btn-ghost):hover{background:#fff !important;color:var(--v2-ink) !important;border-color:#fff !important}
/* phone: every button is a full tap target (fixes the collapsed WhatsApp button in dark bands) */
@media (max-width:600px){
  :root body a.btn:not(.navbtn):is(.btn-p,.btn-g,.btn-ghost,.btn-primary,[href^="https://wa.me"]),:root body :is(.close-in,div.cta,.ei-cta2,.svc-cta,.article-cta,.ctas) a.btn{
    display:inline-flex !important;align-items:center !important;justify-content:center !important;min-height:52px !important;
    padding:0 24px !important;line-height:1.2 !important;text-align:center;box-sizing:border-box}
  :root body :is(.close-in,div.cta,.ei-cta2,.svc-cta) .ctas a.btn{width:100%;max-width:none}
}
.ty .acts a.wa,:root body .ty .acts a.wa{background:#fff !important;color:var(--v2-ink) !important;border:1.5px solid var(--v2-ink) !important}

/* 5. One closing CTA band: ink surface, everything left-aligned (right in Arabic), buttons at the start */
:root body :is(div.cta,.ei-cta2,.svc-cta,.article-cta){display:block !important;text-align:start !important;border-radius:24px !important;padding:clamp(32px,5vw,56px) !important;background:var(--v2-ink) !important;color:#fff}
:root body :is(div.cta,.ei-cta2,.svc-cta,.article-cta) > *{text-align:start !important;margin-left:0 !important;margin-right:0 !important}
:root body :is(div.cta,.ei-cta2,.svc-cta,.article-cta) h2{color:#fff !important;max-width:22ch;margin:0 0 14px !important}
:root body :is(div.cta,.ei-cta2,.svc-cta,.article-cta) p{color:rgba(251,250,248,.76) !important;max-width:60ch !important;margin-left:0 !important;margin-right:0 !important;text-align:start !important}
:root body :is(div.cta,.ei-cta2,.svc-cta,.article-cta) :is(.ctas,.acts,.btns,.row,.cta-row,.ei-cta-btns,.cta-btns){display:flex !important;flex-wrap:wrap;gap:12px !important;justify-content:flex-start !important;margin-top:28px}
:root body :is(div.cta,.ei-cta2,.svc-cta,.article-cta) > .btn{margin-top:24px}
:root body :is(div.cta,.ei-cta2,.svc-cta,.article-cta,.close-in) .btn{min-height:52px;display:inline-flex;align-items:center;justify-content:center;padding-left:24px;padding-right:24px}
:root body .svc-cta > div{max-width:none}
:root body :is(div.cta,.ei-cta2,.svc-cta,.article-cta) a:not(.btn){color:#fff !important}
/* only one ink surface per page: the closing band. The /erp/ hero becomes paper. */
:root body header.eh{background:var(--v2-paper) !important;color:var(--v2-ink2) !important;border-bottom:1px solid var(--v2-line)}
:root body header.eh::before,:root body header.eh::after,:root body header.eh .eh-spot{display:none !important;animation:none !important}
:root body header.eh h1{color:var(--v2-ink) !important}
:root body header.eh h1 em{color:var(--v2-copper) !important;font-style:normal}
:root body header.eh .sub{color:var(--v2-ink2) !important}
:root body header.eh .eh-stats{color:var(--v2-soft) !important;font-family:var(--kd-body,'Inter',sans-serif)}
:root body header.eh .eh-stats b{color:var(--v2-ink) !important}
:root body header.eh .eh-stats b.copp{color:var(--v2-copper-text) !important}

/* 6. One FAQ: details/summary, hairline dividers, plus and minus in copper */
:root body details:not([class]):has(> summary){border:0 !important;border-top:1px solid var(--v2-line) !important;border-radius:0 !important;background:none !important;box-shadow:none !important;margin:0 !important;padding:0 !important;max-width:820px}
:root body details:not([class]):has(> summary):last-of-type{border-bottom:1px solid var(--v2-line) !important}
:root body details:not([class]) > summary{list-style:none !important;display:flex !important;justify-content:space-between;align-items:flex-start;gap:20px;
  padding:20px 0 !important;margin:0 !important;font-family:var(--kd-body,'Inter',sans-serif) !important;font-size:18px !important;font-weight:500 !important;line-height:1.4 !important;color:var(--v2-ink) !important;cursor:pointer;background:none !important;border:0 !important}
html[lang="ar"] body details:not([class]) > summary{font-family:'Readex','Inter',sans-serif !important}
:root body details:not([class]) > summary::-webkit-details-marker{display:none}
:root body details:not([class]) > summary::marker{content:""}
:root body details:not([class]) > summary::before{content:none !important;display:none !important}
/* one chevron (7 Nov 2026): a copper caret that turns on open */
:root body details:not([class]) > summary::after{content:"" !important;display:block !important;position:static !important;flex:none;box-sizing:border-box;width:10px !important;height:10px !important;
  margin:6px 0 0 !important;margin-inline-end:4px !important;border:0 !important;border-right:2px solid var(--v2-copper-text) !important;border-bottom:2px solid var(--v2-copper-text) !important;border-radius:1px;
  background:none !important;transform:rotate(45deg) !important;transition:transform .2s ease;font-size:0 !important;color:transparent !important}
:root body details:not([class])[open] > summary::after{content:"" !important;transform:translateY(4px) rotate(-135deg) !important}
@media (prefers-reduced-motion:reduce){:root body details:not([class]) > summary::after{transition:none}}
/* one width and rhythm for every FAQ block, whatever the page wraps it in */
:root body details:not([class]):has(> summary){width:100%;max-width:820px !important;box-sizing:border-box}
:root body details:not([class]) > summary:hover{color:var(--v2-copper-text) !important}
:root body details:not([class]) > summary:focus-visible{outline:3px solid var(--v2-copper-text);outline-offset:4px;border-radius:4px}
:root body details:not([class]) > :not(summary){margin:0 0 20px !important;padding:0 !important;max-width:68ch;color:var(--v2-ink2)}
:root body details:not([class]) > summary + *{margin-top:-4px !important}
:root body :is(h2,.svc-h2) + :is(.faq,.svc-faq,div:has(> details:not([class]))){margin-top:32px}

/* 7. Copper discipline for UI; client and vendor logos stay in full colour (owner, 6 Nov) */
:root body .pc-logo img,:root body .blogo img,:root body .prow img,:root body .mq img,:root body .wt img{filter:none !important;opacity:1 !important}
:root body .pc-cat{background:var(--v2-sand) !important;color:#5B5750 !important;border:0 !important}
:root body .pc-go{color:var(--v2-ink) !important;text-decoration:underline;text-decoration-color:var(--v2-copper-text);text-underline-offset:4px}
:root body .blogo{color:var(--v2-ink) !important}
:root body .dpanel{--acc:var(--v2-copper-text) !important;--accs:var(--v2-sand) !important}
:root body .dcap{margin:10px 2px 0;font-size:12.5px;line-height:1.4;color:var(--v2-soft);font-family:var(--kd-body,'Inter',sans-serif)}
html[lang="ar"] body .dcap{font-family:'Readex','Inter',sans-serif}
:root body .dkan *{white-space:nowrap}
:root body .proofline .pdot{background:var(--v2-copper) !important;box-shadow:none !important;animation:none !important}
:root body .kt-ok{background:var(--v2-ink) !important}
:root body .kt-ok svg{stroke:var(--v2-copper)}
:root body .kt-ey{color:var(--v2-copper-text) !important}

/* 8. Homepage: one client wall (marquee removed), 6 x 3 on desktop, 2 columns on phones */
:root body .wall .wgrid{grid-template-columns:repeat(6,1fr) !important;gap:12px !important}
@media (max-width:1080px){:root body .wall .wgrid{grid-template-columns:repeat(3,1fr) !important}}
@media (max-width:720px){:root body .wall .wgrid{grid-template-columns:repeat(2,1fr) !important;gap:10px !important}}
:root body .wt.wt-static{cursor:default}
:root body .wt.wt-static:hover{transform:none !important;box-shadow:none !important;border-color:var(--line,#ECE9E2) !important}
:root body .mq-sec{padding-top:40px}
/* proof line: the claim and the rating sit on two lines */
:root body .proofline{display:block !important}
:root body .proofline .pdot{display:inline-block !important;width:8px;height:8px;border-radius:50%;vertical-align:middle;margin-inline-end:8px}
:root body .proofline .gstar{display:flex !important;width:max-content;margin-top:8px;margin-inline-start:0 !important;border:0 !important;padding-inline-start:0 !important}
/* language switch: a readable pill */
:root body nav.nav a.langpill{display:inline-flex !important;align-items:center;min-height:36px;padding:0 14px !important;border:1px solid var(--v2-line) !important;border-radius:999px !important;
  font-size:14px !important;font-weight:500 !important;line-height:1 !important;color:var(--v2-ink) !important;background:#fff}
:root body nav.nav a.langpill[lang="ar"]{font-family:'Readex','Inter',sans-serif !important}
:root body nav.nav a.langpill[lang="en"]{font-family:'Inter',system-ui,sans-serif !important}
:root body nav.nav a.langpill:hover{border-color:var(--v2-ink) !important}
:root body nav.nav .links:has(.langpill){align-items:center}
/* hero builder dots: 24px tap targets, same 6px visual */
:root body .kb-dots{gap:0 !important}
:root body .kb-dots button{width:24px !important;height:24px !important;border-radius:0 !important;background:none !important;display:inline-flex !important;align-items:center;justify-content:center}
:root body .kb-dots button::before{content:none !important}
:root body .kb-dots button::after{content:"";display:block;width:6px;height:6px;border-radius:50%;background:#D9D3C9;transition:width .3s,background .3s}
:root body .kb-dots button.on::after{width:18px;border-radius:3px;background:var(--ki,#0A0B0D)}

/* 9. Arabic: the four-gate rail mirrors (dot and divider on the reading-start side) */
html[dir="rtl"] body .gates li{border-right:0 !important;border-left:1px solid var(--line,#ECE9E2)}
html[dir="rtl"] body .gates li:last-child{border-left:0}
html[dir="rtl"] body .gates li::before{left:auto !important;right:18px}
@media (max-width:900px){html[dir="rtl"] body .gates li{border-left:0}}

/* 10. /erp/ platform finder: heading on its own row, three selects and the button on the next */
:root body section.fit{margin-top:32px !important;margin-bottom:8px !important}
:root body .fit-in{grid-template-columns:repeat(3,minmax(0,1fr)) auto !important;gap:14px 16px !important;padding:24px !important}
:root body section.fit .intro{grid-column:1/-1}
:root body section.fit .intro h2{font-size:var(--k-t-h2) !important;line-height:1.15 !important;max-width:none !important;margin:0 0 6px !important}
:root body section.fit .intro p{font-size:15px !important;max-width:none}
:root body section.fit select{min-width:0;text-overflow:ellipsis;font-size:15px !important;padding:12px 36px 12px 12px !important}
html[dir="rtl"] body section.fit select{padding:12px 12px 12px 36px !important}
:root body section.fit label{font-family:var(--kd-body,'Inter',sans-serif) !important;font-size:13px !important;letter-spacing:0 !important;text-transform:none !important}
:root body section.fit .go{min-height:46px}
@media (max-width:900px){:root body .fit-in{grid-template-columns:1fr 1fr !important}}
@media (max-width:520px){:root body .fit-in{grid-template-columns:1fr !important;padding:18px !important}}

/* 11. Case pages: plain facts where there is no measured result */
:root body .hero .facts{list-style:none;margin:28px 0 4px;padding:0;border-top:1px solid var(--v2-line)}
:root body .hero .facts li{padding:12px 0;border-bottom:1px solid var(--v2-line);font-size:16px;line-height:1.5;color:var(--v2-ink2)}

/* 12. Thanks page: the calendar box shows one loader, Calendly's own spinner is hidden */
:root body .kt-cal .calendly-spinner{display:none !important}

/* 13. Tap targets: footer and breadcrumb links 24px on desktop, 44px on phones */
:root body footer :is(.fcol,.fbot) a{display:inline-flex !important;align-items:center;min-height:24px}
:root body footer .fsoc a{display:inline-flex !important;align-items:center;justify-content:center}
@media (max-width:600px){
  :root body footer :is(.fcol,.fbot) a{min-height:44px !important;padding-top:0 !important;padding-bottom:0 !important}
  :root body footer .fcol ul{gap:0 !important}
  :root body footer .fsoc a{width:44px !important;height:44px !important}
}

/* ======================================================================================
   v5 frontend pass (7 Nov 2026, workstream A). Sections 14 to 22.
   ====================================================================================== */

/* 14. The hidden attribute always wins (fixes the empty pill on /booked/ and protects every component) */
[hidden]{display:none !important}

/* 15. Buttons: two styles, one size. Primary = copper fill, white text. Secondary = ink outline.
   One height (48px), one radius (12px), one type style (Inter 15px / 600; Readex in Arabic).
   Overrides every older variant: .btn, .btn-p, .btn-primary, .btn-lg, gradient form submits,
   the black careers button, the /erp/ "Show my fit" button and the mobile-menu button.
   The fill is one token: --v2-btn. #C94208 keeps white text at 4.9:1 (AA); #E8500A gives 3.8:1. */
:root{--v2-btn:#C94208;--v2-btn-hover:#B23A07;--v2-btn-h:48px;--v2-btn-r:12px}
:root body :where(a.btn,button.btn,.btn-p,.btn-primary,.btn-lg,.btn-g,.btn-ghost,.btn-ghost-light,.btn-secondary,button[type=submit],input[type=submit],.form-submit,section.fit .go,.rl-apply,.kt-dl,nav.nav .mobmenu a.mm-cta):not(.kbar *):not(.langpill){
  display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:8px;box-sizing:border-box !important;
  min-height:var(--v2-btn-h) !important;height:auto !important;padding:10px 24px !important;margin-bottom:0;
  border-radius:var(--v2-btn-r) !important;border-width:1.5px !important;border-style:solid !important;
  font-family:var(--kd-body,'Inter',system-ui,sans-serif) !important;font-size:15px !important;font-weight:600 !important;line-height:1.2 !important;
  letter-spacing:0 !important;text-transform:none !important;text-decoration:none !important;text-align:center;
  background-image:none !important;box-shadow:none !important;filter:none !important;transform:none !important;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease !important;cursor:pointer;-webkit-appearance:none;appearance:none}
html[lang="ar"] body :where(a.btn,button.btn,.btn-p,.btn-primary,.btn-lg,.btn-g,.btn-ghost,.btn-ghost-light,.btn-secondary,button[type=submit],input[type=submit],.form-submit,section.fit .go,.rl-apply,.kt-dl,nav.nav .mobmenu a.mm-cta):not(.kbar *):not(.langpill){font-family:'Readex','Inter',sans-serif !important}
/* primary */
:root body :where(a.btn,button.btn,.btn-p,.btn-primary,.btn-lg,button[type=submit],input[type=submit],.form-submit,section.fit .go,.rl-apply,nav.nav .mobmenu a.mm-cta):not(:where(.btn-g,.btn-ghost,.btn-ghost-light,.btn-secondary,.kt-dl,.kbar *,.langpill)){
  background-color:var(--v2-btn) !important;border-color:var(--v2-btn) !important;color:#fff !important}
:root body :where(a.btn,button.btn,.btn-p,.btn-primary,.btn-lg,button[type=submit],input[type=submit],.form-submit,section.fit .go,.rl-apply,nav.nav .mobmenu a.mm-cta):not(:where(.btn-g,.btn-ghost,.btn-ghost-light,.btn-secondary,.kt-dl,.kbar *,.langpill)):hover{
  background-color:var(--v2-btn-hover) !important;border-color:var(--v2-btn-hover) !important;color:#fff !important}
/* secondary: ink outline on light surfaces (dark bands keep the white outline from section 4) */
:root body :where(.btn-g,.btn-ghost,.btn-ghost-light,.btn-secondary,.kt-dl):not(:where(.close-in,div.cta,.ei-cta2,.svc-cta,.article-cta,.kt-close) *){background-color:#fff !important;border-color:var(--v2-ink) !important;color:var(--v2-ink) !important}
:root body :where(.btn-g,.btn-ghost,.btn-ghost-light,.btn-secondary,.kt-dl):not(:where(.close-in,div.cta,.ei-cta2,.svc-cta,.article-cta,.kt-close) *):hover{background-color:var(--v2-ink) !important;color:#fff !important}
:root body :is(a.btn,button.btn,.btn-p,.btn-g,.btn-ghost,button[type=submit],.form-submit,section.fit .go,.rl-apply,.kt-dl):focus-visible{outline:3px solid var(--v2-copper-text) !important;outline-offset:3px !important}
:root body :where(a.btn,button.btn,.btn-p,.btn-g,.btn-ghost,.btn-primary,.kt-dl) svg{flex:none;width:18px;height:18px}
/* the phone override in section 4 set 52px; one height everywhere now */
@media (max-width:600px){
  :root body a.btn:not(.navbtn):is(.btn-p,.btn-g,.btn-ghost,.btn-primary,[href^="https://wa.me"]),:root body :is(.close-in,div.cta,.ei-cta2,.svc-cta,.article-cta,.ctas) a.btn,
  :root body :is(div.cta,.ei-cta2,.svc-cta,.article-cta,.close-in) .btn{min-height:var(--v2-btn-h) !important;padding:10px 24px !important}
}
:root body :is(div.cta,.ei-cta2,.svc-cta,.article-cta,.close-in) .btn{min-height:var(--v2-btn-h) !important}
:root body nav.nav .navbtn{min-height:var(--v2-btn-h) !important;padding:10px 20px !important;white-space:nowrap}

/* 16. Headlines: balanced lines, never hyphenated, no forced breaks inside words */
:root body :is(h1,h2,h3,.h1,.h2,.h3){text-wrap:balance;-webkit-hyphens:none !important;hyphens:none !important;overflow-wrap:normal !important;word-break:normal !important}
:root body :is(p,li){text-wrap:pretty}

/* 17. Arabic: headings at weight 400 to match English; Readex inside the homepage builder and system map */
html[lang="ar"] body :is(h1,h2,.h1,.h2){font-weight:400 !important}
html[lang="ar"] body :is(.kb,.sm) :is(b,span,i,p,h3,a,button,li,strong,em){font-family:'Readex','Inter',sans-serif !important;letter-spacing:0 !important}

/* 18. Skip link: first focusable element, visible only on focus */
:root body a.skip{position:absolute !important;inset-inline-start:12px;top:-200px;z-index:200;display:inline-flex !important;align-items:center;min-height:44px;padding:0 18px !important;
  border-radius:10px !important;background:var(--v2-ink) !important;color:#fff !important;font:600 15px/1.2 var(--kd-body,'Inter',sans-serif) !important;text-decoration:none !important;
  box-shadow:0 8px 24px -8px rgba(10,11,13,.5);white-space:nowrap}
html[dir="rtl"] body a.skip{font-family:'Readex','Inter',sans-serif !important}
:root body a.skip:focus,:root body a.skip:focus-visible{top:14px;outline:3px solid var(--v2-copper) !important;outline-offset:2px}
:root body [data-skip-target]:focus{outline:none}
:root body [data-skip-target]{scroll-margin-top:88px}

/* 19. Mobile menu: one 44px toggle with one icon pair, a full-height sheet, one Book button.
   main.js adds html.mm-open (scroll lock), Escape to close, focus return and a focus trap. */
:root body nav.nav .hamburger{display:none;align-items:center;justify-content:center;flex:none;box-sizing:border-box;
  width:44px !important;height:44px !important;padding:0 !important;margin:0 !important;margin-inline-start:10px !important;gap:0 !important;
  border:1px solid var(--v2-line) !important;border-radius:12px !important;background:#fff !important;color:var(--v2-ink) !important;cursor:pointer;-webkit-tap-highlight-color:transparent}
:root body nav.nav .hamburger svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;pointer-events:none}
:root body nav.nav .hamburger .hb-x,:root body nav.nav .hamburger[aria-expanded="true"] .hb-m{display:none}
:root body nav.nav .hamburger[aria-expanded="true"] .hb-x{display:block}
:root body nav.nav .hamburger:has(svg) > span{display:none !important}
/* pages still carrying the older three-bar markup draw the same 22px glyph */
:root body nav.nav .hamburger > span{display:block !important;position:absolute;left:11px;width:22px !important;height:1.8px !important;border-radius:2px;background:currentColor !important;margin:0 !important;transition:transform .2s,opacity .2s}
:root body nav.nav .hamburger:not(:has(svg)){position:relative}
:root body nav.nav .hamburger > span:nth-child(1){top:15px}
:root body nav.nav .hamburger > span:nth-child(2){top:21px}
:root body nav.nav .hamburger > span:nth-child(3){top:27px}
:root body nav.nav .hamburger.active > span:nth-child(1){transform:translateY(6px) rotate(45deg)}
:root body nav.nav .hamburger.active > span:nth-child(2){opacity:0}
:root body nav.nav .hamburger.active > span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
:root body nav.nav .hamburger:focus-visible{outline:3px solid var(--v2-copper-text);outline-offset:2px}
:root body nav.nav .nav-in > a:first-child{display:inline-flex !important;align-items:center;min-height:44px;flex:none}
@media (max-width:1023px){
  :root body nav.nav .links{display:none !important}
  :root body nav.nav .navbtn{margin-inline-start:auto !important}
  :root body nav.nav .hamburger{display:inline-flex !important}
  :root body nav.nav .mobmenu{display:none;position:fixed !important;top:72px !important;left:0 !important;right:0 !important;bottom:auto !important;
    height:calc(100vh - 72px) !important;height:calc(100dvh - 72px) !important;max-height:none !important;overflow-y:auto !important;overscroll-behavior:contain;
    flex-direction:column;gap:0 !important;margin:0 !important;padding:6px var(--v2-gutter) calc(28px + env(safe-area-inset-bottom,0px)) !important;
    background:#fff !important;border:0 !important;border-top:1px solid var(--v2-line) !important;box-shadow:none !important;z-index:60 !important;box-sizing:border-box}
  :root body nav.nav .mobmenu.open{display:flex !important}
  :root body nav.nav .mobmenu > a:not(.mm-cta){display:flex !important;align-items:center;min-height:56px;padding:0 4px !important;border-bottom:1px solid var(--v2-line) !important;
    font-size:18px !important;font-weight:500 !important;line-height:1.3 !important;color:var(--v2-ink) !important;text-decoration:none !important}
  :root body nav.nav .mobmenu a.mm-cta{width:100%;margin-top:24px !important;flex:none}
  /* submenus (main.js builds them from the desktop dropdowns): heading link + 44px toggle, links indented */
  :root body nav.nav .mobmenu .mm-g{border-bottom:1px solid var(--v2-line);flex:none}
  :root body nav.nav .mobmenu .mm-h{display:flex;align-items:center;gap:8px}
  :root body nav.nav .mobmenu .mm-h > a{flex:1 1 auto;display:flex !important;align-items:center;min-height:56px;padding:0 4px !important;border:0 !important;
    font-size:18px !important;font-weight:500 !important;line-height:1.3 !important;color:var(--v2-ink) !important;text-decoration:none !important}
  :root body nav.nav .mobmenu .mm-x{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;margin:0;border:1px solid var(--v2-line);
    border-radius:12px;background:#fff;color:var(--v2-ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
  :root body nav.nav .mobmenu .mm-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
  :root body nav.nav .mobmenu .mm-x[aria-expanded="true"] svg{transform:rotate(180deg)}
  :root body nav.nav .mobmenu .mm-x:focus-visible{outline:3px solid var(--v2-copper-text);outline-offset:2px}
  :root body nav.nav .mobmenu .mm-sub{display:flex;flex-direction:column;padding:0 0 12px;padding-inline-start:14px;margin-inline-start:4px;border-inline-start:2px solid var(--v2-sand)}
  :root body nav.nav .mobmenu .mm-sub[hidden]{display:none}
  :root body nav.nav .mobmenu .mm-sub a{display:flex !important;align-items:center;min-height:44px;padding:0 4px !important;border:0 !important;font-size:16px !important;font-weight:400 !important;
    line-height:1.3 !important;color:var(--v2-ink2) !important;text-decoration:none !important}
  :root body nav.nav .mobmenu .mm-sub a:hover{color:var(--v2-ink) !important}
  :root body nav.nav .mobmenu .mm-alt{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
  :root body nav.nav .mobmenu .mm-alt a{display:flex !important;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 12px !important;border:1px solid var(--v2-line) !important;
    border-radius:12px !important;font-size:15px !important;font-weight:500 !important;color:var(--v2-ink) !important;text-decoration:none !important;background:#fff;white-space:nowrap}
  :root body nav.nav .mobmenu .mm-alt svg{width:18px;height:18px;flex:none;fill:currentColor}
  :root body nav.nav .mobmenu .mm-note{margin:14px 2px 0;font-size:13.5px;line-height:1.5;color:var(--v2-soft)}
  html.mm-open,html.mm-open body{overflow:hidden !important;overscroll-behavior:none}
  html.mm-open body nav.nav .navbtn{visibility:hidden !important}
  html.mm-open body .kbar.msticky{transform:translateY(110%) !important;visibility:hidden !important}
}
@media (min-width:1024px){:root body nav.nav .mobmenu{display:none !important}}
:root body nav.nav .mobmenu .mm-alt{display:none}
@media (max-width:1023px){:root body nav.nav .mobmenu.open .mm-alt{display:grid}}
/* phones: the booking bar carries the CTA, so the header Book button steps aside (no duplicate) */
@media (max-width:640px){:root body:has(.kbar) nav.nav .navbtn{display:none !important}:root body:has(.kbar) nav.nav .hamburger{margin-inline-start:auto !important}}

/* 20. Booking bar placement rules */
/* already booked: no bar on /booked/ and /ar/booked/ */
:root body.kt-booked .kbar,:root body.kt-booked .kbar.msticky{display:none !important}
@media (max-width:820px){
  :root body.kt-booked{padding-bottom:0 !important}
  /* while someone types in any form, the bar gets out of the way (and off the iOS keyboard) */
  :root body:has(form :is(input,select,textarea):focus) .kbar.msticky{transform:translateY(110%) !important;visibility:hidden !important}
}

/* 21. Tap targets: 44px for nav, footer, breadcrumbs, filter pills and toggles on touch screens */
@media (max-width:820px),(pointer:coarse){
  :root body :is(.chip,.ki-chip,.wchip,.fbtn,.kc-swap,.sm-toggle button,.ki-morebtn,[role="tab"]){min-height:44px !important;box-sizing:border-box}
  :root body :is(.chip,.ki-chip,.wchip,.fbtn){display:inline-flex !important;align-items:center;justify-content:center}
  :root body .crumbs a{display:inline-flex !important;align-items:center;min-height:44px}
  :root body nav.nav .langpill{min-height:44px !important}
  :root body footer :is(.fcol,.fbot) a{min-height:44px !important}
  :root body footer .fsoc a{width:44px !important;height:44px !important}
}

/* 22. Palette: no greens. Status dots and live markers in copper, success panels on sand, WhatsApp glyphs in ink. */
html body{--green:var(--v2-copper-text);--signal:var(--v2-copper-text);--kd-connect:var(--v2-ink);--green-bg:var(--v2-sand)}
:root body :is(.kb-live,.lbdot,.dot-live,.wt .wdot,.pfd.g,.gchip .live i,.pdot){background:var(--v2-copper) !important;box-shadow:none !important;animation:none !important}
:root body .hire-now{background:var(--v2-sand) !important;color:var(--v2-ink) !important;border-color:var(--v2-sand) !important}
:root body .hire-now::before{background:var(--v2-copper) !important;box-shadow:none !important;animation:none !important}
:root body :is(.kd.up,.gchip .live,.tag2,.fc .up,.kc .d,.kpi-delta,.dash-live){color:var(--v2-copper-text) !important}
:root body .tag2{background:var(--v2-sand) !important}
:root body .k-success{background:var(--v2-sand) !important;border-color:var(--v2-line) !important}
:root body .ic.wa{background:var(--v2-ink) !important}
:root body :is(.wafab,.wa-fab){background:var(--v2-ink) !important;box-shadow:0 12px 28px -14px rgba(10,11,13,.55) !important}
:root body :is(.wafab,.wa-fab) svg path:first-child{fill:#fff}
:root body :is(.wafab,.wa-fab) svg path:last-child:not(:first-child){fill:var(--v2-ink)}
:root body .kbar.msticky a.kb-wa svg path{fill:currentColor !important}
/* neutral icon tiles for capabilities that have no vendor logo (ZATCA, UAE e-invoicing, custom builds) */
:root body .cap-ico{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:var(--v2-sand);color:var(--v2-ink);flex:none}
:root body .cap-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block}

/* 23. Homepage: one calm e-invoicing countdown line under the proof line; metrics with a true minus and one metric colour */
:root body .ei-cd{display:block;margin-top:14px;padding:11px 0;min-height:44px;box-sizing:border-box;max-width:36em;
  color:var(--v2-ink2) !important;font-size:14.5px;line-height:1.5;text-decoration:none !important}
:root body .ei-cd::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--v2-copper);vertical-align:middle;margin-inline-end:9px;position:relative;top:-1px}
:root body .ei-cd b{color:var(--v2-ink);font-weight:600;font-variant-numeric:tabular-nums}
:root body .ei-cd u{color:var(--v2-copper-text);text-underline-offset:3px;text-decoration-thickness:1px;white-space:nowrap;margin-inline-start:4px}
:root body .ei-cd:hover u{text-decoration-thickness:2px}
:root body :is(.kb-tv,.kb-pv,.sm-a i,.kb-proof .kb-pv){font-variant-numeric:tabular-nums;color:var(--v2-copper-text) !important}

/* 24. Thank-you and booked pages: the shared closing band, at container width */
:root body .kt-close{padding:16px 0 88px}
:root body .kt-close .cta{margin:0}
@media (max-width:600px){:root body .kt-close{padding:8px 0 56px}}
/* builder rotator pause control sits after the dots and is not drawn as a dot */
:root body .kb-dots button.kb-pause{width:32px !important;height:24px !important;margin-inline-start:6px;border-radius:6px !important;color:#6F6A62;display:inline-flex !important;align-items:center;justify-content:center}
:root body .kb-dots button.kb-pause::after{content:none !important;display:none !important}
:root body .kb-dots button.kb-pause svg{width:12px;height:12px;fill:currentColor;display:block}
:root body .kb-dots button.kb-pause:hover{color:var(--v2-ink)}
:root body .kb-dots button.kb-pause:focus-visible{outline:2px solid var(--v2-copper-text);outline-offset:1px}
/* button outliers: the careers black "Apply now" becomes the primary, and buttons in CTA rows never stretch past 48px */
:root body .roles-now .role-links a.rl-apply{background-color:var(--v2-btn) !important;border-color:var(--v2-btn) !important;color:#fff !important}
:root body .roles-now .role-links a.rl-apply:hover{background-color:var(--v2-btn-hover) !important;border-color:var(--v2-btn-hover) !important}
@media (min-width:601px){:root body :is(.cta-btns,.mid-cta-b,.role-links,.ctas,.acts,.btns,.cta-row) > :where(a.btn,button.btn,.btn-p,.btn-g,.btn-ghost,.btn-primary,.rl-apply){align-self:center}}

/* v6 (8 Nov 2026). Desktop WhatsApp bubble: hidden over the hero, shown once the hero has scrolled away,
   hidden again over the footer (the footer script adds html.kfab and toggles .wafab.on). */
@media (min-width:821px){
  html.kfab body .wafab{opacity:0 !important;visibility:hidden;pointer-events:none;transform:translateY(12px) !important;transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s !important}
  html.kfab body .wafab.on{opacity:1 !important;visibility:visible;pointer-events:auto;transform:none !important;transition:opacity .2s ease,transform .2s ease,visibility 0s !important}
}
@media (prefers-reduced-motion:reduce){html.kfab body .wafab{transition:none !important}}

/* v6: Arabic pages set every heading and text element in Readex (Arabic + Latin subsets), so no Arabic glyph
   falls back to a system face through an inherited Inter, Inter Tight, Geist or Cairo stack. */
html[lang="ar"] body,
html[lang="ar"] body :is(h1,h2,h3,h4,h5,h6,p,li,a,span,b,strong,em,i,small,div,label,button,input,select,textarea,summary,td,th,dt,dd,figcaption,blockquote,bdi,time,legend,caption,cite,q):not(:lang(en)){font-family:'Readex','Inter',sans-serif !important}
html[lang="ar"] body :is(h1,h2,h3,h4,h5,h6){letter-spacing:0 !important}
:root body :is(.n,.num,.kpi,.metric) bdi{unicode-bidi:isolate}
/* v6: the countdown slot keeps its space while main.js fills in the day count (no hero layout shift).
   html.kdd is set by the header script, so pages without JavaScript never show the blank. */
html.kdd [data-countdown]:not([hidden]) [data-cd-days][hidden]{display:inline !important;visibility:hidden}

/* v6: 44px tap targets on touch screens for carousel dots, breadcrumbs, chips, contents lists and meta links */
@media (max-width:820px),(pointer:coarse){
  :root body .kb-dots button{width:44px !important;height:44px !important}
  :root body .kb-dots .kb-pause{width:44px !important;height:44px !important}
  :root body .kb-back{display:inline-flex !important;align-items:center;min-height:44px}
  :root body :is(.crumb,.crumbs,.bc,[aria-label="Breadcrumb"],[aria-label="مسار التنقل"]) a{display:inline-flex !important;align-items:center;min-height:44px}
  :root body :is(.rel,.kt-links,.chips,.ki-chips) a{display:inline-flex !important;align-items:center;min-height:44px;box-sizing:border-box}
  :root body :is(.kt-toc,details.toc,.toc,.kt-ptoc) a{display:flex !important;align-items:center;min-height:44px;box-sizing:border-box}
  :root body :is(.kt-meta dd,.kt-author,.byline,.jobs-more,.featc .fbot) a{display:inline-flex !important;align-items:center;min-height:44px}
  :root body .proofline a.gstar{align-items:center;min-height:44px}
}

/* v6: one footer heading style on every template (home, templates, /services, static pages), and a
   two-column link grid on phones so the footer is not one long column */
:root body footer .fcol :is(h2,h3,h4,h5,.fh){display:block !important;font-family:'Inter Tight','Inter',system-ui,sans-serif !important;font-size:16px !important;font-weight:500 !important;
  line-height:1.3 !important;letter-spacing:0 !important;text-transform:none !important;color:var(--v2-ink) !important;margin:0 0 14px !important;max-width:none !important}
html[lang="ar"] body footer .fcol :is(h2,h3,h4,h5,.fh){font-family:'Readex','Inter',sans-serif !important;font-weight:500 !important;line-height:1.4 !important}
@media (max-width:640px){
  :root body footer .fg{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:28px 20px !important}
  :root body footer .fg > .fb{grid-column:1/-1}
  :root body footer .fg > .fcol:last-child{grid-column:1/-1}
}

/* v7 (9 Nov 2026). Desktop WhatsApp bubble never covers content: the 155px pill only where the side margin
   can hold it (1440px and up), a 52px circle from 1232px, hidden from 821 to 1231px, where the header
   Book button and the footer carry the same actions. */
@media (min-width:821px) and (max-width:1439px){
  :root body .wafab{width:52px !important;height:52px !important;padding:0 !important;border-radius:50% !important;justify-content:center !important;right:20px !important;bottom:20px !important}
  :root body .wafab .wat{display:none !important}
  html[dir="rtl"] body .wafab{right:auto !important;left:20px !important}
}
@media (min-width:821px) and (max-width:1231px){:root body .wafab{display:none !important}}

/* v7: Arabic forms. Every field reads from the right; email, phone and URL values stay left-to-right
   (so "+971" and addresses keep their order) but align right like the rest of the form. */
html[dir="rtl"] body :is(input:not([type]),input[type=text],input[type=search],input[type=number],textarea,select){text-align:right !important}
html[dir="rtl"] body :is(input[type=email],input[type=tel],input[type=url]){direction:ltr !important;text-align:right !important}
html[dir="rtl"] body :is(input[type=email],input[type=tel],input[type=url])::placeholder{direction:ltr;text-align:right !important}

/* ======================= v8 (10 Nov 2026) ======================= */
/* v8 #21: keep compound terms such as "e-invoicing" on one line in headings (wrapped as <span class="nw">) */
.nw{white-space:nowrap}
/* v8 #20: Latin platform names inside Arabic copy sit in <bdi class="pn"> (bidi-isolated, so they never reorder with
   neighbouring Arabic, digits or punctuation). From tablet width up they also never split across lines; on phones and in
   large headings, tables and breadcrumbs a long name may wrap rather than push the page wider than the screen. */
/* inside flex rows (FAQ summaries, chips, link rows) a <bdi> would become its own flex item and break the line into
   columns; there the name joins the surrounding text instead */
:is(summary,button,.ki-chip,.dhead,.pc-go,.ey2,.why li,.kt-links a,.kc-pairs a,.rel a,.chips a,.ki-chips a,.btn,.mm-sub a,.dd-menu a) > bdi.pn{display:contents}
@media (min-width:601px){bdi.pn{white-space:nowrap}:is(h1,h2,.kt-h1,.ki-h1,th,td,.crumb,.crumbs,[aria-label="مسار التنقل"]) bdi.pn{white-space:normal}}

/* v8 #20: Arabic type tokens. Readex gets its own scale: body 17px/1.75, headings 1.3 (H1 1.25), no tracking
   (letter-spacing breaks Arabic joins and crowds the dots), 13px floor for small labels. */
html[dir="rtl"]{--ar-body:17px;--ar-lh:1.75;--ar-h-lh:1.3;--ar-h1-lh:1.25;--ar-min:13px}
html[dir="rtl"] body{font-size:var(--ar-body);line-height:var(--ar-lh)}
html[dir="rtl"] body .prose{font-size:var(--ar-body)}
html[dir="rtl"] body main :is(p,li,dd,blockquote){line-height:var(--ar-lh)}
html[dir="rtl"]:not(#\#) body :is(h1,h2,h3,h4,h5,h6){line-height:var(--ar-h-lh) !important}
html[dir="rtl"]:not(#\#) body h1{line-height:var(--ar-h1-lh) !important}
html[dir="rtl"]:not(#\#) body *{letter-spacing:0 !important}
html[dir="rtl"]:not(#\#) body :is(.kb-tl,.kb-tp,.kb-meta,.kb-tx span,.ki-case-x-k,.ki-ftag,.ki-rtopic,.ki-row small,.ki-row small bdi,.ki-kpi-k,.kt-rel-k,
  .side .sidehd,.other .otherhd,.qa,.fbtn .n,.act .ak,.bestfor b,.magnote,.fmeta i,.crumb,.crumb a,.crumbs,.crumbs a,.trustline,.trustline b,
  .ei-trust span,.ei-trust span bdi,.dcap,.lead-form .cap,.ei-formwrap .cap,.logochip i,.nk .nl,.phase b,.phase .st,.phase .st bdi,.phase .st span,
  .svc-ch .no,.svc-sig,.who,.who a,.who bdi,.svc-ch dt,form .form-note,form .k-form-note,form.js-nf > small,.article-head .tag,.gate,.kc-band,.prose th,
  .tl-now,.ei-checks li > i,.route li > i,figcaption:not([class^="kh-"]):not(.kh-cmpfig *) b,.ki-chips small,.ki-chips small bdi,.ki-chip small,.ki-chip small bdi,.fbtn small,.other small){font-size:var(--ar-min) !important}
@media (min-width:821px){html[dir="rtl"]:not(#\#) body :is(.role-top .chip,.blk .sh){font-size:var(--ar-min) !important}}
@media (max-width:820px){html[dir="rtl"]:not(#\#) body .sm-b{font-size:var(--ar-min) !important}}

/* v8 #21: 12px floor for small labels in English (each selector was measured under 12px; mock-up UI inside
   illustrations is left as drawn) */
html[lang="en"] body :is(.kb-tl,.kb-tp,.ei-trust span,.lead-form .cap,.ei-formwrap .cap,.phase b,.side .sidehd,.other .otherhd,.fbtn .n,.ki-kpi-k,
  .trustline,.trustline b,form .form-note,figcaption:not([class^="kh-"]):not(.kh-cmpfig *) b){font-size:12px !important}
@media (min-width:821px){html[lang="en"] body :is(.role-top .chip,.blk .sh){font-size:12px !important}}
/* home hero system map labels: 12px on phones too */
:root body :is(.sm-fr,.sm-sub,.sm-a i,.sm-a .kx-n){font-size:12px !important}

/* v8 #21: 44px tap targets for the remaining small links and buttons (inline links get a taller hit area with
   vertical padding, which does not change the line box) */
:root body :is(.ei-alt,.sr-alt,.kt-wa,.apply-link,.ei-out,.rl-read,.kc-links a,.kc-pairs a){display:inline-flex !important;align-items:center;min-height:44px;box-sizing:border-box}
:root body :is(.who a,.kt-facts-list li a,.info-card h3 > a){padding-block:12px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
:root body .prose details.toc > summary{padding-block:8px;min-height:44px;box-sizing:border-box}
@media (max-width:820px),(pointer:coarse){
  :root body .kb-dots button.kb-pause{width:44px !important;height:44px !important}
}

/* v8 #21: mobile menu is a modal dialog; its close button is visually hidden until it has keyboard focus */
:root body nav.nav .mobmenu .mm-close{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;background:none}
:root body nav.nav .mobmenu .mm-close:focus-visible{position:static;width:auto;height:44px;margin:0 0 8px;padding:0 16px;clip:auto;overflow:visible;align-self:flex-start;
  display:inline-flex;align-items:center;border:1px solid var(--v2-line);border-radius:999px;background:#fff;color:var(--v2-ink);font:inherit;font-size:15px;font-weight:500;
  outline:3px solid var(--v2-copper-text);outline-offset:2px;flex:none}

/* v8 #21: /careers apply section on wide screens: heading column beside the form, so the form no longer leaves
   half the container empty (EN and AR; RTL mirrors through the grid) */
@media (min-width:1024px){
  :root body section#apply > .container:has(> .apply-wrap){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,720px);column-gap:56px;align-items:start}
  :root body section#apply > .container > .sec-head{position:sticky;top:112px;margin:0 !important;max-width:none}
  :root body section#apply > .container > .apply-wrap{margin:0 !important;max-width:none !important;width:100%}
}

/* ===== In-text links: owner choice A "Clean copper" (6 Nov 2026) =====
   Copper (#B23A07, 5.6:1 on white) and semi-bold, no line at rest; a 2px line appears on hover and keyboard focus.
   Applies to links inside running text and to standalone text links; never to buttons, nav, chips or cards. */
:root body main :is(p,li,dd,td,th,figcaption,blockquote,small,label,.prose,.byline,.crumbs,.crumb) a:not([class*="btn"]):not([class*="cta"]):not(.k-rate):not(.chip):not(.fbtn):not([role="button"]):not(.langpill),
:root body main :is(.kt-wa,.kt-author a,.kb-role a,.ind-deliv-all a,.kt-pbook-wa,.kt-meta dd a,.cs-facts dd a,.ksla a,.kc-table thead a,.ki-more .secx a,.ka a:not(.btn):not(.ka-f)){
  color:#B23A07 !important;font-weight:600;text-decoration:none !important;border-bottom:0 !important;
  text-underline-offset:4px;text-decoration-thickness:2px;transition:color .15s ease}
:root body main :is(p,li,dd,td,th,figcaption,blockquote,small,label,.prose,.byline,.crumbs,.crumb) a:not([class*="btn"]):not([class*="cta"]):not(.k-rate):not(.chip):not(.fbtn):not([role="button"]):not(.langpill):is(:hover,:focus-visible),
:root body main :is(.kt-wa,.kt-author a,.kb-role a,.ind-deliv-all a,.kt-pbook-wa,.kt-meta dd a,.cs-facts dd a,.ksla a,.kc-table thead a,.ki-more .secx a,.ka a:not(.btn):not(.ka-f)):is(:hover,:focus-visible){
  text-decoration:underline !important;text-decoration-color:currentColor !important;color:#8F2E05 !important}
/* links set on dark panels keep a light colour */
:root body main :is([class*="dark"],.on-dark,.ink-band,.kt-dark,.band-dark,.cta-band,.lp-final,.ab-mission,.close-in,.ka-sp.k,.ei-cta2) :is(p,li,dd,small) a:not([class*="btn"]):not([class*="cta"]):not(.k-rate):not(.chip):not(.fbtn):not([role="button"]):not(.langpill),:root body main :is([class*="dark"],.on-dark,.ink-band,.kt-dark,.band-dark,.cta-band,.lp-final,.ab-mission,.close-in,.ka-sp.k,.ei-cta2) :is(p,li,dd,small) a:not([class*="btn"]):not([class*="cta"]):not(.k-rate):not(.chip):not(.fbtn):not([role="button"]):not(.langpill):is(:hover,:focus-visible){color:#FFB48A !important}
:root body main :is(.crumbs,.crumb) a{font-weight:500}
/* v9: a paragraph that is itself marked .on-dark (e.g. /einvoicing closing band) keeps light links too */
:root body main :is(p,li,small).on-dark a:not([class*="btn"]):not(.k-rate){color:var(--k-copper-dark) !important}
/* v9 contrast: small copper text on sand surfaces uses #B23A07 (5.2:1); #C94208 there is 4.33:1 */
:root body .kin-go,:root body .ki-ind-go i,:root body .bestfor b{color:var(--k-copper-text) !important}
/* rating badge on dark cards (e.g. /contact booking card) */
:root body .k-rate.on-dark,:root body .k-rate.on-dark span{color:rgba(251,250,248,.86) !important}
:root body .k-rate.on-dark b{color:#fff !important}
:root body .k-rate.on-dark span{text-decoration-color:rgba(255,255,255,.45) !important}
:root body a.k-rate{display:inline-flex !important;align-items:center;gap:8px !important;text-decoration:none !important;border:0 !important}
:root body a.k-rate span{text-decoration:none !important}
:root body a.k-rate:is(:hover,:focus-visible) span{text-decoration:underline !important;text-underline-offset:3px;text-decoration-thickness:2px}

/* ===== Mobile pass, 7 Nov 2026 (all pages) ===== */
/* /erp/ filter bar sat 9px under the 73px header; on phones it stays in the page instead of pinning */
.controls{top:73px}
@media (max-width:767px){.controls{position:static !important;backdrop-filter:none}}
/* footer colour runs under the bottom bar's reserved space, no white strip at the end of the page */
@media (max-width:1023px){body:has(.kbar) footer.kc-foot{box-shadow:0 160px 0 var(--kc-tint,#FAF9F6)}}
/* consistent full-width hero buttons on phones */
@media (max-width:600px){
 :is(.hero-l,.phead,.ka-hero) .ctas,.ka-acts{display:flex;flex-direction:column;align-items:stretch;gap:12px}
 :is(.hero-l,.phead,.ka-hero) .ctas>a.btn,.ka-acts>a.btn{width:100%;max-width:none;justify-content:center;text-align:center}
}
/* tap targets of at least 24px (WCAG 2.5.8) for the small links the audit found */
a.cs9-more{display:inline-flex;align-items:center;min-height:44px}
:is(nav.crumb,nav.crumbs,.crumbs,.crumb) a{display:inline-block;padding-block:5px}
table :is(th,td) a{display:inline-block;padding-block:3px}
a.pc-proof{display:inline-flex;align-items:center;min-height:28px}
/* no text under 12px */
dl.cs9-facts dt{font-size:12.5px !important}
p.pc-fit b{font-size:12px !important}
.ka-gates b{font-size:12px !important}
.sect-h b{font-size:12px !important}
span.tier-c,span.pc-cat,span.rm-gate,.lp-case small.kk{font-size:12px !important}
.vs tbody th{font-size:12.5px !important}

/* == Smooth scrolling and touch comfort (7 Nov 2026) ==
   Backdrop blur repaints on every scroll frame and stutters on mid-range phones, so touch screens get
   near-opaque bars instead. Buttons get a 48px touch height and stacked CTA groups get real gaps. */
@media (hover:none),(max-width:820px){
  :root body :is(nav.nav,nav.nav.kc,.nav,.msticky,.fstrip,.gchip,.kc-banner,.kx-offer){-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  :root body :is(nav.nav,nav.nav.kc,.nav){background:rgba(255,255,255,.97) !important}
  :root body .msticky{background:rgba(251,250,248,.98) !important}
  :root body :is(.btn,.btn-p,.btn-g,.btn-primary,.msticky a){min-height:48px}
  :root body .btn{display:inline-flex;align-items:center;justify-content:center}
  :root body :is(.ctas,.hero-ctas,.cta-row,.btns){gap:12px !important}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
}
@media (max-width:560px){
  :root body :is(.ctas,.hero-ctas,.cta-row) > :is(.btn,a.btn){flex:1 1 100%;max-width:none !important}
}
html{scroll-padding-top:84px}
@media (prefers-reduced-motion:no-preference){html:focus-within{scroll-behavior:smooth}}

/* Accessibility (7 Nov 2026): phone and email links inside a sentence are underlined, so they never rely on colour alone. */
:root body p a[href^="tel:"],:root body p a[href^="mailto:"]{text-decoration:underline;text-underline-offset:3px}