/* Original design adapted from the user's Board24 reference. */
:root{--accent:#1960a6;--accent-hover:#124e89;--forest:#1960a6;--forest-light:#184c7b;--green:#1960a6;--hover:#104779;--pale:#eef4fb;--ink:#17334b;--muted:#4b6175;--line:#cedbe7}
body{font-family:Arial,Helvetica,sans-serif}h1,h2,h3{font-weight:700}h1{letter-spacing:-1.3px}h2{letter-spacing:-.7px}.header-shell{background:var(--forest);position:sticky;top:0;z-index:20;border-bottom:1px solid #447eb8}.utility-bar{max-width:1280px;margin:auto;display:flex;justify-content:space-between;padding:10px 40px;color:#ffffff;font-size:11px;letter-spacing:.4px;border-bottom:1px solid #447eb8}.site-header{max-width:1280px;border:0;padding:19px 40px}.brand img{width:226px}.site-header nav>a:not(.button){color:white;font-size:14px;font-weight:500}.site-header nav>a:not(.button):hover{color:#ffffff}.site-header a[aria-current=page]:not(.brand){border-color:var(--accent)}.button{background:var(--accent);color:#ffffff;border-color:var(--accent);font-weight:700;padding:13px 21px}.button:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.text-link:hover{color:#124e89}.menu-toggle{background:transparent;color:white;border-color:#a5c9ea}.skip{z-index:100}main{max-width:1280px;padding:0 40px}.route-hero{display:grid;grid-template-columns:1.65fr 1fr;margin:0 -40px}.employer-panel{background:var(--forest);color:white;padding:44px 45px 32px 40px;position:relative}.employer-panel h1{color:white;font-size:clamp(34px,3.9vw,49px);max-width:680px}.employer-panel .eyebrow{color:#ffffff;letter-spacing:1.25px;margin-bottom:19px}.employer-panel .lead{font-size:18px;margin-top:21px;max-width:55ch;color:#ffffff}.employer-panel>.button{margin-top:25px}.hero-photo{height:130px;margin-top:30px;border:1px solid #7da9d5;position:relative;display:flex;align-items:flex-end;overflow:hidden;padding:15px 18px;background:#184c7b}.hero-photo p{position:relative;background:#184c7b;padding-right:15px;display:grid;gap:3px}.hero-photo strong{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:#ffffff}.hero-photo span{font-size:13px;color:#ffffff}.photo-lines{position:absolute;inset:17px;border:1px solid #7da9d5}.photo-lines:before{content:"";position:absolute;left:22%;right:25%;top:-17px;bottom:-17px;border-left:1px solid #7da9d5;border-right:1px solid #7da9d5}.photo-lines:after{content:"";position:absolute;inset:24px -17px;border-top:1px solid #7da9d5;border-bottom:1px solid #7da9d5}.contractor-panel{background:var(--pale);padding:44px 40px;display:flex;flex-direction:column;align-items:flex-start;border-left:8px solid var(--accent)}.contractor-panel .eyebrow{margin-bottom:21px}.contractor-panel h2{font-size:30px;max-width:13ch;margin-top:24px}.contractor-panel h2+p{margin-top:16px;font-size:17px}.contractor-panel .button{margin-top:23px}.contractor-panel .small{font-size:14px;margin-top:24px;max-width:34ch}.route-symbol{width:75px;height:67px;display:grid;grid-template-columns:13px 1fr;grid-template-rows:13px 13px 13px;gap:13px;color:var(--accent)}.route-symbol:before{content:"";grid-column:1;grid-row:1/4;background:currentColor}.route-symbol span{grid-column:2;background:currentColor}.route-symbol span:nth-child(2){width:75%}.intro-band{background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:25px;padding:27px 0}.intro-band p{font-size:23px;font-weight:700;line-height:1.35;color:var(--forest)}.intro-band a{font-size:14px;font-weight:600;white-space:nowrap}.section{padding:46px 0;border-top:0;border-bottom:1px solid var(--line);scroll-margin-top:135px}.section-head{grid-template-columns:1fr 2fr;margin-bottom:30px}.section-head .eyebrow{color:#1960a6}.coverage{gap:22px}.coverage article{border-top:5px solid var(--accent);padding:20px 0 8px}.coverage h3{font-size:20px}.coverage p{font-size:16px}.feature-band{padding:36px 38px;margin:0 -40px;gap:65px;border-left:7px solid var(--accent);border-bottom:0}.feature-band>div:first-child h2{font-size:31px}.assessment{border:0;border-top:5px solid var(--accent)}.brief-column{background:var(--forest-light)}.outcome{border-top:0}.evidence-column{background:#f7faff}.service-rows article+article{border-color:var(--line)}.experience{margin:0 -40px;background:var(--forest);padding:40px;gap:65px;border-bottom:5px solid var(--accent)}.experience .eyebrow{color:#ffffff}.experience h2{font-size:32px}.experience .text-link{color:#ffffff}.enquiry-banner{margin:0 -40px;padding:34px 40px;background:var(--accent);border-bottom:1px solid #124e89}.enquiry-banner h2{color:#ffffff}.enquiry-banner .eyebrow,.enquiry-banner p{color:#ffffff}.enquiry-banner .button{background:var(--forest);border-color:var(--forest);color:white}.enquiry-banner .button:hover{background:#104779}.enquiry-banner .text-link{color:#ffffff}.page-hero{border-left:7px solid var(--accent);margin:38px 0 0;padding:0 0 35px 28px;max-width:860px}.page-hero h1{font-size:44px}.hero{gap:45px;padding:40px 0}.hero h1{font-size:44px}.hero .photo{border-top:6px solid var(--accent)}.photo{background:#eef4fb;border-color:#cedbe7}.photo-frame{border-color:#adc4d9}.photo-frame span,.photo-frame:after{border-color:#adc4d9}.faqs{column-gap:40px}.faq button{padding:19px 0}.faq button:hover{color:#124e89}.faq button span{color:#1960a6}.enquiry-section{padding-top:40px;padding-bottom:50px;scroll-margin-top:130px}.flow{border-top:5px solid var(--accent);background:#fff;padding:28px}.flow h3{font-size:26px}.progress-bar span{background:var(--accent)}.choice:has(input:checked){border-color:#1960a6;background:var(--pale)}.choice input{accent-color:#1960a6}.demo-note{border-color:var(--accent)}.complete{border-left:4px solid var(--accent)}footer{max-width:none;background:var(--forest);color:#ffffff;border:0;padding:40px max(40px,calc((100vw - 1200px)/2)) 20px}.footer-main{max-width:1200px;margin:auto}.footer-main a{color:#ffffff}.footer-main a:hover{color:#ffffff}.footer-note{max-width:1200px;margin:30px auto 0;color:#ffffff;border-color:#447eb8}.footer-main img{width:230px}.footer-main strong{color:#ffffff}:focus-visible{outline-color:#ad5523!important}.header-shell :focus-visible,footer :focus-visible,.employer-panel :focus-visible,.experience :focus-visible{outline-color:white!important}.enquiry-banner :focus-visible{outline-color:var(--forest)!important}
@media(min-width:1281px){.route-hero,.feature-band,.experience,.enquiry-banner{margin-left:calc((1280px - 100vw)/2 - 40px);margin-right:calc((1280px - 100vw)/2 - 40px);padding-left:max(40px,calc((100vw - 1200px)/2));padding-right:max(40px,calc((100vw - 1200px)/2))}.route-hero{padding:0}.employer-panel{padding-left:max(40px,calc((100vw - 1200px)/2))}.contractor-panel{padding-right:max(40px,calc((100vw - 1200px)/2))}}
@media(max-width:900px){.utility-bar{padding:9px 25px}.site-header{padding:18px 25px}.brand img{width:188px}main{padding:0 25px}.route-hero{margin:0 -25px;grid-template-columns:1.4fr 1fr}.employer-panel{padding:33px 25px}.employer-panel h1{font-size:36px}.employer-panel .lead{font-size:17px}.contractor-panel{padding:33px 25px;border-left-width:5px}.contractor-panel h2{font-size:27px}.contractor-panel .button{gap:12px;padding:12px 15px}.hero-photo{height:125px}.intro-band{align-items:flex-start}.intro-band p{font-size:21px}.intro-band a{white-space:normal;max-width:200px}.feature-band,.experience,.enquiry-banner{margin:0 -25px;padding:32px 25px}.page-hero h1,.hero h1{font-size:38px}.enquiry-section{grid-template-columns:1fr}.feature-band{gap:38px}footer{padding:35px 25px 20px}.section-head{gap:25px}}
@media(max-width:650px){.utility-bar{padding:8px 20px;font-size:10px}.utility-bar span:first-child{display:none}.utility-bar span:last-child{width:100%;text-align:center}.site-header{padding:16px 20px}.brand img{width:192px}.site-header nav{border-top:1px solid #a5c9ea;margin-top:3px;padding-top:12px}.site-header nav>a:not(.button){padding:13px 0}.site-header nav .button{margin-top:9px}.menu-toggle{min-height:44px}main{padding:0 20px}.route-hero{grid-template-columns:1fr;margin:0 -20px}.employer-panel{padding:32px 20px 26px}.employer-panel h1{font-size:34px;letter-spacing:-.8px}.employer-panel .lead{font-size:18px}.employer-panel .eyebrow{font-size:11px;max-width:30ch}.hero-photo{height:110px;margin-top:26px}.contractor-panel{padding:27px 20px;border-left:0;border-top:5px solid var(--accent);display:grid;grid-template-columns:1fr 55px;column-gap:15px}.contractor-panel .eyebrow{grid-column:1;margin:0 0 15px}.route-symbol{width:50px;height:47px;grid-template-columns:9px 1fr;grid-template-rows:9px 9px 9px;gap:8px;grid-column:2;grid-row:1/3;align-self:start}.contractor-panel h2{grid-column:1;margin:0;font-size:26px;max-width:20ch}.contractor-panel h2+p,.contractor-panel .button,.contractor-panel .small{grid-column:1/-1}.contractor-panel h2+p{font-size:16px}.contractor-panel .button{justify-self:start}.contractor-panel .small{margin-top:17px;max-width:42ch}.intro-band{display:block;padding:25px 0}.intro-band p{font-size:23px}.intro-band a{display:inline-block;margin-top:13px;max-width:none}.section{padding:32px 0}.coverage{gap:23px 20px}.coverage h3{font-size:18px}.coverage p{font-size:15px}.feature-band,.experience,.enquiry-banner{margin:0 -20px;padding:28px 20px}.feature-band{gap:22px;border-left:0;border-top:5px solid var(--accent)}.feature-band>div:first-child h2{font-size:28px}.experience h2{font-size:28px}.experience{gap:24px}.enquiry-banner{margin-bottom:0}.page-hero{margin-top:29px;padding-left:19px;border-left-width:5px}.page-hero h1,.hero h1{font-size:34px}.hero{padding:30px 0}.flow{padding:22px 18px}.faqs{gap:0}.enquiry-section{scroll-margin-top:130px}.section-head{margin-bottom:23px}footer{padding:32px 20px 20px}.footer-main img{width:215px}}
@media(max-width:370px){.brand img{width:167px}.site-header{gap:10px}.menu-toggle{padding:10px}.contractor-panel{grid-template-columns:1fr 40px}.route-symbol{width:40px}.employer-panel h1{font-size:32px}}
.contractor-panel h2{max-width:20ch}.button{white-space:nowrap}.flow h3{scroll-margin-top:150px}
@media(max-width:760px){.site-header{flex-wrap:wrap;gap:16px}.menu-toggle{display:flex;align-items:center;gap:12px;padding:10px 12px;font-size:14px;min-height:44px}.site-header nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:5px;border-top:1px solid #a5c9ea;padding-top:12px}.site-header nav.open{display:flex}.site-header nav>a:not(.button){padding:12px 0}.site-header nav .button{margin-top:8px}.utility-bar span:first-child{display:none}.utility-bar span:last-child{width:100%;text-align:center}.footer-main{grid-template-columns:1fr;gap:26px}.footer-main nav{grid-template-columns:1fr 1fr}.footer-note{display:block}.footer-note p+p{margin-top:10px}.enquiry-banner{flex-wrap:wrap}.brand img{width:192px}}
@media(max-width:370px){.brand img{width:167px}.site-header{gap:10px}.menu-toggle{padding:10px}}

/* Selected logo 05. Blue and white brand application. */
:root{--green:#173b5b;--hover:#124e89;--ink:#17334b;--forest:#1960a6}
.header-shell .button,.employer-panel>.button,.enquiry-banner .button{background:white;border-color:white;color:#1960a6}
.header-shell .button:hover,.employer-panel>.button:hover,.enquiry-banner .button:hover{background:#e7f0fa;border-color:#e7f0fa;color:#124e89}
.site-header a[aria-current=page]:not(.brand){border-color:white}
.route-symbol{display:block;width:75px;height:82px;color:inherit}
.route-symbol:before{display:none}.route-symbol img{display:block;width:100%;height:100%;object-fit:contain}
.section,.enquiry-section{scroll-margin-top:155px}
.hero-photo{background:#184c7b}.hero-photo p{background:#184c7b}
@media(max-width:650px){.route-symbol{width:50px;height:55px}.section,.enquiry-section{scroll-margin-top:140px}}
@media(max-width:370px){.route-symbol{width:40px;height:45px}}

/* Copy trim: remove spacing reserved for secondary labels. */
.utility-bar{justify-content:flex-end}
.section-head{display:block}.section-head h2{max-width:none}
.contractor-panel h2{margin-top:24px}.contractor-panel{justify-content:center}
.service-rows>p{margin-top:20px}
.footer-note{margin-top:24px}
@media(max-width:650px){.contractor-panel h2{margin-top:0}.utility-bar{justify-content:center}}
.utility-bar span:first-child{display:block}
/* One main question per screen, with optional context revealed on demand. */
.extra-toggle{background:white;border:0;color:#1960a6;text-decoration:underline;text-underline-offset:4px;padding:12px 0;min-height:44px;font-size:14px;margin-top:12px;text-align:left}
.optional-fields{margin-top:9px;padding:17px;border-left:3px solid #1960a6;background:#eef4fb}
.review-section h4{margin:4px 0 15px}.review-answer{display:grid;grid-template-columns:1fr auto;column-gap:20px;padding:12px 0;border-top:1px solid #cedbe7}
.review-answer dt{grid-column:1;margin:0}.review-answer dd{grid-column:1}.review-answer .edit{grid-column:2;grid-row:1/3;align-self:center;margin:0}
/* Larger FAQ section, with one full width disclosure per row. */
.faq-section{padding:58px 0 64px}
.faq-section .section-head{margin-bottom:32px}
.faqs{display:grid;grid-template-columns:minmax(0,1fr);gap:0;width:100%}
.faq:last-child{border-bottom:1px solid var(--line)}
.faq h3{font-size:18px}
.faq button{padding:24px 22px;min-height:78px;font-size:18px;align-items:center}
.faq button span{font-size:25px;flex-shrink:0}
.faq p{padding:5px 22px 26px;font-size:17px;max-width:85ch}
/* Blue hover feedback for all action buttons and FAQ controls. */
.button:hover,.header-shell .button:hover,.employer-panel>.button:hover,.enquiry-banner .button:hover,
.faq button:hover,.menu-toggle:hover,.back:hover,.edit:hover,.extra-toggle:hover{
 background:#1960a6;color:white;border-color:#1960a6;
}
.faq button:hover span{color:white}
.header-shell .button:hover,.employer-panel>.button:hover,.enquiry-banner .button:hover,.menu-toggle:hover{border-color:white}
.back:hover,.edit:hover,.extra-toggle:hover{padding-left:10px;padding-right:10px}
@media(max-width:650px){.faq-section{padding:40px 0 45px}.faq-section .section-head{margin-bottom:24px}.faq button{font-size:17px;min-height:74px;padding:21px 16px}.faq p{padding:4px 16px 23px;font-size:16px}}
.back,.edit,.extra-toggle{padding-left:10px;padding-right:10px}
/* Matched audience panels. The hovered route expands without hiding content. */
.route-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:0;transition:grid-template-columns 420ms ease}
.route-hero .employer-panel,.route-hero .contractor-panel{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;min-height:400px;padding:44px clamp(24px,4vw,64px);background:#1960a6;color:white;border:0}
.route-hero .contractor-panel{border-left:1px solid #a5c9ea}
.route-hero h1,.route-hero h2{font-size:clamp(28px,3vw,40px);line-height:1.15;letter-spacing:-.8px;color:white;margin:0;max-width:22ch;min-height:3.45em}
.route-hero .lead{color:white;font-size:18px;line-height:1.55;margin:19px 0 0;max-width:47ch;min-height:4.65em}
.route-hero .button{background:white;color:#1960a6;border-color:white;margin-top:25px}
.route-hero .button:hover{background:#1960a6;color:white;border-color:white}
@media(min-width:761px){
 .route-hero:has(.employer-panel:focus-within){grid-template-columns:minmax(0,1.8fr) minmax(0,1fr)}
 .route-hero:has(.contractor-panel:focus-within){grid-template-columns:minmax(0,1fr) minmax(0,1.8fr)}
}
@media(min-width:761px) and (hover:hover) and (pointer:fine){
 .route-hero:has(.employer-panel:hover){grid-template-columns:minmax(0,1.8fr) minmax(0,1fr)}
 .route-hero:has(.contractor-panel:hover){grid-template-columns:minmax(0,1fr) minmax(0,1.8fr)}
}
@media(max-width:760px){
 .route-hero{grid-template-columns:minmax(0,1fr);transition:none}
 .route-hero .employer-panel,.route-hero .contractor-panel{min-height:0;padding:32px 25px;display:flex}
 .route-hero .contractor-panel{border-left:0;border-top:1px solid #a5c9ea}
 .route-hero h1,.route-hero h2{font-size:32px;min-height:0;max-width:23ch}
 .route-hero .lead{min-height:0;margin-top:19px}
}
@media(prefers-reduced-motion:reduce){.route-hero{transition:none}}
.route-hero .button{padding:13px 21px;gap:25px}

/* Slightly deeper blue distinguishes the contractor route. */
.route-hero .contractor-panel{background:#175793}
.route-hero .button{max-width:100%;white-space:normal}

/* Stable text measures keep line breaks unchanged during panel movement. */
@media(min-width:761px){
 .route-hero .employer-panel,.route-hero .contractor-panel{padding:44px 30px}
 .route-hero .employer-panel{align-items:flex-end;text-align:right}
 .route-hero .hero-copy{width:min(460px,calc(100vw / 2.8 - 62px));flex-shrink:0}
 .route-hero h1,.route-hero h2{font-size:clamp(30px,3.6vw,50px);max-width:none;min-height:3.45em}
 .route-hero .lead{max-width:none;min-height:4.65em}
 .route-hero .employer-panel .button{justify-self:end}
}
@media(max-width:760px){.hero-copy{width:100%}}

/* Audience buttons follow the supplied tab shape. */
.route-hero .contractor-panel{background:#ffffff;color:#1960a6;border-color:#cedbe7}
.route-hero .contractor-panel h2,.route-hero .contractor-panel .lead{color:#1960a6}
.route-hero .button{background:#124e89;color:white;border:1px solid #124e89;border-radius:0 24px 0 24px;min-height:64px;padding:16px 30px;justify-content:center;font-size:20px;min-width:min(100%,260px)}
.route-hero .employer-panel .button{background:#124e89;color:white;border-color:white}
.route-hero .button:hover{background:#103f70;color:white;border-color:#103f70}
.route-hero .employer-panel .button:hover{background:#103f70;border-color:white}
.route-hero .contractor-panel :focus-visible{outline-color:#ad5523!important}
@media(max-width:1000px){.route-hero .button{font-size:18px;padding:16px 20px}}

/* Paired navigation routes reference the logo's overlapping squares. */
.site-header nav .nav-work,.site-header nav .nav-hire{position:relative;padding:14px 18px 14px 51px;font-size:14px;min-height:50px;border-radius:0;border:2px solid #19334f;white-space:nowrap}
.site-header nav .nav-work{background:#19334f;color:white}
.site-header nav .nav-hire{background:white;color:#19334f}
.site-header nav .nav-work:before,.site-header nav .nav-hire:before{content:"";position:absolute;left:16px;top:13px;width:15px;height:15px;background:currentColor}
.site-header nav .nav-work:after,.site-header nav .nav-hire:after{content:"";position:absolute;left:22px;top:19px;width:15px;height:15px;border:2px solid currentColor;background:#19334f;box-shadow:0 0 0 2px #19334f}
.site-header nav .nav-hire:after{background:white;box-shadow:0 0 0 2px white}
.site-header nav .nav-work:hover{background:#10273e;border-color:white;color:white}
.site-header nav .nav-work:hover:after{background:#10273e;box-shadow:0 0 0 2px #10273e}
.site-header nav .nav-hire:hover{background:#eef4fb;border-color:#19334f;color:#19334f}
.site-header nav .nav-hire:hover:after{background:#eef4fb;box-shadow:0 0 0 2px #eef4fb}
@media(max-width:1100px){
 .site-header{flex-wrap:wrap;gap:16px}
 .menu-toggle{display:flex;align-items:center;gap:12px;padding:10px 12px;font-size:14px;min-height:44px}
 .site-header nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:5px;border-top:1px solid #a5c9ea;padding-top:12px}
 .site-header nav.open{display:flex}
 .site-header nav>a:not(.button){padding:12px 0}
 .site-header nav .button{margin-top:8px}
}

/* Header actions sit against the right edge of the viewport. */
@media(min-width:1101px){
 .site-header{max-width:none;width:100%;padding-right:24px}
 .site-header nav{margin-left:auto}
}

/* Compact header with scroll direction visibility. */
.header-shell{transition:transform 200ms ease;will-change:transform}
.header-shell.header-hidden{transform:translateY(-100%);pointer-events:none}
.header-shell:has(:focus-visible){transform:translateY(0);pointer-events:auto}
.site-header{padding-top:10px;padding-bottom:10px}
.brand img{width:178px}
.site-header nav{gap:24px}
.site-header nav .nav-work,.site-header nav .nav-hire{min-height:42px;padding:9px 14px 9px 45px;font-size:13px}
.site-header nav .nav-work:before,.site-header nav .nav-hire:before{left:13px;top:10px;width:13px;height:13px}
.site-header nav .nav-work:after,.site-header nav .nav-hire:after{left:19px;top:16px;width:13px;height:13px}
.section,.enquiry-section,.flow h3{scroll-margin-top:90px}
@media(max-width:1100px){.site-header nav{gap:5px}.menu-toggle{min-height:42px;padding:8px 12px}.site-header nav .button{margin-top:5px}}
@media(max-width:370px){.brand img{width:160px}}
@media(prefers-reduced-motion:reduce){.header-shell{transition:none}}

/* Quick colour fades soften FAQ hover feedback. */
.faq button{transition:background-color 120ms ease-out,color 120ms ease-out,border-color 120ms ease-out}
.faq button span{transition:color 120ms ease-out}
@media(prefers-reduced-motion:reduce){.faq button,.faq button span{transition:none}}

/* Centre page navigation independently of the right hand actions. */
.site-header nav>a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
@media(min-width:1101px){
 .site-header{position:relative}
 .site-header nav>a:not(.button){position:absolute;top:50%;transform:translate(-50%,-50%)}
 .site-header nav>a[href="employers.html"]{left:calc(50% - 100px)}
 .site-header nav>a[href="contractors.html"]{left:50%}
 .site-header nav>a[href="about.html"]{left:calc(50% + 90px)}
 .site-header nav{gap:18px}
}
/* Below this width the centred links and paired actions need the mobile menu. */
@media(min-width:1101px) and (max-width:1300px){
 .site-header{flex-wrap:wrap;gap:16px}
 .menu-toggle{display:flex;align-items:center;gap:12px;padding:8px 12px;min-height:42px}
 .site-header nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:5px;margin-left:0;border-top:1px solid #a5c9ea;padding-top:12px}
 .site-header nav.open{display:flex}
 .site-header nav>a:not(.button){position:static;transform:none;padding:12px 0}
 .site-header nav .button{margin-top:5px}
}

/* Professional typography with native fonts and no external requests. */
body{font-family:"Avenir Next",Avenir,"Segoe UI",Arial,sans-serif}
h1,h2,h3{font-weight:600}
.button,.faq button,.site-header nav>a{font-weight:600}

/* Home is the default page and appears alongside the other page links. */
@media(min-width:1301px){
 .site-header nav>a[href="index.html"]{left:calc(50% - 150px)}
 .site-header nav>a[href="employers.html"]{left:calc(50% - 55px)}
 .site-header nav>a[href="contractors.html"]{left:calc(50% + 55px)}
 .site-header nav>a[href="about.html"]{left:calc(50% + 150px)}
}

/* Original illustrative imagery stays subdued behind the audience routes. */
.route-hero .employer-panel,.route-hero .contractor-panel{position:relative;isolation:isolate;overflow:hidden}
.route-hero .employer-panel:before,.route-hero .contractor-panel:before{content:"";position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;filter:grayscale(100%);pointer-events:none;z-index:-1}
.route-hero .employer-panel:before{background-image:url("employer-machinery.jpg");background-position:center;opacity:.15}
.route-hero .contractor-panel:before{background-image:url("contractor-workshop-v2.jpg");background-position:center;opacity:.10}
.enquiry-entry{display:flex;align-items:center;justify-content:space-between;gap:25px;flex-wrap:wrap}

/* Approved SC direction, arranged horizontally for navigation. */
.brand img{width:210px;height:50px;object-fit:contain}
.footer-main img{width:250px;height:60px;object-fit:contain}
@media(max-width:650px){.brand img{width:180px;height:43px}}
@media(max-width:370px){.brand img{width:160px;height:38px}}

.site-header nav .nav-work:before,.site-header nav .nav-hire:before{width:27px;height:20px;left:11px;top:10px;background:transparent url("favicon-sc.svg?v=2") center/contain no-repeat}
.site-header nav .nav-work:before{filter:brightness(0) invert(1)}
.site-header nav .nav-work:after,.site-header nav .nav-hire:after{display:none}

/* Full colour brand on a clear navigation background. */
.header-shell{background:#fff;border-bottom-color:var(--line)}
.site-header nav>a:not(.button),.site-header nav>a:not(.button):hover{color:var(--ink)}
.menu-toggle{color:var(--ink);border-color:var(--line)}

/* Engineering coverage: patterned panels with a sliding colour fill. */
.engineering-types .section-head{display:block;margin-bottom:28px}
.engineering-boxes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.engineering-box{--panel-fill:#174e81;position:relative;isolation:isolate;display:flex;align-items:flex-end;gap:16px;min-height:236px;padding:26px 22px;border:1px solid #cedbe7;background:#f4f7fa;color:#17334b;text-decoration:none;overflow:hidden}
.engineering-box::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--panel-fill);transform:translateX(-101%);transition:transform 320ms cubic-bezier(.2,.65,.3,1)}
.engineering-box::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--panel-pattern);background-size:80px 80px;opacity:.25;pointer-events:none}
.engineering-box-label{font-size:clamp(18px,1.5vw,22px);font-weight:600;line-height:1.3;max-width:17ch;transition:color 180ms ease}
.engineering-box-arrow{margin-left:auto;flex:none;font-size:24px;line-height:1.2;transition:color 180ms ease}
.engineering-box-mechanical{--panel-fill:#175589;--panel-pattern:url("pattern-mechanical.svg")}
.engineering-box-electrical{--panel-fill:#14646e;--panel-pattern:url("pattern-electrical.svg")}
.engineering-box-combined{--panel-fill:#344c6c;--panel-pattern:url("pattern-combined.svg")}
.engineering-box-automation{--panel-fill:#45446f;--panel-pattern:url("pattern-automation.svg")}
.engineering-box:hover,.engineering-box:focus-visible{color:#fff;text-decoration:none}
.engineering-box:hover::before,.engineering-box:focus-visible::before{transform:translateX(0)}
.engineering-box:focus-visible{outline:3px solid #1960a6;outline-offset:4px}
@media(max-width:1000px){.engineering-boxes{grid-template-columns:repeat(2,minmax(0,1fr))}.engineering-box{min-height:210px}}
@media(max-width:520px){.engineering-boxes{grid-template-columns:1fr;gap:12px}.engineering-box{min-height:166px;padding:24px}.engineering-box-label{font-size:21px;max-width:22ch}}
@media(prefers-reduced-motion:reduce){.engineering-box::before,.engineering-box-label,.engineering-box-arrow{transition:none}}

/* A restrained colour strip replaces the full panel fill. */
.engineering-box::before{right:auto;width:5px;transform:scaleY(0);transform-origin:bottom;transition:transform 220ms ease}
.engineering-box:hover,.engineering-box:focus-visible{color:#17334b}
.engineering-box:hover::before,.engineering-box:focus-visible::before{transform:scaleY(1)}
@media(prefers-reduced-motion:reduce){.engineering-box::before{transition:none}}
.employer-entry p{max-width:50ch;margin:18px 0}.employer-entry .button{display:inline-flex;gap:25px;margin-top:8px}