/* Reset & Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        /* Skip to Content Link - ADA Compliance */
        .skip-to-content {
            position: absolute;
            top: -100px;
            left: 0;
            background: #2c3e50;
            color: #fff;
            padding: 8px 16px;
            text-decoration: none;
            z-index: 10000;
            font-weight: 600;
            border-radius: 0 0 4px 0;
            opacity: 0;
        }
        
        .skip-to-content:focus {
            top: 0;
            opacity: 1;
            outline: 3px solid #2c3e50;
            outline-offset: 2px;
        }
        
        body {
            font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            font-size: 16px;
            line-height: 1.6;
            color: #333;
            background: #fff;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        img {
            max-width: 100%;
            height: auto;
        }
        
        /* Header - Dark burgundy background like live site */
        .main-header {
            background: #462b34;
            box-shadow: 0 10px 20px rgba(0,0,0,0.05);
            position: relative;
            z-index: 1000;
        }
        
        .header-inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 30px 0;
            min-height: 100px;
        }
        
        .logo img {
            max-height: 70px;
            width: auto;
        }
        
        .site-title {
            font-size: 26px;
            color: #fff;
            font-weight: 700;
            text-decoration: none;
            letter-spacing: 0.5px;
            transition: color 0.3s;
            opacity: 0.95;
        }
        
        .site-title:hover {
            color: #2c3e50;
            opacity: 1;
        }
        
        /* Banner */
        .page-banner {
            position: relative;
            background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/img/hero-banner.jpg') center/cover no-repeat;
            color: #fff;
            text-align: center;
            padding: 100px 20px 80px;
        }
        
        .page-banner h1 {
            font-size: 48px;
            font-weight: 700;
            margin-bottom: 15px;
        }
        
        .page-banner p {
            font-size: 22px;
            font-weight: 300;
        }
        
        /* Jobs Section */
        .jobs-section {
            padding: 80px 0;
            background: #f8f9fa;
        }
        
        .section-header {
            text-align: center;
            margin-bottom: 60px;
        }
        
        .section-subtitle {
            color: #2c3e50;
            font-size: 14px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
        }
        
        .section-title {
            font-size: 36px;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 15px;
        }
        
        .section-description {
            font-size: 18px;
            color: #666;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.8;
        }
        
        /* Job Cards */
        .jobs-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }
        
        .job-card {
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 15px rgba(0,0,0,0.08);
            transition: transform 0.3s, box-shadow 0.3s;
            display: flex;
            flex-direction: column;
        }
        
        .job-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 25px rgba(0,0,0,0.15);
        }
        
        .job-header {
            background: #2c3e50;
            color: #fff;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .job-header-left {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        
        .job-category {
            background: rgba(255,255,255,0.2);
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 600;
            display: inline-block;
            width: fit-content;
        }
        
        .job-posted {
            font-size: 13px;
            opacity: 0.9;
        }
        
        .job-number {
            font-size: 12px;
            opacity: 0.8;
            text-align: right;
        }
        
        .job-body {
            padding: 25px;
            display: flex;
            flex-direction: column;
            flex: 1;
        }
        
        .job-company {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20px;
            gap: 15px;
        }
        
        .job-logo {
            width: 80px;
            height: 80px;
            border-radius: 8px;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .job-title-text {
            flex: 1;
        }
        
        .job-title-text h3 {
            font-size: 20px;
            color: #2c3e50;
            margin-bottom: 8px;
            line-height: 1.3;
        }
        
        .job-location {
            color: #666;
            font-size: 14px;
        }
        
        .job-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .job-detail-item {
            background: #f8f9fa;
            padding: 12px;
            border-radius: 5px;
        }
        
        .job-detail-label {
            font-size: 12px;
            color: #666;
            text-transform: uppercase;
            font-weight: 600;
            margin-bottom: 5px;
        }
        
        .job-detail-value {
            font-size: 16px;
            color: #2c3e50;
            font-weight: 600;
        }
        
        .job-apply-btn {
            display: block;
            width: 100%;
            background: #2c3e50;
            color: #fff;
            text-align: center;
            padding: 12px;
            border-radius: 5px;
            text-decoration: none;
            font-weight: 600;
            transition: background 0.3s;
            margin-top: auto;
        }
        
        .job-apply-btn:hover {
            background: #1a252f;
        }
        
        /* Contact Section */
        .contact-section {
            padding: 80px 0;
            background: #fff;
        }
        
        .contact-form {
            max-width: 800px;
            margin: 0 auto;
            background: #f8f9fa;
            padding: 40px;
            border-radius: 8px;
        }
        
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .form-group {
            display: flex;
            flex-direction: column;
        }
        
        .form-group.full-width {
            grid-column: 1 / -1;
        }
        
        .form-input,
        .form-textarea {
            padding: 12px 15px;
            border: 1px solid #c0c0c0;
            border-radius: 5px;
            font-size: 15px;
            font-family: inherit;
            transition: border-color 0.3s;
            background: #fff;
        }
        
        .form-input:focus,
        .form-textarea:focus {
            outline: 2px solid #2c3e50;
            outline-offset: 2px;
            border-color: #2c3e50;
        }
        
        /* Enhanced Focus Indicators for Keyboard Navigation - ADA Compliance */
        a:focus,
        button:focus,
        .job-apply-btn:focus,
        .form-submit:focus,
        .scroll-top:focus {
            outline: 3px solid #2c3e50;
            outline-offset: 2px;
        }
        
        /* Form Labels - Proper Accessibility */
        .form-label {
            font-size: 14px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 5px;
            display: block;
        }
        
        .required-indicator {
            color: #2c3e50;
        }
        
        .form-textarea {
            min-height: 120px;
            resize: vertical;
        }
        
        .form-submit {
            background: #2c3e50;
            color: #fff;
            padding: 12px 40px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .form-submit:hover {
            background: #1a252f;
        }
        
        /* Footer */
        .main-footer {
            background: #2c3e50;
            color: #fff;
            padding: 30px 0;
            text-align: center;
        }
        
        .footer-copyright {
            font-size: 14px;
            opacity: 0.8;
        }
        
        /* Scroll to Top Button */
        .scroll-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background: #2c3e50;
            color: #fff;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: none;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            transition: background 0.3s;
            z-index: 999;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }
        
        .scroll-top:hover {
            background: #1a252f;
        }
        
        .scroll-top.active {
            display: flex;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .page-banner h1 {
                font-size: 32px;
            }
            
            .page-banner p {
                font-size: 18px;
            }
            
            .section-title {
                font-size: 28px;
            }
            
            .jobs-grid {
                grid-template-columns: 1fr;
            }
            
            .form-row {
                grid-template-columns: 1fr;
            }
            
            .job-details {
                grid-template-columns: 1fr;
            }
            
            .contact-form {
                padding: 25px;
            }
            
            .header-inner {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }
            
            .job-company {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
        }
        
        @media (max-width: 480px) {
            .page-banner {
                padding: 60px 15px 50px;
            }
            
            .page-banner h1 {
                font-size: 28px;
            }
            
            .jobs-section,
            .contact-section {
                padding: 50px 0;
            }
        }

.sa-about{
  padding:104px 0 112px;
  background:
    radial-gradient(58% 48% at 88% 6%, rgba(56,132,196,.07), transparent 62%),
    radial-gradient(50% 44% at 6% 96%, rgba(240,80,80,.07), transparent 62%),
    #fff;
  position:relative;
}
.sa-about::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(35,49,64,.14),transparent);
}
.sa-about-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start;
  max-width:1060px;margin:0 auto;
}
.sa-about-copy p{color:#5a6b7a;line-height:1.78;font-size:1.02rem;margin:0 0 18px}
.sa-about-copy p:last-child{margin-bottom:0}
.sa-about-copy strong{color:#1b2530;font-weight:700}
.sa-about-lead{font-size:1.16rem!important;color:#233140!important;line-height:1.62!important}

.sa-pillars{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.sa-pillars li{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);
  border:1px solid rgba(35,49,64,.10);border-radius:14px;padding:18px 20px;
  box-shadow:0 1px 2px rgba(20,29,38,.05), 0 12px 28px -20px rgba(20,29,38,.45);
  position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;
}
.sa-pillars li::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,#f05050,rgba(240,80,80,.15));
}
.sa-pillars li:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(20,29,38,.06), 0 22px 42px -24px rgba(20,29,38,.5)}
.sa-pillar-k{
  display:block;font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  font-weight:700;font-size:1rem;color:#1b2530;letter-spacing:-.01em;margin-bottom:5px;
}
.sa-pillar-v{display:block;color:#5a6b7a;font-size:.94rem;line-height:1.6}

@media(max-width:860px){
  .sa-about-grid{grid-template-columns:1fr;gap:36px}
  .sa-about{padding:72px 0 76px}
}
@supports not (backdrop-filter: blur(4px)){ .sa-pillars li{background:#fff} }

/* offshorecrew.net forms — matches the existing palette (#2c3e50 / #1a252f / #f8f9fa)
   and the Nunito Sans stack already used on the page. */
.sa-lede{max-width:56ch;margin:10px auto 0;color:#5a6b7a;font-size:1.02rem;line-height:1.6;text-align:center}
.sa-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:28px auto 22px;max-width:900px}
.sa-tab{font:inherit;font-weight:700;font-size:.95rem;padding:12px 22px;border-radius:999px;cursor:pointer;
  border:2px solid #d7dee4;background:#fff;color:#2c3e50;transition:background .15s,border-color .15s,color .15s}
.sa-tab:hover{border-color:#2c3e50}
.sa-tab.is-on{background:#2c3e50;border-color:#2c3e50;color:#fff}
.sa-tab:focus-visible,.sa-submit:focus-visible{outline:3px solid #2c3e50;outline-offset:3px}
.sa-pane[hidden]{display:none}
.sa-form{max-width:900px;margin:0 auto;background:#f8f9fa;padding:34px;border-radius:14px;border:1px solid #e6eaee}
.sa-intro{margin:0 0 22px;color:#5a6b7a;font-size:1rem;line-height:1.6}
.sa-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sa-wide{grid-column:1/-1}
.sa-f{display:flex;flex-direction:column;gap:7px}
.sa-f>span{font-weight:700;font-size:.9rem;color:#2c3e50}
.sa-f>span b{color:#c0392b;font-weight:700}
.sa-f>span small{font-weight:400;color:#7a8894;margin-left:6px}
.sa-f input,.sa-f select,.sa-f textarea{font:inherit;font-size:1rem;padding:12px 14px;border:1px solid #ccd5dd;
  border-radius:8px;background:#fff;color:#1a252f;width:100%;transition:border-color .15s,box-shadow .15s}
.sa-f input:focus,.sa-f select:focus,.sa-f textarea:focus{outline:none;border-color:#2c3e50;box-shadow:0 0 0 3px rgba(44,62,80,.14)}
.sa-f textarea{resize:vertical;min-height:96px}
.sa-f input[type=file]{padding:10px;background:#fff;cursor:pointer}
.sa-f.has-error input,.sa-f.has-error textarea{border-color:#c0392b}
.sa-submit{margin-top:24px;font:inherit;font-weight:700;font-size:1rem;padding:15px 40px;border:0;border-radius:999px;
  background:#2c3e50;color:#fff;cursor:pointer;transition:background .15s,transform .1s}
.sa-submit:hover:not(:disabled){background:#1a252f}
.sa-submit:active:not(:disabled){transform:translateY(1px)}
.sa-submit:disabled{opacity:.6;cursor:progress}
.sa-note{margin:12px 0 0;font-size:.86rem;color:#7a8894}
.sa-msg{margin-top:16px;font-size:.98rem;line-height:1.5}
.sa-msg.ok{color:#1e7a4d;font-weight:700}
.sa-msg.bad{color:#c0392b;font-weight:700}
/* honeypot: off-screen but still focusable-by-bots, never display:none (some bots skip those) */
.sa-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:700px){.sa-grid{grid-template-columns:1fr}.sa-form{padding:22px}}

/* ---- hero: clear the stray backdrop behind the subtitle and add real CTAs ---- */
.page-banner p{background:none!important;box-shadow:none!important;display:block;
  max-width:46ch;margin:14px auto 0;font-size:1.15rem;color:rgba(255,255,255,.92);text-shadow:0 1px 12px rgba(0,0,0,.45)}
.page-banner h1{text-shadow:0 2px 18px rgba(0,0,0,.5)}
.sa-hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.sa-hero-cta a{font-weight:700;font-size:1rem;padding:14px 30px;border-radius:999px;text-decoration:none;
  transition:transform .12s,background .15s,color .15s;display:inline-block}
.sa-hero-cta a:hover{transform:translateY(-2px)}
.sa-hero-cta .p{background:#fff;color:#2c3e50}
.sa-hero-cta .p:hover{background:#eef2f5}
.sa-hero-cta .s{background:rgba(255,255,255,.12);color:#fff;border:2px solid rgba(255,255,255,.75)}
.sa-hero-cta .s:hover{background:rgba(255,255,255,.22)}
.sa-hero-cta a:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ---- job cards: equal height, Apply pinned to the bottom so the grid lines up ---- */
.job-card{display:flex;flex-direction:column}
.job-body,.job-content{flex:1 1 auto}
.job-details{margin-top:auto}
.job-apply-btn{margin-top:14px}
/* a salary tile reading "TBD" makes a live board look unfinished; hidden, not invented */
.job-detail-item.sa-unknown{display:none}
.job-details:has(.sa-unknown){grid-template-columns:1fr}

/* ---- HEADER REBUILD ----------------------------------------------------
   Was: 100px tall, #462b34 maroon (a colour used nowhere else on the site),
   no navigation, and the prime right-hand slot spent on a static tagline.
   Now: sticky, navy to match the rest of the palette, real nav, and a CTA in
   the slot that was doing nothing. */
.main-header{
  background:#233140!important;                     /* same family as the #2c3e50 used site-wide */
  position:sticky!important;top:0;z-index:1000;
  box-shadow:0 1px 0 rgba(255,255,255,.06);
  transition:box-shadow .2s,background .2s;
}
.main-header.sa-stuck{box-shadow:0 6px 24px rgba(0,0,0,.28)}
.header-inner{padding:0!important;min-height:72px!important;gap:24px}
.logo img{max-height:56px;width:auto;display:block}
.logo a{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand-word{font-family:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,sans-serif;font-weight:700;font-size:1.3rem;letter-spacing:-.022em;color:#fff;white-space:nowrap;line-height:1;transition:font-size .25s}
.main-header.sa-stuck .brand-word{font-size:1.13rem}
@media(max-width:760px){.brand-word{font-size:1.08rem}}
@media(max-width:420px){.brand-word{font-size:.98rem}}

.sa-nav{display:flex;align-items:center;gap:22px;margin-left:auto}
.sa-nav a.sa-link{
  color:rgba(255,255,255,.86);text-decoration:none;font-weight:600;font-size:.95rem;
  padding:6px 0;position:relative;white-space:nowrap;transition:color .15s;
}
.sa-nav a.sa-link:hover{color:#fff}
.sa-nav a.sa-link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#fff;
  transform:scaleX(0);transform-origin:left;transition:transform .18s;
}
.sa-nav a.sa-link:hover::after{transform:scaleX(1)}
.sa-nav a.sa-link:focus-visible,.sa-cta:focus-visible,.sa-burger:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px}

.sa-cta{
  background:#fff;color:#233140!important;font-weight:700;font-size:.95rem;
  padding:11px 24px;border-radius:999px;text-decoration:none;white-space:nowrap;
  transition:transform .12s,background .15s;
}
.sa-cta:hover{background:#e9eef2;transform:translateY(-1px)}

.sa-burger{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto}
.sa-burger span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:transform .2s,opacity .2s}
.sa-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.sa-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.sa-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:880px){
  .sa-burger{display:block}
  .sa-nav{
    position:absolute;left:0;right:0;top:100%;background:#233140;flex-direction:column;
    align-items:stretch;gap:0;padding:10px 20px 20px;margin:0;
    box-shadow:0 12px 24px rgba(0,0,0,.3);display:none;
  }
  .sa-nav.is-open{display:flex}
  .sa-nav a.sa-link{padding:14px 0;border-top:1px solid rgba(255,255,255,.1)}
  .sa-nav a.sa-link::after{display:none}
  .sa-cta{margin-top:14px;text-align:center}
  .header-inner{position:relative}
}
/* the old tagline is replaced by the nav */
.site-title{display:none!important}

/* ===== offshorecrew.net design pass =========================================
   The palette was navy-only. The logo's coral (#f05050) appeared nowhere else,
   so the page read as flat and generic. One accent, used sparingly and always
   for the same job (signalling "this is a live, active thing"), plus a real
   type scale and depth. No invented claims - styling only. */
:root{
  --sa-navy:#233140; --sa-navy-2:#2c3e50; --sa-ink:#1b2530;
  --sa-accent:#f05050; --sa-accent-dk:#d43c3c;
  --sa-slate:#5a6b7a; --sa-line:#e4e9ee; --sa-wash:#f6f8fa;
}

/* ---- hero: a proper scrim so the type is readable over a busy photo ---- */
.page-banner{position:relative;isolation:isolate;padding:118px 0 108px!important}
.page-banner::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,29,38,.86) 0%,rgba(20,29,38,.62) 45%,rgba(20,29,38,.88) 100%);
}
.page-banner h1{
  font-size:clamp(2.6rem,6vw,4.4rem)!important;line-height:1.04;letter-spacing:-.02em;
  font-weight:800;margin:0;text-wrap:balance;
}
.page-banner h1::after{
  content:"";display:block;width:64px;height:4px;border-radius:2px;
  background:var(--sa-accent);margin:22px auto 0;
}
.page-banner p{font-size:clamp(1.02rem,1.6vw,1.2rem)!important;color:rgba(255,255,255,.9)!important}

/* entrance: one orchestrated moment, not scattered effects */
@media(prefers-reduced-motion:no-preference){
  .page-banner h1,.page-banner p,.sa-hero-cta{animation:saUp .45s cubic-bezier(.22,.9,.3,1) both}
  .page-banner p{animation-delay:.09s}
  .sa-hero-cta{animation-delay:.18s}
}
@keyframes saUp{from{opacity:.35;transform:translateY(12px)}to{opacity:1;transform:none}}

.sa-hero-cta .p{background:var(--sa-accent);color:#fff;box-shadow:0 10px 30px -8px rgba(240,80,80,.55)}
.sa-hero-cta .p:hover{background:var(--sa-accent-dk)}

/* ---- section rhythm ---- */
.section-subtitle{
  color:var(--sa-accent)!important;font-weight:800!important;letter-spacing:.16em!important;
  text-transform:uppercase;font-size:.76rem!important;
}
.section-title{
  font-size:clamp(1.9rem,3.4vw,2.7rem)!important;letter-spacing:-.02em;font-weight:800;
  color:var(--sa-ink)!important;text-wrap:balance;
}
.jobs-section{background:var(--sa-wash)!important}

/* ---- job cards: depth, and a live-looking category chip ---- */
.job-card{
  border:1px solid var(--sa-line);border-radius:14px!important;
  box-shadow:0 1px 2px rgba(20,29,38,.04),0 8px 24px -18px rgba(20,29,38,.5)!important;
  transition:transform .22s cubic-bezier(.22,.9,.3,1),box-shadow .22s,border-color .22s;
}
.job-card:hover{
  transform:translateY(-4px);border-color:#cfd8e0;
  box-shadow:0 1px 2px rgba(20,29,38,.05),0 22px 44px -22px rgba(20,29,38,.55)!important;
}
.job-header{background:var(--sa-navy)!important;padding:16px 20px!important}
.job-category{
  background:var(--sa-accent)!important;color:#fff!important;font-weight:800!important;
  font-size:.7rem!important;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px!important;
}
.job-title,.job-card h3{letter-spacing:-.01em;line-height:1.25}
.job-detail-item{background:var(--sa-wash);border:1px solid var(--sa-line);border-radius:10px}
.job-detail-label{letter-spacing:.1em;font-size:.66rem;color:var(--sa-slate)}
.job-apply-btn{
  background:var(--sa-navy)!important;border-radius:10px!important;font-weight:700;
  transition:background .16s,transform .12s;
}
.job-apply-btn:hover{background:var(--sa-accent)!important;transform:translateY(-1px)}

/* ---- forms pick up the accent for the primary action ---- */
.sa-tab.is-on{background:var(--sa-accent)!important;border-color:var(--sa-accent)!important}
.sa-submit{background:var(--sa-accent)!important}
.sa-submit:hover:not(:disabled){background:var(--sa-accent-dk)!important}
.sa-form{border-radius:16px;box-shadow:0 1px 2px rgba(20,29,38,.04),0 18px 40px -30px rgba(20,29,38,.6)}
.sa-f input:focus,.sa-f select:focus,.sa-f textarea:focus{
  border-color:var(--sa-accent)!important;box-shadow:0 0 0 3px rgba(240,80,80,.16)!important;
}

/* ---- header CTA takes the accent so it reads as the primary action ---- */
.sa-cta{background:var(--sa-accent)!important;color:#fff!important}
.sa-cta:hover{background:var(--sa-accent-dk)!important}

/* posting dates removed 2026-09-02: these are evergreen role types we place
   repeatedly, not dated vacancies, and stale dates read as an abandoned board. */
.job-header-left{gap:0}

/* ===== motion pass ========================================================
   FAIL-SAFE BY DESIGN: every "hidden until revealed" rule is scoped to
   html.sa-anim, and that class is only added by the script below. If the JS
   never runs, nothing is hidden and the page renders exactly as it does now.
   Everything is transform/opacity only, so it stays off the layout path. */

/* ---- parallax hero ---- */
.page-banner{overflow:hidden}
.sa-parallax{
  position:absolute;inset:-12% 0 -12% 0;z-index:-2;
  background-size:cover;background-position:center;
  will-change:transform;
}
/* the scrim sits above the moving layer */
.page-banner::before{z-index:-1}

/* ---- header shrink ---- */
.main-header{transition:box-shadow .2s,background .2s}
.header-inner{transition:min-height .25s cubic-bezier(.22,.9,.3,1)}
.main-header.sa-stuck .header-inner{min-height:60px!important}
.main-header.sa-stuck .logo img{max-height:44px;transition:max-height .25s}
.logo img{transition:max-height .25s}

/* ---- pointer spotlight on job cards: cheap, and it makes a flat grid feel lit ---- */
.job-card{position:relative}
.job-card::after{
  content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),
             rgba(240,80,80,.10), transparent 62%);
  opacity:0;transition:opacity .28s;
}
.job-card:hover::after{opacity:1}

/* ---- reveal on scroll (scoped to .sa-anim so it cannot strand content) ---- */
.sa-anim .sa-rv{opacity:0;transform:translateY(20px)}
.sa-anim .sa-rv.sa-in{
  opacity:1;transform:none;
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,.9,.3,1);
}

/* ---- the accent rule under section titles draws itself ---- */
.sa-anim .section-header .section-title{position:relative}
.sa-anim .section-header.sa-in .section-title::after{
  content:"";display:block;width:56px;height:4px;border-radius:2px;background:var(--sa-accent);
  margin:18px auto 0;transform-origin:center;animation:saRule .6s .15s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes saRule{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- buttons get a subtle press/lift already; add a sheen on the primary CTA ---- */
.sa-cta,.sa-hero-cta .p,.sa-submit{position:relative;overflow:hidden}
.sa-cta::after,.sa-hero-cta .p::after{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);transition:left .55s ease;
}
.sa-cta:hover::after,.sa-hero-cta .p:hover::after{left:130%}

@media(prefers-reduced-motion:reduce){
  .sa-anim .sa-rv{opacity:1!important;transform:none!important}
  .sa-parallax{transform:none!important}
  .sa-cta::after,.sa-hero-cta .p::after{display:none}
}

/* ===== FUTURE PASS ========================================================
   No particles, no webs. Depth instead: a slow gradient mesh, glass surfaces,
   luminous edges, and monospace for anything that is data. All of it is one
   block so it can be lifted out cleanly. */

/* ---- hero: gradient mesh instead of a flat scrim ---- */
.page-banner::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58% 44% at 18% 22%, rgba(240,80,80,.30), transparent 62%),
    radial-gradient(52% 46% at 84% 78%, rgba(56,132,196,.32), transparent 64%),
    radial-gradient(44% 40% at 62% 12%, rgba(140,86,214,.20), transparent 66%);
  mix-blend-mode:screen;opacity:.85;
  animation:saMesh 26s ease-in-out infinite alternate;
}
@keyframes saMesh{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-2.5%,1.8%,0) scale(1.08)}
}
/* a luminous hairline where the hero meets the page */
.page-banner{border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(240,80,80,.85),rgba(120,180,255,.6),transparent) 1}

/* headline: tighter, with a soft light bloom behind it */
.page-banner h1{
  text-shadow:0 0 44px rgba(255,255,255,.18), 0 2px 20px rgba(0,0,0,.55);
  letter-spacing:-.03em!important;
}
.page-banner h1::after{
  width:88px;height:3px;
  background:linear-gradient(90deg,transparent,#f05050,transparent);
  box-shadow:0 0 18px rgba(240,80,80,.9);
}

/* ---- glass job cards with a lit top edge ---- */
.job-card{
  background:rgba(255,255,255,.72)!important;
  backdrop-filter:blur(10px) saturate(1.25);
  -webkit-backdrop-filter:blur(10px) saturate(1.25);
  border:1px solid rgba(35,49,64,.10)!important;
  position:relative;overflow:hidden;
}
.job-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(240,80,80,.9),transparent);
  opacity:0;transition:opacity .3s;
}
.job-card:hover::before{opacity:1}
.job-header{
  background:linear-gradient(135deg,#233140 0%,#2c3e50 55%,#31465c 100%)!important;
  position:relative;
}
.job-header::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 12% 0%, rgba(240,80,80,.22), transparent 58%);
}

/* ---- anything that is DATA gets monospace: reads as engineered ---- */
.job-num,.job-number,[class*="job-num"]{
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace!important;
  letter-spacing:.02em;font-size:.74rem!important;opacity:.85;
}
.job-detail-value{
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  letter-spacing:-.01em;
}
.job-detail-item{
  background:linear-gradient(180deg,rgba(246,248,250,.9),rgba(255,255,255,.6))!important;
  border:1px solid rgba(35,49,64,.09)!important;
}

/* ---- the primary actions glow ---- */
.sa-cta,.sa-hero-cta .p,.sa-submit,.sa-tab.is-on{
  box-shadow:0 0 0 1px rgba(240,80,80,.35), 0 10px 30px -10px rgba(240,80,80,.65);
}
.job-apply-btn{
  background:linear-gradient(135deg,#233140,#2c3e50)!important;
  border:1px solid rgba(255,255,255,.06);
}
.job-apply-btn:hover{
  background:linear-gradient(135deg,#f05050,#d43c3c)!important;
  box-shadow:0 10px 26px -12px rgba(240,80,80,.8);
}

/* ---- section eyebrow gets a bracket, like a system label ---- */
.section-subtitle::before{content:"[ ";opacity:.55}
.section-subtitle::after{content:" ]";opacity:.55}
.section-subtitle{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace!important}

/* ---- forms sit on glass too ---- */
.sa-form{
  background:rgba(255,255,255,.78)!important;
  backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  border:1px solid rgba(35,49,64,.10)!important;
}
.contact-section{
  background:
    radial-gradient(60% 50% at 12% 0%, rgba(240,80,80,.07), transparent 60%),
    radial-gradient(52% 46% at 92% 100%, rgba(56,132,196,.08), transparent 62%),
    #fff!important;
}

@media(prefers-reduced-motion:reduce){ .page-banner::after{animation:none} }
@supports not (backdrop-filter: blur(4px)){
  .job-card,.sa-form{background:#fff!important}   /* solid fallback, never transparent-on-transparent */
}

/* ===== PREMIUM PASS =======================================================
   Typography does most of the work. Space Grotesk (variable, latin subset,
   22KB, self-hosted because the CSP is font-src 'self') carries the headings
   and anything structural; Nunito Sans stays for running text, so the page
   gains a voice without losing its readability.
   The rest is restraint: a real spacing rhythm, layered shadows, and hover
   states that move a few pixels rather than announcing themselves. */

@font-face{
  font-family:'Space Grotesk';
  src:url(/'/fonts/space-grotesk.woff2') format('woff2-variations'),
      url(/'/fonts/space-grotesk.woff2') format('woff2');
  font-weight:400 700;            /* one variable file covers the range */
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2212;
}

:root{
  --sa-display:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  /* layered shadows read as real depth; one flat shadow reads as a sticker */
  --sa-sh-1:0 1px 2px rgba(20,29,38,.05), 0 2px 6px rgba(20,29,38,.04);
  --sa-sh-2:0 1px 2px rgba(20,29,38,.05), 0 12px 28px -14px rgba(20,29,38,.42);
  --sa-sh-3:0 1px 2px rgba(20,29,38,.06), 0 28px 56px -24px rgba(20,29,38,.55);
}

/* ---- display face on everything structural ---- */
.page-banner h1,.section-title,.job-title,.job-card h3,.sa-tab,.sa-cta,
.sa-link,.sa-submit,.job-apply-btn,.sa-hero-cta a,.logo,.sa-f>span{
  font-family:var(--sa-display)!important;
}
.page-banner h1{font-weight:700!important;letter-spacing:-.035em!important}
.section-title{font-weight:700!important;letter-spacing:-.028em!important}
.job-title,.job-card h3{font-weight:600!important;letter-spacing:-.015em!important}
.sa-link,.sa-cta,.sa-tab,.sa-submit,.job-apply-btn,.sa-hero-cta a{font-weight:600!important;letter-spacing:-.005em}
.sa-f>span{font-weight:600!important;letter-spacing:.005em}

/* ---- spacing rhythm: give the page room to breathe ---- */
.jobs-section{padding:104px 0 112px!important}
.contact-section{padding:104px 0 116px!important}
.section-header{margin-bottom:56px!important}
.jobs-grid{gap:26px!important}
.section-title{margin-top:6px}

/* running text: slightly wider measure and looser leading reads as considered */
.section-header p,.sa-lede,.sa-intro{line-height:1.72!important;color:#5a6b7a}
.section-header p{max-width:70ch;margin-left:auto;margin-right:auto;text-wrap:balance}

/* ---- layered shadows ---- */
.job-card{box-shadow:var(--sa-sh-2)!important}
.job-card:hover{box-shadow:var(--sa-sh-3)!important}
.sa-form{box-shadow:var(--sa-sh-3)!important}
.job-detail-item{box-shadow:var(--sa-sh-1)}

/* ---- restrained motion: a few pixels, quickly, on a real easing curve ---- */
.job-card{transition:transform .34s cubic-bezier(.2,.8,.2,1),box-shadow .34s,border-color .34s}
.job-card:hover{transform:translateY(-5px)}
.sa-tab,.sa-cta,.sa-submit,.job-apply-btn,.sa-hero-cta a{
  transition:transform .18s cubic-bezier(.2,.8,.2,1),background .2s,box-shadow .2s,color .2s;
}

/* ---- selection + focus in the brand colour: small detail, feels bespoke ---- */
::selection{background:rgba(240,80,80,.22)}
:focus-visible{outline:2px solid #f05050;outline-offset:3px;border-radius:6px}

/* ---- the hero subtitle earns a little more presence ---- */
.page-banner p{
  font-family:var(--sa-display)!important;font-weight:500!important;
  letter-spacing:.01em;opacity:.94;
}

/* ---- category chip: tighter, uppercase, mono-ish tracking ---- */
.job-category{font-family:var(--sa-display)!important;letter-spacing:.09em!important}

@media(max-width:700px){
  .jobs-section,.contact-section{padding:72px 0 76px!important}
  .section-header{margin-bottom:40px!important}
}

/* the role a candidate clicked Apply on, shown at the top of the talent form */
.sa-applying{
  display:none;align-items:flex-start;gap:12px;margin:0 0 20px;padding:14px 16px;
  border-radius:12px;border:1px solid rgba(240,80,80,.32);
  background:linear-gradient(135deg,rgba(240,80,80,.09),rgba(240,80,80,.03));
}
.sa-applying.on{display:flex}
.sa-applying-b{flex:1;min-width:0}
.sa-applying-k{
  display:block;font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:#d43c3c;font-weight:700;
}
.sa-applying-v{
  display:block;font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  font-weight:600;color:#1b2530;font-size:1rem;line-height:1.35;margin-top:3px;
}
.sa-applying-m{
  display:block;margin-top:4px;color:#5a6b7a;font-size:.86rem;
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
.sa-applying-x{
  background:none;border:0;cursor:pointer;color:#5a6b7a;font-size:1.35rem;line-height:1;
  padding:2px 6px;border-radius:6px;flex:none;
}
.sa-applying-x:hover{color:#d43c3c;background:rgba(240,80,80,.10)}

/* mobile header: the original stylesheet stacks .header-inner into a column at
   narrow widths, which centred the logo and pushed the burger onto a second row
   (a ~155px tall header). Force a single row: logo left, burger right. */
@media(max-width:880px){
  .header-inner{
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    text-align:left!important;
    gap:12px!important;
    min-height:58px!important;
    padding:0!important;
  }
  .logo{margin:0!important;flex:0 0 auto}
  .logo img{max-height:42px!important}
  .sa-burger{margin-left:0!important;flex:0 0 auto}
  .main-header.sa-stuck .header-inner{min-height:52px!important}
  /* the drawer opens under a shorter bar */
  .sa-nav{top:100%!important}
}
@media(max-width:420px){
  .logo img{max-height:36px!important}
  .header-inner{min-height:54px!important}
}
/* ===== MULTI-PAGE COMPONENTS =============================================
   Home chooser, client how-it-works, discipline grid, legal pages, footer nav.
   Built on the existing tokens - navy #233140 / #2c3e50, coral #f05050,
   Space Grotesk for anything structural. */

/* ---- home: the two doors ---- */
.oc-doors{padding:104px 0 112px;background:
  radial-gradient(58% 48% at 88% 6%, rgba(56,132,196,.07), transparent 62%),
  radial-gradient(50% 44% at 6% 96%, rgba(240,80,80,.07), transparent 62%), #fff}
.oc-door-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;max-width:1000px;margin:0 auto}
.oc-door{display:flex;flex-direction:column;gap:9px;padding:38px 34px 32px;border-radius:16px;
  text-decoration:none;position:relative;overflow:hidden;
  background:rgba(255,255,255,.74);backdrop-filter:blur(10px) saturate(1.2);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  border:1px solid rgba(35,49,64,.10);
  box-shadow:0 1px 2px rgba(20,29,38,.05), 0 12px 28px -18px rgba(20,29,38,.45);
  transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s,border-color .32s}
.oc-door::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,#f05050,rgba(240,80,80,.15))}
.oc-door:hover{transform:translateY(-5px);border-color:rgba(240,80,80,.34);
  box-shadow:0 1px 2px rgba(20,29,38,.06), 0 26px 50px -24px rgba(20,29,38,.5)}
.oc-door-k{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:#d43c3c;font-weight:700}
.oc-door-h{font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;font-weight:700;
  font-size:1.62rem;letter-spacing:-.025em;color:#1b2530;line-height:1.18}
.oc-door-p{color:#5a6b7a;line-height:1.7;font-size:1rem}
.oc-door-go{margin-top:8px;font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  font-weight:600;color:#d43c3c;font-size:.98rem}

/* ---- clients: numbered process (the order is real, so numbering earns its place) ---- */
.oc-steps{padding:100px 0 40px;background:#fff}
.oc-step-grid{list-style:none;margin:0 auto;padding:0;max-width:1060px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.oc-step-grid li{position:relative;padding:26px 22px 24px;border-radius:14px;
  background:linear-gradient(180deg,rgba(246,248,250,.92),rgba(255,255,255,.7));
  border:1px solid rgba(35,49,64,.09)}
.oc-step-n{display:block;font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:.78rem;letter-spacing:.12em;color:#d43c3c;font-weight:700;margin-bottom:10px}
.oc-step-grid h3{font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;font-weight:600;
  font-size:1.06rem;color:#1b2530;margin:0 0 7px;letter-spacing:-.015em}
.oc-step-grid p{color:#5a6b7a;line-height:1.66;font-size:.94rem;margin:0}

/* ---- clients: what we place ---- */
.oc-disc{padding:76px 0 96px;background:#fff}
.oc-disc-grid{list-style:none;margin:0 auto;padding:0;max-width:1060px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.oc-disc-grid li{padding:20px 22px;border-radius:12px;background:#fff;
  border:1px solid rgba(35,49,64,.10);
  box-shadow:0 1px 2px rgba(20,29,38,.05), 0 10px 24px -20px rgba(20,29,38,.45)}
.oc-disc-grid b{display:block;font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  font-weight:700;color:#1b2530;font-size:1.02rem;margin-bottom:4px}
.oc-disc-grid span{color:#5a6b7a;font-size:.93rem;line-height:1.55}

.oc-solo{max-width:900px;margin:0 auto}
.oc-inline{color:#d43c3c;font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* ---- legal pages ---- */
.oc-banner-sm{min-height:auto!important;padding:88px 0 72px!important}
.oc-legal{padding:72px 0 96px;background:#fff}
.oc-legal .container{max-width:760px}
.oc-legal h2{font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;font-weight:700;
  font-size:1.24rem;color:#1b2530;letter-spacing:-.018em;margin:40px 0 12px}
.oc-legal p,.oc-legal li{color:#4c5c6b;line-height:1.78;font-size:1rem}
.oc-legal p{margin:0 0 14px}
.oc-legal ul{margin:0 0 16px;padding-left:22px}
.oc-legal li{margin-bottom:8px}
.oc-legal a{color:#d43c3c;text-decoration:underline;text-underline-offset:2px}
.oc-legal-lede{font-size:1.1rem!important;color:#233140!important;line-height:1.65!important;
  padding-bottom:8px;border-bottom:1px solid rgba(35,49,64,.12);margin-bottom:8px!important}
.oc-legal-note{margin-top:34px!important;padding:16px 18px;border-radius:10px;
  background:rgba(240,80,80,.06);border:1px solid rgba(240,80,80,.22);font-size:.94rem!important}

/* ---- footer nav ---- */
.oc-foot-nav{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center;margin-bottom:16px}
.oc-foot-nav a{color:rgba(255,255,255,.74);text-decoration:none;font-size:.92rem;
  font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;font-weight:500}
.oc-foot-nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

@media(max-width:900px){
  .oc-step-grid{grid-template-columns:repeat(2,1fr)}
  .oc-disc-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .oc-door-grid{grid-template-columns:1fr;gap:18px}
  .oc-doors{padding:70px 0 76px}
  .oc-steps{padding:70px 0 24px}
  .oc-disc{padding:52px 0 70px}
  .oc-door{padding:30px 26px 26px}
  .oc-door-h{font-size:1.42rem}
}
@media(max-width:560px){
  .oc-step-grid,.oc-disc-grid{grid-template-columns:1fr}
}

/* ---- footer rule + scroll-top affordance ---- */
.oc-foot-rule{border:0;height:1px;width:100%;max-width:520px;margin:20px auto 34px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent)}
.scroll-top{border:2px solid rgba(255,255,255,.92)!important;
  box-shadow:0 6px 20px -6px rgba(20,29,38,.55), 0 0 0 1px rgba(20,29,38,.10)!important}
.scroll-top:hover{border-color:#fff!important}
.scroll-top:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* copyright sits quietly under the rule - present, not competing with the links */
.footer-copyright{font-size:13px;opacity:1;color:rgba(255,255,255,.40);letter-spacing:.01em}

/* ===== SECTION RHYTHM ====================================================
   Alternating grounds so sections read as separate bands rather than one
   continuous white scroll. Uses the existing --sa-wash (#f6f8fa) plus a
   hairline, and keeps each section's own decorative gradient layered on top. */

.oc-band{
  background:
    radial-gradient(56% 46% at 90% 4%, rgba(56,132,196,.055), transparent 62%),
    radial-gradient(48% 42% at 6% 98%, rgba(240,80,80,.045), transparent 62%),
    var(--sa-wash, #f6f8fa) !important;
  border-top:1px solid rgba(35,49,64,.075);
  border-bottom:1px solid rgba(35,49,64,.075);
}
/* the About block already carries its own wash-on-white; on a banded page it
   should sit on plain white so the alternation still reads */
.oc-band + .sa-about,
.sa-about.oc-plain{
  background:
    radial-gradient(58% 48% at 88% 6%, rgba(56,132,196,.05), transparent 62%),
    radial-gradient(50% 44% at 6% 96%, rgba(240,80,80,.05), transparent 62%),
    #fff !important;
}

/* The up-arrow glyph carries no descender, so line-height centring leaves it
   sitting low in the circle. Flex-centre it and nudge for optical balance. */
.scroll-top{display:flex!important;align-items:center;justify-content:center;
  line-height:1!important;padding:0!important;font-size:1.05rem;text-align:center}
.scroll-top::before{content:"";display:block;margin-top:-1px}

/* Phone number in the header, sitting after the CTA. Reads as a number, not a
   second button - one pill per bar, or neither reads as the primary action. */
.sa-phone{
  display:inline-flex;align-items:center;gap:7px;margin-left:4px;padding:8px 4px;
  font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;font-weight:600;
  font-size:.95rem;letter-spacing:-.005em;color:#fff;text-decoration:none;white-space:nowrap;
  transition:color .2s,opacity .2s;opacity:.92;
}
.sa-phone::before{content:"\260E";font-size:.9em;opacity:.7}
.sa-phone:hover{opacity:1;color:#fff;text-decoration:underline;text-underline-offset:4px}
.sa-phone:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px}
@media(max-width:860px){
  .sa-phone{margin-left:0;padding:14px 0;border-top:1px solid rgba(255,255,255,.1);width:100%}
}

/* ===== INNER-PAGE HEROES =================================================
   Per-page banner art. The scrim is graded rather than flat: darker at the top
   so the sticky header separates, lightest through the middle so the faces are
   still legible, and darker again at the base where the buttons sit. Values are
   set per image from its measured centre-band brightness - the clients photo has
   window light exactly where the headline lands, the candidates one does not.
   Tinted (12,20,30) rather than pure black, to sit with the brand navy. */
.page-banner--candidates{
  background:
    linear-gradient(180deg, rgba(12,20,30,.46) 0%, rgba(12,20,30,.34) 46%, rgba(12,20,30,.50) 100%),
    url('/img/hero-candidates.07c23e3a.jpg') center 38% / cover no-repeat !important;
}
.page-banner--clients{
  background:
    linear-gradient(180deg, rgba(12,20,30,.66) 0%, rgba(12,20,30,.54) 46%, rgba(12,20,30,.68) 100%),
    url('/img/hero-clients.2f9aeb91.jpg') center 42% / cover no-repeat !important;
}