/* Accessibility additions (WCAG 2.1 AA). The design is the prototype's: this only adds what a
   keyboard or screen-reader user needs, and lifts the few small texts that fell under 4.5:1 to the
   brand's darker gold (#7A5C26, which the prototype itself uses for gold text in light mode). */

/* Skip to the page's content: hidden until a keyboard user tabs to it. */
/* Hidden by its own inline style, so it never shows even if this file is late. */
.az-skip:focus{position:fixed!important;left:16px!important;top:16px!important;width:auto!important;height:auto!important;overflow:visible!important;z-index:1000;padding:12px 18px;border-radius:10px;background:var(--ink);color:var(--cream);font:500 14px/1.2 Poppins,system-ui,sans-serif;text-decoration:none;outline:2px solid var(--gold);outline-offset:2px}

/* A visible focus ring for keyboard users only (mouse clicks show none). */
:focus-visible{outline:2px solid var(--gold)!important;outline-offset:3px}
#view:focus{outline:none}

/* Text on the overlays' panel: cream in dark mode, ink in light mode. */
:root{--a11y-ov:#7A5C26;--a11y-ovgrey:#5f5a52}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--a11y-ov:var(--gold);--a11y-ovgrey:#9a948a}}
:root[data-theme=light]{--a11y-ov:var(--gold);--a11y-ovgrey:#9a948a}
.ov .row b,.ov .s,.ov select,.ov input{color:var(--a11y-ov)}
.ov .row em,.ov .board>.lab,.ov .house>.lab{color:var(--a11y-ovgrey)}

/* Small gold and accent text on the light pages. */
@media (prefers-color-scheme:light){
	:root:not([data-theme=dark]) :is(.gbiz em,.gbiz s,.gpvm small,.gnews a>s,#ensave){color:#7A5C26}
	:root:not([data-theme=dark]) .ai-qr em{color:#6a5022}
	:root:not([data-theme=dark]) :is(.au-ph4,.io-tl) li>span{filter:brightness(.72)}
}
:root[data-theme=light] :is(.gbiz em,.gbiz s,.gpvm small,.gnews a>s,#ensave){color:#7A5C26}
:root[data-theme=light] .ai-qr em{color:#6a5022}
:root[data-theme=light] :is(.au-ph4,.io-tl) li>span{filter:brightness(.72)}

/* Small labels on grey and charcoal. */
#wlabel{color:#ece6da}
#rxprogt{color:#d4b67e}

/* Anyone who asks the system for less motion gets it. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}

/* The cookie choice (consent.js): only shown when an Analytics ID is set. */
.az-consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:999;max-width:440px;padding:18px 20px;border-radius:16px;border:1px solid var(--stroke);background:var(--ink);color:var(--cream);font:400 13px/1.55 Poppins,system-ui,sans-serif;box-shadow:0 24px 60px -30px rgba(0,0,0,.6)}
.az-consent p{margin:0 0 14px}
.az-consent a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.az-consent div{display:flex;gap:10px;justify-content:flex-end}
.az-consent button{font:500 13px/1 Poppins,system-ui,sans-serif;padding:11px 18px;border-radius:10px;cursor:pointer;border:1px solid var(--stroke);background:transparent;color:inherit}
.az-consent button[data-c=yes]{background:#B8975A;border-color:#B8975A;color:#111}

/* Social links in the footers (enhance.js), only the ones filled in Azzir Website Settings. */
.az-social{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
footer.lfoot .az-social{margin:0}
.az-social a{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--stroke);color:var(--gt,var(--gold))!important;transition:background-color .25s,color .25s,border-color .25s}
.az-social a:hover{background:var(--gold);border-color:var(--gold);color:#111!important}
.az-social svg{width:15px;height:15px;fill:currentColor;display:block}

/* The estimate's figures, shown on the page (owner, 10 Oct: just the two numbers). In the
   design's panel colours, so it follows light and dark. */
.az-fig{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:0 0 20px}
.az-fig>div{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border:1px solid var(--l-line,var(--ul,#E3DED3));border-radius:14px}
.az-fig span{font-size:13px;color:var(--l-sub,var(--usub,#5C5850))}
.az-fig b{font:500 clamp(30px,4vw,40px)/1.1 Adventor,sans-serif;color:var(--l-ink,var(--ufg,#16140F))}
.az-fig small{font-size:13px;color:var(--l-sub,var(--usub,#5C5850))}
.az-est .azb[disabled]{opacity:.55;cursor:default}
button.azb{border:0;cursor:pointer}

/* "Something else" on the estimate's first step: the box where they say what the business is.
   The design's own field style (.eform). */
.eoth-f{display:flex;flex-direction:column;gap:6px;margin-top:16px;font-size:13px;color:var(--usub)}
.eoth-f input{border:1.5px solid var(--ul);border-radius:10px;padding:13px 14px;font:400 15px Poppins,sans-serif;color:var(--ufg);background:var(--uc);outline:0;width:100%;box-sizing:border-box}
.eoth-f input:focus{border-color:var(--uink);box-shadow:0 0 0 3px rgba(0,0,0,.06)}

/* Business Systems desk: the apps, once assembled, were smaller than when scattered (owner, 10 Oct,
   "increase those icons a bit"). Assembled at 1.4x, not the design's 1.18x; the label a touch larger. */
#site .desk.hc.built:not(.opened) .dapp img{transform:scale(1.4)}
#site .desk.hc.built:not(.opened) .dapp span{margin-top:9px;font-size:1.35cqw}

/* Estimate step 3: the extras, each with its icon (owner, 11 Oct). */
.echips.ex3{gap:10px}
.eopt.echip.exi{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;font-size:14px;line-height:1.2}
.eopt.echip.exi .phi{width:18px;height:18px;flex:none;color:var(--gt,#8A6D3B)}
.eopt.echip.exi.on .phi{color:#1F9D72}

/* While the estimate is worked out: shimmering figure cards, a line on what is happening, a bar. */
.az-sk{display:block;height:clamp(30px,4vw,40px);width:72%;margin:2px 0;border-radius:10px;
	background:linear-gradient(100deg,rgba(184,151,90,.10) 20%,rgba(184,151,90,.38) 40%,rgba(184,151,90,.10) 60%) 0 0/260% 100%;
	animation:azsk 1.5s ease-in-out infinite}
.az-fig>div+div .az-sk{width:52%}
@keyframes azsk{from{background-position:130% 0}to{background-position:-130% 0}}
.az-wait .az-fig>div{position:relative;overflow:hidden}
.az-bar{height:3px;border-radius:3px;background:var(--l-line,var(--ul,#E3DED3));overflow:hidden;margin:4px 0 14px}
.az-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#B8975A,#D4B074);transition:width .4s linear}
.az-stage{min-height:1.5em;margin:0!important;font-size:14px!important;color:var(--l-sub,var(--usub,#5C5850))!important}
.az-stage span{display:inline-block;animation:azst .5s cubic-bezier(.2,.8,.2,1) both}
.az-stage span::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:azdot 1.2s steps(4) infinite}
@keyframes azst{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes azdot{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.az-fig.az-in>div{animation:azst .6s cubic-bezier(.2,.8,.2,1) both}
.az-fig.az-in>div+div{animation-delay:.12s}
.az-fig b{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.az-sk,.az-stage span,.az-stage span::after,.az-fig.az-in>div{animation:none}.az-sk{background:rgba(184,151,90,.18)}}

/* The two brochure choices, as option cards. */
.az-brh{margin:4px 0 10px!important;font-size:13px!important;letter-spacing:.04em;text-transform:uppercase;color:var(--l-mut,var(--umut,#948F84))!important}
.az-brb{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.az-bro{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--l-line,var(--ul,#E3DED3));border-radius:14px;
	background:transparent;color:inherit;text-align:left;cursor:pointer;font:inherit;transition:border-color .25s,transform .25s,background-color .25s}
.az-bro:hover{border-color:#B8975A;transform:translateY(-1px)}
.az-bro .phi{width:26px;height:26px;flex:none;color:var(--gt,#8A6D3B)}
.az-bro span{display:flex;flex-direction:column;gap:3px}
.az-bro b{font:500 15px Poppins,sans-serif}
.az-bro small{font-size:13px;color:var(--l-sub,var(--usub,#5C5850))}
.az-bro.on{border-color:#1F9D72;background:rgba(31,157,114,.06)}
.az-bro[disabled]{cursor:default}
.az-bro[disabled]:not(.on){opacity:.5}

/* "Follow one sale" has three documents, not five: 120 degrees apart, and a shorter pinned scroll. */
.dcard{transform:rotateY(calc(var(--i)*120deg)) translateZ(340px)}
#site #ringw.pinw{height:220vh}
@media(max-width:899px){.dcard{transform:rotateY(calc(var(--i)*120deg)) translateZ(250px)}}

/* AI and Agents: in light theme the agent cards are light (owner, 11 Oct), each with its own colour glow
   and dark text, all four the same colour.
   Dark theme keeps the design's dark cards. Light = chosen with the switch, or the device with no choice. */
:root[data-theme=light] .agx>.agc{background:radial-gradient(360px 220px at 0 0,color-mix(in srgb,var(--a) 22%,transparent),transparent 70%),radial-gradient(300px 220px at 100% 100%,color-mix(in srgb,var(--b) 16%,transparent),transparent 70%),#FBF8F2;color:#16140F;border-color:rgba(22,20,15,.10);box-shadow:0 40px 70px -50px color-mix(in srgb,var(--a) 55%,#000)}
:root[data-theme=light] .agx>.agc .agh b{color:#16140F}
:root[data-theme=light] .agx>.agc .agh small{color:color-mix(in srgb,var(--a) 62%,#000)}
:root[data-theme=light] .agx>.agc .agh>s{color:#6B6575}
:root[data-theme=light] .agx>.agc:hover .agh>s{color:#16140F}
:root[data-theme=light] .agx>.agc>p{color:#46424E}
:root[data-theme=light] .agx>.agc .agl{background:rgba(22,20,15,.04);border-color:rgba(22,20,15,.09);color:#2A2733}
:root[data-theme=light] .agx>.agc li{color:#46424E;border-color:rgba(22,20,15,.13);background:rgba(255,255,255,.65)}
@media (prefers-color-scheme:light){
:root:not([data-theme=dark]) .agx>.agc{background:radial-gradient(360px 220px at 0 0,color-mix(in srgb,var(--a) 22%,transparent),transparent 70%),radial-gradient(300px 220px at 100% 100%,color-mix(in srgb,var(--b) 16%,transparent),transparent 70%),#FBF8F2;color:#16140F;border-color:rgba(22,20,15,.10);box-shadow:0 40px 70px -50px color-mix(in srgb,var(--a) 55%,#000)}
:root:not([data-theme=dark]) .agx>.agc .agh b{color:#16140F}
:root:not([data-theme=dark]) .agx>.agc .agh small{color:color-mix(in srgb,var(--a) 62%,#000)}
:root:not([data-theme=dark]) .agx>.agc .agh>s{color:#6B6575}
:root:not([data-theme=dark]) .agx>.agc:hover .agh>s{color:#16140F}
:root:not([data-theme=dark]) .agx>.agc>p{color:#46424E}
:root:not([data-theme=dark]) .agx>.agc .agl{background:rgba(22,20,15,.04);border-color:rgba(22,20,15,.09);color:#2A2733}
:root:not([data-theme=dark]) .agx>.agc li{color:#46424E;border-color:rgba(22,20,15,.13);background:rgba(255,255,255,.65)}
}

/* The way back to the group is our mark, not a "← Group" pill (owner, 11 Oct): the gold ع at the top
   left of every business page, small, and it still says "Azzir Group home" to screen readers. */
#site .nav a.lobby{background:none!important;border:0!important;padding:4px!important;gap:0!important;border-radius:10px}
#site .nav a.lobby:before{content:none!important}
#site .nav a.lobby span{display:none!important}
#site .nav a.lobby img{display:block!important;height:40px!important;width:auto;background:none!important;padding:0!important;border-radius:0!important}
#site .nav a.lobby:hover{transform:translateY(-1px)!important;background:none!important}
@media(max-width:899px){#site .nav a.lobby img{height:36px!important}}

/* ===== The estimate, redesigned to invite (owner, 11 Oct) ===================================== */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* each step as tall as it needs, no hollow space; a soft gold light on the card */
.ebody{min-height:0!important;padding-bottom:18px!important}
.ecard{background-image:radial-gradient(640px 260px at 100% 0,rgba(184,151,90,.11),transparent 70%)!important;overflow:hidden}
.ebody h2{font-size:clamp(26px,3vw,34px)!important;line-height:1.12!important;margin-bottom:10px!important}
.esub{font-size:15.5px!important;margin-bottom:24px!important}
/* steps: the current one in gold, the bar in gold */
.esteps li.on i{background:#B8975A!important;color:#16140F!important;box-shadow:0 0 0 4px rgba(184,151,90,.2)}
.ebar b{background:linear-gradient(90deg,#B8975A,#D4B074)!important}

/* step 1: one large field, then quick picks */
.ebiz{display:flex;align-items:center;gap:12px;padding:4px 8px 4px 18px;border:1.5px solid var(--ul);border-radius:16px;background:var(--uc);
	transition:border-color .2s,box-shadow .2s;cursor:text}
.ebiz:focus-within{border-color:#B8975A;box-shadow:0 0 0 4px rgba(184,151,90,.18)}
.ebiz-i{display:grid;place-items:center;flex:none;color:var(--gt,#8A6D3B)}
.ebiz-i .phi{width:24px;height:24px}
.ebiz input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ufg);font:400 17px Poppins,sans-serif;padding:17px 4px}
.ebiz input::placeholder{color:var(--umut)}
.esug{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px}
.esug>span{width:100%;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--umut);margin-bottom:2px}
.eopt.esg{padding:10px 16px;border-radius:99px;font-size:14px;line-height:1.2}
.eopt.esg:hover{border-color:#B8975A}
.eopt.esg.on{border-color:#B8975A;box-shadow:0 0 0 3px rgba(184,151,90,.18)}

/* step 2: options with an icon and a plain line */
.erow.ez5,.erow.ez4{gap:10px}
.eopt.esz2{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:16px;text-align:left}
.ezi{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(184,151,90,.13);color:var(--gt,#8A6D3B);font-style:normal;transition:background-color .2s,color .2s}
.ezi .phi{width:22px;height:22px}
.ezt{display:flex;flex-direction:column;gap:3px}
.ezt b{font:500 22px/1.1 Adventor,sans-serif!important;color:var(--ufg)}
.ezt b small{font:400 13px Poppins,sans-serif;color:var(--usub)}
.ezt em{font-style:normal;font-size:13px;color:var(--umut);line-height:1.35}
.eopt.esz2.on{border-color:#B8975A!important;box-shadow:0 0 0 3px rgba(184,151,90,.18)!important}
.eopt.esz2.on .ezi{background:#B8975A;color:#16140F}
.eopt.esz2>u{background:#B8975A!important}
@media(min-width:900px){.erow.ez5{grid-template-columns:repeat(5,1fr)!important}.erow.ez4{grid-template-columns:repeat(4,1fr)!important}}
@media(max-width:899px){
	.erow.ez5,.erow.ez4{grid-template-columns:1fr!important;gap:8px}
	.eopt.esz2{display:grid;grid-template-columns:44px 1fr 24px;align-items:center;gap:14px;padding:12px 14px}
	.ezt b{font-size:19px!important}
	.eopt.esz2>u{position:static;opacity:1;transform:none;background:transparent!important;border:1.5px solid var(--ul);width:24px;height:24px}
	.eopt.esz2>u svg{opacity:0}
	.eopt.esz2.on>u{background:#B8975A!important;border-color:#B8975A}
	.eopt.esz2.on>u svg{opacity:1}
}

/* step 3: the extras, in the same family */
.eopt.echip.exi{border-radius:99px}
.eopt.echip.exi.on{border-color:#B8975A!important;box-shadow:0 0 0 3px rgba(184,151,90,.18)!important;background:rgba(184,151,90,.08)!important}
.eopt.echip.exi.on .phi{color:var(--gt,#8A6D3B)!important}

/* step 4: fields with icons; 16px+ text so phones do not zoom in */
.eform.ef2 label>span:first-child{font-size:13px;color:var(--usub)}
.eff{display:flex;align-items:center;gap:10px;border:1.5px solid var(--ul);border-radius:14px;padding:0 6px 0 14px;background:var(--uc);transition:border-color .2s,box-shadow .2s}
.eff:focus-within{border-color:#B8975A;box-shadow:0 0 0 4px rgba(184,151,90,.18)}
.eff>i{display:grid;place-items:center;flex:none;color:var(--gt,#8A6D3B);font-style:normal}
.eff>i .phi{width:19px;height:19px}
#site #view .eform.ef2 .eff input{flex:1;min-width:0;border:0!important;box-shadow:none!important;background:transparent;padding:14px 4px;font:400 16px Poppins,sans-serif!important;outline:0}

/* the footer: Continue reads "not yet" until the step is answered, then invites */
#site .efoot .btn.dis{opacity:1!important;background:transparent!important;color:var(--umut)!important;border:1.5px solid var(--ul)!important;box-shadow:none!important}
#site .efoot .btn:not(.dis) s{display:inline-block;animation:enxs 1.6s ease-in-out infinite}
@keyframes enxs{0%,100%{transform:none}50%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){#site .efoot .btn:not(.dis) s{animation:none}}
/* the unit under the number, so every size card reads the same */
.ezt b small{display:block;margin-top:2px}
@media(max-width:899px){
	.ezt b small{display:inline;margin:0}
	.eopt.esz2{padding:10px 12px;gap:12px;grid-template-columns:40px 1fr 22px}
	.ezi{width:40px;height:40px;border-radius:11px}
	.eopt.esz2>u{width:22px;height:22px}
}
/* step 4 is one column on a phone (an older rule forced two, which ran off the screen) */
@media(max-width:899px){.eform.ef2{grid-template-columns:1fr!important}}
.eform.ef2 label{min-width:0}
/* the box around the field shows focus; the field inside does not draw a second ring */
.eff input:focus,.eff input:focus-visible,.ebiz input:focus,.ebiz input:focus-visible{outline:none!important;box-shadow:none!important}

/* The menu button is the three-line icon, not the word (owner, 11 Oct). The word stays for screen
   readers (font-size 0 keeps it as the button's name). */
#site .burger{position:relative;width:44px;height:44px;padding:0!important;font-size:0!important;letter-spacing:0!important;border:0;background:none;color:var(--gt,#8A6D3B);cursor:pointer}
#site .burger::before{content:"";position:absolute;left:10px;right:10px;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:currentColor;box-shadow:0 -7px 0 currentColor,0 7px 0 currentColor}
:root[data-theme=dark] #site .burger{color:var(--ufg,#F4EFE6)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) #site .burger{color:var(--ufg,#F4EFE6)}}

/* No business numbers in the header or its list of businesses (owner, 11 Oct): the name alone. */
html body #site .nav .wsw::before{content:none!important;display:none!important}

/* the businesses list: an icon tile in each business's colour, then the name */
#site .wrow{grid-template-columns:40px minmax(0,1fr) auto 24px!important;align-items:center!important}
#site .wrow em.wic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#fff;
	background:linear-gradient(140deg,var(--c),color-mix(in srgb,var(--c) 70%,#000));box-shadow:0 10px 22px -12px var(--c)}
#site .wrow em.wic .phi{width:21px;height:21px}
@media(max-width:899px){#site .wrow{grid-template-columns:36px minmax(0,1fr) auto!important;gap:14px!important}#site .wrow em.wic{width:36px;height:36px;border-radius:11px}#site .wrow em.wic .phi{width:19px;height:19px}}
#site .wrow em.wic::before,#site .wrow em.wic::after{display:none!important;content:none!important}
@media(max-width:899px){#site .wrow b{font-size:clamp(20px,6vw,24px)!important}}
/* all six in the brand gold (owner, 11 Oct: "the same colour ... prestigious"): a gold tile, a dark icon */
#site .wrow em.wic{background:linear-gradient(140deg,#D4B074,#B8975A 55%,#8A6D3B)!important;color:#16140F!important;box-shadow:0 10px 22px -12px rgba(184,151,90,.75),inset 0 1px 0 rgba(255,255,255,.35)!important}
/* on a phone the name has the row (the tagline is not shown there) */
@media(max-width:899px){#site .wrow{grid-template-columns:36px minmax(0,1fr)!important}#site .wrow span,#site .wrow i{display:none!important}}

/* ===== "How the group works": three cards, each with its own small scene (owner, 11 Oct) ===== */
.l2-work .gw{position:relative;display:flex;flex-direction:column;padding:12px 12px 26px!important;border-radius:22px!important;overflow:hidden;
	background:radial-gradient(420px 220px at 0 0,rgba(184,151,90,.14),transparent 70%),var(--card2)!important;
	border:1px solid color-mix(in srgb,#B8975A 32%,transparent)!important;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.l2-work .gw:hover{transform:translateY(-6px);box-shadow:0 34px 60px -36px rgba(120,90,30,.55)}
.l2-work .gw>b{margin:22px 16px 10px!important}
.l2-work .gw>p{margin:0 16px!important}
/* the stage: ink, with gold, in both themes */
.l2-cards.l2-work .lw-v{position:relative;height:168px;padding:0;border-radius:16px;overflow:hidden;
	background:radial-gradient(260px 140px at 50% 110%,rgba(184,151,90,.28),transparent 70%),linear-gradient(160deg,#1C1A15,#0E0D0B);
	border:1px solid rgba(184,151,90,.22)}
.lw-v::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(212,176,116,.10) 1px,transparent 1px);background-size:14px 14px;mask-image:radial-gradient(70% 80% at 50% 50%,#000,transparent)}

/* 1 - the team: three figures, the three promises */
.lw-av{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);display:flex}
.lw-av i{position:relative;width:46px;height:46px;border-radius:50%;margin-left:-12px;border:2px solid #14120E;
	background:radial-gradient(circle at 50% 36%,#2A2620 0 9px,transparent 10px),radial-gradient(circle at 50% 108%,#2A2620 0 17px,transparent 18px),linear-gradient(150deg,#E2C58C,#B8975A 60%,#8A6D3B);
	box-shadow:0 8px 20px -8px rgba(0,0,0,.6);animation:lwbob 4s ease-in-out infinite}
/* the light lobby greys every .l2-cards i (with !important); the figures keep their gold */
html:root .l2-cards.l2-work .lw-av i{color:transparent!important;border-radius:50%!important;background:radial-gradient(circle at 50% 36%,#2A2620 0 9px,transparent 10px),radial-gradient(circle at 50% 108%,#2A2620 0 17px,transparent 18px),linear-gradient(150deg,#E2C58C,#B8975A 60%,#8A6D3B)!important}
.lw-av i:first-child{margin-left:0;animation-delay:.3s}
.lw-av i:nth-child(2){width:56px;height:56px;margin-top:-6px;z-index:1;animation-delay:0s}
.lw-av i:nth-child(3){animation-delay:.6s}
.lw-tags{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:6px;flex-wrap:wrap;padding:0 10px}
.lw-tags em{font:500 11px Poppins,sans-serif;font-style:normal;letter-spacing:.04em;color:#E9D7AE;padding:5px 10px;border-radius:99px;
	border:1px solid rgba(212,176,116,.35);background:rgba(212,176,116,.08);animation:lwtag 6s ease-in-out infinite}
.lw-tags em:nth-child(2){animation-delay:.5s}.lw-tags em:nth-child(3){animation-delay:1s}
@keyframes lwbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes lwtag{0%,100%{opacity:.75}40%{opacity:1;border-color:rgba(212,176,116,.7)}}

/* 2 - the core: six businesses, one system, light flowing in */
.lw-svg{position:absolute;inset:8px 0 0;width:100%;height:calc(100% - 8px)}
.lw-l{stroke:rgba(212,176,116,.25);stroke-width:1.2}
.lw-f{stroke:#E2C58C;stroke-width:2;stroke-linecap:round;stroke-dasharray:5 70;stroke-dashoffset:75;animation:lwflow 2.4s linear infinite}
.lw-n{fill:#14120E;stroke:#D4B074;stroke-width:2;animation:lwnode 2.4s ease-in-out infinite}
.lw-cg{fill:rgba(212,176,116,.14);animation:lwglow 2.4s ease-in-out infinite}
.lw-c{fill:url(#lwg);fill:#C9A766}
.lw-svg text{font:700 10px Poppins,sans-serif;letter-spacing:.08em;fill:#14120E}
@keyframes lwflow{to{stroke-dashoffset:0}}
@keyframes lwnode{0%,100%{fill:#14120E}20%{fill:#B8975A}}
@keyframes lwglow{0%,100%{r:28;opacity:.6}50%{r:34;opacity:1}}

/* 3 - here: Nairobi, pulsing out */
.lw-pin{position:absolute;left:50%;top:44%;width:26px;height:26px;margin:-26px 0 0 -13px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
	background:linear-gradient(150deg,#E2C58C,#B8975A 60%,#8A6D3B);box-shadow:0 10px 22px -8px rgba(0,0,0,.7)}
.lw-pin::after{content:"";position:absolute;inset:8px;border-radius:50%;background:#14120E}
.lw-ring{position:absolute;left:50%;top:44%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:1.5px solid rgba(212,176,116,.7);animation:lwring 3s ease-out infinite}
.lw-ring.r2{animation-delay:1s}.lw-ring.r3{animation-delay:2s}
.lw-here small{position:absolute;left:0;right:0;bottom:16px;text-align:center;font:500 11px Poppins,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#D9BE85}
/* 3 - Africa: a dotted continent, clients across it, linked to one team (owner, 11 Oct: not "from Nairobi") */
.lw-afr{inset:6px 0 4px;height:calc(100% - 10px)}
.lw-afr .lw-dots{fill:url(#lwdots)}
.lw-afr pattern circle{fill:rgba(212,176,116,.42)}
.lw-afr .lw-edge{fill:rgba(212,176,116,.05);stroke:rgba(212,176,116,.35);stroke-width:.8;stroke-linejoin:round}
.lw-afr .lw-af{stroke-width:1.4;stroke-dasharray:4 90;stroke-dashoffset:94;animation-duration:3.6s}
.lw-afr .lw-pt{fill:#E2C58C;stroke:#14120E;stroke-width:1}
.lw-afr .lw-pr{fill:none;stroke:#D4B074;stroke-width:1;transform-box:fill-box;transform-origin:center;animation:lwping 4.4s ease-out infinite}
@keyframes lwping{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(4.2);opacity:0}}
@keyframes lwring{from{transform:scale(1);opacity:.9}to{transform:scale(7);opacity:0}}

@media (prefers-reduced-motion:reduce){.lw-av i,.lw-tags em,.lw-f,.lw-n,.lw-cg,.lw-ring,.lw-pr{animation:none!important}.lw-f{stroke-dashoffset:0;stroke-dasharray:none;opacity:.5}.lw-ring{transform:scale(3);opacity:.35}}

/* ===== The module layers on Business Systems ("Every module. One ledger.") in light theme (owner, 11 Oct:
   "not that well visible as you're expanding", then "why does it look more white than glass?"). The design
   draws each layer as dark smoked glass in both themes; on cream, stacked dark sheets turn muddy grey. In
   light theme each layer is clear glass: almost no fill, a faint tint of its module's colour, light on its
   top edge and in a diagonal sheen, and a thicker coloured bottom edge. */
:root[data-theme=light] #site .pl.chip{background:linear-gradient(118deg,transparent 30%,rgba(255,255,255,.55) 41%,rgba(255,255,255,0) 50%),linear-gradient(150deg,rgba(255,255,255,.30),rgba(255,255,255,.06) 55%,color-mix(in srgb,var(--c) 10%,transparent))!important;border:1px solid color-mix(in srgb,var(--c) 38%,rgba(255,255,255,.9))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 1px 0 0 rgba(255,255,255,.6),inset 0 -2px 0 color-mix(in srgb,var(--c) 28%,transparent),0 24px 40px -30px rgba(60,45,20,.38)!important}
:root[data-theme=light] #site .pl.chip span{color:color-mix(in srgb,var(--c) 72%,#000)!important}
:root[data-theme=light] #site .pl.chip .pli{filter:drop-shadow(0 6px 10px color-mix(in srgb,var(--c) 38%,transparent))}
@media (prefers-color-scheme:light){
html:root:not([data-theme=dark]) #site .pl.chip{background:linear-gradient(118deg,transparent 30%,rgba(255,255,255,.55) 41%,rgba(255,255,255,0) 50%),linear-gradient(150deg,rgba(255,255,255,.30),rgba(255,255,255,.06) 55%,color-mix(in srgb,var(--c) 10%,transparent))!important;border:1px solid color-mix(in srgb,var(--c) 38%,rgba(255,255,255,.9))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 1px 0 0 rgba(255,255,255,.6),inset 0 -2px 0 color-mix(in srgb,var(--c) 28%,transparent),0 24px 40px -30px rgba(60,45,20,.38)!important}
html:root:not([data-theme=dark]) #site .pl.chip span{color:color-mix(in srgb,var(--c) 72%,#000)!important}
html:root:not([data-theme=dark]) #site .pl.chip .pli{filter:drop-shadow(0 6px 10px color-mix(in srgb,var(--c) 38%,transparent))}
}
/* No blur behind the layers: a backdrop blur on layers tilted in 3D and moving with the scroll flickers and
   smears in browsers (owner, 11 Oct: "the glasses are glitching"). The glass reads from its tint, edges and sheen. */

/* ===== The brochure being made, then landing (owner, 11 Oct: "a premium, cool animation while waiting
   for the brochure ... and you can download it from the site itself"). A dark cover with a gold spine and
   their name; pages fly in and tuck under it while it is made; when it is ready the book lands, light
   sweeps the cover and the download appears. */
.az-bw{display:flex;align-items:center;gap:24px;margin-top:4px;padding:20px 22px;border-radius:18px;
	border:1px solid color-mix(in srgb,#B8975A 35%,transparent);background:radial-gradient(320px 170px at 0 50%,rgba(184,151,90,.13),transparent 70%)}
.az-book{position:relative;flex:none;width:150px;height:150px}
.az-cover{position:absolute;left:0;top:0;z-index:2;display:flex;flex-direction:column;gap:3px;width:112px;height:150px;padding:13px 11px 12px 12px;overflow:hidden;
	border-radius:4px 10px 10px 4px;border-left:5px solid #B8975A;color:#F3EBDD;
	background:radial-gradient(120px 90px at 75% 0,rgba(212,176,116,.34),transparent 70%),linear-gradient(160deg,#27231B,#0E0D0B);
	box-shadow:0 20px 32px -18px rgba(0,0,0,.65),inset 0 0 0 1px rgba(212,176,116,.22)}
.az-cover img{width:22px;height:auto;margin-bottom:auto}
.az-cover small{font:500 7px/1.2 Poppins,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#D4B074}
.az-cover b{font:400 13px/1.15 Adventor,Poppins,sans-serif;color:#FBF8F2;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.az-cover em{font:400 8px/1.3 Poppins,sans-serif;font-style:normal;color:rgba(243,235,221,.72)}
.az-cover i{position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,238,200,.26) 50%,transparent 65%);transform:translateX(-120%);animation:azsweep 3.4s ease-in-out infinite}
.az-pg{position:absolute;left:6px;top:5px;width:108px;height:140px;border-radius:3px 9px 9px 3px;
	background:linear-gradient(90deg,#E9E1CF,#FBF8F2 30%);border:1px solid rgba(20,18,14,.10);box-shadow:0 6px 14px -10px rgba(0,0,0,.5);
	transform-origin:left center;animation:azpage 2.7s cubic-bezier(.55,.05,.3,1) infinite}
.az-pg::before,.az-pg::after{content:"";position:absolute;left:14px;right:16px;height:3px;border-radius:2px;background:rgba(184,151,90,.45)}
.az-pg::before{top:22px;box-shadow:0 10px 0 rgba(20,18,14,.12),0 18px 0 rgba(20,18,14,.12),0 26px 0 rgba(20,18,14,.12)}
.az-pg::after{top:70px;right:40px;box-shadow:0 10px 0 rgba(20,18,14,.12),0 18px 0 rgba(20,18,14,.12)}
.az-pg:nth-child(2){animation-delay:.9s}.az-pg:nth-child(3){animation-delay:1.8s}
@keyframes azpage{0%{transform:translateX(44px) rotateY(-55deg) rotateZ(6deg);opacity:0}18%{opacity:1}
	62%,100%{transform:translateX(2px) rotateY(0) rotateZ(0);opacity:1}}
@keyframes azsweep{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.az-bwt{display:flex;flex:1;flex-direction:column;gap:8px;min-width:0}
.az-bwt b{font:500 16px/1.3 Poppins,sans-serif}
.az-bwt small{font-size:13px;line-height:1.5;color:var(--l-sub,var(--usub,#5C5850))}
.az-bwt .az-bar{margin:2px 0 4px}
/* stopped: the pages rest under the cover, their edges showing */
.az-bw-later .az-pg,.az-bw-done .az-pg{animation:none;opacity:1}
.az-bw-later .az-pg:nth-child(1),.az-bw-done .az-pg:nth-child(1){transform:translateX(8px)}
.az-bw-later .az-pg:nth-child(2),.az-bw-done .az-pg:nth-child(2){transform:translateX(5px)}
.az-bw-later .az-pg:nth-child(3),.az-bw-done .az-pg:nth-child(3){transform:translateX(2px)}
.az-bw-later .az-cover i{animation:none}
/* ready: the book lands, light crosses the cover once, a gold ring opens behind it */
.az-bw-done .az-book{animation:azland .8s cubic-bezier(.2,.9,.25,1.15) both}
.az-bw-done .az-book::before{content:"";position:absolute;left:56px;top:75px;width:10px;height:10px;margin:-5px;border-radius:50%;
	border:1.5px solid #D4B074;animation:azring 1.1s .25s ease-out both;pointer-events:none}
.az-bw-done .az-cover i{animation:azsweep 1.6s .35s ease-in-out 1 both}
.az-bw-done .az-bwt>*,.az-bw-later .az-bwt>*{animation:azst .6s cubic-bezier(.2,.8,.2,1) both}
.az-bw-done .az-bwt>*:nth-child(2){animation-delay:.1s}.az-bw-done .az-bwt>*:nth-child(3){animation-delay:.22s}
@keyframes azland{0%{transform:translateY(-14px) rotate(-5deg) scale(.96)}60%{transform:translateY(3px) rotate(1deg) scale(1.01)}100%{transform:none}}
@keyframes azring{from{transform:scale(1);opacity:.9}to{transform:scale(16);opacity:0}}
.az-dl{display:inline-flex;align-items:center;align-self:flex-start;gap:10px;margin-top:6px;padding:13px 20px;border-radius:12px;
	background:linear-gradient(140deg,#D4B074,#B8975A 55%,#9A7B45);color:#16140F!important;font:500 14px Poppins,sans-serif;text-decoration:none!important;
	box-shadow:0 14px 26px -16px rgba(140,105,40,.85);transition:transform .25s,box-shadow .25s}
.az-dl svg{width:18px;height:18px}
.az-dl:hover{transform:translateY(-2px);box-shadow:0 18px 30px -16px rgba(140,105,40,.95)}
.az-dl:focus-visible{outline:2px solid #B8975A;outline-offset:3px}
@media (max-width:560px){.az-bw{flex-direction:column;gap:16px;text-align:center}.az-bwt{align-items:center}.az-dl{align-self:center}.az-book{margin-left:38px}}
@media (prefers-reduced-motion:reduce){.az-pg,.az-cover i,.az-bw-done .az-book,.az-bw-done .az-book::before,.az-bw-done .az-cover i{animation:none!important}
	.az-pg{opacity:1;transform:translateX(4px)}}
/* the site keeps small text at 12px or more; the cover is a picture (aria-hidden), drawn to its own scale */
#site .az-book .az-cover small{font-size:7px!important;line-height:1.2!important;letter-spacing:.18em!important}
#site .az-book .az-cover b{font-size:13px!important;line-height:1.15!important}
#site .az-book .az-cover em{font-size:8px!important;line-height:1.3!important}
.az-bwt .az-bar{align-self:stretch}

/* ===== The ع as a supergraphic (owner, 11 Oct, from the Brand Guidelines p. 28: "used large and cropped ...
   a signature like a luxury monogram"). The complete icon (brand kit's AzzirGroup_Icon, as a mask), never
   rotated, mirrored or outlined, bleeding off the right edge, never through words:
   - every page's closing dark card: gold on black where the words are centred (Business Systems), a faint gold
     where buttons sit on the right (all the others) - the full gold would run through them;
   - not the lobby's closing card: its words run right across it, and the lobby's own shape is the ع;
   - the footer: a faint watermark in the bottom-right corner (10-16% gold, as the book sets for cream). */
.ucb,.rx-cta .rx-wrap,.io-ctg,.en-cb,.au-ctg,.ai-cb,.gcta,.cband>.wrap,footer{position:relative;overflow:hidden;isolation:isolate}
.ucb::after,.rx-cta .rx-wrap::after,.io-ctg::after,.en-cb::after,.au-ctg::after,.ai-cb::after,.gcta::after,.cband>.wrap::after,footer::after{
	content:"";position:absolute;z-index:-1;pointer-events:none;aspect-ratio:900/1509;
	-webkit-mask:url(brand/ain-mask.png) no-repeat center/contain;mask:url(brand/ain-mask.png) no-repeat center/contain}
/* the closing cards: faint, the icon's body and curl across the right of the card */
.ucb::after,.rx-cta .rx-wrap::after,.io-ctg::after,.en-cb::after,.au-ctg::after,.ai-cb::after,.gcta::after{
	height:260%;right:-4%;top:-70%;background:rgba(184,151,90,.16)}
.rx-cta .rx-wrap::after{height:210%;top:-55%}
/* Business Systems' card has its words in the middle: the full gold, as on the LinkedIn banner */
.cband>.wrap::after{height:200%;right:-7%;top:-48%;background:#A98A52}
/* the footer: a watermark in the corner */
footer::after{height:min(130%,560px);right:-9%;top:12%;background:rgba(184,151,90,.16)}
:root[data-theme=dark] footer::after{background:rgba(184,151,90,.10)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) footer::after{background:rgba(184,151,90,.10)}}
/* on a phone the words fill the card: always the faint one, smaller, in the corner */
@media (max-width:899px){
	.ucb::after,.rx-cta .rx-wrap::after,.io-ctg::after,.en-cb::after,.au-ctg::after,.ai-cb::after,.gcta::after,.cband>.wrap::after{
		height:min(120%,440px);right:-22%;top:auto;bottom:-18%;background:rgba(184,151,90,.14)}
	footer::after{height:360px;right:-30%;top:auto;bottom:-40px}
}
/* calmer (owner, 11 Oct: the gold tiles were "too loud ... return the gold, a bit subtle, don't colour the icon"):
   the icon itself in gold line, on no tile but a hairline ring; the row you are on, or point at, lights its ring */
#site .wrow em.wic{background:transparent!important;color:#C9A766!important;box-shadow:none!important;border:1px solid rgba(184,151,90,.30)}
#site .wrow.on em.wic,#site .wrow:hover em.wic,#site .wrow:focus-visible em.wic{border-color:rgba(201,167,102,.85);background:rgba(184,151,90,.10)!important}
/* the home page's closing floor heading is an h2 now (one h1 a page): drawn as the h1 was */
.st.c h2{font-family:Adventor;font-weight:400;font-size:clamp(30px,4.6vw,74px);line-height:1;letter-spacing:-.025em;margin:0;color:inherit}
.st.c h2 em{font-style:normal;color:var(--gt)}
@media(max-width:899px){.st.c h2{font-size:35px}}
.st p.h1{margin:0}

/* Forms (forms.js, go-live audit): the consent tick box, the error line under a form, and the estimate's hint when
   it says what is missing. Not .az-consent - that is the cookie choice. */
.az-agree{display:flex;align-items:flex-start;gap:10px;margin:14px 0 4px;font:400 13px/1.55 Poppins,system-ui,sans-serif;color:var(--umut,inherit);cursor:pointer;text-align:left}
.az-agree input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:#B8975A;cursor:pointer}
.az-agree a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.az-err{margin:10px 0 0;font:500 13px/1.5 Poppins,system-ui,sans-serif;color:#E0675C}
.az-err[hidden]{display:none}
:root[data-theme=light] .az-err{color:#B0362C}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]) .az-err{color:#B0362C}}
#ehint.az-bad{color:#E0675C}
:root[data-theme=light] #ehint.az-bad{color:#B0362C}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]) #ehint.az-bad{color:#B0362C}}

/* ---- Accessibility and visual audit, 11 Oct evening (light is the default theme now) ---- */
/* IoT "The right person hears first": the alert cards are white in light theme, their text was cream (1.16:1). */
:root[data-theme=light] #site[data-w=iot] .io-n b{color:#16140F}
:root[data-theme=light] #site[data-w=iot] .io-n p{color:#5C5850}
:root[data-theme=light] #site[data-w=iot] .io-n small{color:#6B665D}
@media (prefers-color-scheme:light){
 :root:not([data-theme=dark]) #site[data-w=iot] .io-n b{color:#16140F}
 :root:not([data-theme=dark]) #site[data-w=iot] .io-n p{color:#5C5850}
 :root:not([data-theme=dark]) #site[data-w=iot] .io-n small{color:#6B665D}}
/* IoT module chips: readable on the light and the dark (selected) card alike. */
#site[data-w=iot] .io-ms em{color:#E8E1D3;background:rgba(242,237,226,.12)}
:root[data-theme=light] #site[data-w=iot] .io-ms em{color:#4F4B44;background:rgba(22,20,15,.07)}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]) #site[data-w=iot] .io-ms em{color:#4F4B44;background:rgba(22,20,15,.07)}}
/* The header's main button was underlined by Builder's reset (builder-revert.css .__text_block__ a). */
#navbtn a,#navbtn a:hover{text-decoration:none!important}
/* The lobby's floor controls fade out when the page below is released: hidden from the keyboard too. */
html.lobby.lmore #hall :is(.cue,.lift,.skipf,.edge,#cue,#skipf,.st .act){visibility:hidden!important;transition:opacity .3s,visibility 0s .3s}
/* Focus ring: the brand gold is 2.5:1 on cream; the deeper gold is 5.6:1. Dark keeps the gold (6.7:1). */
:root[data-theme=light] :focus-visible{outline-color:#7A5C26!important}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]) :focus-visible{outline-color:#7A5C26!important}}
/* Dark theme: the header let page text show through behind its links. */
:root[data-theme=dark] #site .nav{background:color-mix(in srgb,var(--bg) 92%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) #site .nav{background:color-mix(in srgb,var(--bg) 92%,transparent)}}
/* Phones: the industry dashboard's labels were cut off ("PRESCRIPTIO"), the announcement bar ran off the side at 320.
   Only the bar: written as ".hasann *" (the class is on #site) it squeezed every element on every page - the
   integrations band's words to zero width, the desk's icons, the module layers and the sale ring (owner, 12 Oct). */
@media (max-width:420px){
 .xtile .lab{letter-spacing:.04em;white-space:normal;overflow-wrap:anywhere;line-height:1.35}
 .annbar *{min-width:0;max-width:100%;overflow-wrap:anywhere}}
/* Small text that fell under 4.5:1. */
:root[data-theme=light] .l2-facts small{color:#5F5A52}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]) .l2-facts small{color:#5F5A52}}
:root[data-theme=dark] .eszb i{color:#9E978A}
:root[data-theme=dark] #esum button[data-ed]{color:#3FBF8F}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .eszb i{color:#9E978A}:root:not([data-theme=light]) #esum button[data-ed]{color:#3FBF8F}}
.rxc-t{color:#8F887B}
.rx-crumb a{text-decoration:underline;text-underline-offset:3px}
/* Tap targets of at least 24px on phones (WCAG 2.5.8). */
.xscene button.xtag{min-height:24px}
.lfl a{display:inline-flex;align-items:center;min-height:24px}
/* The quote card on Business Systems is dark in both themes: its client logo sits on a white tile (in light theme the
   design multiplied it into the dark card, and the logo disappeared). */
#site .qwho img{mix-blend-mode:normal!important;background:#fff!important;border-radius:8px!important;padding:4px!important}

/* Demo films (films.py): poster cards with a play button; the film plays in place. */
.azf-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.azf-g.azf-one{grid-template-columns:minmax(0,880px)}
.azf{display:flex;flex-direction:column;gap:6px;color:var(--ufg,inherit);text-decoration:none;cursor:pointer}
.azf-p{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#15130F;border:1px solid var(--ul,rgba(0,0,0,.08));box-shadow:0 1px 2px rgba(40,30,10,.05),0 22px 44px -30px rgba(60,45,20,.35)}
.azf-p img,.azf-p video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000}
.azf-p i{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(21,19,15,.72);border:1px solid rgba(243,239,230,.35);display:grid;place-items:center;transition:transform .3s,background .3s}
.azf-p i svg{width:24px;height:24px;fill:#F3EFE6;margin-left:3px}
.azf:hover .azf-p i,.azf:focus-visible .azf-p i{transform:scale(1.08);background:#B8975A}
.azf-p em{position:absolute;right:10px;bottom:10px;font:500 11px/1 Poppins,system-ui,sans-serif;font-style:normal;color:#F3EFE6;background:rgba(21,19,15,.72);padding:5px 8px;border-radius:999px}
.azf b{font:500 15.5px/1.3 Poppins,system-ui,sans-serif;margin-top:6px}
.azf>span:last-child{font-size:13.5px;line-height:1.45;color:var(--usub,var(--sub))}
.azf-big .azf-p i{width:76px;height:76px;margin:-38px 0 0 -38px}
.azf-all{margin:22px 0 0;font-size:14px}
.azf-all a{color:var(--gt,#86672F);text-underline-offset:4px}
/* Client logos in full colour, always (owner, 11 Oct: "I want them to be colored"); the quoted client keeps its gold
   underline. */
#site .bw img{filter:none!important;opacity:1!important}
/* Smooth on phones (owner, 12 Oct). The pinned scenes are the height of the screen you can see (svh): 100vh is
   the screen without the address bar, so the scene ran under it. The glass layers follow the scroll every frame,
   so a transition on them only lagged and stuttered. The desk's icons move by transform, not left/top (the
   distance comes from s7.js as --dx/--dy), and their float stops on phones. */
@supports (height:100svh){
 #site .pin,#site .stkin{height:calc(100svh - 68px)}
 @media(max-width:899px){#site .pin,#site .stkin{height:calc(100svh - 60px)}#site .stkin .stk-wrap{height:46svh}}}
#site .pl{transition:none!important;will-change:transform}
#site .desk.hc .dapp{left:var(--x);top:var(--y);transition:transform 1.1s var(--e-out),opacity .6s;transition-delay:calc(var(--i)*28ms);will-change:transform}
#site .desk.hc.scat .dapp{left:var(--x);top:var(--y);transform:translate(var(--dx,0px),var(--dy,0px)) translateZ(var(--sz)) rotate(var(--sr)) scale(1.25)}
#site .desk.hc.scat .dapp img{animation-name:hcfloat2}
@keyframes hcfloat2{from{translate:0 0}to{translate:0 -1.4cqw}}
@media(max-width:899px){#site .desk.hc.scat .dapp img{animation:none}}
@media(max-width:899px){#site #rstep{min-height:100px}}
/* The estimate summary: a long email address ran past its box at 320 px. */
#site .sum dd{overflow-wrap:anywhere;min-width:0}
/* FAQs (owner's phone test, 12 Oct). Every question gets a coloured square at the left and a "+" at the right
   (site.css). The "+" had no room, so a two-line question ran under it; the How-it-works FAQs (.lfaq) draw
   their own toggle and had no room for the square either - it covered the first letter and the "+" doubled. */
#site #view details>summary{padding-right:40px!important}
#site .lfaq summary::before,#site .lfaq summary::after{display:none!important;content:none!important}
/* Industry hero on phones: the cards' small line chart ran through their last line of text, and the scene's dark
   "Live" badge (top left) sat on the first white label. The chart gets its own strip; the badge goes bottom left. */
@media(max-width:700px){
 #site .xtile:has(>.xspark){padding-bottom:44px}
 #site .xtile>.xspark{height:38px}
 #site .xtile .xtl{top:auto;bottom:10px}}
/* The "Request / Work done / Approved" drawing is three lines (about 57 px) in a 46 px box: the last line sat on
   the card's title (robotics cards). The box grows to fit. */
#site .gv.gv-steps{height:auto;min-height:46px}
/* The dark accent cards (one per grid, site.css) kept the drawings' dark text: "Request / Work done / Approved"
   was near-black on near-black (Point of Sale, Projects). */
html #site #view :is(section.brands .qst,.io-ph,.au-gauge,.ucard.urep,.en-grid>a:nth-child(1),.rx6why>:nth-child(2),.ugrid>.ucard.ufe:nth-child(1),.io-dv>a:nth-child(3)) .gv{color:#E9E2D4}
html #site #view :is(section.brands .qst,.io-ph,.au-gauge,.ucard.urep,.en-grid>a:nth-child(1),.rx6why>:nth-child(2),.ugrid>.ucard.ufe:nth-child(1),.io-dv>a:nth-child(3)) .gv span{color:#E9E2D4;opacity:.9}
/* Industry hero on phones, continued: the cards' labels were 16 px with wide spacing in a 167 px card, so long
   words broke mid-word ("PRESCRIPTI / ONS"); the scene's floating labels near an edge ran out of the card. */
@media(max-width:700px){
 #site .xtile:has(>.xspark) .lab{font-size:11px!important;letter-spacing:.1em!important;overflow-wrap:normal!important;word-break:normal!important;line-height:1.35}
 #site .xscene .xtag{left:clamp(26%,var(--x),74%);max-width:50%;white-space:normal;text-align:left;line-height:1.25}}
/* Closing cards. The gold button's arrow was taken out of the button and floated at the card's edge. On the AI and
   Industrial Automation closing cards the main button was near-black on the dark card and both buttons sat to the
   right; they are gold and start at the left, like every other closing card. */
#site .ucta .btn s,#site .lctas .lb s{position:static!important;display:inline-block;margin-left:10px;transform:none;color:inherit;opacity:.85}
#site #view :is(.ai-cb,.au-cta) .lctas{justify-content:flex-start!important;flex-wrap:wrap}
html #site #view :is(.ai-cb,.au-cta) .lb:not(.ln):not(#v3):not(#zz),html #site #view :is(.ai-cb,.au-cta) .lb:not(.ln):not(#v3):not(#zz) *{background:#C9A66A!important;color:#15130F!important;border-color:#C9A66A!important}
html #site #view :is(.ai-cb,.au-cta) .lb:not(.ln):not(#v3):not(#zz) *{background:transparent!important}
#site #view :is(.ai-cb,.au-cta) .lb.ln{color:#F3EFE6!important;border-color:rgba(243,239,230,.4)!important}
/* Smart Energy "Today" chart: the grid line took a gold fill from another rule and drew a wedge across the chart. */
#site .en-ch .en-ln{fill:none!important}
/* Small fixes from the 12 Oct phone review. */
#site .rx-view .rx-drag{right:auto;left:50%;transform:translateX(-50%);white-space:nowrap}
@media(max-width:700px){#site .rx4-radar span{font-size:8.5px;letter-spacing:.08em;left:16%;right:16%;line-height:1.5}}
#site .umgh>span{white-space:nowrap;flex:none}
#site aside.sum dl{grid-template-columns:auto 1fr;column-gap:18px}
#site .gfeat .gtag{color:#E8D3A6!important;background:rgba(201,166,106,.18)!important}
/* Legal pages: list items were 16 px beside 14.5 px paragraphs. The careers CV field: the browser's bare
   "Choose File" button, now a quiet outlined button like the rest of the form. Spec tables: "Engineered by" no
   longer leaves "by" alone on a line. */
#site .prose li{font-size:14.5px;line-height:1.6}
#site #view input[type=file]::file-selector-button{font:500 13px Poppins,sans-serif;color:var(--fg);background:transparent;border:1px solid var(--gold,#B8975A);border-radius:99px;padding:8px 16px;margin-right:12px;cursor:pointer}
@media(max-width:700px){#site #view table th{letter-spacing:.06em!important;white-space:nowrap}}