*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);background:#fff;font-family:var(--body-font);line-height:1.7}body.modal-open{overflow:hidden}a{color:inherit}.site-shell{min-height:100vh}.container{width:min(var(--container),calc(100% - 40px));margin:auto}.narrow{max-width:900px}.site-header{position:absolute;z-index:50;top:0;left:0;width:100%;background:#fff;padding:20px 42px;transition:.35s ease}.site-header.sticky{position:fixed;padding-top:9px;padding-bottom:9px;box-shadow:0 8px 28px rgba(0,0,0,.13);animation:headerIn .35s ease}@keyframes headerIn{from{transform:translateY(-100%)}to{transform:translateY(0)}}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:30px;max-width:1500px;margin:auto}.site-logo{width:164px;display:block;flex:0 0 164px}.site-logo img{display:block;width:100%;height:auto}.header-right{width:calc(100% - 194px)}.header-topline{height:32px;display:flex;align-items:center;justify-content:flex-end;gap:22px;margin-bottom:10px;font-size:13px;color:var(--dark)}.header-topline>a{text-decoration:none}.language-switcher{display:flex;align-items:center;gap:7px;font-weight:700}.language-switcher span{width:1px;height:14px;background:#c7d0d8}.language-switcher a{text-decoration:none;opacity:.5}.language-switcher a.active,.language-switcher a:hover{color:var(--primary);opacity:1}.header-nav-row{display:flex;align-items:center;justify-content:flex-end}.desktop-nav ul,.mobile-navigation ul,.site-footer ul{list-style:none;padding:0;margin:0}.desktop-nav>ul{display:flex;align-items:center;justify-content:flex-end;gap:clamp(12px,2vw,32px)}.desktop-nav li{position:relative}.desktop-nav a{text-decoration:none;color:var(--dark);font-size:17px;font-weight:600;display:block;white-space:nowrap;position:relative}.desktop-nav>ul>li:not(.nav-cta)>a:after{content:"";height:2px;background:var(--primary);position:absolute;left:50%;right:50%;bottom:-7px;transition:.25s ease}.desktop-nav>ul>li:hover>a{color:var(--primary)}.desktop-nav>ul>li:hover>a:after{left:0;right:0}.nav-cta>a,.button,.global-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;background:var(--primary);color:#fff!important;text-decoration:none;font-weight:700;border:0;border-radius:var(--button-radius);cursor:pointer;transition:.28s ease}.nav-cta>a:hover,.button:hover,.global-btn:hover{background:var(--dark);transform:translateY(-1px)}.submenu{position:absolute;top:calc(100% + 16px);left:-20px;min-width:230px;padding:12px!important;background:#fff;box-shadow:0 18px 45px rgba(5,38,64,.18);opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s ease}.submenu li a{padding:9px 12px}.desktop-nav li:hover>.submenu{opacity:1;visibility:visible;transform:none}.submenu-toggle{display:none}.mobile-menu-toggle{display:none;background:none;border:0;padding:9px}.mobile-menu-toggle span{display:block;width:26px;height:2px;background:var(--dark);margin:5px}.mobile-navigation{background:#fff;border-top:1px solid #e8edf1;padding:14px 25px 24px}.mobile-navigation a{display:block;padding:10px 0;text-decoration:none;font-weight:650}.mobile-navigation .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;display:none;padding:0 0 0 18px!important}.mobile-navigation li.open>.submenu{display:block}.mobile-navigation .submenu-toggle{display:block;position:absolute;right:0;top:8px;background:none;border:0;width:30px;height:30px}.mobile-navigation .submenu-toggle:before,.mobile-navigation .submenu-toggle:after{content:"";position:absolute;left:9px;right:9px;top:14px;height:2px;background:var(--dark)}.mobile-navigation .submenu-toggle:after{transform:rotate(90deg)}.mobile-navigation li.open>.submenu-toggle:after{display:none}.mobile-navigation li{position:relative}.section{padding:86px 0}.section.alt,.muted{background:var(--surface-alt)}.section-title{text-align:center;margin-bottom:42px}.section-title h2,.section h2,.cta h2,.booking-modal h2{font-family:var(--heading-font);font-size:clamp(30px,3.2vw,46px);line-height:1.18;color:var(--dark);margin:0 0 18px}.section-title p{max-width:780px;margin:auto}.eyebrow{display:block;text-transform:uppercase;letter-spacing:.18em;font-size:13px;font-weight:800;color:var(--primary);margin-bottom:10px}.prose{font-size:16px}.prose h2,.prose h3{color:var(--dark)}.prose img{max-width:100%;height:auto}.hero-slider{position:relative;min-height:750px;overflow:hidden}.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .8s ease;display:flex;align-items:center}.hero-slide.active{opacity:1}.hero-slide:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,36,66,.3),rgba(0,36,66,.04))}.hero-content-wrap{position:relative;width:100%;height:100%;padding-top:155px}.hero-skew{position:absolute;left:0;top:0;bottom:0;width:min(52%,680px);background:rgba(1,81,140,.76);clip-path:polygon(0 0,90% 0,100% 100%,0 100%)}.hero-skew:after{content:"";position:absolute;left:42px;top:0;bottom:0;width:100%;background:rgba(1,81,140,.28);transform:skewX(-8deg)}.hero-copy{position:relative;z-index:2;width:min(570px,calc(100% - 50px));color:#fff;padding:105px 0 70px}.hero-copy h1{font-family:var(--heading-font);font-size:clamp(38px,4.2vw,62px);line-height:1.12;margin:0 0 22px}.hero-copy p{font-size:17px;max-width:390px;margin:0 0 30px}.hero-copy .global-btn{background:var(--dark)}.hero-dots{position:absolute;z-index:4;left:50%;bottom:26px;transform:translateX(-50%);display:flex;gap:9px}.hero-dots button{width:12px;height:12px;border-radius:50%;border:0;background:rgba(255,255,255,.45);padding:0}.hero-dots button.active{background:#fff}.welcome-section{text-align:center}.welcome-section .intro{max-width:760px;margin:0 auto 50px}.video-frame{max-width:920px;margin:auto;aspect-ratio:16/9;box-shadow:0 15px 48px rgba(7,46,74,.14)}.video-frame iframe,.video-frame video{width:100%;height:100%;border:0}.industries-section{position:relative;padding-top:60px;background:linear-gradient(180deg,#fff 0,#fff 30%,rgba(211,213,212,.8) 30%,rgba(211,213,212,0) 100%)}.industry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.industry-card{background:transparent;text-align:center;transition:.3s ease}.industry-card a{text-decoration:none}.industry-card .image{height:320px;overflow:hidden;position:relative}.industry-card .image:after{content:"";position:absolute;inset:0;background:var(--primary);opacity:0;transition:.3s}.industry-card img{width:100%;height:100%;object-fit:cover;transition:.45s}.industry-card:hover{background:#fff}.industry-card:hover img{transform:scale(1.07)}.industry-card:hover .image:after{opacity:.35}.industry-card .body{padding:30px 22px}.industry-card h3{font-size:29px;color:var(--primary);margin:0 0 16px}.industry-card .read-more{color:var(--primary);font-weight:700}.benefits-title{margin-top:70px}.benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.benefit-card{text-align:center;padding:18px 16px;transition:.3s}.benefit-card:hover{background:#fff}.benefit-icon{width:100px;height:100px;border:2px solid var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 22px;transition:.3s}.benefit-icon img{width:52px;height:52px;object-fit:contain}.benefit-card:hover .benefit-icon{background:var(--primary)}.benefit-card:hover .benefit-icon img{filter:grayscale(1) brightness(15)}.benefit-card h3{font-size:23px;line-height:1.28;margin:0 0 12px;color:var(--dark)}.testimonials-section{position:relative;background:var(--primary);padding:90px 85px;color:#fff;overflow:hidden}.testimonials-section:before{content:"";position:absolute;inset:0 36px;background:var(--dark);transform:skewX(-8.5deg)}.testimonial-slider{position:relative;z-index:2;max-width:900px;margin:auto;text-align:center}.testimonial{display:none}.testimonial.active{display:block}.testimonial blockquote{font-size:17px;font-style:italic;line-height:1.9;margin:0}.testimonial cite{display:block;font-style:normal;font-weight:700;margin:28px 0}.testimonial img{width:100px;height:100px;border-radius:50%;object-fit:cover}.testimonial-controls{display:flex;justify-content:center;gap:10px;margin-top:25px}.testimonial-controls button{width:12px;height:12px;border-radius:50%;border:0;background:rgba(255,255,255,.35)}.testimonial-controls button.active{background:#fff}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.card{background:#fff;box-shadow:0 14px 42px rgba(8,38,64,.1);overflow:hidden}.card img{width:100%;height:230px;object-fit:cover}.card-body{padding:26px}.card h3{font-size:25px;color:var(--dark);margin:0 0 12px}.card a{color:var(--primary);font-weight:750;text-decoration:none}.image-text{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.image-text.right .image-text-media{order:2}.image-text-media img{width:100%;display:block;min-height:420px;object-fit:cover}.inner-banner{position:relative;min-height:350px;background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:165px 0 55px;color:#fff}.inner-banner:before{content:"";position:absolute;inset:0;background:rgba(4,31,53,.62)}.inner-banner .container{position:relative}.inner-banner h1{font-size:clamp(36px,4vw,58px);line-height:1.1;margin:0}.inner-banner p{max-width:650px;margin:13px 0 0}.cta{background:var(--dark);color:#fff;padding:58px 0}.cta .container{display:flex;align-items:center;justify-content:space-between;gap:35px}.cta h2{color:#fff;margin:0 0 10px}.cta p{margin:0}.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:55px}.contact-details{display:grid;gap:18px;margin-top:30px}.contact-details a{text-decoration:none;color:var(--dark)}.panel{background:#fff;padding:32px;box-shadow:0 15px 48px rgba(10,40,68,.12);display:grid;gap:16px}label{display:grid;gap:7px;font-weight:700;color:var(--dark)}input,textarea,select{width:100%;border:1px solid #cbd3da;padding:13px 14px;font:inherit;border-radius:3px;background:#fff}textarea{resize:vertical}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.check{display:flex;align-items:flex-start;gap:10px;font-weight:400}.check input{width:auto;margin-top:6px}.form-status{font-weight:700;margin:0}.booking-shell{display:grid;grid-template-columns:.9fr 1.1fr;gap:32px}.booking-step{background:#fff;padding:28px;box-shadow:0 15px 48px rgba(10,40,68,.1);display:grid;gap:18px}.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.slot{padding:11px 8px;border:1px solid var(--primary);background:#fff;color:var(--primary);font-weight:700;cursor:pointer}.slot:hover{background:var(--primary);color:#fff}.slot[disabled]{opacity:.4;cursor:not-allowed}.booking-modal{position:fixed;inset:0;z-index:1000;display:none}.booking-modal.open{display:block}.booking-modal-backdrop{position:absolute;inset:0;background:rgba(1,24,43,.78)}.booking-modal-panel{position:absolute;right:0;top:0;height:100%;width:min(780px,100%);overflow:auto;background:#f7f9fb;padding:54px}.booking-modal-close{position:absolute;right:22px;top:16px;border:0;background:transparent;font-size:42px;color:var(--dark);cursor:pointer}.booking-modal-heading{padding-right:45px;margin-bottom:22px}.booking-modal-heading>span{color:var(--primary);font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:13px}.booking-modal .section{padding:0}.booking-modal .container{width:100%}.booking-modal .booking-shell{grid-template-columns:1fr}.booking-modal .section-title{display:none}.site-footer{background:var(--dark);color:#fff;padding:75px 0 0}.footer-grid{width:min(var(--container),calc(100% - 40px));margin:auto;display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:42px}.footer-column img{filter:grayscale(1) brightness(12);width:164px;height:auto}.footer-column h3{font-size:18px;margin:0 0 22px}.footer-column a{display:block;color:#fff;text-decoration:none;margin:0 0 12px}.footer-column li{margin-bottom:10px}.footer-brand-column p{max-width:240px}.legal-links{margin-top:22px!important;border-top:1px solid rgba(255,255,255,.18);padding-top:20px!important}.footer-bottom{margin-top:55px;border-top:1px solid rgba(255,255,255,.14);padding:18px;text-align:center;font-size:13px}.error-page{padding:250px 20px 120px;text-align:center}.error-page h1{font-size:48px;color:var(--dark)}@media(max-width:1050px){.site-header{padding:15px 22px}.header-topline,.desktop-nav{display:none}.header-right{width:auto}.site-logo{width:130px;flex-basis:130px}.mobile-menu-toggle{display:block}.site-header{position:relative}.site-header.sticky{position:fixed}.hero-content-wrap{padding-top:0}.hero-slider{min-height:620px}.hero-copy{padding-top:100px}.hero-skew{width:72%}.industry-grid,.cards{grid-template-columns:repeat(2,1fr)}.benefits-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.inner-banner{padding-top:75px}.contact-grid,.booking-shell{grid-template-columns:1fr}}@media(max-width:700px){.container{width:min(100% - 30px,var(--container))}.section{padding:58px 0}.hero-slider{min-height:570px}.hero-skew{width:100%;clip-path:none;background:rgba(1,81,140,.76)}.hero-skew:after{display:none}.hero-copy{width:100%;padding:80px 0}.hero-copy h1{font-size:38px}.industry-grid,.cards,.benefits-grid{grid-template-columns:1fr}.industry-card .image{height:270px}.testimonials-section{padding:65px 25px}.testimonials-section:before{inset:0;transform:none}.image-text{grid-template-columns:1fr;gap:32px}.image-text.right .image-text-media{order:0}.image-text-media img{min-height:300px}.cta .container{display:block}.cta .button{margin-top:20px}.form-row{grid-template-columns:1fr}.slots{grid-template-columns:repeat(2,1fr)}.booking-modal-panel{padding:52px 20px 30px}.footer-grid{grid-template-columns:1fr}.site-footer{padding-top:55px}}
.nav-cta.nav-cta-outline>a{background:transparent!important;color:var(--primary)!important;border:2px solid var(--primary)}.nav-cta.nav-cta-outline>a:hover{background:var(--primary)!important;color:#fff!important}
/* CMS section-level design controls */
.cms-section > section {
background-color: var(--cms-section-bg, initial);
background-image: var(--cms-section-bg-image, none);
background-position: var(--cms-section-bg-position, center center);
background-size: cover;
color: var(--cms-section-text, inherit);
padding-top: var(--cms-section-pt, initial);
padding-bottom: var(--cms-section-pb, initial);
text-align: var(--cms-section-align, inherit);
}
.cms-section > section .container {
max-width: var(--cms-section-width, var(--container));
}
.cms-section.cms-full-width > section .container {
max-width: none;
width: 100%;
}
@media (min-width: 1025px) {
.cms-hide-desktop { display: none !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
.cms-hide-tablet { display: none !important; }
}
@media (max-width: 768px) {
.cms-hide-mobile { display: none !important; }
.cms-section > section {
padding-top: var(--cms-section-mobile-pt, var(--cms-section-pt, initial));
padding-bottom: var(--cms-section-mobile-pb, var(--cms-section-pb, initial));
}
}
/* Design-token overrides managed from the administration panel */
html { font-size: var(--base-font-size); }
body { background: var(--surface); line-height: var(--base-line-height); }
.container { width: min(var(--container), calc(100% - (var(--container-padding-desktop) * 2))); }
.section { padding-top: var(--section-spacing-desktop); padding-bottom: var(--section-spacing-desktop); }
h1, h2, h3, h4, h5, h6 { font-family: var(--heading-font); font-weight: var(--heading-weight); line-height: var(--heading-line-height); }
.site-header { background: var(--header-bg); min-height: var(--header-height); }
.site-header.sticky { min-height: var(--header-sticky-height); }
.site-logo { width: var(--logo-width); flex-basis: var(--logo-width); }
.nav-cta > a, .button, .global-btn { min-height: var(--button-height); padding-left: var(--button-padding); padding-right: var(--button-padding); font-weight: var(--button-weight); }
.card, .panel, .booking-step { border-radius: var(--card-radius); box-shadow: var(--card-shadow); }
input, textarea, select { min-height: var(--input-height); border-color: var(--border); border-radius: var(--input-radius); }
.site-footer { background: var(--footer-bg); color: var(--footer-text); }
.site-footer a { color: var(--footer-text); }
@media (max-width: 1050px) {
.section { padding-top: var(--section-spacing-tablet); padding-bottom: var(--section-spacing-tablet); }
}
@media (max-width: 700px) {
.container { width: min(var(--container), calc(100% - (var(--container-padding-mobile) * 2))); }
.section { padding-top: var(--section-spacing-mobile); padding-bottom: var(--section-spacing-mobile); }
}
/* ========================================================================
SkillsHR legacy design fidelity — About page
Mirrors the proportions and visual language of the former WordPress page
while keeping every content block editable in the new CMS.
======================================================================== */
.page-type-about .cms-section-hero {
background: #fff;
}
.page-type-about .inner-banner--legacy-inner {
isolation: isolate;
min-height: 550px;
width: 100%;
margin: 0;
padding: 150px 0 0;
align-items: center;
background-size: cover;
background-position: center center;
overflow: hidden;
}
.page-type-about .inner-banner--legacy-inner::before {
content: "";
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: clamp(28px, 4.6vw, 88px);
width: min(38vw, 600px);
background: rgba(0, 91, 151, .72);
clip-path: polygon(9% 0, 100% 0, 88% 100%, 0 100%);
}
.page-type-about .inner-banner--legacy-inner::after {
content: "";
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: min(34vw, 535px);
width: 84px;
background: rgba(75, 132, 173, .42);
transform: skewX(-8deg);
transform-origin: bottom left;
}
.page-type-about .inner-banner--legacy-inner .inner-banner__content {
z-index: 2;
width: min(1146px, calc(100% - 60px));
padding: 48px 0 35px 0;
}
.page-type-about .inner-banner--legacy-inner h1 {
max-width: 430px;
margin: 0 0 22px;
color: #fff;
font-size: clamp(39px, 3.33vw, 48px);
font-weight: 700;
line-height: 1.18;
text-align: left;
text-transform: none;
letter-spacing: 0;
}
.page-type-about .inner-banner--legacy-inner p,
.page-type-about .inner-banner--legacy-inner .inner-banner__text {
max-width: 330px;
margin: 0;
color: #fff;
font-size: 16px;
font-weight: 400;
line-height: 1.55;
}
.page-type-about .inner-banner--legacy-inner .inner-banner__text p {
margin: 0;
}
.page-type-about .about-mission {
padding: 96px 15px 138px;
text-align: center;
background: #fff;
}
.page-type-about .about-mission__container {
width: min(1146px, 100%);
margin: 0 auto;
}
.page-type-about .about-mission__heading h2 {
margin: 0 0 38px;
color: #333;
font-size: clamp(30px, 2.35vw, 38px);
font-weight: 500;
line-height: 1.2;
}
.page-type-about .about-mission__description {
max-width: 790px;
margin: 0 auto 54px;
color: #444;
font-size: 15px;
line-height: 1.75;
}
.page-type-about .about-mission__description p {
margin: 0;
}
.page-type-about .about-mission__description strong {
display: inline;
font-weight: 500;
text-transform: uppercase;
}
.page-type-about .about-mission__media {
width: min(920px, 100%);
margin: 0 auto;
overflow: hidden;
}
.page-type-about .about-mission__media img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 920 / 490;
object-fit: cover;
}
.page-type-about .about-management {
position: relative;
padding: 110px 15px 72px;
overflow: hidden;
background: linear-gradient(180deg, rgba(211, 213, 212, 1) 0%, rgba(211, 213, 212, 0) 55%);
}
.page-type-about .about-management__container {
position: relative;
z-index: 1;
width: min(1146px, 100%);
margin: 0 auto;
}
.page-type-about .about-management__heading {
margin: 0 auto;
}
.page-type-about .about-management__heading h2 {
margin-bottom: 38px;
color: #333;
font-size: clamp(30px, 2.35vw, 38px);
font-weight: 500;
}
.page-type-about .about-management__intro {
max-width: 770px;
margin: 0 auto;
color: #444;
font-size: 15px;
line-height: 1.75;
}
.page-type-about .about-management__intro p {
margin: 0;
}
.page-type-about .about-management__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 356px));
justify-content: center;
align-items: start;
gap: 28px;
width: min(768px, 100%);
margin: 61px auto 0;
}
.page-type-about .about-management__member {
min-width: 0;
text-align: center;
}
.page-type-about .about-management__photo {
display: block;
width: 100%;
max-width: 356px;
height: auto;
aspect-ratio: 356 / 440;
margin: 0 auto;
object-fit: cover;
}
.page-type-about .about-management__identity h3 {
margin: 29px 0 8px;
color: var(--primary);
font-size: 30px;
font-weight: 500;
line-height: 1.25;
}
.page-type-about .about-management__identity p {
margin: 0;
color: #333;
font-size: 16px;
}
.page-type-about .about-management__contact {
display: grid;
gap: 10px;
margin: 36px auto 0;
padding: 0 16px;
}
.page-type-about .about-management__contact a {
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
align-items: center;
width: fit-content;
max-width: 100%;
margin: 0 auto;
color: #333;
font-size: 16px;
line-height: 1.35;
text-align: left;
text-decoration: none;
}
.page-type-about .about-management__contact a:hover {
color: var(--primary);
}
.page-type-about .about-management__contact svg {
width: 17px;
height: 17px;
fill: var(--primary);
}
.page-type-about .about-management__contact span {
overflow-wrap: anywhere;
}
.page-type-about .about-promise {
padding: 75px 15px 35px;
background: #fff;
}
.page-type-about .about-promise__container {
display: grid;
grid-template-columns: minmax(250px, 34.1114%) minmax(0, 65.8886%);
align-items: start;
width: min(1146px, 100%);
margin: 0 auto;
}
.page-type-about .about-promise__intro {
padding: 0 36px 0 0;
}
.page-type-about .about-promise__intro h2 {
margin: 0 0 38px;
color: #333;
font-size: clamp(30px, 2.35vw, 38px);
font-weight: 500;
}
.page-type-about .about-promise__intro p {
margin: 0;
color: #444;
font-size: 15px;
line-height: 1.75;
}
.page-type-about .about-promise__list {
display: grid;
gap: 30px;
}
.page-type-about .about-promise__item {
display: grid;
grid-template-columns: 100px minmax(0, 1fr);
align-items: center;
gap: 40px;
}
.page-type-about .about-promise__icon {
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
border: 2px solid var(--primary);
border-radius: 50%;
transition: .3s ease;
}
.page-type-about .about-promise__icon img {
width: 50px;
height: 50px;
object-fit: contain;
}
.page-type-about .about-promise__item:hover .about-promise__icon {
background: var(--primary);
}
.page-type-about .about-promise__item:hover .about-promise__icon img {
filter: grayscale(1) brightness(15);
}
.page-type-about .about-promise__copy h3 {
margin: 0 0 11px;
color: #222;
font-size: 24px;
font-weight: 500;
line-height: 1.25;
}
.page-type-about .about-promise__copy p {
margin: 0;
color: #444;
font-size: 15px;
line-height: 1.65;
}
.page-type-about .cta--join-team {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 70px 0;
background: #0066a8;
}
.page-type-about .cta--join-team::before {
content: "";
position: absolute;
z-index: -1;
inset: 0 40px;
background: #00558c;
transform: skewX(-16.5deg);
}
.page-type-about .cta--join-team .container {
display: grid;
grid-template-columns: minmax(190px, .75fr) minmax(320px, 1.7fr) auto;
align-items: center;
gap: 34px;
width: min(1146px, calc(100% - 40px));
}
.page-type-about .cta--join-team .cta__copy {
display: contents;
}
.page-type-about .cta--join-team h2 {
margin: 0;
color: #fff;
font-size: clamp(28px, 2.35vw, 38px);
font-weight: 500;
}
.page-type-about .cta--join-team p {
margin: 0;
padding: 0 15px;
color: #fff;
font-size: 15px;
line-height: 1.6;
}
.page-type-about .cta--join-team .button {
min-width: 181px;
background: var(--dark);
}
@media (max-width: 1050px) {
.page-type-about .inner-banner--legacy-inner {
min-height: 470px;
padding-top: 100px;
}
.page-type-about .inner-banner--legacy-inner::before {
left: 0;
width: 65%;
}
.page-type-about .inner-banner--legacy-inner::after {
left: 55%;
}
.page-type-about .inner-banner--legacy-inner .inner-banner__content {
width: min(100% - 40px, 760px);
}
.page-type-about .about-promise__container {
grid-template-columns: 1fr;
gap: 48px;
}
.page-type-about .about-promise__intro {
padding: 0;
text-align: center;
}
.page-type-about .cta--join-team .container {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
}
.page-type-about .cta--join-team .cta__copy {
display: grid;
justify-items: center;
gap: 20px;
}
}
@media (max-width: 700px) {
.page-type-about .inner-banner--legacy-inner {
min-height: 430px;
padding-top: 80px;
background-position: 62% center;
}
.page-type-about .inner-banner--legacy-inner::before {
width: 100%;
background: rgba(0, 91, 151, .75);
clip-path: none;
}
.page-type-about .inner-banner--legacy-inner::after {
display: none;
}
.page-type-about .inner-banner--legacy-inner .inner-banner__content {
width: min(100% - 30px, 520px);
padding-top: 42px;
text-align: center;
}
.page-type-about .inner-banner--legacy-inner h1,
.page-type-about .inner-banner--legacy-inner p,
.page-type-about .inner-banner--legacy-inner .inner-banner__text {
max-width: none;
text-align: center;
}
.page-type-about .about-mission {
padding: 70px 15px 82px;
}
.page-type-about .about-management {
padding: 76px 15px 54px;
}
.page-type-about .about-management__grid {
grid-template-columns: minmax(0, 356px);
gap: 58px;
margin-top: 45px;
}
.page-type-about .about-management__identity h3 {
font-size: 27px;
}
.page-type-about .about-promise {
padding: 70px 15px 35px;
}
.page-type-about .about-promise__item {
grid-template-columns: 1fr;
justify-items: center;
gap: 20px;
text-align: center;
}
.page-type-about .cta--join-team {
padding: 58px 0;
}
.page-type-about .cta--join-team::before {
inset: 0;
transform: none;
}
}
/* ========================================================================
SkillsHR legacy design fidelity — Contact and Services pages
======================================================================== */
.page-type-contact .cms-section-hero,
.page-type-services .cms-section-hero {
background: #fff;
}
.page-type-contact .inner-banner--legacy-inner,
.page-type-services .inner-banner--legacy-inner {
isolation: isolate;
min-height: 550px;
width: 100%;
margin: 0;
padding: 150px 0 0;
align-items: center;
background-size: cover;
background-position: center center;
overflow: hidden;
}
.page-type-contact .inner-banner--legacy-inner::before,
.page-type-services .inner-banner--legacy-inner::before {
content: "";
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: clamp(28px, 4.6vw, 88px);
width: min(38vw, 600px);
background: rgba(0, 91, 151, .72);
clip-path: polygon(9% 0, 100% 0, 88% 100%, 0 100%);
}
.page-type-contact .inner-banner--legacy-inner::after,
.page-type-services .inner-banner--legacy-inner::after {
content: "";
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: min(34vw, 535px);
width: 84px;
background: rgba(75, 132, 173, .42);
transform: skewX(-8deg);
transform-origin: bottom left;
}
.page-type-contact .inner-banner--legacy-inner .inner-banner__content,
.page-type-services .inner-banner--legacy-inner .inner-banner__content {
z-index: 2;
width: min(1146px, calc(100% - 60px));
padding: 48px 0 35px;
}
.page-type-contact .inner-banner--legacy-inner h1,
.page-type-services .inner-banner--legacy-inner h1 {
max-width: 430px;
margin: 0 0 22px;
color: #fff;
font-size: clamp(39px, 3.33vw, 48px);
font-weight: 700;
line-height: 1.18;
text-align: left;
text-transform: none;
letter-spacing: 0;
}
.page-type-contact .inner-banner--legacy-inner p,
.page-type-contact .inner-banner--legacy-inner .inner-banner__text,
.page-type-services .inner-banner--legacy-inner p,
.page-type-services .inner-banner--legacy-inner .inner-banner__text {
max-width: 330px;
margin: 0;
color: #fff;
font-size: 16px;
font-weight: 400;
line-height: 1.55;
}
.page-type-contact .inner-banner--legacy-inner .inner-banner__text p,
.page-type-services .inner-banner--legacy-inner .inner-banner__text p {
margin: 0;
}
/* Services */
.page-type-services .legacy-services {
padding: 25px 15px 59px;
background: #fff;
}
.page-type-services .legacy-services__container {
width: min(1146px, 100%);
margin: 0 auto;
}
.page-type-services .legacy-service {
display: flex;
justify-content: center;
align-items: flex-start;
padding: 38px 0;
scroll-margin-top: 110px;
}
.page-type-services .legacy-service--reverse {
flex-direction: row-reverse;
}
.page-type-services .legacy-service__media,
.page-type-services .legacy-service__content {
width: 50%;
min-width: 0;
}
.page-type-services .legacy-service__media {
padding: 0 15px 0 0;
}
.page-type-services .legacy-service--reverse .legacy-service__media {
padding: 0 0 0 15px;
}
.page-type-services .legacy-service__media-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
max-width: 473px;
width: 100%;
margin: 0 -12px;
}
.page-type-services .legacy-service--reverse .legacy-service__media-grid {
margin: 0 -12px 0 auto;
}
.page-type-services .legacy-service__image {
width: 50%;
margin: 0;
padding: 11px 12px;
}
.page-type-services .legacy-service__image--main {
width: 100%;
}
.page-type-services .legacy-service__image img {
display: block;
width: 100%;
height: 141px;
object-fit: cover;
background: #eef1f3;
}
.page-type-services .legacy-service__image--main img {
height: 290px;
}
.page-type-services .legacy-service__content {
padding: 19px 10px 0;
}
.page-type-services .legacy-service--reverse .legacy-service__content {
padding-left: 0;
}
.page-type-services .legacy-service__content h2 {
margin: 0 0 49px;
color: #333;
font-size: clamp(31px, 2.35vw, 38px);
font-weight: 500;
line-height: 1.2;
}
.page-type-services .legacy-service__description {
max-width: 525px;
color: #444;
font-size: 16px;
line-height: 1.75;
}
.page-type-services .legacy-service__description p {
margin: 0 0 20px;
}
.page-type-services .legacy-service__description p:last-child {
margin-bottom: 0;
}
.page-type-services .legacy-service__list {
column-count: 2;
column-gap: 25px;
margin: 43px 0 0;
padding: 0;
list-style: none;
}
.page-type-services .legacy-service__list li {
position: relative;
break-inside: avoid;
margin: 0 0 19px;
padding: 0 0 0 37px;
}
.page-type-services .legacy-service__list li::before {
content: "";
position: absolute;
top: .62em;
left: 0;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--primary);
}
.page-type-services .legacy-service__list span {
display: inline-block;
color: #333;
font-size: 16px;
font-weight: 700;
text-decoration: underline;
}
/* Contact */
.page-type-contact .legacy-contact {
padding: 85px 15px 95px;
background: #fff;
}
.page-type-contact .legacy-contact__container {
width: min(1146px, 100%);
margin: 0 auto;
}
.page-type-contact .legacy-contact__heading {
text-align: center;
}
.page-type-contact .legacy-contact__heading h2 {
margin: 0;
color: #333;
font-size: clamp(31px, 2.35vw, 38px);
font-weight: 500;
line-height: 1.2;
}
.page-type-contact .legacy-contact__intro {
max-width: 760px;
margin: 20px auto 0;
color: #444;
font-size: 15px;
}
.page-type-contact .legacy-contact__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
gap: 30px;
margin-top: 70px;
}
.page-type-contact .legacy-contact__form-column,
.page-type-contact .legacy-contact__information {
min-width: 0;
padding: 0 15px;
}
.page-type-contact .legacy-contact__form,
.page-type-contact .legacy-contact__information {
max-width: 451px;
width: 100%;
margin: 0 auto;
}
.page-type-contact .legacy-contact__information {
max-width: 445px;
margin-top: 7px;
}
.page-type-contact .legacy-contact__honeypot {
position: absolute !important;
left: -10000px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
}
.page-type-contact .legacy-contact__form > input:not([type="hidden"]):not([type="checkbox"]),
.page-type-contact .legacy-contact__form textarea {
display: block;
width: 100%;
min-height: 40px;
height: 40px;
margin: 0 0 20px;
padding: 0 16px;
border: 1px solid #d0d1d6;
border-radius: 0;
background: #fff;
color: #333;
font-family: inherit;
font-size: 14px;
font-weight: 500;
line-height: 1.2;
box-shadow: none;
}
.page-type-contact .legacy-contact__form textarea {
height: 100px;
min-height: 100px;
padding: 16px;
resize: vertical;
}
.page-type-contact .legacy-contact__form input::placeholder,
.page-type-contact .legacy-contact__form textarea::placeholder {
color: #333;
opacity: 1;
}
.page-type-contact .legacy-contact__privacy {
display: flex;
align-items: flex-start;
gap: 9px;
margin: -2px 0 18px;
color: #555;
font-size: 12px;
font-weight: 400;
line-height: 1.45;
}
.page-type-contact .legacy-contact__privacy input {
flex: 0 0 auto;
width: 14px;
min-height: 14px;
height: 14px;
margin: 2px 0 0;
}
.page-type-contact .legacy-contact__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px;
margin-top: 8px;
}
.page-type-contact .legacy-contact__actions .button {
min-width: 181px;
min-height: 40px;
border-radius: 0;
font-size: 14px;
}
.page-type-contact .legacy-contact__booking-link {
color: var(--primary);
font-size: 13px;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
}
.page-type-contact .legacy-contact__form .form-status {
min-height: 24px;
margin: 14px 0 0;
color: var(--primary);
font-size: 13px;
}
.page-type-contact .legacy-contact__details {
display: grid;
gap: 17px;
}
.page-type-contact .legacy-contact__detail {
display: flex;
align-items: flex-start;
min-width: 0;
}
.page-type-contact .legacy-contact__icon {
display: flex;
flex: 0 0 30px;
width: 30px;
padding-top: 2px;
color: var(--primary);
}
.page-type-contact .legacy-contact__icon svg {
display: block;
width: 17px;
height: 17px;
fill: currentColor;
}
.page-type-contact .legacy-contact__detail--email .legacy-contact__icon svg {
width: 15px;
height: 15px;
}
.page-type-contact .legacy-contact__detail a {
min-width: 0;
color: #000;
font-size: 16px;
line-height: 1.45;
text-decoration: none;
}
.page-type-contact .legacy-contact__detail a:hover {
color: var(--primary);
}
.page-type-contact .legacy-contact__map {
width: 100%;
height: 332px;
margin-top: 37px;
overflow: hidden;
background: #eef1f3;
}
.page-type-contact .legacy-contact__map iframe {
display: block;
width: 100%;
height: 332px;
border: 0;
}
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Original SkillsHR Join Our Team strip */
.page-type-services .cta--join-team,
.page-type-contact .cta--join-team {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 106px 15px;
background: #0066a8;
color: #fff;
}
.page-type-services .cta--join-team::before,
.page-type-contact .cta--join-team::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 40px;
right: 40px;
background: #00558c;
transform: skewX(-16.5deg);
}
.page-type-services .cta--join-team .container,
.page-type-contact .cta--join-team .container {
display: grid;
grid-template-columns: minmax(220px, .75fr) minmax(360px, 1.55fr) 181px;
align-items: center;
gap: 45px;
width: min(1146px, 100%);
}
.page-type-services .cta--join-team .cta__copy,
.page-type-contact .cta--join-team .cta__copy {
display: contents;
}
.page-type-services .cta--join-team h2,
.page-type-contact .cta--join-team h2 {
margin: 0;
color: #fff;
font-size: clamp(30px, 2.35vw, 38px);
font-weight: 500;
line-height: 1.2;
}
.page-type-services .cta--join-team p,
.page-type-contact .cta--join-team p {
margin: 0;
color: #fff;
font-size: 16px;
line-height: 1.65;
}
.page-type-services .cta--join-team .button,
.page-type-contact .cta--join-team .button {
width: 181px;
min-height: 40px;
border-radius: 0;
background: #333;
font-size: 13px;
}
.page-type-services .cta--join-team .button:hover,
.page-type-contact .cta--join-team .button:hover {
background: #fff;
color: #333 !important;
}
@media (max-width: 991px) {
.page-type-contact .inner-banner--legacy-inner,
.page-type-services .inner-banner--legacy-inner {
min-height: 500px;
padding-top: 120px;
text-align: center;
}
.page-type-contact .inner-banner--legacy-inner::before,
.page-type-services .inner-banner--legacy-inner::before {
left: 0;
width: 100%;
clip-path: none;
background: rgba(0, 91, 151, .7);
}
.page-type-contact .inner-banner--legacy-inner::after,
.page-type-services .inner-banner--legacy-inner::after {
display: none;
}
.page-type-contact .inner-banner--legacy-inner .inner-banner__content,
.page-type-services .inner-banner--legacy-inner .inner-banner__content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30px 15px;
}
.page-type-contact .inner-banner--legacy-inner h1,
.page-type-contact .inner-banner--legacy-inner p,
.page-type-contact .inner-banner--legacy-inner .inner-banner__text,
.page-type-services .inner-banner--legacy-inner h1,
.page-type-services .inner-banner--legacy-inner p,
.page-type-services .inner-banner--legacy-inner .inner-banner__text {
max-width: 620px;
text-align: center;
}
.page-type-services .legacy-service,
.page-type-services .legacy-service--reverse {
flex-direction: column;
align-items: center;
text-align: center;
}
.page-type-services .legacy-service__media,
.page-type-services .legacy-service__content {
width: 100%;
padding: 15px 0;
}
.page-type-services .legacy-service__media-grid,
.page-type-services .legacy-service--reverse .legacy-service__media-grid {
margin: 0 auto;
}
.page-type-services .legacy-service__description {
margin: 0 auto;
}
.page-type-services .legacy-service__list {
display: inline-block;
column-count: 1;
text-align: left;
}
.page-type-contact .legacy-contact__grid {
grid-template-columns: 1fr;
gap: 50px;
}
.page-type-contact .legacy-contact__form-column,
.page-type-contact .legacy-contact__information {
padding: 0;
}
.page-type-services .cta--join-team .container,
.page-type-contact .cta--join-team .container {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
}
@media (max-width: 700px) {
.page-type-contact .inner-banner--legacy-inner,
.page-type-services .inner-banner--legacy-inner {
min-height: 420px;
padding-top: 90px;
}
.page-type-contact .legacy-contact {
padding: 62px 15px 72px;
}
.page-type-contact .legacy-contact__grid {
margin-top: 45px;
}
.page-type-services .legacy-services {
padding-top: 18px;
}
.page-type-services .legacy-service {
padding: 26px 0 45px;
}
.page-type-services .legacy-service__image img {
height: auto;
aspect-ratio: 212 / 141;
}
.page-type-services .legacy-service__image--main img {
height: auto;
aspect-ratio: 449 / 290;
}
.page-type-services .legacy-service__content h2 {
margin-bottom: 28px;
}
.page-type-services .cta--join-team,
.page-type-contact .cta--join-team {
padding: 72px 20px;
}
.page-type-services .cta--join-team::before,
.page-type-contact .cta--join-team::before {
left: 0;
right: 0;
transform: none;
}
}