@font-face{
font-family:Anybody;
src:url("fonts/anybody-variable.woff2")}
@font-face{
font-family:"DM Mono";
src:url("fonts/dm-mono-regular.woff2")}
:root{
--night:#041228;
--deep:#071d3e;
--cyan:#42e8ff;
--coral:#ff6b45;
--line:#285071;
--muted:#a9bdd5;
--display:Anybody,sans-serif;
--mono:"DM Mono",monospace;
--radius:14px}
*{
box-sizing:border-box}
html{
scroll-behavior:smooth}
body{
margin:0;
background:var(--night);
color:#fff;
font-family:var(--display);
line-height:1.5;
overflow-x:hidden}
body:before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
background:linear-gradient(rgba(66,232,255,.03) 1px,transparent 1px);
background-size:100% 80px;
z-index:-1}
::selection{
background:var(--cyan);
color:var(--night)}
:focus-visible{
outline:3px solid var(--coral);
outline-offset:4px}
a{
color:inherit;
text-underline-offset:.3em}
.skip{
position:fixed;
top:1rem;
left:1rem;
transform:translateY(-150%);
background:#fff;
color:var(--night);
padding:.7rem 1rem;
z-index:50}
.skip:focus{
transform:none}
.site-header{
height:78px;
padding:0 clamp(1rem,4vw,4rem);
display:grid;
grid-template-columns:3fr 7fr 2fr;
align-items:center;
position:sticky;
top:0;
z-index:20;
background:rgba(4,18,40,.9);
backdrop-filter:blur(14px);
border-bottom:1px solid var(--line)}
.brand{
font-size:1.25rem;
font-weight:850;
text-decoration:none}
.brand-dot{
display:inline-block;
width:.55em;
height:.55em;
margin-left:.18em;
border-radius:50%;
background:var(--coral);
box-shadow:0 0 20px #ff6b45}
.nav{
display:flex;
justify-content:center;
gap:clamp(1rem,3vw,3rem)}
.nav a{
text-decoration:none;
color:#c6d6e8}
.nav a:hover,.nav a[aria-current=page]{
color:#fff}
.nav a[aria-current=page]{
text-decoration:underline;
text-decoration-color:var(--cyan);
text-decoration-thickness:2px}
.wa-mini{
justify-self:end;
text-decoration:none;
color:var(--cyan);
font:500 .68rem var(--mono);
text-transform:uppercase}
.menu-toggle{
display:none;
background:0;
border:0;
color:#fff;
font:500 .8rem var(--mono)}
.hero{
min-height:calc(100svh - 78px);
display:grid;
grid-template-columns:7fr 5fr;
position:relative;
isolation:isolate;
border-bottom:1px solid var(--line)}
.hero:before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(4,18,40,.98),rgba(4,18,40,.72) 48%,rgba(4,18,40,.12)),url("image/banner.png") center/cover;
z-index:-1}
.hero-copy{
padding:clamp(3rem,7vw,7rem) clamp(1rem,4vw,4rem);
display:flex;
flex-direction:column;
justify-content:space-between;
min-width:0}
.hero h1,.page-hero h1{
font-size:clamp(3.5rem,7vw,6rem);
line-height:.92;
letter-spacing:-.04em;
font-weight:700;
margin:0;
max-width:10ch;
text-wrap:balance}
.hero h1 span{
color:var(--cyan)}
.hero-intro{
display:grid;
grid-template-columns:1fr 2fr;
gap:2rem;
max-width:760px}
.spec-label{
font:400 .67rem var(--mono);
letter-spacing:.12em;
text-transform:uppercase;
color:var(--cyan)}
.lead{
font-size:clamp(1.05rem,1.7vw,1.35rem);
max-width:62ch;
margin:0;
color:#deebf8}
.hero-actions{
display:flex;
gap:.75rem;
flex-wrap:wrap;
margin:2rem 0}
.button{
display:inline-flex;
justify-content:space-between;
gap:2rem;
min-height:54px;
padding:.85rem 1.1rem;
border:1px solid #a9bdd5;
border-radius:var(--radius);
font-weight:650;
text-decoration:none;
transition:.25s}
.button:hover{
transform:translateY(-3px)}
.button.primary{
background:var(--coral);
border-color:var(--coral)}
.button.primary:hover{
background:#fff;
color:var(--night)}
.specimen{
margin:clamp(2rem,5vw,5rem) clamp(1rem,4vw,4rem) clamp(2rem,5vw,5rem) 0;
padding:clamp(1.5rem,3vw,2.5rem);
display:flex;
flex-direction:column;
justify-content:space-between;
min-width:0;
background:linear-gradient(180deg,rgba(8,44,88,.75),rgba(3,14,31,.95));
border:1px solid #287da7;
border-radius:18px;
backdrop-filter:blur(12px);
box-shadow:0 28px 70px #0008}
.specimen-stage{
min-height:55%;
display:grid;
place-items:center;
position:relative}
.specimen-stage:before,.specimen-stage:after{
content:"";
position:absolute;
border:1px solid #42e8ff88;
border-radius:50%}
.specimen-stage:before{
width:280px;
height:280px}
.specimen-stage:after{
width:180px;
height:180px}
.specimen-word{
font-size:clamp(3.8rem,7vw,6rem);
font-weight:760;
color:#fff;
z-index:2;
text-shadow:0 0 30px #42e8ff77}
.axis{
border-top:1px solid var(--line);
padding-top:1rem}
.axis-head{
display:flex;
justify-content:space-between;
font:400 .65rem var(--mono)}
.axis input{
width:100%;
accent-color:var(--cyan)}
.presets{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:.5rem;
margin-top:1rem}
.preset{
min-height:44px;
border:1px solid #ffffff55;
background:transparent;
color:#fff;
font:500 .68rem var(--mono)}
.preset[aria-pressed=true]{
background:var(--cyan);
color:var(--night);
border-color:var(--cyan)}
.section{
padding:clamp(5rem,9vw,9rem) clamp(1rem,4vw,4rem);
border-bottom:1px solid var(--line)}
.section:nth-of-type(even){
background:var(--deep)}
.section-head{
display:grid;
grid-template-columns:3fr 9fr;
gap:2rem;
margin-bottom:clamp(3rem,6vw,6rem)}
.section h2{
font-size:clamp(2.6rem,5vw,5rem);
line-height:.98;
letter-spacing:-.04em;
margin:0;
max-width:13ch}
.service-list{
border-top:1px solid var(--line)}
.service-row{
display:grid;
grid-template-columns:1fr 4fr 4fr 2fr;
gap:1.5rem;
padding:2rem 0;
border-bottom:1px solid var(--line)}
.service-row strong{
font-size:clamp(1.35rem,2.2vw,2.2rem);
line-height:1.1}
.service-row p,.step p{
margin:0;
color:var(--muted)}
.service-row a{
justify-self:end;
color:var(--cyan)}
.index{
font:400 .68rem var(--mono);
color:var(--cyan)}
.duality{
display:grid;
grid-template-columns:1fr 1fr;
min-height:72vh}
.duality>article{
padding:clamp(3rem,6vw,7rem);
display:flex;
flex-direction:column;
justify-content:space-between}
.duality .build{
background:#061329}
.duality .teach{
background:linear-gradient(0deg,rgba(4,18,40,.9),rgba(4,18,40,.2)),url("image/Robotic Coding Class.png") center/cover}
.duality h2{
font-size:clamp(3rem,6vw,6rem);
line-height:.9;
letter-spacing:-.04em;
margin:0}
.duality p{
max-width:42ch;
font-size:1.08rem}
.duality a{
color:var(--cyan)}
.process{
display:grid;
grid-template-columns:repeat(4,1fr);
border-top:1px solid var(--line)}
.step{
min-height:230px;
padding:1.5rem;
border-right:1px solid var(--line);
display:flex;
flex-direction:column;
justify-content:space-between}
.step:last-child{
border:0}
.step strong{
font-size:1.5rem}
.cta{
--cta-gutter:clamp(1rem,4vw,4rem);
position:relative;
isolation:isolate;
overflow:hidden;
padding:clamp(5rem,8vw,8rem) var(--cta-gutter) 0;
background:var(--deep)!important;
display:grid;
grid-template-columns:minmax(0,8fr) minmax(240px,4fr);
column-gap:clamp(2rem,5vw,5rem);
row-gap:clamp(3rem,6vw,5rem);
align-items:end}
.cta:before{
content:"";
position:absolute;
z-index:-1;
inset:0 0 auto;
height:1px;
background:linear-gradient(90deg,var(--cyan),transparent 72%)}
.cta h2{
margin:0;
max-width:12ch;
font-size:clamp(3rem,6vw,6rem);
line-height:.92;
letter-spacing:-.04em;
text-wrap:balance}
.cta-media{
grid-column:1/-1;
position:relative;
width:calc(100% + (2 * var(--cta-gutter)));
margin:0 calc(-1 * var(--cta-gutter));
aspect-ratio:21/8;
overflow:hidden}
.cta-media:after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(180deg,rgba(3,47,44,.3),transparent 35%,rgba(1,32,30,.22))}
.cta-media img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center 48%;
filter:saturate(.9) contrast(1.04)}
.cta .button{
justify-self:end;
width:min(100%,320px);
background:#fff;
color:var(--night);
border-color:#fff}
.page-hero{
min-height:65vh;
padding:clamp(5rem,9vw,9rem) clamp(1rem,4vw,4rem);
display:grid;
grid-template-columns:8fr 4fr;
gap:3rem;
align-items:end;
border-bottom:1px solid var(--line);
background:linear-gradient(120deg,rgba(4,18,40,.97),rgba(5,46,100,.62)),url("image/banner.png") center/cover}
.page-hero .lead{
justify-self:end}
.detail-grid{
display:grid;
grid-template-columns:repeat(12,1fr);
gap:1px;
background:var(--line)}
.detail{
background:var(--deep);
padding:clamp(2rem,4vw,4rem);
grid-column:span 4;
min-height:350px}
.detail.wide{
grid-column:span 8}
.detail h2{
font-size:clamp(2rem,3.5vw,3.5rem);
line-height:1;
margin:0 0 2rem}
.detail p,.detail li{
color:#c7d8e9}
.quote-line{
font-size:clamp(2rem,4vw,4rem);
line-height:1.05;
max-width:20ch}
.contact-grid{
display:grid;
grid-template-columns:7fr 5fr;
min-height:68vh}
.contact-main,.contact-side{
padding:clamp(4rem,7vw,7rem)}
.contact-main{
background:linear-gradient(120deg,rgba(4,18,40,.95),rgba(4,18,40,.45)),url("image/banner.png") center/cover}
.contact-side{
background:var(--coral)}
.contact-side .spec-label{
color:var(--night)}
.contact-number{
display:block;
font-size:clamp(2.2rem,5vw,5rem);
line-height:1;
font-weight:760;
margin:2rem 0;
text-decoration:none}
.footer{
padding:3rem clamp(1rem,4vw,4rem);
display:grid;
grid-template-columns:6fr 3fr 3fr;
gap:2rem;
background:#020914;
border-top:1px solid var(--line)}
@media(max-width:800px){
.site-header{
height:68px;
grid-template-columns:1fr auto}
.menu-toggle{
display:block}
.nav{
display:none;
position:absolute;
top:68px;
left:0;
right:0;
background:var(--night);
padding:1.5rem;
flex-direction:column}
.nav.open{
display:flex}
.wa-mini{
display:none}
.hero,.page-hero,.cta,.contact-grid{
grid-template-columns:1fr}
.cta-media{
width:calc(100% + (2 * var(--cta-gutter)));
min-height:0;
aspect-ratio:4/3}
.cta .button{
justify-self:stretch;
width:100%}
.hero:before{
background:linear-gradient(180deg,rgba(4,18,40,.96),rgba(4,18,40,.4)),url("image/banner.png") 45% center/cover}
.hero-copy{
min-height:72svh}
.hero-intro,.section-head{
grid-template-columns:1fr}
.specimen{
margin:0 1rem 2rem;
min-height:550px}
.duality{
grid-template-columns:1fr}
.service-row{
grid-template-columns:1fr}
.service-row a{
justify-self:start}
.process{
grid-template-columns:1fr}
.step{
min-height:170px;
border-right:0;
border-bottom:1px solid var(--line)}
.detail,.detail.wide{
grid-column:span 12}
.page-hero .lead{
justify-self:start}
.footer{
grid-template-columns:1fr}
.contact-number{
overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
*{
transition-duration:.01ms!important}
}
@media(max-width:800px){
.menu-toggle{
display:block!important;
position:absolute;
right:1rem;
top:1.35rem;
z-index:30}
.hero-intro .lead{
width:auto;
max-width:30ch;
overflow-wrap:normal;
word-break:normal}
}
/* Hexnetics corporate identity: dark green, supplied logo, Malaysian digital imagery. */
:root{
--night:#032f2c;
--deep:#06433f;
--cyan:#63e6c7;
--coral:#d6a84b;
--line:#2d6b62;
--muted:#bdd5d0}
body{
background:#032f2c}
.site-header{
background:#fff;
border-bottom-color:#d7e2df;
color:#063b37}
.brand{
width:156px;
height:58px;
display:block;
background:url("image/Hex-logo.jpg") left center/contain no-repeat;
text-indent:-9999px;
overflow:hidden}
.brand-dot{
display:none}
.nav a{
color:#375d58}
.nav a:hover,.nav a[aria-current=page]{
color:#063b37}
.wa-mini{
color:#08796d}
.hero:before{
background:linear-gradient(90deg,rgba(3,47,44,.98),rgba(3,47,44,.77) 48%,rgba(3,47,44,.18)),url("image/banner.png") center/cover}
.button.primary{
background:#08796d;
border-color:#08796d}
.specimen{
background:linear-gradient(180deg,rgba(5,74,67,.82),rgba(2,33,31,.96));
border-color:#3bbca7}
.specimen-stage:before,.specimen-stage:after{
border-color:#63e6c788}
.specimen-word{
color:#fff;
text-shadow:0 0 30px #63e6c777}
.preset[aria-pressed=true]{
background:#63e6c7;
border-color:#63e6c7}
.duality .build{
background:#022b29}
.duality .teach{
background:linear-gradient(0deg,rgba(3,47,44,.92),rgba(3,47,44,.2)),url("image/Robotic Coding Class.png") center/cover}
.cta{
background:linear-gradient(120deg,#08796d,#03443f)!important}
.page-hero{
background:linear-gradient(120deg,rgba(3,47,44,.97),rgba(5,92,82,.62)),url("image/banner.png") center/cover}
.detail{
background:#06433f}
.contact-main{
background:linear-gradient(120deg,rgba(3,47,44,.96),rgba(3,47,44,.48)),url("image/banner.png") center/cover}
.contact-side{
background:#d6a84b;
color:#102e2a}
.footer{
background:#01201e}
.footer .brand{
filter:none;
background-color:#fff;
border-radius:8px}
@media(max-width:800px){
.site-header{
background:#fff}
.menu-toggle{
color:#063b37}
.nav{
background:#fff}
.nav a{
color:#184b45}
.hero:before{
background:linear-gradient(180deg,rgba(3,47,44,.96),rgba(3,47,44,.42)),url("image/banner.png") 45% center/cover}
.brand{
width:132px;
height:54px}
}
@media(max-width:800px){
.menu-toggle{
display:flex!important;
visibility:visible!important;
opacity:1!important;
position:absolute!important;
right:1rem!important;
top:12px!important;
width:72px;
height:44px;
align-items:center;
justify-content:center;
border:0;
border-radius:10px;
background:#063b37!important;
color:#fff!important;
cursor:pointer;
z-index:40}
}
@media(max-width:800px){
.site-header{
height:auto;
min-height:112px;
grid-template-columns:1fr;
padding-top:4px}
.menu-toggle{
display:none!important}
.nav{
display:flex!important;
position:static!important;
grid-column:1/-1;
flex-direction:row;
justify-content:flex-start;
gap:1.25rem;
width:100%;
padding:.55rem 0 .8rem;
overflow-x:auto;
border:0}
.nav a{
white-space:nowrap;
font-size:.8rem}
}
/* Services page: detailed solution specification. */
.services-hero h1{
max-width:12ch}
.page-intro{
max-width:60ch;
justify-self:end}
.page-intro p{
margin:0;
color:#deebf8;
font-size:clamp(1rem,1.45vw,1.2rem)}
.page-intro p+p{
margin-top:1.25rem}
.solutions-intro{
padding:clamp(3.5rem,6vw,6rem) clamp(1rem,4vw,4rem);
display:grid;
grid-template-columns:3fr 9fr;
gap:2rem;
border-bottom:1px solid var(--line);
background:#022b29}
.solutions-intro h2{
max-width:16ch;
margin:0;
font-size:clamp(2.4rem,4.5vw,4.5rem);
line-height:1;
letter-spacing:-.04em}
.service-spec{
display:grid;
grid-template-columns:5fr 7fr;
gap:clamp(3rem,7vw,8rem);
padding:clamp(4rem,7vw,7rem) clamp(1rem,4vw,4rem);
border-bottom:1px solid var(--line)}
.service-spec:nth-of-type(even){
background:var(--deep)}
.service-spec-heading{
align-self:start}
.service-spec-heading h2{
max-width:12ch;
margin:.8rem 0 1.5rem;
font-size:clamp(2.5rem,4.6vw,4.8rem);
line-height:.96;
letter-spacing:-.04em}
.service-spec-heading p{
max-width:48ch;
margin:0;
color:#d4e5e1;
font-size:1.05rem}
.service-action{
margin-top:2rem;
color:#fff;
border-color:#63e6c7}
.service-action:hover{
background:#63e6c7;
color:#032f2c}
.service-spec-list{
align-self:start;
padding-top:.25rem}
.list-title{
margin:0 0 1.5rem;
font:500 .75rem var(--mono);
letter-spacing:.08em;
text-transform:uppercase;
color:#63e6c7}
.service-spec-list ul{
margin:0;
padding:0;
columns:2;
column-gap:clamp(2rem,4vw,4rem);
list-style:none}
.service-spec-list li{
position:relative;
break-inside:avoid;
margin:0 0 1.15rem;
padding:0 0 1.15rem 1.4rem;
border-bottom:1px solid rgba(99,230,199,.18);
color:#e3efec}
.service-spec-list li:before{
content:"+";
position:absolute;
left:0;
color:#d6a84b;
font-family:var(--mono)}
.service-note{
margin:1.5rem 0 0;
padding:1.25rem;
border-top:2px solid #d6a84b;
background:rgba(1,32,30,.55);
color:#d4e5e1}
@media(max-width:800px){
.page-intro{
justify-self:start}
.solutions-intro,.service-spec{
grid-template-columns:1fr}
.solutions-intro{
gap:1rem}
.service-spec{
gap:3rem}
.service-spec-list ul{
columns:1}
.service-action{
width:100%}
}
/* Training page: audience pathways and practical curriculum bands. */
.training-hero h1{
max-width:12ch}
.training-hero-action{
margin-top:2rem;
border-color:#63e6c7}
.training-audiences{
display:grid;
grid-template-columns:7fr 5fr;
border-bottom:1px solid var(--line)}
.training-audience{
min-height:620px;
padding:clamp(3rem,6vw,7rem);
display:flex;
flex-direction:column;
justify-content:space-between}
.training-audience.kids{
background:linear-gradient(0deg,rgba(3,47,44,.92),rgba(3,47,44,.2)),url("image/Robotic Coding Class.png") center/cover}
.training-audience.graduates{
background:#022b29}
.training-audience h2{
max-width:10ch;
margin:0 0 1.5rem;
font-size:clamp(2.8rem,5.5vw,5.5rem);
line-height:.94;
letter-spacing:-.04em}
.training-audience p{
max-width:45ch;
margin:0;
font-size:1.08rem;
color:#e0eeeb}
.training-audience a{
color:#63e6c7;
font-weight:650}
.training-programme{
display:grid;
grid-template-columns:5fr 7fr;
gap:clamp(3rem,7vw,8rem);
padding:clamp(5rem,8vw,8rem) clamp(1rem,4vw,4rem);
border-bottom:1px solid var(--line);
background:#06433f}
.training-programme.automation{
background:#032f2c}
.training-programme-heading h2{
max-width:11ch;
margin:0 0 1.5rem;
font-size:clamp(2.8rem,5vw,5rem);
line-height:.96;
letter-spacing:-.04em}
.training-programme-heading p{
max-width:46ch;
margin:0;
color:#d4e5e1;
font-size:1.05rem}
.training-curriculum ul{
margin:0;
padding:0;
columns:2;
column-gap:clamp(2rem,4vw,4rem);
list-style:none}
.training-curriculum li{
position:relative;
break-inside:avoid;
margin:0 0 1.15rem;
padding:0 0 1.15rem 1.4rem;
border-bottom:1px solid rgba(99,230,199,.18);
color:#e3efec}
.training-curriculum li:before{
content:"+";
position:absolute;
left:0;
color:#d6a84b;
font-family:var(--mono)}
.programme-context{
margin:1.75rem 0 0;
padding:1.25rem;
border-top:2px solid #d6a84b;
background:rgba(1,32,30,.55);
color:#d4e5e1}
.training-partnership{
padding:clamp(4rem,7vw,7rem) clamp(1rem,4vw,4rem);
display:grid;
grid-template-columns:7fr 5fr;
gap:3rem;
align-items:end;
border-bottom:1px solid var(--line);
background:#022b29}
.training-partnership h2{
max-width:12ch;
margin:0;
font-size:clamp(2.8rem,5vw,5rem);
line-height:.96;
letter-spacing:-.04em}
.training-partnership p{
max-width:52ch;
margin:0;
color:#d4e5e1;
font-size:1.08rem}
@media(max-width:800px){
.training-audiences,.training-programme,.training-partnership{
grid-template-columns:1fr}
.training-audience{
min-height:520px}
.training-programme{
gap:3rem}
.training-curriculum ul{
columns:1}
.training-partnership{
align-items:start}
}
.training-audience.graduates{
background:linear-gradient(0deg,rgba(3,47,44,.95),rgba(3,47,44,.55)),url("image/coding class fresh grad.jpg") center/cover}
.training-audience.students{
background:linear-gradient(0deg,rgba(3,47,44,.92),rgba(3,47,44,.2)),url("image/Robotic Coding Class.png") center/cover}
.training-hero{
position:relative;
isolation:isolate;
overflow:hidden}
.training-hero:before{
content:"";
position:absolute;
inset:0;
z-index:-1;
background:linear-gradient(120deg,rgba(3,47,44,.94),rgba(3,47,44,.62))}
.training-hero h1,.training-hero .page-intro{
position:relative;
z-index:1}
.training-hero-video{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-2}
.training-hero:after{
content:"";
position:absolute;
inset:auto 0 0;
height:22%;
z-index:-1;
background:linear-gradient(transparent,rgba(1,32,30,.78));
pointer-events:none}
.training-hero .page-intro{
align-self:end}
.training-hero .lead{
max-width:48ch}
.training-hero-route{
margin:1.5rem 0 0!important;
color:#63e6c7!important;
font:400 .72rem var(--mono);
letter-spacing:.1em;
text-transform:uppercase}
.training-hero-route span{
color:#d6a84b;
padding:0 .55rem}
.services-hero h1 span{color:#63e6c7}
.service-spec#modern-web-design{position:relative;isolation:isolate;background:linear-gradient(90deg,rgba(3,47,44,.97),rgba(3,47,44,.84)),url("image/Web Design Selangor.jpg") center/cover}.service-spec#modern-web-design .service-spec-heading,.service-spec#modern-web-design .service-spec-list{position:relative;z-index:1}
.service-spec#mobile-apps-development{position:relative;isolation:isolate;background:linear-gradient(90deg,rgba(3,47,44,.97),rgba(3,47,44,.84)),url("image/Mobile Apps.jpg") center/cover}.service-spec#mobile-apps-development .service-spec-heading,.service-spec#mobile-apps-development .service-spec-list{position:relative;z-index:1}
.specimen-word{
font-variation-settings:"wght" var(--weight,760),"wdth" var(--width,108);
transition:font-variation-settings .25s ease}
.axis input + .spec-label{
display:block;
margin-top:1.25rem}

/* Motion: progressive reveal and tactile feedback. */
.motion-ready .service-row,.motion-ready .service-spec,.motion-ready .training-audience,.motion-ready .training-programme,.motion-ready .training-partnership,.motion-ready .detail{opacity:0;transform:translateY(1.25rem);transition:opacity .55s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms),transform .55s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms)}
.motion-ready .is-visible{opacity:1;transform:none}.service-row,.service-spec,.training-audience,.training-programme,.training-partnership,.detail{transition:background-color .25s ease,border-color .25s ease,transform .25s ease}.service-row:hover,.detail:hover{background-color:rgba(99,230,199,.07)}.service-spec:hover,.training-programme:hover{border-color:#63e6c7}.button,.training-audience a,.service-row a,.duality a{transition:color .2s ease,background-color .2s ease,border-color .2s ease,transform .25s cubic-bezier(.16,1,.3,1)}.button:hover{transform:translateY(-3px)}.button:active{transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.motion-ready .service-row,.motion-ready .service-spec,.motion-ready .training-audience,.motion-ready .training-programme,.motion-ready .training-partnership,.motion-ready .detail{opacity:1;transform:none;transition:none}.service-row,.service-spec,.training-audience,.training-programme,.training-partnership,.detail,.button{transition:none}.button:hover{transform:none}}
.motion-ready .service-row,.motion-ready .service-spec,.motion-ready .training-audience,.motion-ready .training-programme,.motion-ready .training-partnership,.motion-ready .detail{transition:opacity .55s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms),transform .55s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms)}
.hero h1 span{color:var(--cyan)}
.hero h1{color:#fff}.hero h1 span{color:#fff}.hero h1 span:first-of-type{color:var(--cyan)}
.services-hero h1{color:#fff!important}.services-hero h1 span{color:#63e6c7!important}
.services-hero h1 > span{color:#63e6c7!important}.services-hero h1 .heading-word{color:inherit!important}
@media(prefers-reduced-motion:reduce){.motion-ready .service-row,.motion-ready .service-spec,.motion-ready .training-audience,.motion-ready .training-programme,.motion-ready .training-partnership,.motion-ready .detail{transition:none}}
.word-reveal .heading-word{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(3px);transition:opacity .42s cubic-bezier(.16,1,.3,1),transform .42s cubic-bezier(.16,1,.3,1),filter .42s cubic-bezier(.16,1,.3,1)}.word-reveal .heading-word:nth-child(1){transition-delay:0ms}.word-reveal .heading-word:nth-child(2){transition-delay:70ms}.word-reveal .heading-word:nth-child(3){transition-delay:140ms}.word-reveal .heading-word:nth-child(4){transition-delay:210ms}.word-reveal .heading-word:nth-child(5){transition-delay:280ms}.word-reveal .heading-word:nth-child(6){transition-delay:350ms}.word-reveal.words-visible .heading-word{opacity:1;transform:none;filter:none}@media(prefers-reduced-motion:reduce){.word-reveal .heading-word,.word-reveal.words-visible .heading-word{opacity:1;transform:none;filter:none;transition:none}}