/* Smart Staff Solutions visual refinements — August 2026 */
:root{--red:#0b819f;--accent:#0b819f;--accent-bright:#2aaed2;--accent-dark:#087294;--accent-ink:#0b7898;--accent-soft:#e3f4f8}

/* Use the blue/cyan family from the logo instead of the previous harsh red. */
nav a:hover,.floatCard span,.intro>span,.approachCopy>span,.vacancyCopy>span,.answer small,.approachCopy a,.candidateText>span,.industriesIntro>span,.contactHub>div:first-child>span,.visualStoriesIntro>span,.storyGrid figcaption span,.reachBanner>span,.contactOptions span,footer small,.success button{color:var(--accent)}
.heroText>p,.floatCard,.quickActions>div:before,.chips button.active i,.answerIcon,.conversation article.red,.candidateText a:first-child,.vacancy form>button,.success>b,.industryGrid article>span{border-color:var(--accent)}
.navCta,.primary,.chips button.active i,.conversation article.red,.candidateText a:first-child,.vacancy form>button,.success>b{background:var(--accent)}
.navCta,.primary{background:linear-gradient(135deg,var(--accent-dark),var(--accent));box-shadow:0 12px 30px rgb(17 139 177/24%)}
.contactOptions a:hover{border-color:rgb(17 139 177/55%)}

/* Improve legibility in the header and throughout the homepage. */
nav{gap:32px;font-size:12px;letter-spacing:.1em}
.navCta,.primary,.ghost{font-size:11px}
.menu{font-size:13px;font-weight:750}
.pill{font-size:13px;letter-spacing:.18em;line-height:1.5}
.heroText>p{max-width:680px;font-size:17px;line-height:1.75}
.choice small,.services .intro>span,.approachCopy>span,.candidateText>span,.vacancyCopy>span,.industriesIntro>span,.contactHub>div:first-child>span,.visualStoriesIntro>span,.reachBanner>span{font-size:11px}
.quickActions>a b{font-size:27px}
.quickActions>a i{font-size:11px;line-height:1.65}
.intro p,.visualStoriesIntro p,.industriesIntro p,.approachCopy p,.candidateText p,.contactHub>div:first-child>p,.vacancyCopy>p,.answer p{font-size:16px}
.serviceList{font-size:14px}
.conversation p,.reachBanner>p,.contactHub>aside,.vacancyCopy a{font-size:13px}
.contactOptions span,.answer a,.candidateText a,.vacancy form>button{font-size:11px}

/* A more deliberate, visible shadow behind the homepage hero photograph. */
.photo{box-shadow:24px 28px 0 rgb(17 139 177/10%),0 38px 85px rgb(5 43 80/24%)}

/* Remove decorative numbering from boxes whose labels already explain them. */
.quickActions>a>span,.chips button i,.answerIcon,.industryGrid article>span{display:none}
.answer{grid-template-columns:1fr}
.chips button{min-height:72px;font-size:11px}

@media (width<=1250px) and (width>=851px){nav{gap:16px;font-size:11px}}
@media (width<=850px){nav{gap:8px;font-size:14px}.heroText>p,.intro p,.visualStoriesIntro p,.industriesIntro p,.approachCopy p,.candidateText p,.contactHub>div:first-child>p,.vacancyCopy>p{font-size:16px}}
@media (width<=500px){.pill{font-size:11px}.heroText>p{font-size:16px}.quickActions>a b{font-size:25px}}

/* Overall UI polish: clearer hierarchy, softer surfaces and improved spacing. */
body{font-size:16px;line-height:1.65}
.pageShell{border-color:#d2e1e7;background:radial-gradient(circle at 80% 24%,rgb(42 174 210/16%),transparent 31%),linear-gradient(120deg,#fff 8%,#f5f9fa 66%,#e9f4f7)}
header{grid-template-columns:330px 1fr auto;height:112px;padding:0 4vw;box-shadow:0 8px 32px rgb(5 43 80/5%)}
.logo img{width:305px;height:104px;transform:none;filter:brightness(1.12)saturate(1.08) contrast(1.03)}
nav a{font-weight:800}
nav a:after{height:2px;background:var(--accent-bright)}
.navCta{padding:16px 23px}
.hero{grid-template-columns:54% 46%;min-height:650px;padding:58px 6vw 82px}
.hero h1{font-size:clamp(58px,5.8vw,90px);line-height:.95;margin:30px 0}
.hero h1 em{color:var(--accent-ink)}
.pill{color:var(--accent-ink);border-bottom-color:rgb(17 139 177/45%);font-weight:800}
.peopleCanvas{height:535px}
.photo{inset:0 1% 0 10%;border:1px solid #c7dce4;border-radius:8px;overflow:hidden}
.photo:after{background:linear-gradient(145deg,transparent 45%,rgb(3 29 53/16%))}
.photo img{filter:saturate(.86) contrast(1.03)}
.floatCard{min-width:215px;border:1px solid #cce1e8;border-left:4px solid var(--accent-bright);border-radius:10px;padding:16px 19px;background:rgb(255 255 255/96%);box-shadow:0 18px 45px rgb(5 43 80/20%);backdrop-filter:blur(10px)}
.floatCard span{color:var(--accent-ink);font-size:10px;font-weight:850}
.floatCard b{font-family:var(--font-display);font-size:18px;line-height:1.15}
.floatCard.top{top:55px;left:0}
.floatCard.middle{top:195px;left:-18px;max-width:245px}
.floatCard.bottom{right:-8px;bottom:42px}
.quickActions{border:0;gap:12px;margin:82px auto}
.quickActions>div,.quickActions>a{min-height:175px!important;border:1px solid #d6e4e9!important;border-radius:12px!important;box-shadow:0 14px 35px rgb(5 43 80/7%)}
.quickActions>div{background:linear-gradient(145deg,var(--accent-soft),#fff)!important}
.quickActions>div:before{width:5px;border-radius:12px 0 0 12px}
.quickActions>a{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.quickActions>a:hover{transform:translateY(-5px);border-color:#add4e1!important;box-shadow:0 20px 42px rgb(5 43 80/12%)}
.services{padding-top:105px;padding-bottom:110px}
.servicePicker{border-color:#c8dce4;border-radius:14px;overflow:hidden;box-shadow:0 18px 48px rgb(5 43 80/7%)}
.chips button{transition:background .2s ease,color .2s ease}
.chips button.active{background:var(--accent-soft);box-shadow:inset 0 -3px 0 var(--accent)}
.answer{padding-top:52px;padding-bottom:52px}
.answer h3{font-size:clamp(36px,3.5vw,48px)}
.serviceList li{border-bottom-color:#cbdde4}
.storyGrid figure,.candidateBanner,.vacancy form,.success{border-radius:10px}
.storyGrid figure{box-shadow:0 24px 58px rgb(5 43 80/14%)}
.storyGrid figcaption span{color:#69d5f2;text-shadow:0 1px 10px rgb(0 0 0/40%)}
.industries{border-radius:14px;margin:24px 14px}
.industryGrid article{border-radius:6px}
.industryGrid article:after{background:linear-gradient(transparent 25%,rgb(3 18 29/88%))}
.approach{border-radius:14px;margin:24px 14px}
.conversation article,.conversation article.right{border-radius:10px}
.conversation article.red{background:linear-gradient(135deg,var(--accent-dark),var(--accent));color:#fff}
.candidateBanner{border-color:#c9dce4;box-shadow:0 26px 65px rgb(5 43 80/12%)}
.candidatePhoto{border-radius:8px;margin:14px}
.candidateText a{border-radius:6px}
.candidateText a:first-child,.vacancy form>button{background:linear-gradient(135deg,var(--accent-dark),var(--accent))}
.contactOptions{gap:10px;background:transparent;border:0}
.contactOptions a{border:1px solid #cedfe6;border-radius:10px;box-shadow:0 12px 30px rgb(5 43 80/6%)}
.vacancy form,.success{border-color:#cedfe6;box-shadow:0 22px 55px rgb(5 43 80/10%)}
.vacancy form>button{border-radius:6px}
footer small{color:#69d5f2}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgb(42 174 210/55%);outline-offset:3px}

@media (width<=1250px) and (width>=851px){header{grid-template-columns:275px 1fr auto}.logo img{width:255px;height:96px}.hero{grid-template-columns:52% 48%}.floatCard.middle{left:0}}
@media (width<=850px){header{height:106px;padding-left:22px}.logo img{width:255px;height:96px;transform:none}.hero{padding-top:58px}.hero h1{font-size:clamp(50px,11vw,67px)}.peopleCanvas{height:500px}.floatCard.top{top:35px;left:0}.floatCard.middle{top:165px;left:0}.floatCard.bottom{right:0;bottom:35px}nav{top:106px;border-radius:0 0 10px 10px;box-shadow:0 18px 38px rgb(5 43 80/16%)}.services,.visualStories,.industries,.approach,.contactHub,.vacancy{padding-top:80px;padding-bottom:80px}}
@media (width<=500px){header{height:92px}.logo img{width:220px;height:82px}.menu{padding:10px}nav{top:92px}.hero{padding-left:7vw;padding-right:7vw}.peopleCanvas{height:430px}.photo{inset:0 0 0 5%}.floatCard{min-width:0;max-width:200px;padding:12px 14px}.floatCard span{font-size:8px}.floatCard b{font-size:15px}.floatCard.top{top:24px}.floatCard.middle{top:137px;left:-2px}.floatCard.bottom{right:-2px;bottom:24px}.quickActions{margin:60px auto}.quickActions>div,.quickActions>a{min-height:140px!important}.storyGrid figure,.candidateBanner,.vacancy form,.success{border-radius:8px}}

/* Unified typography scale. Keeps hierarchy without extreme jumps in size. */
:root{
  --type-display:clamp(48px,4.5vw,56px);
  --type-section:clamp(36px,3.5vw,42px);
  --type-feature:clamp(26px,2.2vw,30px);
  --type-card:23px;
  --type-body:17px;
  --type-small:15px;
  --type-label:12px;
}

.hero h1{font-size:var(--type-display);line-height:1}
.intro h2,.approach h2,.candidateText h2,.vacancyCopy h2,.industriesIntro h2,.contactHub h2,.visualStoriesIntro h2,.jobsIntro h2{font-size:var(--type-section);line-height:1.05}
.answer h3,.jobCard h3{font-size:var(--type-feature);line-height:1.1}
.quickActions h2,.reachBanner>b,.storyGrid figcaption b,.storyTall figcaption b,.success h3{font-size:clamp(24px,2vw,28px);line-height:1.15}
.quickActions>a b,.industryGrid h3,.industryGrid article h3,.contactOptions b,.conversation b{font-size:var(--type-card);line-height:1.15}

.heroText>p,.intro p,.answer p,.visualStoriesIntro p,.industriesIntro p,.approachCopy p,.candidateText p,.contactHub>div:first-child>p,.vacancyCopy>p,.jobCard>p,.jobsIntro p{font-size:var(--type-body);line-height:1.7}
.serviceList,.conversation p,.reachBanner>p,.contactHub>aside,.vacancyCopy a,.jobsNote p,.jobCard ul,footer p,footer a{font-size:var(--type-small);line-height:1.65}

nav,.navCta,.primary,.ghost,.menu,.pill,.choice small,.services .intro>span,.approachCopy>span,.candidateText>span,.vacancyCopy>span,.industriesIntro>span,.contactHub>div:first-child>span,.visualStoriesIntro>span,.reachBanner>span,.storyGrid figcaption span,.floatCard span,.chips button,.answer small,.quickActions>a i,.contactOptions span,.answer a,.approachCopy a,.candidateText a,.vacancy form>button,.vacancy label,.formTop small,.jobsIntro>span,.jobTop small,.jobMeta span,.jobCard summary,.jobActions .apply,.jobActions>span,.jobsNote>a,footer small,footer aside{font-size:var(--type-label)}

.menu,nav{font-size:13px}
.floatCard b{font-size:17px}
.formTop b{font-size:19px}
.jobTop>span{font-size:24px}

@media (width<=850px){
  :root{--type-display:clamp(42px,9vw,48px);--type-section:clamp(34px,7vw,39px);--type-feature:clamp(25px,5vw,29px);--type-card:22px;--type-body:16px;--type-small:14px;--type-label:12px}
  .hero h1,.intro h2,.approach h2,.candidateText h2,.vacancyCopy h2,.industriesIntro h2,.contactHub h2,.visualStoriesIntro h2,.jobsIntro h2{line-height:1.06}
  .menu,nav{font-size:14px}
}

@media (width<=500px){
  :root{--type-display:42px;--type-section:34px;--type-feature:27px;--type-card:21px;--type-body:16px;--type-small:14px;--type-label:12px}
  .quickActions h2,.reachBanner>b,.storyGrid figcaption b,.storyTall figcaption b,.success h3{font-size:24px}
  .floatCard span{font-size:11px}
  .floatCard b{font-size:16px}
}