/* Shared page-level enhancements */
.navlinks a.current{opacity:1;position:relative}
.navlinks a.current::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:3px;background:var(--amber)}
.call-btn-light{background:var(--paper);color:#15181b;border:1px solid rgba(255,255,255,.08)}

/* =========================================================
   WELLHELD SAFETY PAGE
   Tuned to stay wide even when the browser is zoomed out.
   ========================================================= */
body.safety-pro-page{
  --paper:#081019;
  --paper-2:#0d1722;
  --ink:#f4efe4;
  --line:rgba(255,255,255,.13);
  --steel:#6f91b4;
  --amber:#e0a32f;
  background:#081019;
  color:var(--ink);
}
body.safety-pro-page header{
  background:rgba(7,12,18,.97);
  border-bottom:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
}

/* Do not let the site's normal 1140px max width make this page tiny
   when the visitor has their browser zoomed out. */
body.safety-pro-page .nav,
body.safety-pro-page footer>.wrap{
  width:calc(100vw - 140px);
  max-width:2800px;
  margin-left:auto;
  margin-right:auto;
}

body.safety-pro-page .page-hero{
  padding:0;
  background:#081019;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.safety-hero-pro>.wrap{
  padding-left:0;
  padding-right:0;
}
.safety-hero-layout{
  position:relative;
  width:calc(100vw - 48px);
  max-width:3200px;
  height:clamp(275px,18vw,355px);
  min-height:0;
  margin:0 auto;
  transform:none;
  border:0;
  overflow:hidden;
  background:
    linear-gradient(90deg,
      rgba(6,12,19,.98) 0%,
      rgba(6,12,19,.95) 28%,
      rgba(6,12,19,.76) 43%,
      rgba(6,12,19,.26) 62%,
      rgba(6,12,19,.04) 82%),
    url('/images/safety-hero-worksite.png') center center / cover no-repeat,
    #0a1118;
  box-shadow:none;
}
.safety-hero-copy{
  position:relative;
  z-index:2;
  height:100%;
  max-width:1480px;
  padding:36px 0 30px max(46px,7vw);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.safety-kicker{
  color:var(--amber);
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.21em;
  display:flex;
  align-items:center;
  gap:17px;
  margin-bottom:16px;
}
.safety-kicker::after{
  content:"";
  width:54px;
  height:2px;
  background:var(--amber);
  display:block;
}
.safety-hero-copy h1{
  margin:0;
  max-width:920px;
  font-family:'Inter',system-ui,sans-serif;
  font-size:clamp(45px,4.05vw,76px);
  line-height:.98;
  letter-spacing:-.035em;
  font-weight:800;
  text-transform:none;
  color:var(--amber);
}
.safety-hero-copy h1 span{
  display:block;
  color:#f5f1e8;
  white-space:nowrap;
}
.safety-hero-copy p{
  margin:14px 0 0;
  max-width:700px;
  font-size:16px;
  line-height:1.48;
  color:rgba(244,239,228,.88);
}
.safety-hero-visual{display:none}

/* Main safety content – wide like the approved reference */
.safety-card-section{
  padding:18px 0 20px;
  background:
    radial-gradient(circle at 8% 18%,rgba(28,58,90,.12),transparent 28%),
    #081019;
}
.safety-card-section>.wrap{
  width:calc(100vw - 220px);
  max-width:2800px;
  margin:0 auto;
  padding:0;
}
.safety-card-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.safety-pro-card{
  position:relative;
  min-height:205px;
  padding:20px 20px 48px;
  border:1px solid rgba(150,179,208,.28);
  border-radius:6px;
  background:linear-gradient(145deg,rgba(15,26,38,.98),rgba(9,17,26,.98));
  box-shadow:inset 0 0 0 1px rgba(70,104,138,.05);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.safety-pro-card:hover{
  transform:translateY(-2px);
  border-color:rgba(224,163,47,.52);
  box-shadow:0 12px 26px rgba(0,0,0,.18);
}
.icon-badge{
  width:52px;
  height:52px;
  margin-bottom:15px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid currentColor;
}
.icon-badge svg{width:26px;height:26px}
.icon-badge.amber{color:var(--amber)}
.icon-badge.steel{color:#79a2c9}
.safety-pro-card h3{
  margin:0 0 10px;
  font-family:'Inter',system-ui,sans-serif;
  font-size:18px;
  line-height:1.13;
  font-weight:800;
  color:#f5f1e8;
}
.safety-pro-card p{
  margin:0;
  max-width:31ch;
  font-size:14px;
  line-height:1.48;
  color:rgba(244,239,228,.82);
}
.card-arrow{display:none !important;}

/* Slimmer callout — matches the reference instead of oversized text */
.safety-callout{
  position:relative;
  display:grid;
  grid-template-columns:62px minmax(0,1fr) 280px;
  align-items:center;
  gap:20px;
  min-height:90px;
  margin-top:15px;
  padding:12px 20px;
  border:1px solid rgba(111,145,180,.65);
  border-radius:6px;
  overflow:hidden;
  background:linear-gradient(90deg,#112235 0%,#1b3146 72%,#15283a 100%);
}
.callout-icon{
  width:52px;
  height:52px;
  border-radius:50%;
  border:2px solid rgba(224,163,47,.75);
  color:var(--amber);
  display:flex;
  align-items:center;
  justify-content:center;
}
.callout-icon::after{
  content:"";
  position:absolute;
  left:82px;
  top:17px;
  bottom:17px;
  width:1px;
  background:rgba(224,163,47,.75);
}
.callout-icon svg{width:27px;height:27px}
.callout-copy{padding:0;position:relative;z-index:2;min-width:0}
.callout-kicker{
  margin:0 0 5px;
  font-size:11px;
  line-height:1;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--amber);
}
.safety-callout h3{
  margin:0 0 3px;
  max-width:none;
  font-family:'Inter',system-ui,sans-serif;
  font-size:17px;
  line-height:1.25;
  font-weight:700;
  color:#f5f1e8;
}
.safety-callout p{
  margin:0;
  font-size:13px;
  line-height:1.35;
  color:rgba(244,239,228,.76);
}
.callout-landscape{
  align-self:end;
  height:70px;
  background:
    linear-gradient(160deg,transparent 0 47%,rgba(6,12,19,.42) 48% 100%),
    linear-gradient(140deg,transparent 0 58%,rgba(5,11,18,.55) 58% 100%),
    linear-gradient(120deg,transparent 0 70%,rgba(12,22,34,.84) 70% 100%);
  clip-path:polygon(0 90%,15% 67%,31% 76%,47% 42%,64% 61%,79% 25%,100% 46%,100% 100%,0 100%);
  opacity:.95;
}

/* Footer proportions close to the approved screenshot */
body.safety-pro-page footer{padding:20px 0 20px;border-top:1px solid rgba(255,255,255,.12)}
body.safety-pro-page .foot-grid{
  grid-template-columns:1.35fr .9fr .9fr .9fr;
  gap:48px;
  padding:6px 0 22px;
}
body.safety-pro-page footer .brand{font-size:18px}
body.safety-pro-page footer h4{font-size:12px;margin-bottom:10px}
body.safety-pro-page footer ul{font-size:13px;gap:7px}
body.safety-pro-page .foot-bottom{padding-top:14px;font-size:11px}

@media(max-width:1200px){
  body.safety-pro-page .nav,
  body.safety-pro-page footer>.wrap,
  .safety-card-section>.wrap{width:calc(100vw - 64px)}
  .safety-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .safety-callout{grid-template-columns:58px minmax(0,1fr)}
  .callout-landscape{display:none}
}
@media(max-width:760px){
  body.safety-pro-page .nav,
  body.safety-pro-page footer>.wrap,
  .safety-card-section>.wrap{width:calc(100vw - 32px)}
  .safety-hero-layout{width:100vw;height:360px;background-position:62% center}
  .safety-hero-copy{padding:26px 20px 26px;justify-content:flex-end;background:linear-gradient(90deg,rgba(6,12,19,.94),rgba(6,12,19,.54),rgba(6,12,19,.12))}
  .safety-hero-copy h1{font-size:42px;line-height:1.02}
  .safety-hero-copy h1 span{white-space:normal}
  .safety-hero-copy p{font-size:15px;max-width:38ch}
  .safety-card-grid{grid-template-columns:1fr}
  .safety-pro-card{min-height:190px}
  .safety-callout{grid-template-columns:52px minmax(0,1fr);gap:14px;padding:16px}
  .callout-icon::after{display:none}
  .safety-callout h3{font-size:16px}
  body.safety-pro-page .foot-grid{grid-template-columns:1fr 1fr;gap:24px}
}
@media(max-width:520px){
  body.safety-pro-page .foot-grid{grid-template-columns:1fr}
}

/* =========================================================
   FIX: EXPERIENCE STATS (5+, 20+, OKANAGAN) TEXT MERGING FIX
   ========================================================= */
.experience-stat .stat-num,
.experience-stat .stat-word {
  color: #0f172a !important; /* Dark Slate color to ensure visibility on white card */
}

.experience-stat .stat-label {
  color: #64748b !important; /* Muted Slate color for the bottom text */
}

.experience-stat .experience-icon svg {
  stroke: #0f172a !important; /* Ensures the SVG Icon is also dark and visible */
}