/*-COLOUR-*/

:root {
--SCCharcoal: #2C3038;
--SCSky: #0099CC;
--SCNavy: #003F75;
--SCWhite: #ffffff;
}

.bgSCCharcoal{background-color:var(--SCCharcoal);}
.bgSCSky{background-color:var(--SCSky);}
.bgSCNavy{background-color:var(--SCNavy);}
.bgSCWhite{background-color:var(--SCWhite);}

.textSCCharcoal{color:var(--SCCharcoal);}
.textSCSky{color:var(--SCSky);}
.textSCNavy{color:var(--SCNavy);}
.textSCWhite{color:var(--SCWhite);}

a:link{color:var(--SCSky)}
a:visited{color:var(--SCSky)}
a:hover{color:var(--SCNavy)}
a:active{color:var(--SCNavy)}

/*-BORING-*/
html{margin:0;padding:0;height:100%;min-width:390px;}

body{
background:var(--SCWhite);
color:var(--SCCharcoal);
margin:0 auto;
width:100%;
max-width:1280px;
min-height:100vh;
box-sizing:border-box;
padding:16px;
font-family: "IBM Plex Sans", sans-serif;
font-style:normal;
font-size:100%;
text-align:left;
display: flex;
flex-direction: column;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%2300396B' fill-opacity='0.15'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

main {
flex: 1 0 auto;
display: flex;
flex-direction: column;
min-height: 0;
}

hr {
flex: 0 0 auto;
width: 100%;
}

/*-TEXT-*/

.emf{font-style:italic;font-weight:bold}

h1{
font-size:380%;
font-weight:700;
margin:0;
margin-top:-12px;
letter-spacing:0.1rem;
white-space:nowrap;
background: linear-gradient(
to bottom,
var(--SCSky) 0%,
var(--SCSky) 36%,
var(--SCNavy) 72%,
var(--SCNavy) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

h2{
font-size:210%;
font-style: italic;
margin:10px 0;
text-wrap:balance;
line-height:1.1;
}

h3{
font-size:150%;
margin:1rem 0;
}

p{
margin:12px 0;
}

.topandtail{
display:flex;
flex-direction:row;
flex-wrap:wrap;
overflow:hidden;
justify-content:space-between;
align-items: flex-end;
gap:1em;
line-height:1.2;
}

nav{
text-align:right;
margin-left:auto;
}

.middlefiddle{
text-align:center;
align-items:center;
}

.noclick{
pointer-events:none;
user-select:none;
}

.nodec{
text-decoration: none;
user-select:none;
}

img{max-width:100%;}

.casual{text-transform: lowercase;}
.angry{text-transform: uppercase;}

table{
border-collapse:collapse;
table-layout:auto;
width:100%;
}

table th,
table td{
padding: 0.3em 0.8em;
border-bottom: 1px solid var(--SCCharcoal);
}

tr:last-child {border-bottom: none;}

.nowrap{white-space:nowrap;}

.clientflex{
display:flex;
flex-wrap:wrap;
margin:auto 0 0;
justify-content:space-around;
align-items:center;
}

.iconclient{
width:5rem;
margin:-3rem 1rem;
fill:var(--SCNavy);
}

.iconmini{
width:1rem;
height:1rem;
margin:1px 0px -3px 2px;
fill:currentColor;
}

.dim{opacity:0.2;}

.contactflex {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 500px;
}

.contactflex label {
font-weight: bold;
margin:1em 0 -1em;
display: block;
}

.contactflex input,
.contactflex textarea {
padding: 0.6em 0.8em;
border: 2px solid var(--SCSky);
border-radius: 6px;
font: inherit;
resize:vertical;
overflow:auto;
}

.contactflex textarea{
min-height:126px;
}

.contactflex button {
padding: 1em;
border: none;
border-radius: 6px;
cursor: pointer;
font-size:100%;
font-weight:bold;
background-color:var(--SCSky);
color:var(--SCWhite);
}

.contactflex button:hover {
background-color:var(--SCNavy);
}

.contacterror{outline:2px solid red !important}