/* What every page shares: tokens, the header, the plot and the hairline cells. */
/* Registered so that the tour can read it in pixels. */
@property --low{syntax:"<length>";inherits:true;initial-value:72px}
:root{color-scheme:light;--edge:2vw;
  /* One design pixel. Up to a 1920 by 1000 window it is a plain pixel, so every size is exact. Past that, the type, the header and every
     limit grow with the screen, by whichever of its width and height has less room, so a large display looks like a larger laptop. */
  --up:max(1px,min(100vw/1920,100vh/1000));
  --bg:#fafaf7;--ink:#16201b;--ink-2:#4a544e;--muted:#6b746d;--line:#daddd4;
  --green:#0c9447;--deep:#1d6b38;--lime:#8cc641;--orange:#f15b2a;--amber:#faaf42;
  --ease-out:cubic-bezier(.165,.84,.44,1);--ease-draw:cubic-bezier(.65,0,.35,1);--ease-pop:cubic-bezier(.3,1.3,.6,1);--ease-ui:cubic-bezier(.4,0,.2,1);
  --float:0 1px 0 rgba(22,32,27,.08),0 10px 28px -14px rgba(22,32,27,.4);--sky:#4ab2e4;--deep-ink:#0a0f0c;--dusk:#10201A;--gut:clamp(16px,3.2vw,calc(48*var(--up)));--low:calc(72*var(--up))}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:has(dialog[open]){overflow:hidden}
main:focus{outline:0}
body{margin:0;background:var(--bg);color:var(--ink);font:400 calc(17*var(--up))/1.5 "Mona Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
picture{display:contents}
source{display:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
/* page to page: both documents must opt in, so this lives in the shared sheet */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.4s}
::view-transition-group(co-word){animation-duration:.55s;animation-timing-function:var(--ease-out)}
[data-fit]{display:block;white-space:nowrap;width:max-content;max-width:none}
img[data-logo="hami-international"]{--logo-scale:1.8}
.x-logoname{display:inline-grid;place-items:center;padding:.5em .8em;background:#fff;color:var(--ink);border-radius:10px;font-size:clamp(17px,1.5vw,calc(22*var(--up)));font-weight:800;font-stretch:112%;letter-spacing:-.02em;line-height:1.1;text-align:center}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* The 404 illustration. */
.sm-ill{display:block;width:100%;height:auto}
.sm-op{isolation:isolate}
.sm-ill :is(.drop,.rise){transform-box:fill-box;transform-origin:50% 100%}
.motion-ok .sm-ill.anim:not(.is-in) :is(.rise,.drop,.fade,.lit,.draw,.reg-o,.reg-g){opacity:0}
.motion-ok .sm-ill.anim.is-in .rise{animation:sm-rise var(--t,.6s) var(--ease-out) var(--d,0s) both}
.motion-ok .sm-ill.anim.is-in .drop{animation:sm-drop var(--t,.45s) var(--ease-out) var(--d,0s) both}
.motion-ok .sm-ill.anim.is-in :is(.fade,.lit){animation:sm-fade var(--t,.5s) linear var(--d,0s) both}
.motion-ok .sm-ill.anim.is-in .draw{stroke-dasharray:1 1;animation:sm-draw var(--t,.6s) var(--ease-draw) var(--d,0s) both}
.motion-ok .sm-ill.anim.is-in .nudge{animation:sm-nudge var(--t,.6s) var(--ease-draw) var(--d,0s) both}
.motion-ok .sm-ill.anim.is-in .reg-o{animation:sm-rego .9s var(--ease-out) .1s both}
.motion-ok .sm-ill.anim.is-in .reg-g{animation:sm-regg .9s var(--ease-out) .25s both}
/* work loops run forever, so they rest when nobody can see them, and the visitor can always stop them */
html.hold *,html.hold *::after,.sm-ill.idle *,.sm-ill.off *{animation-play-state:paused!important}
@keyframes sm-rise{from{opacity:0;transform:translateY(18px)}}
@keyframes sm-drop{from{opacity:0;transform:translateY(-40px)}}
@keyframes sm-fade{from{opacity:0}}
@keyframes sm-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes sm-nudge{0%,100%{transform:none}50%{transform:translateX(12px)}}
@keyframes sm-rego{from{opacity:0;transform:translate(18px,-12px)}}
@keyframes sm-regg{from{opacity:0;transform:translate(-18px,12px)}}

/* The group's logo, moved by logo.js: its two hands settle together. --logo is its width. */
.logo-live{position:relative;display:block;width:var(--logo)}
.logo-live>svg{display:block;width:100%;height:auto;overflow:visible}

/* Header. The logo has no box: free on the white page at the top of the homepage, then folded into a round white badge, which is
   what stays readable over the colour bands. The menu is its own bar at the other end. */
.x-skip{position:fixed;z-index:80;left:var(--gut);top:-70px;padding:12px 18px;background:var(--ink);color:#fff;border-radius:10px;font-weight:700;text-decoration:none;transition:top .2s var(--ease-ui)}
.x-skip:focus{top:12px}
.x-top{--logo:calc(136*var(--up));--tuck:.6;--tall:calc(var(--logo)*.5456);position:fixed;z-index:40;top:calc(14*var(--up));left:var(--gut);right:var(--gut);display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}
.x-top>*{pointer-events:auto}
.x-brand{position:relative;display:block;flex:none;width:var(--logo);height:var(--tall);transition:width .5s var(--ease-out),height .5s var(--ease-out)}
.x-top.tucked .x-brand{width:calc(50*var(--up));height:calc(50*var(--up))}
.x-top.tucked .x-brand.open{width:calc(var(--logo) + calc(40*var(--up)));height:calc(var(--tall) + calc(28*var(--up)))}
.x-disc{position:absolute;inset:0;border-radius:calc(25*var(--up));background:#fff;box-shadow:var(--float);opacity:0;scale:.4;transition:opacity .25s var(--ease-ui),scale .5s var(--ease-pop)}
.x-top.tucked .x-disc{opacity:1;scale:1}
/* The logo is stacked, with the hands above the name: the badge keeps only the hands, centred, so its origin is the logo's corner. */
.x-logo{position:absolute;left:0;top:0;transform-origin:0 0;transition:transform .5s var(--ease-out)}
.x-top.tucked .x-logo{transform:translate(calc(calc(25*var(--up)) - var(--logo)*var(--tuck)*.5),calc(calc(25*var(--up)) - var(--logo)*var(--tuck)*.1677)) scale(var(--tuck))}
.x-top.tucked .open .x-logo{transform:translate(calc(20*var(--up)),calc(14*var(--up)))}
.x-top.tucked .x-brand:not(.open) .x-logo:not(.live) :is(.logo-wordmark,.logo-wordmark-group,.logo-tagline){opacity:0}
.x-brand:focus-visible{outline-offset:4px;border-radius:25px}
.x-menu{display:flex;gap:2px;padding:calc(5*var(--up));background:#fff;border-radius:calc(14*var(--up));box-shadow:var(--float)}
.x-menu a{padding:calc(9*var(--up)) calc(14*var(--up));border-radius:calc(10*var(--up));font-size:calc(14*var(--up));font-weight:600;font-stretch:112%;text-decoration:none;transition:background .2s var(--ease-ui)}
.x-menu a:hover{background:var(--amber)}
.x-menu a[aria-current]{background:var(--ink);color:#fff}
.x-burger{display:none;align-items:center;gap:10px;min-height:50px;padding:0 16px;background:#fff;border-radius:14px;box-shadow:var(--float);font-size:calc(14*var(--up));font-weight:700;font-stretch:112%}
.x-burger i{position:relative;width:18px;height:2px;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}
/* Stacked: the model above the text. Phones, and tablets held upright, where a text column would leave the model no room. a.css repeats this query. */
@media (max-width:760px) and (min-height:521px),(max-width:1100px) and (max-aspect-ratio:7/8){:root{--low:20px;--stacked:1}}
@media (max-width:760px){:root{--edge:var(--gut)}}
@media (max-height:520px) and (min-width:560px){:root{--low:14px}}
@media (max-width:900px),(max-height:520px){.x-top{--logo:112px;--tuck:.72}.x-menu{display:none}.x-burger{display:inline-flex}}

/* phone menu: five full-width bands, one per page */
.x-sheet{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;padding:0;background:var(--bg);color:var(--ink);overflow:auto}
.x-sheet::backdrop{background:transparent}
.x-sheet-in{min-height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.x-sheet-top{display:flex;justify-content:space-between;align-items:center;padding:12px var(--gut)}
.x-sheet-top img{width:104px;height:auto}
.x-sheet-close{min-height:44px;padding:0 18px;border-radius:14px;background:var(--ink);color:#fff;font-size:calc(14*var(--up));font-weight:700;font-stretch:112%}
.x-sheet nav,.x-sheet ol{display:grid;height:100%}
.x-sheet ol{grid-auto-rows:minmax(84px,1fr)}
.x-sheet li{display:grid}
.x-sheet li:nth-child(1){background:var(--amber)}
.x-sheet li:nth-child(2){background:var(--orange)}
.x-sheet li:nth-child(3){background:var(--lime)}
.x-sheet li:nth-child(4){background:var(--sky)}
.x-sheet li:nth-child(5){background:var(--ink);color:#fff}
.x-sheet li a{display:flex;align-items:center;gap:.3em;padding:6px var(--gut);font-size:clamp(25px,7.6vw,calc(40*var(--up)));line-height:1;letter-spacing:-.025em;font-weight:800;font-stretch:125%;text-decoration:none}
.x-sheet li a[aria-current]::after{content:"";flex:none;width:.34em;height:.34em;margin-left:auto;border-radius:50%;background:currentColor}
.x-sheet :focus-visible{outline-offset:-6px}
.x-sheet li:nth-child(5) :focus-visible{outline-color:#fff}
.motion-ok .x-sheet[open] li{animation:x-band .55s var(--ease-out) both;animation-delay:calc(var(--i)*55ms)}
@keyframes x-band{from{transform:translateX(-101%)}}
/* Leaving mirrors arriving: the last band in goes first. */
.motion-ok .x-sheet.closing li{animation:x-band-out .36s var(--ease-draw) both;animation-delay:calc((4 - var(--i))*45ms)}
.motion-ok .x-sheet.closing :is(.x-sheet-top,.x-sheet-foot){opacity:0;transition:opacity .3s var(--ease-ui) .2s}
.motion-ok .x-sheet.closing{background:transparent;transition:background .25s var(--ease-ui) .3s}
@keyframes x-band-out{to{transform:translateX(-101%)}}
.x-sheet-foot{display:flex;flex-wrap:wrap;gap:6px 22px;padding:14px var(--gut);font-size:calc(15*var(--up));font-weight:600}
.x-sheet-foot a{text-decoration:none}

.x-chips{display:flex;flex-wrap:wrap;gap:calc(6*var(--up))}
.x-chips li{padding:calc(4*var(--up)) calc(10*var(--up));border-radius:calc(99*var(--up));background:#eef0ea;font-size:calc(13*var(--up));font-weight:550;line-height:1.5}
.x-status{display:inline-block;padding:calc(5*var(--up)) calc(11*var(--up));border-radius:calc(6*var(--up));background:var(--ink);color:#fff;font-size:calc(12*var(--up));font-weight:700;font-stretch:108%;letter-spacing:.01em;line-height:1.3}
.a-info .x-status{color:#fff;font-size:calc(12*var(--up));line-height:1.3}
/* the same colours as before, deep enough for small type on these sections */
.x-spectrum{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));height:10px}
.x-spectrum i{background:var(--band)}
.x-go{position:absolute;right:clamp(10px,1.1vw,calc(18*var(--up)));top:clamp(10px,1.1vw,calc(18*var(--up)));width:clamp(26px,2.3vw,calc(34*var(--up)));aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:var(--fill,var(--band));color:var(--on,#fff);rotate:-45deg;transition:rotate .4s var(--ease-out),scale .3s var(--ease-out),background .3s var(--ease-ui),color .3s var(--ease-ui)}
.x-go svg{width:58%;height:58%}
a:is(:hover,:focus-visible)>.x-go{rotate:0deg;scale:1.1}
/* A sheet of cells parted by hairlines, never by gaps. A cell rests white; pointing at it floods it with its colour from below and wakes its arrow. */
.x-lines{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
.x-cell{--wash:color-mix(in oklch,var(--stage,#fff),var(--stage-word,#fff) 18%);position:relative;overflow:hidden;background:#fff;color:var(--ink);text-decoration:none;isolation:isolate}
.x-cell::before{content:"";position:absolute;z-index:-1;inset:0;background:var(--wash);translate:0 101%;transition:translate .5s var(--ease-out)}
.x-cell:is(:hover,:focus-visible,.on)::before{translate:0}
.x-cell .x-go{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.x-cell:is(:hover,:focus-visible,.on) .x-go{background:var(--fill,var(--band));color:var(--on,#fff);box-shadow:none}
.x-cell:focus-visible{outline-offset:-3px}
.x-hold{position:absolute;z-index:9;right:clamp(calc(14*var(--up)),1.6vw,calc(24*var(--up)));bottom:clamp(calc(14*var(--up)),1.6vw,calc(24*var(--up)));min-height:calc(40*var(--up));padding:0 calc(16*var(--up));border-radius:calc(99*var(--up));background:var(--ink);color:#fff;font-size:calc(13*var(--up));font-weight:650}
.x-btn{display:inline-flex;align-items:center;gap:calc(12*var(--up));padding:calc(16*var(--up)) calc(24*var(--up));background:var(--ink);color:#fff;border-radius:calc(99*var(--up));font-weight:650;font-stretch:112%;text-decoration:none;transition:gap .3s var(--ease-out),background .2s var(--ease-ui)}
.x-btn svg{width:calc(20*var(--up));height:calc(20*var(--up))}
.x-btn:hover{gap:20px;background:var(--deep)}

/* A 3D plot: the still underneath, the running model laid exactly over it. */
.plot{position:relative;aspect-ratio:18/17}
.plot-still{display:block;width:100%;height:100%;object-fit:contain}
.plot-live{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.plot.live .plot-still{visibility:hidden}

/* The footer, on every page. It uses the same hairline grid and arrow chips as Business Concerns: the address and
   links, a strip of three ways to reach the group, and its name across the whole width in the logo's own letters. */
.xf{position:relative;background:var(--bg);color:var(--ink)}
.xf-top{display:grid;grid-template-columns:minmax(0,5.4fr) minmax(0,2fr) minmax(0,4.6fr);gap:clamp(28px,4vw,calc(72*var(--up)));padding:clamp(52px,6.4vw,calc(96*var(--up))) var(--gut) clamp(40px,4.6vw,calc(68*var(--up)))}
.xf h2{margin-bottom:clamp(12px,1.2vw,calc(18*var(--up)));font-size:calc(12*var(--up));font-weight:700;font-stretch:125%;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.xf-where p{max-width:21ch;font-size:clamp(23px,2.5vw,calc(40*var(--up)));line-height:1.1;letter-spacing:-.028em;font-weight:680;font-stretch:112%}
.xf-where .xf-hours{max-width:none;margin-top:clamp(12px,1.2vw,calc(18*var(--up)));font-size:clamp(14px,1.1vw,calc(16*var(--up)));line-height:1.4;letter-spacing:0;font-weight:500;font-stretch:100%;color:var(--ink-2)}
.xf nav a{position:relative;display:inline-block;padding:3px 0;font-size:clamp(16px,1.25vw,calc(19*var(--up)));font-weight:600;font-stretch:108%;line-height:1.25;text-decoration:none;transition:translate .35s var(--ease-out)}
.xf nav a:hover{translate:6px 0}
.xf-co ul{columns:2;column-gap:clamp(16px,2vw,calc(32*var(--up)))}
.xf-co li{break-inside:avoid}
/* Each company carries its own colour, as a dot that opens up on hover. */
.xf-co a{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:.5em}
.xf-co a::before{content:"";width:.56em;height:.56em;border-radius:50%;background:var(--band);transition:scale .35s var(--ease-pop)}
.xf-co a:hover::before{scale:1.5}

/* Three cells that fill with colour from the bottom when pointed at. */
.xf-reach{grid-template-columns:repeat(3,minmax(0,1fr))}
.xf-cell{--fill:var(--orange);--on:#fff;--wash:var(--fill);display:grid;gap:clamp(6px,.7vw,calc(10*var(--up)));padding:clamp(18px,2vw,calc(30*var(--up))) var(--gut) clamp(20px,2.2vw,calc(32*var(--up)));background:var(--bg);transition:color .3s var(--ease-ui)}
.xf-cell:nth-child(2){--fill:var(--green);padding-inline:clamp(18px,2.4vw,calc(36*var(--up)))}
.xf-cell:nth-child(3){--fill:var(--ink);padding-inline:clamp(18px,2.4vw,calc(36*var(--up))) var(--gut)}
.xf-cell .x-go{background:var(--fill);color:var(--on);box-shadow:none}
.xf-cell small{font-size:calc(12*var(--up));font-weight:700;font-stretch:125%;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);transition:color .3s var(--ease-ui)}
.xf-cell b{font-size:clamp(19px,2.15vw,calc(34*var(--up)));line-height:1.1;letter-spacing:-.025em;font-weight:750;font-stretch:112%;white-space:nowrap}
.xf-cell:is(:hover,:focus-visible){color:#fff}
.xf-cell:is(:hover,:focus-visible) small{color:#fff}
.xf-cell:is(:hover,:focus-visible) .x-go{background:#fff;color:var(--ink)}

/* The name across the whole width, on the page's bottom edge. */
.xf-base{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:clamp(18px,2vw,calc(30*var(--up))) var(--gut);font-size:clamp(14px,1.1vw,calc(16*var(--up)));color:var(--ink-2)}
.xf-name{display:block;padding:clamp(4px,1vw,calc(16*var(--up))) clamp(10px,1.2vw,calc(18*var(--up))) clamp(10px,1.2vw,calc(18*var(--up)))}
.xf-name svg{display:block;width:100%;height:auto;overflow:hidden}
.xf-up{display:inline-flex;align-items:center;gap:14px;font-size:clamp(15px,1.15vw,calc(17*var(--up)));font-weight:700;font-stretch:108%;white-space:nowrap;color:var(--ink)}
.xf-up i{width:clamp(48px,4.4vw,calc(64*var(--up)));aspect-ratio:1;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:var(--ink);color:#fff;transition:background .3s var(--ease-ui),scale .3s var(--ease-pop)}
.xf-up svg{width:40%;height:40%}
.xf-up:hover i{background:var(--orange);scale:1.08}
.motion-ok .xf-up:hover svg{animation:xf-rise .5s var(--ease-out)}
@keyframes xf-rise{49%{translate:0 -170%}50%{translate:0 170%}}

@media (max-width:1000px){
  .xf-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .xf-where{grid-column:1/-1}
  .xf-where p{max-width:30ch}
}
@media (max-width:620px){
  .xf-top{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:30px 18px}
  .xf-co ul{columns:1}
  .xf-reach{grid-template-columns:minmax(0,1fr)}
  .xf-cell,.xf-cell:nth-child(n){padding-inline:var(--gut)}
  .xf-cell b{font-size:clamp(22px,6.6vw,calc(30*var(--up)))}
}

/* The word that travels between pages, Contact and the 404. */
.co-word{view-transition-name:co-word}

/* shared poster type */
.nf h1 span:first-child{font-weight:800;font-stretch:125%;letter-spacing:-.05em;line-height:.84}
@keyframes p-rise{from{transform:translateY(46%);opacity:0}}

/* ---- Contact: the same room, with the head office on the stage and every way in as a cell that floods when pointed at ---- */
.ct-head{display:grid;gap:clamp(8px,1vw,calc(14*var(--up)));padding:clamp(92px,11vh,calc(120*var(--up))) var(--gut) clamp(22px,2.6vw,calc(40*var(--up)))}
.ct-head h1{font-size:clamp(50px,6.6vw,calc(120*var(--up)));line-height:.92;letter-spacing:-.035em;font-weight:800;font-stretch:125%}
.ct-ways li{display:grid}
.ct-way{--fill:#fff;--on:var(--ink);display:grid;gap:4px;padding:clamp(14px,1.5vw,calc(22*var(--up))) clamp(56px,5.4vw,calc(84*var(--up))) clamp(16px,1.7vw,calc(26*var(--up))) var(--gut);transition:color .3s var(--ease-ui)}
.ct-way small{font-size:calc(12*var(--up));font-weight:700;font-stretch:125%;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);transition:color .3s var(--ease-ui)}
.ct-way b{font-size:clamp(23px,2.5vw,calc(42*var(--up)));line-height:1.08;letter-spacing:-.025em;font-weight:750;font-stretch:112%;overflow-wrap:anywhere}
.ct-way.ct-visit b{font-size:clamp(19px,1.75vw,calc(29*var(--up)));line-height:1.16}
.ct-way:is(:hover,:focus-visible),.ct-way:is(:hover,:focus-visible) small{color:#fff}
.ct-t1{--wash:var(--orange)}
.ct-t2{--wash:var(--green)}
.ct-t3{--wash:var(--deep)}
.ct-t4{--wash:var(--ink)}
.ct-facts{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(14px,2vw,calc(32*var(--up)));padding:clamp(16px,1.8vw,calc(26*var(--up))) clamp(18px,2.4vw,calc(36*var(--up))) clamp(22px,2.4vw,calc(36*var(--up))) var(--gut)}
.ct-facts div{display:grid;gap:4px}
.ct-facts dd{margin:0;font-size:clamp(15px,1.2vw,calc(18*var(--up)));line-height:1.3;font-weight:600;overflow-wrap:anywhere}
@media (max-width:900px){.ct-head{padding-top:28px}.ct-facts{grid-template-columns:minmax(0,1fr)}}

/* ---- 404 ---- */
.nf{min-height:100svh;display:grid;align-content:start;gap:clamp(12px,1.6vw,calc(22*var(--up)));padding:clamp(76px,10vh,calc(104*var(--up))) 0 clamp(36px,5vw,calc(64*var(--up)));overflow:clip}
.nf .x-spectrum{order:-1;position:absolute;left:0;right:0;top:0;height:clamp(8px,1vw,calc(14*var(--up)))}
.nf h1 span:first-child{margin-left:3vw;font-size:40vw;line-height:.8;color:var(--ink)}
.nf-line{display:block;margin:clamp(12px,1.6vw,calc(22*var(--up))) var(--gut) 0;font-size:clamp(28px,4.6vw,calc(78*var(--up)));line-height:1;letter-spacing:-.04em;font-weight:800;font-stretch:118%;color:var(--deep)}
.nf-art{width:min(62vw,calc(430*var(--up)));margin:0 var(--gut)}
.nf>p{margin:0 var(--gut);font-size:clamp(17px,1.5vw,calc(22*var(--up)))}
.nf ul{display:flex;flex-wrap:wrap;gap:10px;margin:6px var(--gut) 0}

/* What the inner pages share. They speak the language of the footer: edge-to-edge hairlines, no cards, no gaps, big Mona Sans, and colour
   that rises into a cell when it's pointed at. */
:where(.ab,.sv) figure{margin:0}
.i-label{font-size:calc(12*var(--up));font-weight:700;font-stretch:125%;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.motion-ok .i-rise{transition:opacity .7s var(--ease-out),translate .8s var(--ease-out);transition-delay:calc(var(--d,0)*70ms)}
.motion-ok .i-rise:not(.in){opacity:0;translate:0 26px}

/* A wide photo: pages.js opens it from a window to the full width as it comes up the screen. */
.i-wide{--open:1;margin:0;overflow:hidden;height:clamp(300px,52vw,calc(860*var(--up)));clip-path:inset(calc((1 - var(--open))*9%) calc((1 - var(--open))*16%))}
.i-wide img{display:block;width:100%;height:100%;object-fit:cover;scale:calc(1.16 - var(--open)*.16)}

/* The last cell before the footer. */
.ic{--wash:var(--deep);--fill:#fff;--on:var(--ink);display:grid;gap:clamp(6px,.8vw,calc(12*var(--up)));padding:clamp(26px,3vw,calc(46*var(--up))) var(--gut) clamp(28px,3.2vw,calc(50*var(--up)));border-top:1px solid var(--line);transition:color .3s var(--ease-ui)}
.ic b{font-size:clamp(40px,6vw,calc(100*var(--up)));line-height:.96;letter-spacing:-.04em;font-weight:800;font-stretch:125%}
.ic .i-label{transition:color .3s var(--ease-ui)}
.ic .x-go{right:var(--gut);top:50%;translate:0 -50%;width:clamp(40px,4vw,calc(64*var(--up)))}
.ic:is(:hover,:focus-visible),.ic:is(:hover,:focus-visible) .i-label{color:#fff}

/* The room: the Business Concerns page and Contact. On the right a stage in the company's colour stays put, with its word and its model; on the
   left a white column carries the list. */
.room{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:#fff}
.room-read{min-width:0}
.room-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--stage);color:var(--ink)}
.co-word,.dir-word{position:absolute;z-index:1;left:3%;top:clamp(76px,9.4vh,calc(92*var(--up)));width:max-content;font-size:clamp(34px,5.6vw,calc(92*var(--up)));font-weight:800;font-stretch:125%;letter-spacing:-.03em;line-height:1;color:var(--stage-word);text-transform:uppercase;white-space:nowrap}
.motion-ok .co-word{animation:p-rise .95s var(--ease-out) both}
.room-stage .plot{position:absolute;z-index:2;inset:0;aspect-ratio:auto}
.room-stage .plot-still{object-position:50% 60%}

/* The list of twelve. */
.dir-head{display:grid;gap:clamp(8px,1vw,calc(14*var(--up)));padding:clamp(92px,11vh,calc(120*var(--up))) var(--gut) clamp(20px,2.4vw,calc(36*var(--up)))}
.dir-head h1{font-size:clamp(44px,5.8vw,calc(104*var(--up)));line-height:.94;letter-spacing:-.03em;font-weight:800;font-stretch:125%}
.dir-list{border-top:1px solid var(--line)}
.dir-list li{display:grid}
.dir-row{display:grid;grid-template-columns:clamp(20px,1.9vw,calc(30*var(--up))) clamp(84px,8vw,calc(124*var(--up))) minmax(0,1fr);align-items:center;gap:clamp(10px,1.1vw,calc(18*var(--up)));min-height:clamp(64px,7.8vh,calc(84*var(--up)));padding:8px clamp(52px,4.8vw,calc(72*var(--up))) 8px var(--gut)}
.dir-num{font-size:calc(12*var(--up));font-weight:700;font-stretch:112%;color:var(--muted)}
.dir-mark{width:100%;height:clamp(34px,3.5vw,calc(52*var(--up)));object-fit:contain;object-position:left}
.dir-text{display:grid;gap:1px;min-width:0}
.dir-text b{font-size:clamp(15px,1.3vw,calc(21*var(--up)));line-height:1.14;letter-spacing:-.012em;font-weight:720;font-stretch:108%}
.dir-text span{font-size:calc(13*var(--up));line-height:1.25;color:var(--ink-2)}
.dir-about{display:none}
.dir-row .x-go{top:50%;translate:0 -50%}

/* The stage that changes with the list: each company's slide rises over the last, the way a cell takes its colour. */
.dir-slide{position:absolute;inset:0;overflow:hidden;background:var(--stage);clip-path:inset(100% 0 0)}
.dir-slide.was{z-index:1;clip-path:inset(0)}
.dir-slide.on{z-index:2;clip-path:inset(0)}
.motion-ok .dir-slide.on{transition:clip-path .85s var(--ease-out)}
.dir-slide .plot{inset:auto auto -2% 50%;width:min(92%,calc((100svh - 110px)*1.0588));aspect-ratio:18/17;translate:-50% 0}
.motion-ok .dir-slide :is(.dir-word,.plot){transition:opacity .8s var(--ease-out)}
.motion-ok .dir-slide:not(.on,.was) :is(.dir-word,.plot){opacity:0}

@media (max-width:900px){
  .room{display:flex;flex-direction:column}
  .room-stage{order:-1;position:relative;height:clamp(420px,112vw,calc(760*var(--up)))}
  .co-word{z-index:3;top:86px}
  /* Stacked, every company is a full page that simply scrolls by: its colour, word and model above, its logo and what it does on white below. The
     list and the stage dissolve into one column, and `order` deals the two out in turn. */
  .dir{--bar:clamp(236px,40svh,calc(400*var(--up)));--say:clamp(26px,10vw,calc(60*var(--up)));--lift:calc(76px + var(--say)*1.15)}
  .dir .room-read,.dir-list,.dir-list li,.dir-stage,.dir-stage>div{display:contents}
  .dir-head{order:-1}
  .dir-slide{order:calc(var(--k)*2);position:relative;inset:auto;height:max(calc(100svh - var(--bar)),300px);clip-path:none}
  .dir-word{left:var(--gut);font-size:var(--say)}
  .dir-slide .plot{bottom:2%;width:min(82%,calc((100svh - var(--bar) - var(--lift))*1.0588))}
  .motion-ok .dir-slide:not(.on,.was) :is(.dir-word,.plot){opacity:1}
  .dir-row{order:calc(var(--k)*2 + 1);grid-template-columns:minmax(0,1fr);align-content:start;gap:clamp(10px,3vw,calc(18*var(--up)));min-height:var(--bar);padding:clamp(16px,4.6vw,calc(28*var(--up))) var(--gut) clamp(18px,5vw,calc(30*var(--up)))}
  .dir-row.on:not(:hover,:focus-visible)::before{translate:0 101%}
  .dir-row .x-go{top:clamp(16px,4.6vw,calc(28*var(--up)));right:var(--gut);width:44px;translate:none;background:var(--fill,var(--band));color:var(--on,#fff);box-shadow:none}
  .dir-num{display:none}
  .dir-mark{justify-self:start;width:auto;max-width:calc(100% - 60px);height:clamp(60px,18vw,calc(96*var(--up)))}
  .dir-text{gap:3px}
  .dir-text b{font-size:clamp(17px,4.8vw,calc(26*var(--up)))}
  .dir-about{display:block;margin-top:clamp(5px,1.6vw,calc(10*var(--up)));font-size:clamp(15px,4vw,calc(20*var(--up)));font-style:normal;line-height:1.38;color:var(--ink)}

  /* Parallax, off the scroll itself so it keeps pace with a finger and needs no script. The word slides across, the model lags behind the page and
     comes up from behind the white, and the logo and text settle last. Each rests where a page sits at the top of the screen. Without
     support, nothing moves. */
  @supports (animation-timeline:view()){
    .motion-ok .dir-slide{view-timeline:--panel block}
    .motion-ok .dir-word{animation:dir-drift linear both;animation-timeline:--panel}
    .motion-ok .dir-slide .plot{animation:dir-rise linear both;animation-timeline:--panel}
    .motion-ok .dir-mark{animation:dir-settle linear both;animation-timeline:view();animation-range:entry 0% cover 34%}
    .motion-ok .dir-text{animation:dir-settle linear both;animation-timeline:view();animation-range:entry 0% cover 46%}
  }
}

@keyframes dir-drift{0%{transform:translateX(16%)}62%{transform:none}100%{transform:translateX(-12%)}}
@keyframes dir-rise{0%{transform:translateY(34%)}62%{transform:none}100%{transform:translateY(-26%)}}
@keyframes dir-settle{from{transform:translateY(30px)}to{transform:none}}

/* One company's page, read like a company profile: who it is at the top, the plain facts in a row, then what it does and how to reach it.
   Text is set at reading size and the model keeps its full width beside it. */
.co{--wrap:min(calc(1180*var(--up)),calc(100% - 2*var(--gut)));background:#fff}
.co-top{background:var(--stage);color:var(--ink)}
.co-top>div{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);align-items:center;gap:clamp(16px,3vw,calc(48*var(--up)));width:var(--wrap);margin-inline:auto;padding-block:clamp(92px,11vh,calc(112*var(--up))) clamp(18px,2.4vw,calc(32*var(--up)))}
.co-who{display:grid;justify-items:start;gap:clamp(10px,1.1vw,calc(14*var(--up)))}
.cd-back{display:flex;justify-content:space-between;gap:16px;width:100%;margin-bottom:clamp(10px,1.6vw,calc(22*var(--up)));font-size:calc(13*var(--up));font-weight:700;font-stretch:108%;color:var(--ink-2)}
.cd-back a{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none}
.cd-back svg{width:18px;height:18px;transition:translate .3s var(--ease-out)}
.cd-back a:hover svg{translate:-4px 0}
.co-logo{height:calc(clamp(60px,6.2vw,calc(92*var(--up)))*var(--logo-scale,1));width:auto;max-width:100%;margin-bottom:6px}
.co-who h1{font-size:clamp(34px,4vw,calc(62*var(--up)));line-height:1.02;letter-spacing:-.03em;font-weight:800;font-stretch:118%}
.co-line{max-width:42ch;font-size:clamp(17px,1.5vw,calc(21*var(--up)));line-height:1.5;color:var(--ink-2)}

.co-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(190*var(--up))),1fr));gap:0 clamp(20px,2.4vw,calc(36*var(--up)));width:var(--wrap);margin-inline:auto;border-bottom:1px solid var(--line)}
.co-facts div{display:grid;align-content:start;gap:4px;padding-block:clamp(16px,1.8vw,calc(24*var(--up)))}
.co-facts dt{font-size:calc(12*var(--up));font-weight:700;font-stretch:112%;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.co-facts dd{font-size:clamp(16px,1.25vw,calc(18*var(--up)));line-height:1.4;font-weight:600}

.co-part{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(12px,3vw,calc(48*var(--up)));width:var(--wrap);margin-inline:auto;padding-block:clamp(36px,4.6vw,calc(64*var(--up)));border-bottom:1px solid var(--line)}
.co-part:last-child{border-bottom:0}
.co-part h2{font-size:clamp(24px,2.5vw,calc(38*var(--up)));line-height:1.08;letter-spacing:-.024em;font-weight:800;font-stretch:115%}
.co-text{display:grid;gap:14px;max-width:66ch}
.co-text p{font-size:clamp(17px,1.3vw,calc(19*var(--up)));line-height:1.6;color:var(--ink-2)}
.co-text p:first-child{font-size:clamp(19px,1.7vw,calc(25*var(--up)));line-height:1.4;letter-spacing:-.01em;font-weight:520;color:var(--ink)}
.co-list{list-style:none;columns:2;column-gap:clamp(24px,3vw,calc(48*var(--up)))}
.co-list li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:8px;break-inside:avoid;padding-block:11px;border-bottom:1px solid var(--line);font-size:clamp(16px,1.25vw,calc(18*var(--up)));line-height:1.4}
.co-list li::before{content:"";width:7px;height:7px;margin-top:.48em;border-radius:50%;background:var(--band)}
.co-reach{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(290*var(--up))),1fr));gap:clamp(14px,2vw,calc(28*var(--up)))}
.co-reach div{display:grid;align-content:start;gap:4px}
.co-reach b{font-size:calc(12*var(--up));font-weight:700;font-stretch:112%;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.co-reach :is(a,span){font-size:clamp(16px,1.25vw,calc(18*var(--up)));line-height:1.45;overflow-wrap:anywhere;color:var(--ink)}
.co-reach a{text-underline-offset:3px;text-decoration-color:var(--line)}
.co-reach a:hover{text-decoration-color:currentColor}

/* The neighbours. */
.cd-near{grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr)}
.cd-next{display:grid;align-content:space-between;gap:clamp(18px,2.4vw,calc(36*var(--up)));min-height:clamp(160px,16vw,calc(250*var(--up)));padding:clamp(16px,1.7vw,calc(26*var(--up))) clamp(18px,2vw,calc(30*var(--up)))}
.cd-next:first-child{padding-left:var(--gut)}
.cd-next img{height:calc(clamp(44px,4.8vw,calc(76*var(--up)))*var(--logo-scale,1));width:auto;max-width:82%}
.cd-all{--wash:var(--deep);--fill:#fff;--on:var(--ink);background:var(--ink);color:#fff}
.cd-all .i-label{color:#ffffffa8}
.cd-all b{font-size:clamp(22px,2.3vw,calc(38*var(--up)));line-height:1.02;letter-spacing:-.025em;font-weight:750;font-stretch:112%}
.cd-all .x-go{color:#fff;box-shadow:inset 0 0 0 1px #ffffff5c}

@media (max-width:900px){
  .co-top>div{grid-template-columns:minmax(0,1fr);padding-top:88px}
  .co-plot{width:min(100%,520px);margin-inline:auto}
  .co-part{grid-template-columns:minmax(0,1fr)}
  .cd-near{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cd-all{grid-column:1/-1;grid-row:2;min-height:0}
}
@media (max-width:560px){.co-list{columns:1}}

/* About: a company profile with one recurring shape, the leaf of the logo, sharp at two corners and round at the others, rising to the right.
   Bands of the group's colours carry the page from section to section, and type stays at profile size: the client finds large type unprofessional. */
.ab{--wrap:calc(100% - 2*var(--gut));--warm:#fbeadc;--leaf:clamp(52px,8.4vw,calc(124*var(--up)));background:#fff;overflow:clip}
.ab img{display:block;width:100%;height:100%;object-fit:cover}
.ab h2{font-size:clamp(26px,2.7vw,calc(40*var(--up)));line-height:1.08;letter-spacing:-.024em;font-weight:800;font-stretch:115%}

.ab-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.14fr);min-height:clamp(540px,76vh,calc(720*var(--up)));background:var(--stage)}
.ab-head{display:grid;align-content:center;gap:clamp(12px,1.4vw,calc(20*var(--up)));padding:clamp(108px,14vh,calc(136*var(--up))) clamp(40px,7vw,calc(104*var(--up))) clamp(36px,5vw,calc(72*var(--up))) var(--gut)}
.ab-head h1{font-size:clamp(36px,4.3vw,calc(64*var(--up)));line-height:1.02;letter-spacing:-.03em;font-weight:800;font-stretch:118%}
.ab-head>p:last-child{max-width:52ch;font-size:clamp(16px,1.3vw,calc(19*var(--up)));line-height:1.55;color:var(--ink-2)}
.ab-hero{position:relative}
.ab-hero>figure:first-child{position:absolute;inset:0;overflow:hidden;border-top-left-radius:calc(var(--leaf)*1.6)}
.ab-leaf{position:absolute;left:calc(var(--leaf)*-.44);bottom:clamp(22px,3.2vw,calc(46*var(--up)));width:clamp(170px,19vw,calc(280*var(--up)));aspect-ratio:4/3;overflow:hidden;border-radius:calc(var(--leaf)*.72) 0;box-shadow:0 0 0 clamp(5px,.6vw,calc(8*var(--up))) var(--stage)}

.ab-glance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--deep);color:#fff}
.ab-glance div{display:grid;gap:6px;padding:clamp(20px,2.4vw,calc(34*var(--up))) var(--gut)}
.ab-glance div+div{border-left:1px solid #ffffff2e}
.ab-glance dd{order:-1;font-size:clamp(30px,3.6vw,calc(52*var(--up)));line-height:1;letter-spacing:-.03em;font-weight:800;font-stretch:118%}
.ab-glance dt{font-size:clamp(14px,1.05vw,calc(16*var(--up)));color:#ffffffcc}

.ab-who{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(14px,3vw,calc(48*var(--up)));width:var(--wrap);margin-inline:auto;padding-block:clamp(48px,6vw,calc(88*var(--up)))}
.ab-who p{max-width:58ch;font-size:clamp(19px,1.8vw,calc(26*var(--up)));line-height:1.42;letter-spacing:-.01em;font-weight:500}
.ab-strip{display:grid;grid-template-columns:5fr 4fr 3fr;gap:1px;height:clamp(190px,23vw,calc(340*var(--up)));background:#fff}
.ab-strip figure{overflow:hidden}

.ab-md{background:var(--warm)}
.ab-md>div{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:center;gap:clamp(40px,6.4vw,calc(96*var(--up)));width:var(--wrap);margin-inline:auto;padding-block:clamp(60px,7.4vw,calc(108*var(--up)))}
/* The two hands of the logo, green over orange, with the portrait held between them. They settle into place as it comes up. */
.ab-portrait{position:relative;isolation:isolate;width:min(100%,calc(380*var(--up)));justify-self:center;aspect-ratio:3/4;border-radius:48% 0}
.ab-portrait::before,.ab-portrait::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;transition:translate 1.4s var(--ease-out)}
.ab-portrait::before{background:var(--green);translate:7% -5%}
.ab-portrait::after{background:var(--orange);translate:-7% 5%}
.motion-ok .ab-portrait:not(.in)::before{translate:13% -11%}
.motion-ok .ab-portrait:not(.in)::after{translate:-13% 11%}
.ab-portrait span{display:block;height:100%;overflow:hidden;border-radius:inherit}
.ab-words{display:grid;gap:clamp(14px,1.6vw,calc(22*var(--up)))}
.ab-opening{font-size:clamp(19px,1.75vw,calc(25*var(--up)));line-height:1.4;letter-spacing:-.01em;font-weight:520}
.ab-rest{columns:2;column-gap:clamp(24px,3vw,calc(44*var(--up)))}
.ab-rest p{break-inside:avoid;margin-bottom:14px;font-size:clamp(16px,1.15vw,calc(17*var(--up)));line-height:1.58;color:var(--ink-2)}
.ab-sign{display:grid;gap:2px;padding-top:clamp(12px,1.2vw,calc(18*var(--up)));border-top:1px solid #16201b24;font-size:calc(15*var(--up));color:var(--ink-2)}
.ab-sign b{font-size:clamp(18px,1.5vw,calc(22*var(--up)));font-weight:760;font-stretch:108%;color:var(--ink)}

.ab-aims{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,6fr);width:var(--wrap);margin-inline:auto;border-bottom:1px solid var(--line)}
.ab-aims>div{display:grid;align-content:start;gap:clamp(12px,1.3vw,calc(18*var(--up)));padding-block:clamp(52px,6.4vw,calc(92*var(--up)))}
.ab-aims>div:first-child{padding-right:clamp(28px,4.6vw,calc(68*var(--up)));border-right:1px solid var(--line)}
.ab-aims>div:last-child{padding-left:clamp(28px,4.6vw,calc(68*var(--up)))}
.ab-aims h2::before{content:"";display:block;width:30px;height:30px;margin-bottom:14px;border-radius:50% 0;background:var(--green)}
.ab-aims>div:last-child h2::before{background:var(--orange)}
.ab-aims p{max-width:62ch;font-size:clamp(17px,1.25vw,calc(18*var(--up)));line-height:1.58;color:var(--ink-2)}

.ab-hold{padding-top:clamp(48px,5.6vw,calc(80*var(--up)))}
.ab-hold h2{width:var(--wrap);margin:0 auto clamp(20px,2.4vw,calc(34*var(--up)))}
.ab-hold ol{list-style:none;display:grid;grid-template-columns:5fr 4fr 3fr 4fr 3fr}
.ab-hold li{display:flex;flex-direction:column;min-height:clamp(170px,16vw,calc(240*var(--up)));padding:clamp(14px,1.5vw,calc(22*var(--up))) clamp(14px,1.5vw,calc(22*var(--up))) clamp(16px,1.8vw,calc(26*var(--up)));background:var(--tone);color:var(--text)}
.ab-hold li:nth-child(1){--tone:var(--deep);--text:#fff;padding-left:var(--gut)}
.ab-hold li:nth-child(2){--tone:var(--green);--text:var(--deep-ink)}
.ab-hold li:nth-child(3){--tone:var(--lime);--text:var(--ink)}
.ab-hold li:nth-child(4){--tone:var(--orange);--text:var(--ink)}
.ab-hold li:nth-child(5){--tone:var(--amber);--text:var(--ink)}
.ab-hold i{margin-bottom:auto;font-size:calc(13*var(--up));font-style:normal;font-weight:700;font-stretch:125%;letter-spacing:.06em}
.ab-hold b{font-size:clamp(20px,1.85vw,calc(27*var(--up)));line-height:1.1;letter-spacing:-.02em;font-weight:800;font-stretch:112%}
.ab-hold span{font-size:clamp(16px,1.3vw,calc(19*var(--up)));line-height:1.25}

.ab-acts{background:var(--stage)}
.ab-acts>div{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(14px,3vw,calc(48*var(--up)));width:var(--wrap);margin-inline:auto;padding-block:clamp(48px,6vw,calc(88*var(--up)))}
.ab-acts ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 0;font-size:clamp(19px,1.9vw,calc(27*var(--up)));line-height:1.3;letter-spacing:-.014em;font-weight:620;font-stretch:106%}
.ab-acts li:not(:last-child)::after{content:"/";margin-inline:.42em;font-weight:500;color:var(--orange)}

.ab-cos{padding-block:clamp(52px,6.4vw,calc(92*var(--up))) 0}
.ab-cos h2{width:var(--wrap);margin:0 auto clamp(20px,2.4vw,calc(34*var(--up)))}
.ab-cos .x-lines{grid-template-columns:repeat(24,minmax(0,1fr));border-bottom:0}
.ab-cos a{grid-column:span var(--span);display:grid;place-items:center;min-height:clamp(96px,10vw,calc(144*var(--up)));padding:14px}
.ab-cos img{height:calc(clamp(34px,3.5vw,calc(52*var(--up)))*var(--logo-scale,1));width:auto;max-width:78%;object-fit:contain}
.ab-cos img[data-logo="unique-services"]{--logo-scale:1.5}
.ab-cos img[data-logo="rayya-international"]{--logo-scale:1.25}

@media (max-width:900px){
  .ab-top{grid-template-columns:minmax(0,1fr);min-height:0}
  .ab-head{padding:96px var(--gut) 34px}
  .ab-hero{height:clamp(240px,62vw,calc(460*var(--up)));margin-left:var(--gut)}
  .ab-leaf{left:calc(var(--gut)*-1 + 10px);bottom:-22px;width:clamp(120px,34vw,calc(220*var(--up)))}
  .ab-glance div{padding-top:34px}
  .ab-who,.ab-acts>div{grid-template-columns:minmax(0,1fr)}
  .ab-md>div{grid-template-columns:minmax(0,1fr)}
  .ab-portrait{width:min(68%,300px)}
  .ab-aims{grid-template-columns:minmax(0,1fr)}
  .ab-aims>div:first-child{padding-right:0;border-right:0;border-bottom:1px solid var(--line)}
  .ab-aims>div:last-child{padding-left:0}
  .ab-hold ol{grid-template-columns:minmax(0,1fr)}
  .ab-hold li{display:grid;grid-template-columns:34px minmax(0,1fr);align-content:center;min-height:0;padding:16px var(--gut)}
  .ab-hold li:nth-child(1){padding-left:var(--gut)}
  .ab-hold i{grid-row:span 2;align-self:center;margin:0}
  .ab-cos .x-lines{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-cos a{grid-column:auto}
}
@media (max-width:620px){
  .ab-glance div{padding-inline:12px;padding-left:var(--gut)}
  .ab-glance div+div{padding-left:12px}
  .ab-glance dd{font-size:calc(24*var(--up))}
  .ab-glance dt{font-size:calc(13*var(--up))}
  .ab-strip{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:56vw 38vw;height:auto}
  .ab-strip figure:first-child{grid-column:1/-1}
  .ab-rest{columns:1}
}

/* Services: the first screen is the index, four lines of huge type stepping in and out. Below, each line opens into a full-width colour band, its
   services running on as one sentence beside a model at work, the sides swapping from band to band. */
.sv{background:#fff}
.sv-t1{--tint:#FCE6DA;--word:#D9471A}
.sv-t2{--tint:#E1EEDF;--word:var(--deep)}
.sv-t3{--tint:#EAF3D8;--word:#54831C}
.sv-t4{--tint:#DCEEF7;--word:#176FA0}

.sv-open{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:100svh;padding-top:clamp(92px,11vh,calc(120*var(--up)))}
.sv-top{display:flex;justify-content:space-between;gap:16px;padding:0 var(--gut) clamp(14px,1.6vw,calc(24*var(--up)))}
.sv-top h1{color:var(--ink)}
.sv-index{grid-auto-rows:1fr}
.sv-index li{display:grid}
.sv-row{--wash:var(--tint);--fill:var(--word);--on:#fff;display:grid;grid-template-columns:clamp(30px,3vw,calc(48*var(--up))) minmax(0,1fr) auto;align-items:center;gap:clamp(8px,1vw,calc(16*var(--up)));padding:clamp(12px,1.4vw,calc(22*var(--up))) calc(var(--gut) + clamp(44px,4.6vw,calc(70*var(--up)))) clamp(12px,1.4vw,calc(22*var(--up))) var(--gut)}
.sv-row span{font-size:calc(13*var(--up));font-weight:700;font-stretch:112%;color:var(--muted)}
.sv-row b{margin-left:var(--in);font-size:clamp(26px,3.7vw,calc(58*var(--up)));line-height:1.04;letter-spacing:-.035em;font-weight:800;font-stretch:118%;transition:color .3s var(--ease-ui),translate .5s var(--ease-out)}
.sv-row em{font-size:clamp(13px,1vw,calc(16*var(--up)));font-style:normal;font-weight:600;color:var(--ink-2);white-space:nowrap}
.sv-row:is(:hover,:focus-visible) b{color:var(--word);translate:clamp(6px,1vw,calc(16*var(--up))) 0}
.sv-row .x-go{top:50%;right:var(--gut);translate:0 -50%}

.sv-band{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,calc(72*var(--up)));align-items:start;padding:clamp(52px,7vw,calc(120*var(--up))) var(--gut);overflow:clip;background:var(--tint);scroll-margin-top:0}
.sv-band:nth-of-type(odd){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.sv-band:nth-of-type(odd) .sv-side{order:2}
.sv-side{position:sticky;top:clamp(76px,9vh,calc(92*var(--up)));display:grid;gap:clamp(6px,.8vw,calc(12*var(--up)))}
.sv-num{font-size:clamp(34px,4.4vw,calc(68*var(--up)));line-height:1;font-weight:800;font-stretch:125%;letter-spacing:-.05em;color:var(--word)}
.sv-side h2{font-size:clamp(24px,2.6vw,calc(40*var(--up)));line-height:1.08;letter-spacing:-.024em;font-weight:800;font-stretch:115%}
.sv-side .plot{width:min(100%,calc(100svh - 330*var(--up)));min-width:220px;margin-top:clamp(4px,1vw,calc(16*var(--up)))}
.sv-run{align-self:center;font-size:clamp(17px,1.6vw,calc(23*var(--up)));line-height:1.46;letter-spacing:-.008em;font-weight:560;font-stretch:104%}
.sv-run li{display:inline;transition:color .25s var(--ease-ui)}
.sv-run li:not(:last-child)::after{content:" / ";color:var(--word);font-weight:500}
.sv-run li:hover{color:var(--word)}

@media (max-width:900px){
  .sv-top{display:grid;gap:4px}
  .sv-row{grid-template-columns:clamp(26px,7vw,calc(40*var(--up))) minmax(0,1fr);padding-right:calc(var(--gut) + 44px)}
  .sv-row b{margin-left:0;font-size:clamp(25px,7.2vw,calc(42*var(--up)))}
  .sv-row em{grid-column:2}
  .sv-band,.sv-band:nth-of-type(odd){grid-template-columns:minmax(0,1fr)}
  .sv-band:nth-of-type(odd) .sv-side{order:0}
  .sv-side{position:static}
  .sv-side .plot{width:min(86%,380px);margin-inline:auto}
}
@keyframes pw-tk{0%{transform:translate(0.00px,0.00px)}31.25%{transform:translate(0.00px,0.00px);animation-timing-function:cubic-bezier(.5,0,.9,.55)}50%{transform:translate(-215.46px,-124.40px);animation-timing-function:steps(1,end)}56.25%{transform:translate(76.21px,44.00px);animation-timing-function:cubic-bezier(.14,.62,.3,1)}68.75%{transform:translate(0.00px,0.00px)}100%{transform:translate(0.00px,0.00px)}}
@keyframes pw-vn{0%{transform:translate(0.00px,0.00px)}28.333%{transform:translate(0.00px,0.00px);animation-timing-function:cubic-bezier(.5,0,.9,.55)}42.5%{transform:translate(137.17px,79.20px);animation-timing-function:steps(1,end)}50.833%{transform:translate(-141.33px,-81.60px);animation-timing-function:cubic-bezier(.14,.62,.3,1)}64.583%{transform:translate(0.00px,0.00px)}100%{transform:translate(0.00px,0.00px)}}
@keyframes pw-te{0%{transform:translate(0.00px,0.00px)}6.25%{transform:translate(0.00px,0.00px);animation-timing-function:cubic-bezier(.3,.1,.7,.9)}13.75%{transform:translate(-31.87px,18.40px);animation-timing-function:cubic-bezier(.3,.1,.7,.9)}20.417%{transform:translate(-57.50px,3.60px);animation-timing-function:cubic-bezier(.3,.1,.7,.9)}26.667%{transform:translate(-83.14px,18.40px)}65.833%{transform:translate(-83.14px,18.40px);animation-timing-function:cubic-bezier(.3,.1,.7,.9)}72.083%{transform:translate(-57.50px,3.60px);animation-timing-function:cubic-bezier(.3,.1,.7,.9)}78.75%{transform:translate(-31.87px,18.40px);animation-timing-function:cubic-bezier(.3,.1,.7,.9)}86.25%{transform:translate(0.00px,0.00px)}100%{transform:translate(0.00px,0.00px)}}
@keyframes pw-gate{0%{transform:translate(0.00px,0.00px)}15%{transform:translate(0.00px,0.00px);animation-timing-function:cubic-bezier(.45,0,.55,1)}18.333%{transform:translate(16.63px,9.60px)}73.333%{transform:translate(16.63px,9.60px);animation-timing-function:cubic-bezier(.45,0,.55,1)}77.083%{transform:translate(0.00px,0.00px)}100%{transform:translate(0.00px,0.00px)}}
@keyframes pw-hose{0%{transform:scaleX(1)}19.167%{transform:scaleX(1);animation-timing-function:cubic-bezier(.3,.1,.7,.9)}26.25%{transform:scaleX(0.06)}69.583%{transform:scaleX(0.06);animation-timing-function:cubic-bezier(.3,.1,.7,.9)}76.667%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes pw-nozzle{0%{transform:translate(0.00px,0.00px)}19.167%{transform:translate(0.00px,0.00px);animation-timing-function:cubic-bezier(.3,.1,.7,.9)}26.25%{transform:translate(25.14px,-14.51px)}69.583%{transform:translate(25.14px,-14.51px);animation-timing-function:cubic-bezier(.3,.1,.7,.9)}76.667%{transform:translate(0.00px,0.00px)}100%{transform:translate(0.00px,0.00px)}}
@keyframes pw-op{0%{transform:translate(0.00px,0.00px)}19.167%{transform:translate(0.00px,0.00px);animation-timing-function:cubic-bezier(.3,.1,.7,.9)}26.25%{transform:translate(25.14px,-14.51px)}69.583%{transform:translate(25.14px,-14.51px);animation-timing-function:cubic-bezier(.3,.1,.7,.9)}76.667%{transform:translate(0.00px,0.00px)}100%{transform:translate(0.00px,0.00px)}}
@keyframes pw-reel{0%{transform:rotate(0deg)}19.167%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.3,.1,.7,.9)}26.25%{transform:rotate(282deg)}69.583%{transform:rotate(282deg);animation-timing-function:cubic-bezier(.3,.1,.7,.9)}76.667%{transform:rotate(0deg)}100%{transform:rotate(0deg)}}
@keyframes pw-op-arm{0%{transform:none}14.583%{transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}15.729%{transform:translateY(-1.3px);animation-timing-function:cubic-bezier(.45,0,.55,1)}16.875%{transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}18.021%{transform:translateY(-1.3px);animation-timing-function:cubic-bezier(.45,0,.55,1)}19.167%{transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}76.667%{transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}77.812%{transform:translateY(-1.3px);animation-timing-function:cubic-bezier(.45,0,.55,1)}78.958%{transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}80.104%{transform:translateY(-1.3px);animation-timing-function:cubic-bezier(.45,0,.55,1)}81.25%{transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}100%{transform:none}}
@keyframes pw-cl{0%{transform:translate(0.00px,0.00px)}9.167%{transform:translate(0.00px,0.00px);animation-timing-function:cubic-bezier(.45,0,.55,1)}12.5%{transform:translate(11.50px,6.64px)}21.667%{transform:translate(11.50px,6.64px);animation-timing-function:cubic-bezier(.45,0,.55,1)}25%{transform:translate(23.00px,13.28px)}34.167%{transform:translate(23.00px,13.28px);animation-timing-function:cubic-bezier(.45,0,.55,1)}37.5%{transform:translate(34.64px,20.00px)}46.667%{transform:translate(34.64px,20.00px);animation-timing-function:cubic-bezier(.45,0,.55,1)}50%{transform:translate(46.14px,26.64px)}59.167%{transform:translate(46.14px,26.64px);animation-timing-function:cubic-bezier(.45,0,.55,1)}62.5%{transform:translate(34.64px,20.00px)}71.667%{transform:translate(34.64px,20.00px);animation-timing-function:cubic-bezier(.45,0,.55,1)}75%{transform:translate(23.00px,13.28px)}84.167%{transform:translate(23.00px,13.28px);animation-timing-function:cubic-bezier(.45,0,.55,1)}87.5%{transform:translate(11.50px,6.64px)}96.667%{transform:translate(11.50px,6.64px);animation-timing-function:cubic-bezier(.45,0,.55,1)}100%{transform:translate(0.00px,0.00px)}}
@keyframes pw-cl-bob{0%{transform:none}9.167%{transform:none}10%{transform:translateY(-.8px)}10.833%{transform:none}11.667%{transform:translateY(-.8px)}12.5%{transform:none}21.667%{transform:none}22.5%{transform:translateY(-.8px)}23.333%{transform:none}24.167%{transform:translateY(-.8px)}25%{transform:none}34.167%{transform:none}35%{transform:translateY(-.8px)}35.833%{transform:none}36.667%{transform:translateY(-.8px)}37.5%{transform:none}46.667%{transform:none}47.5%{transform:translateY(-.8px)}48.333%{transform:none}49.167%{transform:translateY(-.8px)}50%{transform:none}59.167%{transform:none}60%{transform:translateY(-.8px)}60.833%{transform:none}61.667%{transform:translateY(-.8px)}62.5%{transform:none}71.667%{transform:none}72.5%{transform:translateY(-.8px)}73.333%{transform:none}74.167%{transform:translateY(-.8px)}75%{transform:none}84.167%{transform:none}85%{transform:translateY(-.8px)}85.833%{transform:none}86.667%{transform:translateY(-.8px)}87.5%{transform:none}96.667%{transform:none}97.5%{transform:translateY(-.8px)}98.333%{transform:none}99.167%{transform:translateY(-.8px)}100%{transform:none}}
@keyframes pw-cl-la{0%{transform:none}9.167%{transform:none}10%{transform:scaleY(.8)}10.833%{transform:none}21.667%{transform:none}22.5%{transform:scaleY(.8)}23.333%{transform:none}34.167%{transform:none}35%{transform:scaleY(.8)}35.833%{transform:none}46.667%{transform:none}47.5%{transform:scaleY(.8)}48.333%{transform:none}59.167%{transform:none}60%{transform:scaleY(.8)}60.833%{transform:none}71.667%{transform:none}72.5%{transform:scaleY(.8)}73.333%{transform:none}84.167%{transform:none}85%{transform:scaleY(.8)}85.833%{transform:none}96.667%{transform:none}97.5%{transform:scaleY(.8)}98.333%{transform:none}100%{transform:none}}
@keyframes pw-cl-lb{0%{transform:none}10.833%{transform:none}11.667%{transform:scaleY(.8)}12.5%{transform:none}23.333%{transform:none}24.167%{transform:scaleY(.8)}25%{transform:none}35.833%{transform:none}36.667%{transform:scaleY(.8)}37.5%{transform:none}48.333%{transform:none}49.167%{transform:scaleY(.8)}50%{transform:none}60.833%{transform:none}61.667%{transform:scaleY(.8)}62.5%{transform:none}73.333%{transform:none}74.167%{transform:scaleY(.8)}75%{transform:none}85.833%{transform:none}86.667%{transform:scaleY(.8)}87.5%{transform:none}98.333%{transform:none}99.167%{transform:scaleY(.8)}100%{transform:none}}
@keyframes pw-te-work{0%{opacity:1;animation-timing-function:steps(1,end)}6.25%{opacity:0;animation-timing-function:steps(1,end)}86.25%{opacity:1;animation-timing-function:steps(1,end)}100%{opacity:1}}
@keyframes pw-te-ny{0%{opacity:0;animation-timing-function:steps(1,end)}65.417%{opacity:1;animation-timing-function:steps(1,end)}72.083%{opacity:0;animation-timing-function:steps(1,end)}78.75%{opacity:1;animation-timing-function:steps(1,end)}86.25%{opacity:0;animation-timing-function:steps(1,end)}100%{opacity:0}}
@keyframes pw-te-px{0%{opacity:0;animation-timing-function:steps(1,end)}72.083%{opacity:1;animation-timing-function:steps(1,end)}78.75%{opacity:0;animation-timing-function:steps(1,end)}100%{opacity:0}}
@keyframes pw-te-py{0%{opacity:0;animation-timing-function:steps(1,end)}6.25%{opacity:1;animation-timing-function:steps(1,end)}13.75%{opacity:0;animation-timing-function:steps(1,end)}20.417%{opacity:1;animation-timing-function:steps(1,end)}27.083%{opacity:0;animation-timing-function:steps(1,end)}100%{opacity:0}}
@keyframes pw-te-nx{0%{opacity:0;animation-timing-function:steps(1,end)}13.75%{opacity:1;animation-timing-function:steps(1,end)}20.417%{opacity:0;animation-timing-function:steps(1,end)}100%{opacity:0}}
@keyframes pw-op-st{0%{opacity:1;animation-timing-function:steps(1,end)}19.167%{opacity:0;animation-timing-function:steps(1,end)}26.25%{opacity:1;animation-timing-function:steps(1,end)}69.583%{opacity:0;animation-timing-function:steps(1,end)}76.667%{opacity:1;animation-timing-function:steps(1,end)}100%{opacity:1}}
@keyframes pw-op-ny{0%{opacity:0;animation-timing-function:steps(1,end)}19.167%{opacity:1;animation-timing-function:steps(1,end)}26.25%{opacity:0;animation-timing-function:steps(1,end)}100%{opacity:0}}
@keyframes pw-op-py{0%{opacity:0;animation-timing-function:steps(1,end)}69.583%{opacity:1;animation-timing-function:steps(1,end)}76.667%{opacity:0;animation-timing-function:steps(1,end)}100%{opacity:0}}
@keyframes pw-filling{0%{opacity:1;animation-timing-function:steps(1,end)}14.583%{opacity:0;animation-timing-function:steps(1,end)}81.25%{opacity:1;animation-timing-function:steps(1,end)}100%{opacity:1}}
@keyframes pw-lamp-on{0%{opacity:1;animation-timing-function:steps(1,end)}14.583%{opacity:0;animation-timing-function:steps(1,end)}81.25%{opacity:1;animation-timing-function:steps(1,end)}100%{opacity:1}}
@keyframes pw-lamp-idle{0%{opacity:0;animation-timing-function:steps(1,end)}14.583%{opacity:1;animation-timing-function:steps(1,end)}81.25%{opacity:0;animation-timing-function:steps(1,end)}100%{opacity:0}}
@keyframes pw-mop{0%,100%{transform:skewY(0deg)}25%{transform:skewY(25.5deg)}75%{transform:skewY(-25.5deg)}}
@keyframes pw-sheen{0%,8%{transform:none}38%,100%{transform:translate(110.8px,64px)}}
@keyframes pw-lega{0%,100%{transform:none}25%{transform:scaleY(.8)}50%{transform:none}}
@keyframes pw-legb{0%,50%,100%{transform:none}75%{transform:scaleY(.8)}}
@keyframes pw-bob{0%,50%,100%{transform:none}25%,75%{transform:translateY(-.9px)}}
@keyframes pw-scan{0%,100%{transform:none}50%{transform:translateY(-3px)}}
@keyframes pw-led{0%,55%,100%{opacity:1}60%,95%{opacity:.25}}
@keyframes pw-beacon{0%,12%,100%{opacity:1}18%,94%{opacity:.2}}
@keyframes pw-amber{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes pw-wa{0%,62%,100%{opacity:1}66%,84%{opacity:.35}88%{opacity:1}}
@keyframes pw-wb{0%,20%,100%{opacity:1}24%,44%{opacity:.4}48%{opacity:1}}
@keyframes pw-wc{0%,100%{opacity:1}50%{opacity:.82}}
@keyframes pw-wd{0%,30%,60%,100%{opacity:1}45%{opacity:.5}80%{opacity:.7}}
@keyframes pw-f0{0%,100%{opacity:1}33.3%,66.7%{opacity:0}}
@keyframes pw-f1{0%,100%{opacity:0}33.3%{opacity:1}66.7%{opacity:0}}
@keyframes pw-f2{0%,33.3%,100%{opacity:0}66.7%{opacity:1}}
.pw-lega,.pw-legb,.pw-cl-la,.pw-cl-lb{transform-box:fill-box;transform-origin:50% 0}
@keyframes pw-c0{0%{opacity:1.00}12.500%{opacity:0.00}87.500%{opacity:0.00}100%{opacity:1.00}}
.motion-ok .sm-ill .pw-c0{animation:pw-c0 3s linear infinite}
@keyframes pw-c1{0%{opacity:0.33}8.333%{opacity:1.00}20.833%{opacity:0.00}95.833%{opacity:0.00}100%{opacity:0.33}}
.motion-ok .sm-ill .pw-c1{animation:pw-c1 3s linear infinite}
@keyframes pw-c2{0%{opacity:0.00}4.167%{opacity:0.00}16.667%{opacity:1.00}29.167%{opacity:0.00}100%{opacity:0.00}}
.motion-ok .sm-ill .pw-c2{animation:pw-c2 3s linear infinite}
@keyframes pw-c3{0%{opacity:0.00}12.500%{opacity:0.00}25%{opacity:1.00}37.500%{opacity:0.00}100%{opacity:0.00}}
.motion-ok .sm-ill .pw-c3{animation:pw-c3 3s linear infinite}
@keyframes pw-c4{0%{opacity:0.00}20.833%{opacity:0.00}33.333%{opacity:1.00}45.833%{opacity:0.00}100%{opacity:0.00}}
.motion-ok .sm-ill .pw-c4{animation:pw-c4 3s linear infinite}
@keyframes pw-c5{0%{opacity:0.00}29.167%{opacity:0.00}41.667%{opacity:1.00}54.167%{opacity:0.00}100%{opacity:0.00}}
.motion-ok .sm-ill .pw-c5{animation:pw-c5 3s linear infinite}
@keyframes pw-c6{0%{opacity:0.00}37.500%{opacity:0.00}50%{opacity:1.00}62.500%{opacity:0.00}100%{opacity:0.00}}
.motion-ok .sm-ill .pw-c6{animation:pw-c6 3s linear infinite}
@keyframes pw-c7{0%{opacity:0.00}45.833%{opacity:0.00}58.333%{opacity:1.00}70.833%{opacity:0.00}100%{opacity:0.00}}
.motion-ok .sm-ill .pw-c7{animation:pw-c7 3s linear infinite}
@keyframes pw-c8{0%{opacity:0.00}54.167%{opacity:0.00}66.667%{opacity:1.00}79.167%{opacity:0.00}100%{opacity:0.00}}
.motion-ok .sm-ill .pw-c8{animation:pw-c8 3s linear infinite}
@keyframes pw-c9{0%{opacity:0.00}62.500%{opacity:0.00}75%{opacity:1.00}87.500%{opacity:0.00}100%{opacity:0.00}}
.motion-ok .sm-ill .pw-c9{animation:pw-c9 3s linear infinite}
@keyframes pw-c10{0%{opacity:0.00}70.833%{opacity:0.00}83.333%{opacity:1.00}95.833%{opacity:0.00}100%{opacity:0.00}}
.motion-ok .sm-ill .pw-c10{animation:pw-c10 3s linear infinite}
@keyframes pw-c11{0%{opacity:0.33}4.167%{opacity:0.00}79.167%{opacity:0.00}91.667%{opacity:1.00}100%{opacity:0.33}}
.motion-ok .sm-ill .pw-c11{animation:pw-c11 3s linear infinite}
.motion-ok .sm-ill .pw-tk{animation:pw-tk 24s linear infinite}
.motion-ok .sm-ill .pw-vn{animation:pw-vn 24s linear infinite}
.motion-ok .sm-ill .pw-te{animation:pw-te 24s linear infinite}
.motion-ok .sm-ill .pw-gate{animation:pw-gate 24s linear infinite}
.motion-ok .sm-ill .pw-hose{animation:pw-hose 24s linear infinite}
.motion-ok .sm-ill .pw-nozzle{animation:pw-nozzle 24s linear infinite}
.motion-ok .sm-ill .pw-op{animation:pw-op 24s linear infinite}
.motion-ok .sm-ill .pw-reel{animation:pw-reel 24s linear infinite}
.motion-ok .sm-ill .pw-op-arm{animation:pw-op-arm 24s linear infinite}
.motion-ok .sm-ill .pw-cl{animation:pw-cl 24s linear infinite}
.motion-ok .sm-ill .pw-cl-bob{animation:pw-cl-bob 24s linear infinite}
.motion-ok .sm-ill .pw-cl-la{animation:pw-cl-la 24s linear infinite}
.motion-ok .sm-ill .pw-cl-lb{animation:pw-cl-lb 24s linear infinite}
.motion-ok .sm-ill .pw-te-work{animation:pw-te-work 24s linear infinite}
.motion-ok .sm-ill .pw-te-ny{animation:pw-te-ny 24s linear infinite}
.motion-ok .sm-ill .pw-te-px{animation:pw-te-px 24s linear infinite}
.motion-ok .sm-ill .pw-te-py{animation:pw-te-py 24s linear infinite}
.motion-ok .sm-ill .pw-te-nx{animation:pw-te-nx 24s linear infinite}
.motion-ok .sm-ill .pw-op-st{animation:pw-op-st 24s linear infinite}
.motion-ok .sm-ill .pw-op-ny{animation:pw-op-ny 24s linear infinite}
.motion-ok .sm-ill .pw-op-py{animation:pw-op-py 24s linear infinite}
.motion-ok .sm-ill .pw-filling{animation:pw-filling 24s linear infinite}
.motion-ok .sm-ill .pw-lamp-on{animation:pw-lamp-on 24s linear infinite}
.motion-ok .sm-ill .pw-lamp-idle{animation:pw-lamp-idle 24s linear infinite}
.motion-ok .sm-ill .pw-mop{animation:pw-mop 1.5s cubic-bezier(.45,0,.55,1) infinite}
.motion-ok .sm-ill .pw-sheen{animation:pw-sheen 12s cubic-bezier(.45,0,.55,1) infinite}
.motion-ok .sm-ill .pw-lega{animation:pw-lega 1s linear infinite}
.motion-ok .sm-ill .pw-legb{animation:pw-legb 1s linear infinite}
.motion-ok .sm-ill .pw-bob{animation:pw-bob 1s linear infinite}
.motion-ok .sm-ill .pw-scan{animation:pw-scan 3s cubic-bezier(.45,0,.55,1) infinite}
.motion-ok .sm-ill .pw-led{animation:pw-led 2s linear infinite}
.motion-ok .sm-ill .pw-beacon{animation:pw-beacon 3s linear infinite}
.motion-ok .sm-ill .pw-amber{animation:pw-amber 1s linear infinite}
.motion-ok .sm-ill .pw-wa{animation:pw-wa 12s linear infinite}
.motion-ok .sm-ill .pw-wb{animation:pw-wb 8s linear infinite}
.motion-ok .sm-ill .pw-wc{animation:pw-wc 3s linear infinite}
.motion-ok .sm-ill .pw-wd{animation:pw-wd 4s linear infinite}
.motion-ok .sm-ill .pw-f0{animation:pw-f0 1.5s linear infinite}
.motion-ok .sm-ill .pw-f1{animation:pw-f1 1.5s linear infinite}
.motion-ok .sm-ill .pw-f2{animation:pw-f2 1.5s linear infinite}

.sm-ill .td-rope{transform-box:fill-box;transform-origin:50% 0}
.sm-ill .td-moor{transform-box:fill-box;transform-origin:50% 100%}
.sm-ill :is(.td-arm-hatch,.td-arm-quay,.td-arm-lash){transform-box:fill-box;transform-origin:50% 100%}
.sm-ill .td-flag{transform-box:fill-box;transform-origin:0 50%}
.motion-ok .sm-ill .td-trolley{animation:td-trolley 24s linear infinite}
.motion-ok .sm-ill .td-hoist{animation:td-hoist 24s linear infinite}
.motion-ok .sm-ill .td-rope{animation:td-rope 24s linear infinite}
.motion-ok .sm-ill .td-fall{animation:td-fall 24s linear infinite}
.motion-ok .sm-ill .td-box-held{animation:td-box-held 24s linear infinite}
.motion-ok .sm-ill .td-box-truck{animation:td-box-truck 24s linear infinite}
.motion-ok .sm-ill .td-hatch{animation:td-hatch 24s linear infinite}
.motion-ok .sm-ill .td-truck{animation:td-truck 24s linear infinite}
.motion-ok .sm-ill .td-lift{animation:td-lift 12s linear infinite}
.motion-ok .sm-ill .td-pallet{animation:td-pallet 12s linear infinite}
.motion-ok .sm-ill .td-lash{animation:td-lash 24s linear infinite}
.motion-ok .sm-ill .td-step{animation:td-step 24s linear infinite}
.motion-ok .sm-ill .td-arm-hatch{animation:td-arm-hatch 24s linear infinite}
.motion-ok .sm-ill .td-arm-quay{animation:td-arm-quay 24s linear infinite}
.motion-ok .sm-ill .td-arm-lash{animation:td-arm-lash 24s linear infinite}
.motion-ok .sm-ill .td-bob{animation:td-bob 8s linear infinite}
.motion-ok .sm-ill .td-moor{animation:td-moor 8s linear infinite}
.motion-ok .sm-ill .td-flag{animation:td-flag 3s linear infinite}
.motion-ok .sm-ill .td-beacon{animation:td-beacon 2s linear infinite}
.motion-ok .sm-ill .td-buoy{animation:td-buoy 6s linear infinite}
.motion-ok .sm-ill .td-sh1{animation:td-sh1 6s linear infinite}
.motion-ok .sm-ill .td-sh2{animation:td-sh2 6s linear infinite}
.motion-ok .sm-ill .td-sh3{animation:td-sh3 6s linear infinite}
@keyframes td-trolley{0%{transform:translate(-0.00px,0.00px);animation-timing-function:linear}2.083%{transform:translate(-0.00px,0.00px);animation-timing-function:cubic-bezier(.3,0,.25,1)}20.833%{transform:translate(-105.58px,60.96px);animation-timing-function:linear}47.5%{transform:translate(-105.58px,60.96px);animation-timing-function:cubic-bezier(.3,0,.25,1)}64.167%{transform:translate(-0.00px,0.00px);animation-timing-function:linear}100%{transform:translate(-0.00px,0.00px);animation-timing-function:linear}}
@keyframes td-hoist{0%{transform:translateY(0.00px);animation-timing-function:linear}23.333%{transform:translateY(0.00px);animation-timing-function:cubic-bezier(.3,0,.25,1)}35.833%{transform:translateY(45.60px);animation-timing-function:linear}40%{transform:translateY(45.60px);animation-timing-function:cubic-bezier(.3,0,.25,1)}47.5%{transform:translateY(0.00px);animation-timing-function:linear}64.167%{transform:translateY(0.00px);animation-timing-function:cubic-bezier(.3,0,.25,1)}76.667%{transform:translateY(56.00px);animation-timing-function:linear}80.833%{transform:translateY(56.00px);animation-timing-function:cubic-bezier(.3,0,.25,1)}98.333%{transform:translateY(0.00px);animation-timing-function:linear}100%{transform:translateY(0.00px);animation-timing-function:linear}}
@keyframes td-rope{0%{transform:scaleY(1.0000);animation-timing-function:linear}23.333%{transform:scaleY(1.0000);animation-timing-function:cubic-bezier(.3,0,.25,1)}35.833%{transform:scaleY(1.7961);animation-timing-function:linear}40%{transform:scaleY(1.7961);animation-timing-function:cubic-bezier(.3,0,.25,1)}47.5%{transform:scaleY(1.0000);animation-timing-function:linear}64.167%{transform:scaleY(1.0000);animation-timing-function:cubic-bezier(.3,0,.25,1)}76.667%{transform:scaleY(1.9777);animation-timing-function:linear}80.833%{transform:scaleY(1.9777);animation-timing-function:cubic-bezier(.3,0,.25,1)}98.333%{transform:scaleY(1.0000);animation-timing-function:linear}100%{transform:scaleY(1.0000);animation-timing-function:linear}}
@keyframes td-fall{0%{transform:translate(0.00px,0.00px);animation-timing-function:linear}23.333%{transform:translate(0.00px,0.00px);animation-timing-function:cubic-bezier(.3,0,.25,1)}35.833%{transform:translate(-9.87px,-5.70px);animation-timing-function:linear}40%{transform:translate(-9.87px,-5.70px);animation-timing-function:cubic-bezier(.3,0,.25,1)}47.5%{transform:translate(0.00px,0.00px);animation-timing-function:linear}64.167%{transform:translate(0.00px,0.00px);animation-timing-function:cubic-bezier(.3,0,.25,1)}76.667%{transform:translate(-12.12px,-7.00px);animation-timing-function:linear}80.833%{transform:translate(-12.12px,-7.00px);animation-timing-function:cubic-bezier(.3,0,.25,1)}98.333%{transform:translate(0.00px,0.00px);animation-timing-function:linear}100%{transform:translate(0.00px,0.00px);animation-timing-function:linear}}
@keyframes td-box-held{0%{opacity:1;animation-timing-function:step-end}35.833%{opacity:0;animation-timing-function:step-end}78.75%{opacity:1;animation-timing-function:step-end}100%{opacity:1;animation-timing-function:step-end}}
@keyframes td-box-truck{0%{opacity:0;animation-timing-function:step-end}35.833%{opacity:1;animation-timing-function:step-end}68.333%{opacity:0;animation-timing-function:step-end}100%{opacity:0;animation-timing-function:step-end}}
@keyframes td-hatch{0%{opacity:0;animation-timing-function:step-end}64.167%{opacity:1;animation-timing-function:step-end}98.333%{opacity:0;animation-timing-function:step-end}100%{opacity:0;animation-timing-function:step-end}}
@keyframes td-truck{0%{transform:translate(0.00px,0.00px);animation-timing-function:linear}49.167%{transform:translate(0.00px,0.00px);animation-timing-function:cubic-bezier(.5,0,.9,.7)}68.333%{transform:translate(113.62px,65.60px);animation-timing-function:step-end}68.417%{transform:translate(-189.83px,-109.60px);animation-timing-function:cubic-bezier(.15,.6,.3,1)}93.333%{transform:translate(0.00px,0.00px);animation-timing-function:linear}100%{transform:translate(0.00px,0.00px);animation-timing-function:linear}}
@keyframes td-lift{0%{transform:translate(0.00px,0.00px);animation-timing-function:linear}4.167%{transform:translate(0.00px,0.00px);animation-timing-function:cubic-bezier(.3,0,.25,1)}21.667%{transform:translate(11.36px,6.56px);animation-timing-function:linear}28.333%{transform:translate(11.36px,6.56px);animation-timing-function:cubic-bezier(.3,0,.25,1)}61.667%{transform:translate(-41.57px,-24.00px);animation-timing-function:linear}78.333%{transform:translate(-41.57px,-24.00px);animation-timing-function:cubic-bezier(.3,0,.25,1)}96.667%{transform:translate(0.00px,0.00px);animation-timing-function:linear}100%{transform:translate(0.00px,0.00px);animation-timing-function:linear}}
@keyframes td-pallet{0%{opacity:1;animation-timing-function:step-end}25%{opacity:0;animation-timing-function:step-end}70%{opacity:1;animation-timing-function:step-end}100%{opacity:1;animation-timing-function:step-end}}
@keyframes td-lash{0%{transform:translate(-0.00px,0.00px);animation-timing-function:linear}36.667%{transform:translate(-0.00px,0.00px);animation-timing-function:cubic-bezier(.3,0,.25,1)}40.833%{transform:translate(-14.41px,8.32px);animation-timing-function:linear}45%{transform:translate(-14.41px,8.32px);animation-timing-function:cubic-bezier(.3,0,.25,1)}49.167%{transform:translate(-0.00px,0.00px);animation-timing-function:linear}100%{transform:translate(-0.00px,0.00px);animation-timing-function:linear}}
@keyframes td-step{0%{transform:translateY(0);animation-timing-function:ease-in-out}36.667%{transform:translateY(0);animation-timing-function:ease-in-out}37.708%{transform:translateY(-0.9px);animation-timing-function:ease-in-out}38.75%{transform:translateY(0px);animation-timing-function:ease-in-out}39.792%{transform:translateY(-0.9px);animation-timing-function:ease-in-out}40.833%{transform:translateY(0px);animation-timing-function:ease-in-out}40.833%{transform:translateY(0);animation-timing-function:ease-in-out}45%{transform:translateY(0);animation-timing-function:ease-in-out}46.042%{transform:translateY(-0.9px);animation-timing-function:ease-in-out}47.083%{transform:translateY(0px);animation-timing-function:ease-in-out}48.125%{transform:translateY(-0.9px);animation-timing-function:ease-in-out}49.167%{transform:translateY(0px);animation-timing-function:ease-in-out}49.167%{transform:translateY(0);animation-timing-function:ease-in-out}100%{transform:translateY(0);animation-timing-function:ease-in-out}}
@keyframes td-arm-hatch{0%{transform:rotate(150deg);animation-timing-function:cubic-bezier(.3,0,.25,1)}63.333%{transform:rotate(150deg);animation-timing-function:cubic-bezier(.3,0,.25,1)}65%{transform:rotate(20deg);animation-timing-function:ease-in-out}67.083%{transform:rotate(-20deg);animation-timing-function:ease-in-out}69.167%{transform:rotate(20deg);animation-timing-function:ease-in-out}71.25%{transform:rotate(-20deg);animation-timing-function:ease-in-out}73.333%{transform:rotate(20deg);animation-timing-function:ease-in-out}75.417%{transform:rotate(-20deg);animation-timing-function:ease-in-out}77.5%{transform:rotate(20deg);animation-timing-function:cubic-bezier(.3,0,.25,1)}80%{transform:rotate(150deg);animation-timing-function:cubic-bezier(.3,0,.25,1)}100%{transform:rotate(150deg);animation-timing-function:cubic-bezier(.3,0,.25,1)}}
@keyframes td-arm-quay{0%{transform:rotate(150deg);animation-timing-function:cubic-bezier(.3,0,.25,1)}80.833%{transform:rotate(150deg);animation-timing-function:cubic-bezier(.3,0,.25,1)}82.5%{transform:rotate(20deg);animation-timing-function:ease-in-out}84.583%{transform:rotate(-20deg);animation-timing-function:ease-in-out}86.667%{transform:rotate(20deg);animation-timing-function:ease-in-out}88.75%{transform:rotate(-20deg);animation-timing-function:ease-in-out}90.833%{transform:rotate(20deg);animation-timing-function:ease-in-out}92.917%{transform:rotate(-20deg);animation-timing-function:cubic-bezier(.3,0,.25,1)}95%{transform:rotate(150deg);animation-timing-function:cubic-bezier(.3,0,.25,1)}20%{transform:rotate(150deg);animation-timing-function:cubic-bezier(.3,0,.25,1)}21.667%{transform:rotate(20deg);animation-timing-function:ease-in-out}23.75%{transform:rotate(-20deg);animation-timing-function:ease-in-out}25.833%{transform:rotate(20deg);animation-timing-function:ease-in-out}27.917%{transform:rotate(-20deg);animation-timing-function:ease-in-out}30%{transform:rotate(20deg);animation-timing-function:ease-in-out}32.083%{transform:rotate(-20deg);animation-timing-function:ease-in-out}34.167%{transform:rotate(20deg);animation-timing-function:cubic-bezier(.3,0,.25,1)}35.833%{transform:rotate(150deg);animation-timing-function:cubic-bezier(.3,0,.25,1)}100%{transform:rotate(150deg);animation-timing-function:cubic-bezier(.3,0,.25,1)}}
@keyframes td-arm-lash{0%{transform:rotate(170deg);animation-timing-function:cubic-bezier(.3,0,.25,1)}40.833%{transform:rotate(170deg);animation-timing-function:cubic-bezier(.3,0,.25,1)}42.5%{transform:rotate(-150deg);animation-timing-function:cubic-bezier(.3,0,.25,1)}45%{transform:rotate(170deg);animation-timing-function:cubic-bezier(.3,0,.25,1)}100%{transform:rotate(170deg);animation-timing-function:cubic-bezier(.3,0,.25,1)}}
@keyframes td-bob{0%{transform:translateY(0);animation-timing-function:ease-in-out}50%{transform:translateY(1.3px);animation-timing-function:ease-in-out}100%{transform:translateY(0);animation-timing-function:ease-in-out}}
@keyframes td-moor{0%{transform:scaleY(1);animation-timing-function:ease-in-out}50%{transform:scaleY(var(--s));animation-timing-function:ease-in-out}100%{transform:scaleY(1);animation-timing-function:ease-in-out}}
@keyframes td-flag{0%{transform:skewY(-5deg);animation-timing-function:ease-in-out}50%{transform:skewY(5deg);animation-timing-function:ease-in-out}100%{transform:skewY(-5deg);animation-timing-function:ease-in-out}}
@keyframes td-beacon{0%{opacity:1;animation-timing-function:step-end}50%{opacity:0.25;animation-timing-function:step-end}100%{opacity:1;animation-timing-function:step-end}}
@keyframes td-buoy{0%{transform:translateY(0);animation-timing-function:ease-in-out}50%{transform:translateY(1.4px);animation-timing-function:ease-in-out}100%{transform:translateY(0);animation-timing-function:ease-in-out}}
@keyframes td-sh1{0%{opacity:0.9;transform:translate(0,0);animation-timing-function:ease-in-out}50%{opacity:0.25;transform:translate(3px,1.73px);animation-timing-function:ease-in-out}100%{opacity:0.9;transform:translate(0,0);animation-timing-function:ease-in-out}}
@keyframes td-sh2{0%{opacity:0.3;transform:translate(0,0);animation-timing-function:ease-in-out}50%{opacity:0.85;transform:translate(-3px,-1.73px);animation-timing-function:ease-in-out}100%{opacity:0.3;transform:translate(0,0);animation-timing-function:ease-in-out}}
@keyframes td-sh3{0%{opacity:0.6;transform:translate(0,0);animation-timing-function:ease-in-out}50%{opacity:0.15;transform:translate(2px,1.15px);animation-timing-function:ease-in-out}100%{opacity:0.6;transform:translate(0,0);animation-timing-function:ease-in-out}}



[data-co="power"]{--band:#F15B2A;--accent:#FAAF42;--on:#16201B;--word:#16201B;--stage:#FCEBD6;--stage-word:#F15B2A}
[data-co="international"]{--band:#0C9447;--accent:#8CC641;--on:#0A0F0C;--word:#0A0F0C;--stage:#DDF1E4;--stage-word:#0C9447}
[data-co="consulting"]{--band:#1D6B38;--accent:#FAAF42;--on:#FFFFFF;--word:#FFFFFF;--stage:#E3EEDD;--stage-word:#1D6B38}
[data-co="rayya"]{--band:#1E1B16;--accent:#D9A441;--on:#FFFFFF;--word:#D9A441;--stage:#F2E8D6;--stage-word:#B8862B}
[data-co="realestate"]{--band:#652F90;--accent:#27AEE4;--on:#FFFFFF;--word:#FFFFFF;--stage:#EDE5FA;--stage-word:#652F90}
[data-co="pms"]{--band:#7E1416;--accent:#F3C6BE;--on:#FFFFFF;--word:#F3C6BE;--stage:#F8E3DF;--stage-word:#7E1416}
[data-co="bitnix"]{--band:#F5006E;--accent:#2E2E30;--on:#0A0F0C;--word:#0A0F0C;--stage:#FDE4EC;--stage-word:#F5006E}
[data-co="unique"]{--band:#0E3A8A;--accent:#FFB000;--on:#FFFFFF;--word:#FFB000;--stage:#E0E9FB;--stage-word:#0E3A8A}
[data-co="fashions"]{--band:#E8501F;--accent:#FFD27A;--on:#0A0F0C;--word:#0A0F0C;--stage:#FEE3DC;--stage-word:#E8501F}
[data-co="hami"]{--band:#399A48;--accent:#E7E866;--on:#16201B;--word:#16201B;--stage:#E4F3DC;--stage-word:#399A48}
[data-co="health"]{--band:#1283C6;--accent:#8CC641;--on:#0A0F0C;--word:#0A0F0C;--stage:#DCEFFB;--stage-word:#1283C6}
[data-co="trade"]{--band:#26A8E0;--accent:#29B574;--on:#16201B;--word:#16201B;--stage:#D9F1F6;--stage-word:#26A8E0}
.ak,.ct-stage{--stage:#E1EEDF;--stage-word:#1D6B38}