body {
	padding-top: 60px;
	background:#f0f0f0;
	color: #312A1E;
	font-size: 100%;
	font-family: 'Quattrocento', serif;
}

div, article, section, header, footer, nav, li {
	position:relative;
}

.group:after {
	display:block;
	height:0;
	clear:both;
	content:".";
	visibility:hidden;
}

::-moz-selection {
	background:#f7733c;
	color:#333;
}

::selection {
	background:#f7733c;
	color:#333;
}

input[type=text], input[type=password], input[type=submit], textarea, select {
	width: 100%;
	padding: 0.5em;
	font-size: 1em;
	margin-bottom: 1.5em;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

input, button, select, textarea {
	font-family: 'Quattrocento', serif;
}

p {
	font-size: 1em;
	line-height: 1.5;
	margin: 0 0 1.5em 0;
}

ul, ol {
	font-size: 1em;
	line-height: 1.5;
	margin: 0 0 1.5em 0;
}

a:link, a:visited {
	color: #F1505A;
}

a:hover, a:active {
	color: #F1505A;
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	font-family: 'Patua One', cursive;
}

h1 {
	font-size: 1.5em;
	line-height: 1;
	margin-top: 1.42em;
	margin-bottom: 0em;
}

h2 {
	font-size: 1.3125em;
	line-height: 1.1429;
	margin-top: 1.1429em;
	margin-bottom: 0em;
}

h3 {
	font-size: 1.125em;
	line-height: 1.3333;
	margin-top: 1.3333em;
	margin-bottom: 0em;
}

h4 {
	font-size: 1em;
	line-height: 1.5;
	margin-top: 1.5em;
	margin-bottom: 0em;
}

h5 {
	font-size: 0.875em;
	line-height: 1.7143;
	margin-top: 1.7143em;
	margin-bottom: 0em;
}

strong {
	font-weight:normal;
	font-family: 'Open Sans', sans-serif;
}

small {
	font-size: 0.75em;
	line-height: 2;
	margin-top: 2em;
	margin-bottom: 0em;
}

em {
	font-style: normal;
	font-family: 'Open Sans';
}

.muted {
	color: #A5A5A2;
	font-family: 'Quattrocento', serif;
}

.impressed {
	text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5), 1px 1px 0 rgba(255, 255, 255, 0.9);
}

.more-link {
	font-size: .875em;
	margin-top: 1.5em;
	font-family: 'Patua One', cursive;
}

.more-link:link, .more-link:visited {
	color: #f7733c;
	text-transform: uppercase;
}

.hide-text {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	font-size: 1em;
}

.alignright {
	text-align: right;
}

.alignleft {
	text-align: left;
}

.aligncenter {
	text-align: center;
}

.medium {
	font-weight: normal;
	font-family: 'Quattrocento', serif;
}

.navbar-fixed-top .container {
	width: auto;
}

.navbar .brand {
	margin-left:0;
	padding: 0;
	margin-top: 1.05em;
}

.navbar .brand a {
	padding: 0;
	color: #fff;
	font-size: 1.75em;
	margin-left: 0;
	font-weight: normal;
	font-family: 'Patua One', cursive;
}

.navbar .brand a:hover {
	text-decoration: none;
	color:#f7733c;
	transition: color .15s linear;
	-webkit-transition: color .15s linear;
    -moz-transition: color .15s linear;
}

.navbar .brand a:focus {
	outline: none;
}

.navbar-inner {
	min-height: 4.75em;
}

.navbar-inverse .navbar-inner {
	background-repeat: repeat;
	background-color: #0b333f;
	border-color: #f7733c;
}

.navbar-wrapper {
	overflow: hidden;
}

#menu-main {
	margin-top: 1.125em;
}

ul#menu-main > li > a {
	font-family: 'Patua One', cursive;
	font-weight: normal;
	font-size: 1em;
	color: #fff;
}

ul#menu-main > li > a:hover {
	background: #f7733c;
	padding: 9px 15px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

.current{
    background: none repeat scroll 0 0 #f7733c;
    border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	padding:-1px -1px;
}

.navbar-inverse .brand, .navbar-inverse .nav > li > a {
	text-shadow: none;
}

#headerwrap {
	width: 100%;
	background: #0b333f no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	/* min-height: 600px;
	padding-top: 80px; */
	text-align:center;
}

#headerwrap h1 {
	color: #FFFFFF;
	font-family: 'Patua One', cursive;
	font-size: 2.5em;
	font-weight: 400;
	margin: 2em 0;
}

#headerwrap h2 {
	color: #FFFFFF;
	font-family: 'Open Sans', sans serif;
	font-size: 2em;
	font-weight: normal;
	margin: 0.5em 0;
	text-shadow: 1px 1px 1px #333333;
}

#headerwrap h1 span {
	color:#f7733c;
}

#headerwrap input[type=text], #headerwrap input[type=password], #headerwrap select {
	background: rgba(227, 231, 228, 1);
	font-family: 'Open Sans', sans serif;
	font-size: 1.3125em;
	border: 0;
	text-align: center;
	vertical-align: middle;
	margin-bottom:0 !important;
}

#headerwrap input[type=text]:focus, #headerwrap input[type=password]:focus, #headerwrap select:focus {
	background: #43413e;
	color: #eff1ef;
	transition: background 0.25 ease-in;
	-moz-transition: background 0.25 ease-in;
	-webkit-transition: background 0.25 ease-in;
}

#headerwrap input[type=text], #headerwrap input[type=password], #headerwrap select {
	height: 2.9em;
	width: 50%;
}

#searchForm input[type=text], #searchForm select {
	width:33%;
}

#searchJobsForm input[type=text], #searchJobsForm select {
	width:25%;
}

#searchTutorialsForm input[type=text] {
	width: 50%;
}

#headerwrap input[type=submit] {
	font-family: 'Patua One', cursive;
	color: #fff;
	width: 185px;
	height: 2.9em;
	font-size: 1.3125em; 
	padding:0.5em;
	letter-spacing: 0.05em;
	margin: 0;
	border: 0;
	text-transform: none;
	background: #f0bf00 !important;
	background: #f7733c !important;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

#headerwrap input[type=submit]:hover, #headerwrap input[type=submit]:active {
	background: #43413e !important;
}

ul.icon {
	font-size:54px;
	margin:1em 0 0.5em 0;
}

ul.icon li {
	display:inline-block;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}

ul.icon li:hover {
	opacity:0.7;
}

section.single-page {
	padding: 2.75em 0;
}

section.single-page h1 {
	text-align: center;
	font-family:  'Patua One', cursive;
	margin-bottom: 2em;
	font-size: 2.25em;
}

section#portfolio {
	padding-bottom: 0;
}

section#portfolio h1 {
	font-size: 3em;
	margin-bottom: 1em;
	margin-top: 0.5em;
}

section#portfolio hgroup h2 {
	margin-top: 1em;
	text-transform: capitalize;
}

section#portfolio hgroup h3 {
	margin-top:  .35em;
	font-family: 'Patua One', cursive;
}

section#portfolio .entry-content {
	margin: 1em 0 2.5em;
}

section#portfolio .align {
	text-align:center;
	margin-top:10px;
	font-size:6em;
}

.mask2 img {
	margin: 0 auto;
	max-width: 100%;
	display: block;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	opacity: 0.8;
	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	width:370px;
	height:200px;
}

.mask2 img:hover {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
	filter: alpha(opacity=99);
	opacity: 1;
}

section#testimonials {
	height:  647px;
	background-color: #f7733c;
	padding: 0;
	color: #e4e5e2;
	z-index: 500;
	box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
}

section#testimonials .blockquote-wrapper {
	display: table-cell;
	vertical-align: middle;
	height:  647px;
}

blockquote.mega p {
	font-size: 45px;
	line-height: 50px;
	text-align: left;
	font-family: 'Patua One', cursive;
	font-weight:bold;
	color:#312A1E;
}

blockquote.mega .cite {
	font-size: 22px;
	text-align: left;
	font-weight:300;
}

section#tutorials {
	background: url("../images/grey-cardboard-bg.png") repeat 0 0;
}

section#games {
	background: url("../images/grey-cardboard-bg.png") repeat 0 0;
}

section#classes {
	background: url("../images/grey-cardboard-bg.png") repeat 0 0;
}

section#products {
	background: url("../images/grey-cardboard-bg.png") repeat 0 0;
}

section#services {
	background: url("../images/grey-cardboard-bg.png") repeat 0 0;
}

section#jobs {
	background: url("../images/grey-cardboard-bg.png") repeat 0 0;
}

section#technologies {
	background: url("../images/grey-cardboard-bg.png") repeat 0 0;
}

section#tutorials .align {
	font-size: 4em;
	text-align: center;
}

section#games .align {
	font-size: 4em;
	text-align: center;
}

section#classes .align {
	font-size: 4em;
	text-align: center;
}

section#products .align {
	font-size: 4em;
	text-align: center;
}

section#services .align {
	font-size: 4em;
	text-align: center;
}

section#jobs .align {
	font-size: 4em;
	text-align: center;
}

section#technologies .align {
	font-size: 4em;
	text-align: center;
}

/*
	Modern card polish for the shared article.post/.inside pattern used
	across services/products/games/jobs/tutorials/courses/classes/webinars -
	reuses the same design tokens (colors, radius, shadow) as the redesigned
	home page's .wz-card, without touching any of these pages' PHP/markup.
*/
article.post {
	/* These pages predate box-sizing:border-box (old Bootstrap 2 default is
	   content-box) and size these cards with percentage widths (.span4 etc).
	   Without this, the added border below renders OUTSIDE that percentage
	   width and pushes the row's last column to wrap - e.g. 3-across
	   silently became 2-across. */
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--wz-line, #e3ddd0);
	border-radius: var(--wz-radius-md, 16px);
	box-shadow: var(--wz-shadow-sm, 0 1px 2px rgba(15,21,38,0.06), 0 1px 3px rgba(15,21,38,0.08));
	margin-bottom: 24px;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
article.post,
article.post * {
	max-width: 100%;
}
article.post:hover {
	transform: translateY(-4px);
	box-shadow: var(--wz-shadow-md, 0 8px 24px rgba(15,21,38,0.10));
	border-color: rgba(247,115,60,0.25);
}
article.post::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--wz-accent-600, #f7733c), var(--wz-highlight, #f0bf00));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}
article.post:hover::before { transform: scaleX(1); }

article .inside {
	margin: 14px 18px 22px;
	padding-top: 0.5em;
}
article .inside h2 {
	color: var(--wz-navy-950, #0b333f);
	font-size: 1.3em;
}
article .inside .entry-content p {
	color: var(--wz-ink-700, #5c5346);
	line-height: 1.7;
	overflow-wrap: anywhere;
	word-break: normal;
}

.post-date {
	color: #A5A5A2;
	float: right;
	font-family: 'Open Sans';
	font-size: 14px;
	font-style: normal;
	line-height: 2;
	margin-right: 5px;
}

.writer {
	float: left;
}

#tutorials h1 {
	font-size: 3em;
	margin-bottom: 1em;
	margin-top: 0.5em;
}

#games h1 {
	font-size: 3em;
	margin-bottom: 1em;
	margin-top: 0.5em;
}

#classes h1 {
	font-size: 3em;
	margin-bottom: 1em;
	margin-top: 0.5em;
}

#products h1 {
	font-size: 3em;
	margin-bottom: 1em;
	margin-top: 0.5em;
}

#services h1 {
	font-size: 3em;
	margin-bottom: 1em;
	margin-top: 0.5em;
}

#jobs h1 {
	font-size: 3em;
	margin-bottom: 1em;
	margin-top: 0.5em;
}

#technologies h1 {
	font-size: 3em;
	margin-bottom: 1em;
	margin-top: 0.5em;
}

#tutorials h2 {
	font-size: 21px;
	margin-top: 24px;
	margin-bottom: 16px;
	color: #312A1E;
	clear: right;
}

#games h2 {
	font-size: 21px;
	margin-top: 24px;
	margin-bottom: 16px;
	color: #312A1E;
	clear: right;
}

#classes h2 {
	font-size: 21px;
	margin-top: 24px;
	margin-bottom: 16px;
	color: #312A1E;
	clear: right;
}

#products h2 {
	font-size: 21px;
	margin-top: 24px;
	margin-bottom: 16px;
	color: #312A1E;
	clear: right;
}

#services h2 {
	font-size: 21px;
	margin-top: 24px;
	margin-bottom: 16px;
	color: #312A1E;
	clear: right;
}

#jobs h2 {
	font-size: 21px;
	margin-top: 24px;
	margin-bottom: 16px;
	color: #312A1E;
	clear: right;
}

#technologies h2 {
	font-size: 21px;
	margin-top: 24px;
	margin-bottom: 16px;
	color: #312A1E;
	clear: right;
}

section#team, section#contact, section#signup, section#login, section#forgotpassword, section#about-us {
	color: #e4e5e2;
	background:#312A1E;
}

section#team .align, section#contact .align, section#signup .align, section#login .align, section#forgotpassword .align, section#about-us .align {
	font-size: 4em;
	text-align: center;
}

#team h1, #contact h1, #signup h1, #login h1, #forgotpassword h1, #about-us h1 {
	font-size: 3em;
	margin-bottom: 1em;
	margin-top: 0.5em;
}

#contact, #team {
	padding-top: 4.75em;
}

#team, #signup, #login, #forgotpassword, #about-us {
	padding-bottom: 0;
}

#contact {
	padding-bottom: 0;
}

.headDiv {
	font-size: 2em;
	margin-bottom: 1em;
	margin-top: 0.5em;
	text-align: center;
    font-family: 'Patua One', cursive;
    line-height: 1;
    font-weight: normal;
}

#team h3, #about-us h3 {
	font-size: 22px;
	margin-top: 24px;
	margin-bottom: 0px;
}

#team h3, #about-us h3, .job-position {
	text-align: center;
}

#team .featurette, #about-us .featurette {
	text-align: center;
	font-size: 21px;
}

#team h2.featurette-heading, #about-us h2.featurette-heading {
	margin-bottom: 24px;
}

.teamalign {
	text-align:center
}

.team-thumb {
	margin-top: 26px;
	text-align:center;
}

.job-position {
	font-family: 'Open Sans', sans-serif;
	margin-bottom: .46155em;
}

#theme-form {
	position: relative;
	z-index: 999;
}

#theme-form input[type=text], #theme-form input[type=password], .cform-form textarea {
	background: rgba(227, 231, 228, 1);
	font-family: 'Open Sans', sans serif;
	border: 0;
	text-align: left;
	vertical-align: middle;
}

#theme-form input[type=text]:focus, #theme-form input[type=password]:focus, .cform-form textarea:focus, .cform-form select:focus {
	background: rgba(101, 106, 100, 1);
	color: #eff1ef;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	transition: background 0.25 ease-in;
	-moz-transition: background 0.25 ease-in;
	-webkit-transition: background 0.25 ease-in;
}

#theme-form input[type=text], #theme-form input[type=password] {
	height: 3.25em;
}

#theme-form input[type=submit] {
	font-family: 'Patua One', cursive;
	color: #fff;
	width: 185px;
	height: 60px;
	text-shadow: none;
	font-size: 1.3125em;
	padding:0.5em;
	letter-spacing: 0.05em;
	margin: 0 0 20px 0;
	display: block;
	border: 0;
	text-transform: none;
	background: #f0bf00 !important;
	background: #f7733c !important;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
}

#theme-form input[type=submit]:hover, #theme-form input[type=submit]:active {
	background: #43413e !important;
}

#theme-form textarea {
	padding-top: 1em;
}

div.cform-response-output {
	max-width: 60%;
	text-align: center;
	margin-left: 40% !important;
	margin-top: 0.5em !important;
	padding: 0.5em !important;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

.cform-not-valid-tip {
	color: #888;
	border: 1px dotted #ad3729 !important;
	width: 100% !important;
	left: 0 !important;
	padding: 0.5em !important;
	font-family: 'Open Sans', sans-serif;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

hr.featurette-divider {
	margin: 3em 0;
	border-width: 0;
	height: 9px;
}

#map-wrapper {
	margin-top: 20px;
}

footer {
	text-align: center;
	color: #1a1a1a;
	font-weight: bold;
}

footer p {
	margin-top: -130px;
}

.carousel-caption {
	background-color: transparent;
	position: static;
	max-width: 550px;
	padding: 0 20px;
	margin-top: 200px;
	position:absolute;
}

.carousel-caption h1,  .carousel-caption .lead {
	margin: 0;
	line-height: 1.25;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

.carousel-caption .btn {
	margin-top: 10px;
}

.carousel-control {
	height: 50px;
	top: 46%;
	margin-top: 0;
	font-size: 6.5em;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
	background-color: transparent;
	border: 0;
	font-family: 'Open Sans', sans-serif;
	opacity: 0.4;
	border-radius: 0;
}

.carousel-control:link, .carousel-control:visited {
	color: #262626;
}

.btn {
	font-family: 'Patua One', cursive;
	color: #fff;
	width: 185px;
	height: 20px;
	text-shadow: none;
	font-size: 1.3125em;
	padding: 1em 0.5em;
	letter-spacing: 0.05em;
	margin: 2.5em auto 0;
	display: block;
	border: 0;
	text-transform: none;
	background: #f0bf00 !important;
	background: #f7733c !important;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
}

.btn:link, .btn:visited {
	color: #fff;
}

.btn:hover {
	background: #312A1E !important;
}

#about-us .btn:hover {
	background: #43413e !important;
}

.navbar-inverse .btn-navbar {
	width: auto;
	height: auto;
}

label.error{
	color: red;
	display: block;
	margin-top: -20px;
	position: absolute;
	z-index:9;
}

#searchForm label.error, #searchTutorialsForm label.error, #searchClassesForm label.error{
	color: red;
	display: block;
	margin: 0 198px;
	position: absolute;
	z-index: 9;
	width: 100%;
	text-align: left;
}

#searchJobsForm label.error{
	color: red;
	display: block;
	margin: 0 48px;
	position: absolute;
	z-index: 9;
	width: 100%;
	text-align: left;
}

.jobBox p {
	margin: 0px 0px 5px 0px;
}

.jobBox p span {
	color: #a5a5a2; 
	font-family: 'Open Sans';
	font-size: 14px;
    font-style: normal;
    line-height: 2;
    margin-right: 5px;
}

.img-tutorial {
	width: 100%;
	height: 300px;
	object-fit: cover;
}

.img-logo {
	width: 32px;
	height: 32px;
	border-radius: 50%;
}

/* Underlying icon artwork varies a lot in style (flat vs. busy clip-art) -
   a consistent framed circle (background + border + padding) gives them
   a shared visual container so the grid reads as one system regardless. */
.service-img-logo {
	width: 75px;
	height: 75px;
	border-radius: 50%;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--wz-line, #e3ddd0);
	box-shadow: var(--wz-shadow-sm, 0 1px 2px rgba(15,21,38,0.06), 0 1px 3px rgba(15,21,38,0.08));
	padding: 12px;
	box-sizing: border-box;
}

.job-details{
	height: 100% !important;
}

.entry-content ul {
	padding: 0px 40px;
}
.entry-content ul li {
	padding: 2px;
	line-height: 2;
}

#back-to-top {
  	display: none;
  	position: fixed;
  	bottom: 20px;
  	right: 80px;
  	z-index: 99;
  	font-size: 18px;
  	border: none;
  	outline: none;
  	background-color: #f7733c;
  	color: white;
  	cursor: pointer;
  	padding: 15px;
  	border-radius: 4px;
}

#back-to-top:hover {
  	background-color: #555;
}
/* ---------------------- RESPONSIVE ------------------------ */

@media (max-width: 979px) {
	.navbar-fixed-top {
		margin-bottom: 0;
	}

 	.navbar .container {
		width: 100%;
	}

 	.navbar .brand {
		margin-top: 0;
	}

 	.navbar .btn-navbar {
		margin-top: 0;
	}

 	.navbar-fixed-top .navbar-inner {
		padding: 0px;
		min-height: 0.25em;
	}

 	.featurette {
		height: auto;
		padding: 0;
	}

 	.featurette-image.pull-left,  .featurette-image.pull-right {
		display: block;
		float: none;
		max-width: 40%;
		margin: 0 auto 20px;
	}
}

@media (min-width: 768px) and (max-width: 979px) {
	#headerwrap {
		padding-top: 0px;
	}
	#searchJobsForm input[type=text], #searchJobsForm select {
		width: 30%;
	}
}

@media (max-width: 767px) {
	.container {
		padding-right: 5px;
		padding-left: 5px;
	}

	#headerwrap {
		padding-top: 0px;
	}

	#searchJobsForm input[type=text], #searchJobsForm select {
		width: 30%;
	}

 	.navbar-fixed-top,  .navbar-fixed-bottom,  .navbar-static-top {
		margin-right: 0px;
		margin-left: 0px;
		margin-bottom:0px;
		padding-bottom:0px;
	}

 	.navbar-inner {
		margin: 0;
	}

 	.carousel {
		margin-left: -20px;
		margin-right: -20px;
	}

 	.carousel-caption {
		width: 65%;
		padding: 0 70px;
		margin-top: 100px;
	}

 	.carousel-caption h1 {
		font-size: 30px;
	}

 	.carousel-caption .lead,  .carousel-caption .btn {
		font-size: 18px;
	}

 	.featurette-heading {
		font-size: 30px;
	}

 	.featurette .lead {
		font-size: 18px;
		line-height: 1.5;
	}
}

@media (max-width : 480px) {
	#headerwrap {
		padding-top: 0px;
	}

 	#headerwrap h1 {
		font-size:2em;
	}

 	#headerwrap h2 {
		font-size:1em;
	}

 	#headerwrap input[type="text"], #headerwrap input[type="password"], #headerwrap select {
		width: 100%;
		margin: 5px 0px;
	}

 	#headerwrap input[type="submit"] {
 		margin-top: 1em;
		width: 135px;
	}

 	#team .team-thumb {
		margin-right: auto;
		margin-left: auto;
		width: 150px;
		display: block;
		text-align:center
	}
	#searchForm label.error, #searchTutorialsForm label.error, #searchClassesForm label.error, #searchJobsForm label.error{
		margin: 0px;
	}
}
    
@media only screen  and (min-device-width : 320px)  and (max-device-width : 480px) {
	#aboutus-headline {
		background: transparent;
		text-indent: 0;
		overflow: visible;
		margin-top: 1.5em;
	}

 	#navbar-inner {
		margin:	0;
	}

	section.single-page {
		padding: 1em 0;
	}		

	#tutorials h1 {
		background: transparent;
	}

	#games h1 {
		background: transparent;
	}

	#classes h1 {
		background: transparent;
	}

	#products h1 {
		background: transparent;
	}

	#services h1 {
		background: transparent;
	}

	#technologies h1 {
		background: transparent;
	}

	#jobs h1 {
		background: transparent;
	}

	#tutorials h1 span {
		background: transparent;
		padding: 0;
	}

	#games h1 span {
		background: transparent;
		padding: 0;
	}

	#classes h1 span {
		background: transparent;
		padding: 0;
	}

	#products h1 span {
		background: transparent;
		padding: 0;
	}

	#services h1 span {
		background: transparent;
		padding: 0;
	}

	#technologies h1 span {
		background: transparent;
		padding: 0;
	}

	#jobs h1 span {
		background: transparent;
		padding: 0;
	}

	#portfolio .container {
		top: 0 !important;
	}

	section#portfolio hgroup h2 {
		margin-top: 1.5em;
	}

	#team .team-thumb {
		margin-right: auto;
		margin-left: auto;
		width: 150px;
		display: block;
		text-align:center
	}
	
	.job-position {
		margin-bottom: 1.5em;
	}

 	.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
		margin-left: auto;
		margin-right: auto;
	}

	#theme-form {
		overflow: hidden;
	}

 	#theme-form input[type=submit] {
		width: 100%;
	}
	#searchForm label.error, #searchTutorialsForm label.error, #searchClassesForm label.error, #searchJobsForm label.error{
		margin: 0px;
	}
}

/* ==========================================================================
   ENTERPRISE REDESIGN - shared nav/footer + home.php
   Namespaced under "wz-" and scoped inside a .wz wrapper so it can be rolled
   out page by page without touching the Bootstrap 2 grid classes (span4,
   container, row, single-page, featurette, ...) older pages still use.

   home.php's sections use ids like #wz-about / #wz-services (not the
   original #about-us / #services) specifically so they don't collide with
   the ID-selector rules earlier in this file (section#about-us, #services h2,
   section#services background-image, etc.) which target the ORIGINAL
   about-us.php / services.php / team.php pages and must stay untouched
   there. Do not reuse a bare legacy id here - re-introducing that collision
   is what caused the earlier "invisible section" bug (dark text forced onto
   a dark background) and the loss of section padding.

   Breakpoints match the ones already used above (979 / 767 / 480px).
   ========================================================================== */

:root {
	/* Brand palette matches the rest of this file - #0b333f navbar/header bg,
	   #f7733c accent, #312A1E ink, #f0f0f0 body bg. This block only adds
	   layout/structure, it does not introduce a new color theme. */
	--wz-navy-950: #0b333f;
	--wz-navy-900: #0a2c36;
	--wz-navy-800: #0f3d4a;
	--wz-navy-700: #164b5b;
	--wz-accent-600: #f7733c;
	--wz-accent-500: #ff8952;
	--wz-accent-400: #ffab7d;
	--wz-highlight: #f0bf00;
	--wz-ink-900: #312a1e;
	--wz-ink-700: #5c5346;
	--wz-ink-500: #8a8175;
	--wz-ink-300: #bfb8ac;
	--wz-line: #e3ddd0;
	--wz-bg: #f0f0f0;
	--wz-white: #ffffff;
	--wz-radius-sm: 10px;
	--wz-radius-md: 16px;
	--wz-radius-lg: 24px;
	--wz-shadow-sm: 0 1px 2px rgba(15, 21, 38, 0.06), 0 1px 3px rgba(15, 21, 38, 0.08);
	--wz-shadow-md: 0 8px 24px rgba(15, 21, 38, 0.10);
	--wz-nav-h: 72px;
	--wz-maxw: 1200px;
	--wz-gap: 24px;
}

.wz * { box-sizing: border-box; }

/* The nav is a fixed 72px bar on every page; this file's own body rule
   above reserves only 60px (its old fixed-navbar height). Correct that
   reservation here so page content doesn't sit partly underneath the new
   nav - and offset in-page anchor jumps (#wz-services, back-to-top's #top)
   by the same amount so a target's heading never lands hidden behind it. */
body { padding-top: var(--wz-nav-h); }
html { scroll-padding-top: calc(var(--wz-nav-h) + 16px); }
.wz [id] { scroll-margin-top: calc(var(--wz-nav-h) + 16px); }

.wz {
	font-family: 'Plus Jakarta Sans', 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--wz-ink-900);
	background: var(--wz-white);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.wz h1, .wz h2, .wz h3, .wz h4 {
	font-family: 'Plus Jakarta Sans', 'Open Sans', sans-serif;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 14px;
	color: var(--wz-navy-950);
	text-align: left;
}

.wz p { margin: 0 0 14px; color: var(--wz-ink-700); font-size: 1em; }
.wz a { text-decoration: none; color: inherit; }
.wz ul, .wz ol { font-size: inherit; line-height: inherit; margin: 0; }
.wz svg { display: block; }

.wz-container {
	max-width: var(--wz-maxw);
	margin: 0 auto;
	padding: 0 24px;
}

.wz-section { padding: 72px 0; background: var(--wz-white); }
.wz-section--tight { padding: 48px 0; }
.wz-section--alt { background: var(--wz-bg); }
.wz-section--dark { background: var(--wz-navy-950); color: #fff; }
.wz-section--dark h1, .wz-section--dark h2, .wz-section--dark h3, .wz-section--dark h4 { color: #fff; }
.wz-section--dark p { color: rgba(255,255,255,0.72); }
.wz-section--dark .wz-eyebrow { color: var(--wz-highlight); background: rgba(240, 191, 0, 0.14); }

.wz-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wz-accent-600);
	background: rgba(247, 115, 60, 0.08);
	border-radius: 999px;
	padding: 6px 14px;
	margin-bottom: 14px;
}

.wz-head { max-width: 640px; margin: 0 0 32px; }
.wz-head--center { max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; }
.wz-head--center h1,
.wz-head--center h2,
.wz-head--center h3,
.wz-head--center p { text-align: center; }
.wz-head h2 { font-size: 32px; }
.wz-head p { font-size: 17px; margin-bottom: 0; }

/* ---------- About ---------- */
.wz-about {
	position: relative;
	overflow: hidden;
	/* soft brand-tinted wash instead of the previous flat white, so this
	   section reads as visually distinct rather than blending into the
	   plain services/products sections around it */
	background: linear-gradient(180deg, var(--wz-bg) 0%, var(--wz-white) 55%);
}
.wz-about::before,
.wz-about::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	pointer-events: none;
	z-index: 0;
}
.wz-about::before { width: 380px; height: 380px; top: -140px; left: -100px; background: rgba(247,115,60,0.14); }
.wz-about::after { width: 420px; height: 420px; bottom: -180px; right: -120px; background: rgba(11,51,63,0.08); }
.wz-about .wz-container { position: relative; z-index: 1; }
.wz-about .wz-eyebrow { margin-bottom: 14px; }
.wz-about h2 { font-size: 30px; margin-bottom: 18px; }

.wz-about-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 979px) { .wz-about-grid { grid-template-columns: 1fr; } }

.wz-about-panel {
	background: #fff;
	border: 1px solid var(--wz-line);
	border-radius: var(--wz-radius-lg);
	padding: 28px;
	box-shadow: var(--wz-shadow-md);
}
.wz-about-panel h3 { font-size: 17px; margin-bottom: 20px; }
.wz-about-panel-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.wz-about-panel-item:last-child { margin-bottom: 0; }
.wz-about-panel-icon {
	width: 30px; height: 30px;
	border-radius: 9px;
	background: rgba(247,115,60,0.12);
	color: var(--wz-accent-600);
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	font-weight: 800;
	font-size: 14px;
}
.wz-about-panel-item h4 { font-size: 14.5px; margin: 0 0 2px; }
.wz-about-panel-item p { font-size: 13.5px; margin: 0; color: var(--wz-ink-500); }

/* ---------- Buttons ---------- */
.wz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: 'Plus Jakarta Sans', 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 15px;
	/* explicit line-height (not inherited) - <button> elements don't pick up
	   .wz's line-height:1.6 the way <a> elements do, so the contact form's
	   submit button rendered 4px shorter than every other .wz-btn despite
	   identical padding/font-size. Setting it here makes every button and
	   link-styled-as-button the same height regardless of element type. */
	line-height: 1.2;
	padding: 13px 26px;
	border-radius: 999px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}
.wz-btn:hover, .wz-btn:focus-visible { transform: translateY(-1px); text-decoration: none; }
.wz-btn:active { transform: translateY(0); }
.wz-btn:focus-visible { outline: 2px solid var(--wz-accent-500); outline-offset: 2px; }

.wz-btn--primary { background: var(--wz-accent-600); color: #fff; box-shadow: var(--wz-shadow-md); }
.wz-btn--primary:hover, .wz-btn--primary:focus-visible { background: var(--wz-accent-500); color: #fff; }
.wz-btn--primary:active { background: var(--wz-accent-600); box-shadow: none; }

/* Outline by default (matches the site's secondary "view more" pattern);
   fills with a soft accent tint on hover/focus so the state change reads
   clearly instead of just a thin border-color swap. */
.wz-btn--ghost { background: transparent; color: var(--wz-navy-950); border-color: var(--wz-line); }
.wz-btn--ghost:hover, .wz-btn--ghost:focus-visible { background: rgba(247,115,60,0.08); border-color: var(--wz-accent-500); color: var(--wz-accent-600); }
.wz-btn--ghost:active { background: rgba(247,115,60,0.14); }

.wz-btn--on-dark { background: #fff; color: var(--wz-navy-950); }
.wz-btn--on-dark:hover, .wz-btn--on-dark:focus-visible { background: var(--wz-highlight); color: var(--wz-navy-950); }
.wz-btn--on-dark:focus-visible { outline-color: #fff; }

.wz-btn--ghost-on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,0.28); }
.wz-btn--ghost-on-dark:hover, .wz-btn--ghost-on-dark:focus-visible { border-color: #fff; color: #fff; background: rgba(255,255,255,0.08); }
.wz-btn--ghost-on-dark:focus-visible { outline-color: #fff; }

/* ---------- Nav ---------- */
.wz-nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1000;
	height: var(--wz-nav-h);
	background: var(--wz-navy-950);
	/* bottom border in the brand mark's orange instead of a plain dark
	   line, so the nav's edge carries the actual brand color */
	border-bottom: 2px solid var(--wz-accent-600);
	box-shadow: 0 6px 20px rgba(11,51,63,0.18);
}
.wz-nav-inner {
	max-width: var(--wz-maxw);
	margin: 0 auto;
	padding: 0 24px;
	height: var(--wz-nav-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
/* a.wz-brand (type+class) matches the legacy a:link/a:visited (type+pseudo)
   specificity instead of losing to it - that mismatch was rendering the
   logo text in the old theme's link color (#F1505A) instead of white,
   making it nearly unreadable against the dark nav. */
a.wz-brand,
a.wz-brand:link,
a.wz-brand:visited { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -0.01em; transition: opacity 0.15s ease; }
a.wz-brand:hover, a.wz-brand:focus-visible { opacity: 0.85; color: #fff; }
.wz-brand-mark {
	width: 34px; height: 34px; border-radius: 9px;
	/* flat brand orange - matches the accent used everywhere else on the
	   site rather than inventing a new gradient treatment here */
	background: var(--wz-accent-600);
	display: flex; align-items: center; justify-content: center;
	font-size: 16px; font-weight: 800; color: #fff;
}

.wz-nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.wz-nav-links a {
	color: rgba(255,255,255,0.78);
	font-size: 15px;
	font-weight: 600;
	padding: 10px 16px;
	border-radius: 999px;
	transition: color 0.15s ease, background 0.15s ease;
}
.wz-nav-links a:hover,
.wz-nav-links a:focus-visible { color: #fff; background: var(--wz-accent-600); }
.wz-nav-links li.wz-current a { color: #fff; background: rgba(247,115,60,0.22); }
.wz-nav-links a:focus-visible { outline: 2px solid var(--wz-highlight); outline-offset: -2px; }
.wz-nav-links a:active { background: var(--wz-accent-500); }

.wz-nav-actions { display: flex; align-items: center; gap: 10px; }
.wz-nav-toggle {
	display: none;
	width: 42px; height: 42px;
	border-radius: 10px;
	border: 1px solid rgba(255,255,255,0.2);
	background: transparent;
	color: #fff;
	font-size: 20px;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.wz-nav-toggle:hover, .wz-nav-toggle:focus-visible { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.4); }
.wz-nav-toggle:active { background: rgba(255,255,255,0.18); }

@media (max-width: 979px) {
	/* The dropdown's background is the same navy as the hero/header banner
	   right behind it, so with no shadow/backdrop it visually blended into
	   whatever content followed instead of reading as a menu overlay sitting
	   on top of the page. A visible elevation shadow + dimmed backdrop scrim
	   (below) makes it unambiguous that it's a floating panel, not page
	   content, and gives a clear tap target to dismiss it. */
	.wz-nav-links {
		position: fixed;
		top: var(--wz-nav-h); left: 0; right: 0;
		z-index: 1001;
		background: var(--wz-navy-950);
		flex-direction: column;
		align-items: stretch;
		padding: 12px;
		gap: 4px;
		max-height: calc(100vh - var(--wz-nav-h));
		overflow-y: auto;
		box-shadow: 0 16px 32px rgba(0,0,0,0.35);
		border-top: 1px solid rgba(255,255,255,0.08);
		display: none;
	}
	.wz-nav-links.is-open { display: flex; }
	/*
		The desktop nav's pill-shaped links (border-radius:999px) don't work
		as full-width rows - at mobile/tablet width the hover/active fill
		became a stadium shape sitting awkwardly against the row dividers,
		looking broken rather than like a normal list. Swapped to a
		row-style treatment instead: modest corner rounding, no dividers
		(the gap between items is separation enough), and a left accent bar
		for the current page instead of relying on the same pill fill used
		on desktop.
	*/
	.wz-nav-links a {
		display: block;
		padding: 14px 16px;
		font-size: 16px;
		border-radius: 10px;
		border-left: 3px solid transparent;
	}
	.wz-nav-links li.wz-current a {
		background: rgba(255,255,255,0.10);
		border-left-color: var(--wz-accent-600);
	}
	.wz-nav-links a:focus-visible { outline-offset: 2px; }
	.wz-nav-toggle { display: inline-flex; }
	.wz-nav-actions .wz-btn--primary { display: none; }
}

.wz-nav-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(5,15,20,0.55);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
	z-index: 999;
}
.wz-nav-backdrop.is-open { opacity: 1; visibility: visible; }
html.wz-nav-open { overflow: hidden; }
@media (min-width: 980px) {
	.wz-nav-backdrop { display: none; }
}

/* ---------- Hero ---------- */
.wz-hero {
	/* body already reserves --wz-nav-h above the hero, so this only needs
	   modest extra breathing room, not a second nav-height allowance.
	   Flat navy, matching the exact solid color css/style.css already uses
	   for #headerwrap and the old navbar - no invented gradient here, so
	   the hero reads as the same color family as every other page. */
	position: relative;
	padding: 64px 0 72px;
	background: var(--wz-navy-950);
	color: #fff;
	overflow: hidden;
}
.wz-hero-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 40px;
	align-items: center;
}
@media (max-width: 979px) { .wz-hero-grid { grid-template-columns: 1fr; } }

.wz-hero h1 { color: #fff; font-size: 46px; letter-spacing: -0.02em; }
.wz-hero .wz-lede { font-size: 18px; color: rgba(255,255,255,0.76); max-width: 560px; margin-bottom: 0; }
.wz-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

.wz-hero-socials { display: flex; gap: 10px; margin-top: 28px; }
.wz-hero-socials a {
	width: 40px; height: 40px; border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.14);
	color: #fff; font-size: 16px;
	transition: background 0.15s ease, transform 0.15s ease;
}
.wz-hero-socials a:hover, .wz-hero-socials a:focus-visible { background: rgba(255,255,255,0.18); transform: translateY(-2px); border-color: rgba(255,255,255,0.3); }
.wz-hero-socials a:focus-visible { outline: 2px solid var(--wz-highlight); outline-offset: 2px; }

.wz-hero-panel {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: var(--wz-radius-lg);
	padding: 24px;
}
.wz-hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.wz-stat-num { font-size: 28px; font-weight: 800; color: #fff; }
.wz-stat-label { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 2px; }

/* ---------- Cards / grids ---------- */
.wz-grid { display: grid; gap: var(--wz-gap); align-items: stretch; }
.wz-grid--3 { grid-template-columns: repeat(3, 1fr); }
.wz-grid--4 { grid-template-columns: repeat(4, 1fr); }
.wz-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 979px) { .wz-grid--3, .wz-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .wz-grid--3, .wz-grid--4, .wz-grid--2 { grid-template-columns: 1fr; } }

.wz-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--wz-line);
	border-radius: var(--wz-radius-md);
	padding: 26px;
	padding-top: 29px;
	box-shadow: var(--wz-shadow-sm);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
	height: 100%;
	overflow: hidden;
	min-width: 0;
}
/* Thin top accent bar - a small, common enterprise-card signal that
   otherwise-identical card grids (services/products/games/jobs all use
   the same layout) aren't just a generic template. */
.wz-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--wz-accent-600), var(--wz-highlight));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}
.wz-card:hover { transform: translateY(-4px); box-shadow: var(--wz-shadow-md); border-color: rgba(247,115,60,0.25); }
.wz-card:hover::before { transform: scaleX(1); }

.wz-card-icon {
	width: 52px; height: 52px;
	border-radius: 14px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(247,115,60,0.10);
	color: var(--wz-accent-600);
	font-size: 22px;
	margin-bottom: 16px;
	overflow: hidden;
}
.wz-card-icon img { width: 30px; height: 30px; object-fit: contain; }
.wz-card-icon img[src*="-ai.png"] { width: 100%; height: 100%; object-fit: cover; }
.wz-card h3 { font-size: 18px; margin-bottom: 8px; }
.wz-card p { font-size: 15px; margin-bottom: 0; overflow-wrap: anywhere; }

.wz-card-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	margin-left: 0;
}
.wz-card-row::before,
.wz-card-row::after { display: none; }
.wz-card-row > article.post,
.wz-card-row > article.span4 {
	float: none;
	width: auto;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.wz-card-row > article.post .inside {
	display: flex;
	flex-direction: column;
	flex: 1;
	margin: 16px 20px 22px;
}
.wz-card-row > article.post .inside h2 {
	text-align: left !important;
	min-height: 2.6em;
	margin-bottom: 10px;
}
.wz-card-row > article.post .entry-content {
	flex: 1;
}
.wz-card-row > article.post .entry-content p {
	margin-bottom: 0;
}
.wz-card-row .img-tutorial {
	height: 220px;
	display: block;
}
.wz-card-row .service-img-logo {
	width: 92px;
	height: 92px;
	object-fit: contain;
	margin-top: 12px !important;
}
.wz-card-row article.post > div:first-child:not(.inside) {
	min-height: 118px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#portfolio.single-page,
#services.single-page {
	padding-bottom: 64px;
}
#portfolio.single-page {
	padding-bottom: 120px !important;
	margin-bottom: 0 !important;
}
#portfolio .wz-card-row,
#services .wz-card-row {
	margin-bottom: 28px;
}
#services .wz-card-row > article.post {
	min-height: 420px;
}
#services .wz-card-row > article.post .inside {
	min-height: 0;
	overflow: hidden;
}
#services .wz-card-row > article.post .entry-content {
	min-height: 0;
	overflow: hidden;
}
#services .wz-card-row > article.post .entry-content p {
	display: -webkit-box;
	-webkit-line-clamp: 8;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wz-tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wz-tag { font-size: 12px; font-weight: 700; color: var(--wz-accent-600); background: rgba(247,115,60,0.08); border-radius: 999px; padding: 5px 12px; }

.wz-job-meta { display: flex; gap: 20px; margin: 16px 0; padding: 12px 0; border-top: 1px solid var(--wz-line); border-bottom: 1px solid var(--wz-line); }
.wz-job-meta span { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wz-ink-500); margin-bottom: 2px; }
.wz-job-meta b { font-size: 14px; color: var(--wz-navy-950); }
.wz-job-card .wz-btn { margin-top: auto; align-self: flex-start; }
.wz-job-card .wz-card-icon img { border-radius: 10px; }
.wz-jobs-row .wz-card-icon {
	min-height: 0 !important;
	margin-bottom: 16px;
}

.wz-tech-tile {
	background: #fff;
	border: 1px solid var(--wz-line);
	border-radius: var(--wz-radius-md);
	padding: 20px 12px;
	text-align: center;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wz-tech-tile:hover { transform: translateY(-3px); box-shadow: var(--wz-shadow-sm); border-color: rgba(247,115,60,0.25); }
/* Grayscale-by-default, full color on hover - the "trusted stack" logo-wall
   pattern enterprise sites use so a row of unrelated brand marks reads as
   one deliberate system instead of a scattered clip-art grid. */
.wz-tech-tile img { width: 48px; height: 48px; object-fit: contain; margin: 0 auto 12px; display: block; filter: grayscale(1) opacity(0.75); transition: filter 0.2s ease; }
.wz-tech-tile:hover img { filter: grayscale(0) opacity(1); }
.wz-tech-tile span { font-size: 13px; font-weight: 700; color: var(--wz-ink-700); }

.wz-tech-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 20px;
	margin-left: 0;
}
.wz-tech-grid::before,
.wz-tech-grid::after { display: none; }
.wz-tech-grid .wz-tech-logo-card {
	float: none;
	width: auto;
	height: auto !important;
	min-height: 178px;
	margin: 0;
	padding: 18px 12px;
	background: #fff;
	border: 1px solid var(--wz-line);
	border-radius: var(--wz-radius-md);
	box-shadow: var(--wz-shadow-sm);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.wz-tech-grid .wz-tech-logo-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wz-shadow-md);
	border-color: rgba(247,115,60,0.25);
}
.wz-tech-grid .team-thumb {
	width: 72px !important;
	height: 72px !important;
	object-fit: contain;
	border-radius: 14px !important;
	background: #fff;
	padding: 6px;
	filter: grayscale(1) opacity(0.78);
	transition: filter 0.2s ease;
}
.wz-tech-grid .wz-tech-logo-card:hover .team-thumb { filter: grayscale(0) opacity(1); }
.wz-tech-grid h3 {
	font-family: 'Plus Jakarta Sans', 'Open Sans', sans-serif;
	font-size: 14px;
	line-height: 1.3;
	color: var(--wz-navy-950);
	margin: 14px 0 0;
	text-align: center;
	overflow-wrap: anywhere;
}
.wz-technologies-section {
	background: url("../images/grey-cardboard-bg.png") repeat 0 0;
}

.wz-portfolio-item { position: relative; border-radius: var(--wz-radius-md); overflow: hidden; box-shadow: var(--wz-shadow-sm); aspect-ratio: 4 / 3; display: block; }
.wz-portfolio-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.wz-portfolio-item:hover img, .wz-portfolio-item:focus-visible img { transform: scale(1.06); }
.wz-portfolio-item:focus-visible { outline: 2px solid var(--wz-accent-500); outline-offset: 2px; }
.wz-portfolio-item::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(11,51,63,0.88), rgba(11,51,63,0.28) 52%, transparent 78%);
	opacity: 1; transition: opacity 0.2s ease;
}
.wz-portfolio-item:hover::after { opacity: 1; }
.wz-portfolio-item span {
	position: absolute; left: 16px; bottom: 14px;
	color: #fff; font-weight: 700; font-size: 14px;
	opacity: 1; transform: translateY(0);
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 1;
	text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
.wz-portfolio-item:hover span { opacity: 1; transform: translateY(0); }

.wz-game-card .wz-card-icon {
	width: 100%;
	height: 180px;
	border-radius: var(--wz-radius-sm);
	overflow: hidden;
	margin-bottom: 18px;
	background: #0b333f;
}
.wz-game-card .wz-card-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wz-tech-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 28px;
	align-items: center;
	margin: 34px 0 28px;
	padding: 24px;
	border-radius: var(--wz-radius-md);
	background: linear-gradient(135deg, #0b333f, #123f56);
	color: #fff;
	box-shadow: var(--wz-shadow-sm);
}
.wz-tech-hero h2 {
	color: #fff !important;
	font-size: 30px !important;
	line-height: 1.2;
	margin: 0 0 12px !important;
	clear: none;
}
.wz-tech-hero p {
	color: rgba(255,255,255,0.84);
	margin-bottom: 0;
	font-size: 16px;
	line-height: 1.7;
}
.wz-tech-hero img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--wz-radius-sm);
	box-shadow: 0 14px 28px rgba(0,0,0,0.22);
}

@media (max-width: 767px) {
	.wz-card-row { grid-template-columns: 1fr; gap: 20px; }
	.wz-tech-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.wz-tech-hero { grid-template-columns: 1fr; padding: 18px; }
	.wz-game-card .wz-card-icon { height: 150px; }
	.wz-jobs-search input[type=text],
	.wz-jobs-search select,
	.wz-jobs-search input[type=submit] { width: 100% !important; }
}

@media (min-width: 768px) and (max-width: 979px) {
	.wz-card-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wz-tech-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.wz-team-card { text-align: center; }
.wz-team-photo { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; margin: 0 auto 16px; border: 4px solid var(--wz-white); box-shadow: var(--wz-shadow-sm); }
.wz-team-photo img { width: 100%; height: 100%; object-fit: cover; }
.wz-team-card h3 { font-size: 16px; margin-bottom: 2px; }
.wz-team-card .wz-role { font-size: 13px; color: var(--wz-ink-500); font-weight: 600; }

.wz-faq-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}
.wz-faq-item {
	background: #fff;
	border: 1px solid var(--wz-line);
	border-radius: var(--wz-radius-md);
	padding: 22px;
	box-shadow: var(--wz-shadow-sm);
}
.wz-faq-item h3 {
	font-size: 17px;
	line-height: 1.35;
	margin-bottom: 8px;
	color: var(--wz-navy-950);
}
.wz-faq-item p {
	font-size: 15px;
	margin-bottom: 0;
	color: var(--wz-ink-700);
}
.wz-faq-page {
	padding-bottom: 36px;
}
.wz-faq-page .wz-head {
	margin-bottom: 30px;
}
.wz-faq-page .wz-head p {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}
.wz-faq-page .wz-faq-list {
	margin-top: 22px;
	margin-bottom: 34px;
}
.wz-content-page {
	max-width: 920px;
	margin: 0 auto;
	padding: 18px 0 56px;
	text-align: left;
}
.wz-content-card {
	background: #fff;
	border: 1px solid var(--wz-line);
	border-radius: var(--wz-radius-lg);
	box-shadow: var(--wz-shadow-sm);
	padding: 38px;
}
.wz-content-card h2 {
	color: var(--wz-navy-950);
	font-size: 24px;
	line-height: 1.25;
	margin: 0 0 14px;
	font-family: 'Plus Jakarta Sans', 'Open Sans', sans-serif;
	font-weight: 800;
}
.wz-content-card h3 {
	color: var(--wz-ink-900);
	font-size: 18px;
	line-height: 1.35;
	margin: 28px 0 10px;
	font-family: 'Plus Jakarta Sans', 'Open Sans', sans-serif;
	font-weight: 800;
}
.wz-content-card p,
.wz-content-card li {
	color: var(--wz-ink-700);
	font-size: 16px;
	line-height: 1.75;
	font-family: 'Open Sans', sans-serif;
}
.wz-content-card p {
	margin: 0 0 16px;
}
.wz-content-card ul,
.wz-content-card ol {
	margin: 0 0 18px 22px;
	padding: 0;
}
.wz-content-card a {
	color: var(--wz-accent-600);
	font-weight: 700;
}
.wz-content-card a:hover,
.wz-content-card a:focus-visible {
	color: var(--wz-navy-950);
	text-decoration: underline;
}
.wz-content-intro {
	border-left: 4px solid var(--wz-accent-500);
	background: rgba(247,115,60,0.08);
	padding: 18px 20px;
	border-radius: var(--wz-radius-sm);
	margin-bottom: 26px;
}
.wz-content-intro p {
	margin-bottom: 0;
	color: var(--wz-ink-900);
	font-weight: 600;
}
.wz-last-updated {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wz-ink-500);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 18px;
}
@media (max-width: 767px) {
	.wz-faq-list { grid-template-columns: 1fr; }
	.wz-content-card { padding: 26px 20px; }
	.wz-content-page { padding-bottom: 40px; }
}

.wz-contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 40px; align-items: start; }
@media (max-width: 979px) { .wz-contact-grid { grid-template-columns: 1fr; } }
.wz-contact-info-item { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.wz-contact-info-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(247,115,60,0.10); color: var(--wz-accent-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; }
.wz-contact-info-item h4 { font-size: 15px; margin: 0 0 2px; }
.wz-contact-info-item p { font-size: 14px; margin: 0; }
.wz-contact-info-item p a { color: var(--wz-ink-900); }
.wz-contact-info-item p a:hover, .wz-contact-info-item p a:focus-visible { color: var(--wz-accent-600); text-decoration: underline; }

/* Dark panel for the contact section's left side - previously a plain list
   of 2-3 items floating on the section background, visually thin next to
   the white form card. Reuses the same navy as the hero/CTA for continuity. */
/* Ink-brown rather than navy - this is the same #312a1e the original theme
   used specifically for its About/Contact/Team sections (section#contact,
   section#about-us in css/style.css), so reusing it here for the contact
   panel keeps that pairing intact while giving the site a clear third
   color alongside navy and the orange accent, instead of navy carrying
   every dark surface on the page. */
.wz-contact-panel { background: var(--wz-ink-900); color: #fff; border-radius: var(--wz-radius-lg); padding: 32px; }
.wz-contact-panel h3 { color: #fff; font-size: 20px; margin-bottom: 10px; }
.wz-contact-panel > p { color: rgba(255,255,255,0.72); margin-bottom: 26px; font-size: 15px; }
.wz-contact-panel .wz-contact-info-icon { background: rgba(255,255,255,0.10); color: #fff; }
.wz-contact-panel .wz-contact-info-item h4 { color: #fff; }
.wz-contact-panel .wz-contact-info-item p { color: rgba(255,255,255,0.68); }
.wz-contact-panel .wz-contact-info-item p a { color: rgba(255,255,255,0.9); }
.wz-contact-panel .wz-contact-info-item p a:hover,
.wz-contact-panel .wz-contact-info-item p a:focus-visible { color: var(--wz-highlight); }
.wz-contact-panel-socials { margin-top: 26px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.14); }

.wz-form { background: #fff; border: 1px solid var(--wz-line); border-radius: var(--wz-radius-lg); padding: 28px; box-shadow: var(--wz-shadow-sm); }
.wz-contact-page {
	background: var(--wz-bg) !important;
	color: var(--wz-ink-900) !important;
	padding-top: 56px !important;
	padding-bottom: 64px !important;
}
.wz-contact-page #theme-form input[type=text],
.wz-contact-page #theme-form textarea {
	background: #fff;
	border: 1px solid var(--wz-line);
	border-radius: 10px;
	color: var(--wz-ink-900);
	font-family: 'Plus Jakarta Sans', 'Open Sans', sans-serif;
	font-size: 15px;
	margin-bottom: 0;
}
.wz-contact-page #theme-form textarea {
	min-height: 150px;
	resize: vertical;
}
.wz-contact-page #theme-form input[type=text]:focus,
.wz-contact-page #theme-form textarea:focus {
	background: #fff;
	color: var(--wz-ink-900);
	border-color: var(--wz-accent-500);
}
.wz-contact-page .cform-form .row { margin-bottom: 16px; }
.wz-contact-page .cform-submit {
	width: auto;
	margin-bottom: 0;
}
.wz-contact-page .wz-form form {
	display: flex !important;
	flex-direction: column !important;
	gap: 18px !important;
}
.wz-contact-page .wz-form .row {
	margin-left: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
.wz-contact-page .wz-form .span6,
.wz-contact-page .wz-form .span12 {
	float: none;
	margin-left: 0;
	box-sizing: border-box;
}
.wz-contact-page .wz-form .span6 {
	width: calc(50% - 8px);
}
.wz-contact-page .wz-form .span12 {
	width: 100%;
}
.wz-contact-page .g-recaptcha {
	max-width: 100%;
	overflow: visible;
}

.wz-jobs-search input[type=text],
.wz-jobs-search select {
	width: calc(25% - 12px) !important;
	min-width: 0;
	margin: 0;
	border-radius: 10px;
	border: 1px solid rgba(255,255,255,0.32);
	box-sizing: border-box;
}
.wz-jobs-search input[type=submit] {
	width: calc(25% - 12px) !important;
	min-width: 130px;
	border-radius: 999px;
	background: var(--wz-accent-600);
	color: #fff;
	border: 0;
	margin: 0;
	box-sizing: border-box;
}
.wz-jobs-search input[type=submit]:hover,
.wz-jobs-search input[type=submit]:focus {
	background: var(--wz-accent-500) !important;
}
.wz-jobs-search .span12 {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	align-items: stretch;
	margin-left: 0;
}
.wz-jobs-search h2 {
	flex: 0 0 100%;
	max-width: 920px;
	margin-left: auto;
	margin-right: auto;
}
.wz-jobs-row > article.wz-card { margin: 0 !important; }
@media (max-width: 979px) {
	.wz-jobs-search input[type=text],
	.wz-jobs-search select { width: calc(50% - 8px) !important; }
	.wz-jobs-search input[type=submit] { width: calc(50% - 8px) !important; }
}
@media (max-width: 600px) {
	.wz-jobs-search .span12 { display: block; }
	.wz-jobs-search input[type=text],
	.wz-jobs-search select,
	.wz-jobs-search input[type=submit] {
		width: 100% !important;
		margin: 8px 0 0;
	}
	.wz-contact-page .wz-form .row { display: block; }
	.wz-contact-page .wz-form .span6,
	.wz-contact-page .wz-form .span12 { width: 100%; }
	.wz-contact-page .cform-submit { width: 100% !important; }
}
/* Vertical rhythm comes from the form's own gap, not from each field's
   margin-bottom - jQuery Validate injects a variable-height error label
   into whichever field fails, and margin-based spacing let that message
   sit almost flush against the next row's label with no separation.
   gap is constant regardless of a field's content height, so an error
   never crowds whatever comes after it. */
.wz-form form { display: flex; flex-direction: column; gap: 18px; }
.wz-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .wz-form-row { grid-template-columns: 1fr; } }
.wz-field { margin-bottom: 0; display: flex; flex-direction: column; }
.wz-field label { display: block; font-size: 13px; font-weight: 700; color: var(--wz-ink-700); margin-bottom: 6px; }
.wz-form .wz-field input[type=text],
.wz-form .wz-field input[type=password],
.wz-form .wz-field input[type=datetime],
.wz-form .wz-field input[type=datetime-local],
.wz-form .wz-field input[type=date],
.wz-form .wz-field input[type=month],
.wz-form .wz-field input[type=time],
.wz-form .wz-field input[type=week],
.wz-form .wz-field input[type=number],
.wz-form .wz-field input[type=email],
.wz-form .wz-field input[type=url],
.wz-form .wz-field input[type=search],
.wz-form .wz-field input[type=tel],
.wz-form .wz-field input[type=color],
.wz-form .wz-field textarea {
	width: 100% !important;
	height: 46px !important;
	min-height: 46px !important;
	border: 1px solid var(--wz-line) !important;
	border-radius: var(--wz-radius-sm) !important;
	padding: 12px 14px !important;
	font-size: 15px !important;
	font-family: inherit !important;
	color: var(--wz-ink-900) !important;
	background: var(--wz-bg) !important;
	box-sizing: border-box !important;
	box-shadow: none !important;
	margin: 0 !important;
	line-height: 1.4 !important;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.wz-form .wz-field textarea {
	height: auto !important;
	min-height: 132px !important;
	resize: vertical;
}
.wz-form .wz-field input:focus,
.wz-form .wz-field textarea:focus {
	outline: none !important;
	border-color: var(--wz-accent-500) !important;
	background: #fff !important;
	color: var(--wz-ink-900) !important;
	box-shadow: none !important;
}
.wz-field:has(.g-recaptcha) {
	margin-top: 4px;
	margin-bottom: 8px;
}
.wz-form .g-recaptcha {
	max-width: 100% !important;
	overflow: visible !important;
	overflow-x: visible !important;
	overflow-y: visible !important;
	margin-top: 2px !important;
	margin-bottom: 10px !important;
}
.wz-form .g-recaptcha > div {
	max-width: 100% !important;
	overflow: visible !important;
}
.wz-form .g-recaptcha iframe {
	max-width: 100% !important;
}
.wz-contact-page .wz-form .g-recaptcha {
	overflow: visible !important;
	overflow-x: visible !important;
	overflow-y: visible !important;
}
.wz-form .wz-btn {
	align-self: flex-start;
	margin-top: 4px;
}

/* jQuery Validate (js/jquery.validate.js, wired up in js/common.js for
   #formContact) adds class="error" to invalid fields and injects a
   <label class="error"> after them by default, with no styling of its own -
   previously invisible/plain-black. A conventional red makes invalid state
   unambiguous, matching what's expected of an enterprise contact form. */
.wz-field input.error, .wz-field textarea.error { border-color: #d92d20; background: #fdf1f0; }
.wz-field input.error:focus, .wz-field textarea.error:focus { border-color: #d92d20; background: #fff; }
.wz-form label.error {
	/* css/style.css also has a bare `label.error { position: absolute;
	   margin-top: -20px; }` written for the old form layouts. Our
	   margin-top/color above already out-specificity it, but position
	   wasn't touched, so the label was still pulled out of flow and left
	   floating over whatever came next instead of pushing it down. */
	position: static !important;
	display: block !important;
	color: #d92d20 !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	margin: 3px 0 0 !important;
	padding-left: 2px !important;
}

/* Server-rendered flash messages (Common::showMsg()) reuse the site's old
   "alert"/"box-*" class names - style them here instead of relying on
   Bootstrap 2's alert colors, which don't match this design. Red by
   default (most non-success messages are warnings/errors); green only for
   the explicit success variants. */
.wz-form .alert {
	margin-bottom: 20px;
	padding: 12px 16px;
	border-radius: var(--wz-radius-sm);
	font-size: 14px;
	font-weight: 600;
	background: #fdf1f0;
	border: 1px solid #f3c6c2;
	color: #b42318;
}
.wz-form .alert.box-success,
.wz-form .alert.alert-success { background: #edf9f0; border-color: #b8e4c3; color: #1e7c3a; }

@media (max-width: 340px) {
	.wz-form .g-recaptcha {
		transform: scale(0.88) !important;
		transform-origin: left top !important;
		margin-bottom: 0 !important;
	}
}

.wz-cta {
	/* flat dark brown - the same section#team/#contact/#about-us dark
	   background this file already uses, not an invented gradient. */
	border-radius: var(--wz-radius-lg);
	padding: 44px;
	background: var(--wz-ink-900);
	color: #fff;
	display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.wz-cta h3 { color: #fff; margin-bottom: 6px; font-size: 22px; }
.wz-cta p { color: rgba(255,255,255,0.72); margin: 0; }

/* the legacy bare `footer { text-align: center; }` rule above (written for
   the old single-line copyright footer) otherwise inherits into every
   footer column here, centering text that should be left-aligned. */
.wz-footer { background: var(--wz-navy-950); color: rgba(255,255,255,0.65); padding: 56px 0 26px; text-align: left; clear: both; }
/* The first column (brand + tagline) has no <h4>, so without this its
   paragraph starts higher than the other columns' lists - the brand row
   and each h4 share the same reserved height/margin so every column's
   body content lines up on one row, regardless of what "heading" it has. */
.wz-footer-grid > div > .wz-brand,
.wz-footer h4 { min-height: 34px; display: flex; align-items: center; margin: 0 0 16px; }
.wz-footer h4 { color: #fff; font-size: 15px; }
.wz-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; margin-bottom: 40px; align-items: start; }
@media (max-width: 979px) { .wz-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .wz-footer-grid { grid-template-columns: 1fr; } }
.wz-footer ul { list-style: none; margin: 0; padding: 0; }
.wz-footer li { margin-bottom: 10px; }
.wz-footer p { color: rgba(255,255,255,0.6); margin: 0 !important; }
.wz-footer a { font-size: 14px; color: rgba(255,255,255,0.65); transition: color 0.15s ease; }
.wz-footer a:hover, .wz-footer a:focus-visible { color: #fff; text-decoration: underline; }
.wz-footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 22px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 13px; }
.wz-footer-socials { display: flex; gap: 10px; }
.wz-footer-socials a { width: 36px; height: 36px; border-radius: 9px; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; }
.wz-footer-socials a:hover, .wz-footer-socials a:focus-visible { background: rgba(255,255,255,0.14); }
.wz-footer-socials a:focus-visible { outline: 2px solid var(--wz-highlight); outline-offset: 2px; }

/* ---------- Responsive tightening (matches this file's existing 979/767/480 breakpoints) ---------- */
@media (max-width: 979px) {
	.wz-hero { padding: 48px 0 56px; }
	.wz-hero h1 { font-size: 36px; }
	.wz-section { padding: 56px 0; }
	.wz-section--tight { padding: 40px 0; }
	.wz-head { margin-bottom: 26px; }
	.wz-head h2 { font-size: 28px; }
	.wz-cta { padding: 32px; }
}

@media (max-width: 767px) {
	.wz-container { padding: 0 16px; }
	.wz-hero { padding: 40px 0 48px; }
	.wz-hero h1 { font-size: 30px; }
	.wz-hero-stats { grid-template-columns: 1fr 1fr; gap: 14px; }
	.wz-section { padding: 44px 0; }
	.wz-section--tight { padding: 32px 0; }
	.wz-cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
	:root { --wz-nav-h: 64px; }
	.wz-nav-inner { padding: 0 16px; }
	.wz-brand { font-size: 17px; }
	.wz-hero { padding: 32px 0 40px; }
	.wz-hero h1 { font-size: 26px; }
	.wz-section { padding: 36px 0; }
	.wz-eyebrow { font-size: 12px; }
	.wz-head h2 { font-size: 24px; }
	.wz-form { padding: 20px; }
	.wz-cta { padding: 24px; }
}