:root{
  --green:#00432d;
  --green2:#00623e;
  --light:#f7faf8;
  --border:#dfe7e3;
  --text:#0b3328;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  color:var(--text);
  background:#fff;
}

.page-wrap{
  width:min(94vw, 1780px);
  margin:0 auto;
}

.site-header{
  height:92px;
  display:flex;
  align-items:center;
  border-bottom:1px solid #e6ece9;
  background:#fff;
}

.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  text-decoration:none;
}

.brand-text{
  display:flex;
  align-items:center;
  gap:14px;
}

..brand-text img{
  width:78px;
  height:78px;
  object-fit:contain;
  display:block;
}

.brand-words{
  display:flex;
  flex-direction:column;
  line-height:1;
}

.brand-words strong{
  font-family: Georgia, 'Times New Roman', serif;
  font-size:48px;
  letter-spacing:.04em;
  color:var(--green);
  font-weight:900;
}

.brand-words small{
  font-size:16px;
  letter-spacing:.04em;
  color:var(--green);
  font-weight:800;
  margin-top:2px;
}

.main-nav{
  display:flex;
  gap:52px;
  align-items:center;
}

.main-nav a{
  color:var(--green);
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  letter-spacing:.06em;
}

.hero{
  padding:56px 0 46px;
  border-bottom:1px solid #e6ece9;
}

.hero-layout{
  display:grid;
  grid-template-columns: 36% 64%;
  align-items:center;
  gap:18px;
}

.hero-copy{
  padding-left:0;
}

.hero-copy h1{
  font-size:clamp(58px, 5vw, 88px);
  line-height:.96;
  letter-spacing:-.03em;
  color:var(--green);
  font-weight:800;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.green-rule{
  display:block;
  width:66px;
  height:5px;
  background:var(--green2);
  margin:24px 0 20px;
}

.hero-copy p{
  font-size:20px;
  line-height:1.55;
  max-width:585px;
  color:#173d34;
}

.hero-actions{
  margin-top:30px;
  display:flex;
  gap:22px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:50px;
  padding:0 28px;
  text-decoration:none;
  font-size:13px;
  font-weight:900;
  letter-spacing:.08em;
}

.btn-green{
  background:var(--green2);
  color:#fff;
  box-shadow:0 12px 24px rgba(0,70,45,.16);
}

.btn-outline{
  color:var(--green);
  border:2px solid var(--green);
  background:#fff;
}

.hero-photos.hero-approved{
  height:442px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  transform:none;
  overflow:visible;
}

.hero-photos.hero-approved img{
  width:100%;
  max-width:980px;
  height:auto;
  display:block;
  object-fit:contain;
}

.services{
  padding:30px 0 34px;
  border-bottom:1px solid #e6ece9;
}

.section-title{
  text-align:center;
  margin-bottom:22px;
}

.section-title h2{
  color:var(--green);
  font-size:27px;
  letter-spacing:.08em;
  font-weight:900;
}

.section-title span{
  display:block;
  width:46px;
  height:3px;
  background:var(--green2);
  margin:10px auto 0;
}

.service-row{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:18px;
}

.service-card{
  position:relative;
  background:#fff;
  border:1px solid var(--border);
  min-height:278px;
  text-align:center;
}

.service-card img{
  width:100%;
  height:136px;
  object-fit:cover;
  display:block;
}

.icon{
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--green2);
  color:#fff;
  border:3px solid #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:20px;
  margin:-24px auto 14px;
  position:relative;
  z-index:2;
}

.service-card h3{
  min-height:62px;
  padding:0 10px;
  color:#0a1815;
  font-size:14px;
  line-height:1.25;
  font-weight:900;
}

.service-card .learn-more{
  display:block;
  margin-top:16px;
  color:var(--green2);
  text-decoration:none;
  font-size:12px;
  font-weight:900;
  letter-spacing:.05em;
}

.feature{
  padding:30px 0 32px;
  border-bottom:1px solid #e6ece9;
}

.feature-grid{
  display:grid;
  grid-template-columns: 40% 24% 36%;
  gap:34px;
  align-items:stretch;
}

.office-photo img{
  width:100%;
  height:258px;
  object-fit:cover;
  display:block;
}

.featured-project{
  padding:20px 4px;
}

.eyebrow{
  color:var(--green2);
  font-weight:900;
  font-size:13px;
  letter-spacing:.12em;
  margin-bottom:14px;
}

.featured-project h2{
  color:var(--green);
  font-size:34px;
  line-height:1.05;
  letter-spacing:-.03em;
  margin-bottom:18px;
}

.featured-project p{
  font-size:16px;
  line-height:1.55;
  margin-bottom:22px;
  color:#263f38;
}

.why{
  padding:16px 0 0 34px;
  border-left:1px solid var(--border);
}

.why h3{
  color:var(--green);
  font-size:22px;
  letter-spacing:.08em;
  font-weight:900;
}

.why-rule{
  display:block;
  width:46px;
  height:3px;
  background:var(--green2);
  margin:12px 0 26px;
}

.why-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px 36px;
}

.why-icon{
  color:var(--green2);
  font-size:38px;
  line-height:1;
  margin-bottom:8px;
}

.why strong{
  display:block;
  font-size:14px;
  color:#0a1815;
  margin-bottom:7px;
}

.why p{
  font-size:14px;
  line-height:1.45;
  color:#324740;
}

.footer{
  background:linear-gradient(90deg,#003925,#00623e);
  color:#fff;
  padding:34px 0;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:28px;
  align-items:start;
}

.footer img{
  width:230px;
}

.footer h4{
  font-size:13px;
  letter-spacing:.1em;
  margin-bottom:10px;
}

.footer p{
  font-size:14px;
  line-height:1.55;
  opacity:.92;
}

@media(max-width:1250px){
  .main-nav{gap:24px}
  .brand-words strong{font-size:42px}
  .brand-words small{font-size:14px}
  ..brand-text img{width:66px;height:66px;object-fit:contain}
  .hero-layout{grid-template-columns:1fr}
  .hero-copy{padding-left:0}
  .service-row{grid-template-columns:repeat(4,1fr)}
  .feature-grid{grid-template-columns:1fr}
  .why{border-left:none;padding-left:0}
}

@media(max-width:760px){
  .site-header{height:auto;padding:18px 0}
  .nav-wrap{align-items:flex-start}
  .main-nav{display:none}
  .brand-words strong{font-size:34px}
  .brand-words small{font-size:12px}
  ..brand-text img{width:54px;height:54px;object-fit:contain}
  .hero-copy h1{font-size:48px}
  .hero-photos.hero-approved{height:auto}
  .hero-photos.hero-approved img{width:100%;max-width:100%}
  .hero-actions{flex-direction:column;align-items:flex-start}
  .service-row{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}


/* ---------- Inner Pages ---------- */

.inner-hero{
  padding:76px 0 64px;
  border-bottom:1px solid #e6ece9;
  background:#fff;
}

.inner-hero-grid{
  display:grid;
  grid-template-columns:42% 58%;
  gap:48px;
  align-items:center;
}

.inner-hero h1{
  font-size:clamp(52px, 5vw, 84px);
  line-height:.96;
  letter-spacing:-.035em;
  color:var(--green);
  font-weight:800;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.inner-hero p{
  font-size:20px;
  line-height:1.6;
  max-width:700px;
  color:#183f35;
}

.inner-hero-img{
  width:100%;
  height:390px;
  object-fit:cover;
  clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);
}

.content-section{
  padding:62px 0;
  border-bottom:1px solid #e6ece9;
}

.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:start;
}

.content-section h2{
  color:var(--green);
  font-size:42px;
  line-height:1.05;
  margin-bottom:22px;
  letter-spacing:-.025em;
}

.content-section h3{
  color:var(--green);
  font-size:36px;
  margin-bottom:12px;
}

.content-section p,
.content-section li{
  color:#263f38;
  font-size:17px;
  line-height:1.65;
}

.check-list{
  list-style:none;
  display:grid;
  gap:12px;
}

.check-list li{
  border:1px solid var(--border);
  padding:16px 18px;
  background:#fff;
}

.check-list li:before{
  content:"✓";
  color:var(--green2);
  font-weight:900;
  margin-right:10px;
}

.stat-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:28px;
}

.stat-card{
  border:1px solid var(--border);
  padding:22px;
  text-align:center;
}

.stat-card strong{
  color:var(--green);
  font-size:34px;
  display:block;
}

.stat-card span{
  color:var(--green);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
}

.project-grid,
.office-grid,
.benefit-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.project-card,
.office-card,
.benefit-card{
  border:1px solid var(--border);
  background:#fff;
}

.project-card img{
  width:100%;
  height:210px;
  object-fit:cover;
}

.project-card div,
.office-card,
.benefit-card{
  padding:24px;
}

.project-card h3{
  min-height:60px;
}

.tag{
  display:inline-block;
  color:var(--green2);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  margin-bottom:12px;
}

.office-card h3{
  min-height:52px;
}

.office-card p{
  margin-bottom:10px;
}

.contact-banner{
  background:var(--green2);
  color:#fff;
  padding:52px 0;
}

.contact-banner h2{
  color:#fff;
  font-size:46px;
  margin-bottom:10px;
}

.contact-banner p{
  color:#fff;
  font-size:24px;
}

@media(max-width:1000px){
  .inner-hero-grid,
  .two-col{
    grid-template-columns:1fr;
  }

  .project-grid,
  .office-grid,
  .benefit-grid{
    grid-template-columns:1fr;
  }

  .stat-row{
    grid-template-columns:1fr;
  }

  .inner-hero-img{
    clip-path:none;
    height:280px;
  }
}


/* ---------- Services Pages ---------- */

.service-detail-grid{
  display:grid;
  grid-template-columns: 1fr 330px;
  gap:48px;
  align-items:start;
}

.service-detail img.detail-photo{
  width:100%;
  height:360px;
  object-fit:cover;
  margin:0 0 30px;
  clip-path:polygon(6% 0,100% 0,94% 100%,0 100%);
}

.side-nav{
  border:1px solid var(--border);
  background:#fff;
  padding:22px;
  position:sticky;
  top:24px;
}

.side-nav h3{
  color:var(--green);
  font-size:20px;
  margin-bottom:14px;
}

.side-nav a{
  display:block;
  padding:13px 0;
  border-top:1px solid var(--border);
  color:var(--green);
  text-decoration:none;
  font-weight:800;
  font-size:14px;
}

.scope-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  margin-top:24px;
}

.scope-card{
  border:1px solid var(--border);
  padding:20px;
  background:#fff;
}

.scope-card h3{
  font-size:20px;
  margin-bottom:8px;
}

.service-list-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:22px;
}

.service-list-card{
  border:1px solid var(--border);
  background:#fff;
  text-decoration:none;
  color:inherit;
  display:block;
}

.service-list-card img{
  width:100%;
  height:180px;
  object-fit:cover;
}

.service-list-card div{
  padding:22px;
}

.service-list-card h3{
  color:#0a1815;
  min-height:58px;
}

.service-list-card p{
  font-size:15px;
}

@media(max-width:1100px){
  .service-detail-grid{
    grid-template-columns:1fr;
  }

  .side-nav{
    position:static;
  }

  .service-list-grid,
  .scope-grid{
    grid-template-columns:1fr;
  }
}


/* ---------- Service Sub Pages ---------- */

.subpage-list{
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.subpage-link{
  border:1px solid var(--border);
  padding:20px;
  text-decoration:none;
  color:inherit;
  display:block;
  background:#fff;
}

.subpage-link strong{
  color:var(--green);
  display:block;
  font-size:24px;
  margin-bottom:8px;
}

.subpage-link span{
  color:#263f38;
  font-size:15px;
  line-height:1.45;
}

.bullet-columns{
  columns:2;
  column-gap:44px;
  margin-top:22px;
}

.bullet-columns li{
  break-inside:avoid;
  margin-bottom:10px;
}

@media(max-width:900px){
  .subpage-list{
    grid-template-columns:1fr;
  }
  .bullet-columns{
    columns:1;
  }
}


.scope-card-link{
  display:block;
  color:inherit;
  text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.scope-card-link:hover{
  transform:translateY(-2px);
  border-color:var(--green2);
  box-shadow:0 12px 24px rgba(0,70,45,.10);
}

.scope-card-link h3:after{
  content:"  →";
  color:var(--green2);
  font-weight:900;
}


/* Removed duplicate service detail images spacing */
.service-detail{
  padding-top:52px;
}


.service-card-link{
  color:inherit;
  text-decoration:none;
  display:block;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.service-card-link:hover{
  transform:translateY(-2px);
  border-color:var(--green2);
  box-shadow:0 12px 24px rgba(0,70,45,.10);
}


/* ---------- People Page ---------- */

.people-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
}

.person-card{
  border:1px solid var(--border);
  background:#fff;
  overflow:hidden;
}

.person-card img{
  width:100%;
  height:auto;
  aspect-ratio:4 / 5;
  object-fit:cover;
  display:block;
}

.person-card div{
  padding:22px;
}

.person-card h3{
  color:var(--green);
  font-size:21px;
  margin-bottom:8px;
  line-height:1.15;
}

.person-card p{
  color:#263f38;
  font-size:15px;
  line-height:1.45;
}

.founder-card{
  display:grid;
  grid-template-columns:480px 1fr;
  gap:34px;
  align-items:start;
  border:1px solid var(--border);
  padding:28px;
  background:#fff;
}

.founder-card img{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
}

.founder-card h2{
  margin-bottom:10px;
}

.founder-card p + p{
  margin-top:1em;
}

@media(max-width:1100px){
  .people-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .founder-card{
    grid-template-columns:1fr;
  }
}

@media(max-width:650px){
  .people-grid{
    grid-template-columns:1fr;
  }
}


/* ---------- Career Job Pages ---------- */

.jobs-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:26px;
}

.job-card{
  border:1px solid var(--border);
  background:#fff;
  padding:28px;
  color:inherit;
  text-decoration:none;
  display:block;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.job-card:hover{
  transform:translateY(-2px);
  border-color:var(--green2);
  box-shadow:0 12px 24px rgba(0,70,45,.10);
}

.job-card h3{
  color:var(--green);
  font-size:26px;
  margin-bottom:12px;
}

.job-meta{
  color:var(--green2);
  font-weight:800;
  font-size:14px;
  letter-spacing:.04em;
  margin-bottom:16px;
}

.job-detail-grid{
  display:grid;
  grid-template-columns:1fr 330px;
  gap:48px;
  align-items:start;
}

.job-sidebar{
  border:1px solid var(--border);
  background:#fff;
  padding:24px;
  position:sticky;
  top:24px;
}

.job-sidebar h3{
  color:var(--green);
  font-size:22px;
  margin-bottom:16px;
}

.job-sidebar p{
  font-size:15px;
  line-height:1.55;
  margin-bottom:18px;
}

.job-section{
  margin-bottom:34px;
}

.job-section h2{
  color:var(--green);
  font-size:34px;
  margin-bottom:16px;
}

.job-section ul{
  padding-left:20px;
}

.job-section li{
  margin-bottom:11px;
}

@media(max-width:1000px){
  .jobs-grid,
  .job-detail-grid{
    grid-template-columns:1fr;
  }

  .job-sidebar{
    position:static;
  }
}








/* Final copyright-only footer */
.footer{
  background:linear-gradient(90deg,#003925,#00623e);
  color:#fff;
  padding:28px 0;
}

.footer-simple{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:#fff;
}

.footer-simple p{
  margin:0;
  color:#fff;
  font-size:15px;
  line-height:1.5;
  letter-spacing:.02em;
}

@media(max-width:760px){
  .header-logo{
    width:250px;
  }
}


/* Uploaded PNG header logo */
.header-logo{
  width:320px;
  max-width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}

@media(max-width:760px){
  .header-logo{
    width:250px;
  }
}


/* Careers page button spacing */
.career-button-space{
  margin-top:28px;
}


/* Stronger Careers page button spacing */
.career-button-space-large{
  display:block;
  margin-top:42px;
  clear:both;
}


/* Final forced Careers page button spacing */
.career-button-space,
.career-button-space-large{
  display:block !important;
  margin-top:60px !important;
  clear:both;
}


/* Forced top navigation font size update */
.main-nav a,
.nav a,
nav a,
.site-header nav a{
  font-size:20px !important;
  line-height:1.1 !important;
}


/* Final top navigation font size */
.main-nav a,
.nav a,
nav a,
.site-header nav a{
  font-size:20px !important;
  line-height:1.1 !important;
}


/* Header logo size update */
.header-logo img,
.logo img,
.site-logo img,
.navbar-brand img{
    height:80px !important;
    width:auto !important;
    max-height:80px !important;
}


/* Hero service headline update */
.hero-copy h1{
  font-size:clamp(42px, 3.3vw, 62px) !important;
  line-height:1.08 !important;
  letter-spacing:-0.03em !important;
  max-width:620px;
}

.hero-copy h1 br{
  display:block;
}

@media(max-width:900px){
  .hero-copy h1{
    font-size:clamp(36px, 8vw, 52px) !important;
  }
}


/* Homepage service row corrected after removing Engineering Geology */
.home .service-row,
.service-row{
  grid-template-columns:repeat(4, minmax(220px, 1fr)) !important;
  max-width:1220px;
  margin-left:auto;
  margin-right:auto;
}


/* FINAL: Homepage Why Salem only section */
.why-only-section{
  padding:50px 0 44px !important;
  background:#fff !important;
  border-top:1px solid #e6ece9 !important;
  border-bottom:1px solid #e6ece9 !important;
}

.why-only-wrap{
  display:grid !important;
  grid-template-columns:62% 38% !important;
  min-height:300px !important;
  align-items:start !important;
}

.why-only{
  grid-column:2 !important;
  padding:20px 0 0 42px !important;
  border-left:1px solid var(--border) !important;
  width:100% !important;
}

.why-only .why-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:34px 50px !important;
}

@media(max-width:1000px){
  .why-only-wrap{
    grid-template-columns:1fr !important;
  }
  .why-only{
    grid-column:1 !important;
    border-left:none !important;
    padding-left:0 !important;
  }
}


/* Footer office locations */
.footer-simple{
  flex-direction:column;
  gap:8px;
}

.footer-locations{
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}


/* Larger footer office locations only */
.footer-locations{
  font-size:24px !important;
  font-weight:800 !important;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
  margin:0;
}

.footer{
  padding:32px 0 !important;
}


/* Hero image size correction */
.hero-photos.hero-approved{
  height:auto !important;
  align-items:center !important;
}

.hero-photos.hero-approved img{
  width:100% !important;
  max-width:1200px !important;
  height:auto !important;
  object-fit:contain !important;
  display:block !important;
}


/* Final hero alignment tuning */
.hero-section,
.hero{
    display:flex !important;
    align-items:flex-start !important;
    padding-top:40px !important;
}

.hero-photos.hero-approved{
    margin-top:0 !important;
    display:flex !important;
    align-items:flex-start !important;
}

.hero-photos.hero-approved img{
    width:100% !important;
    max-width:1150px !important;
    height:auto !important;
    margin-top:-10px !important;
}


/* FINAL hero alignment + service image preservation */
.hero-layout{
  align-items:flex-start !important;
}

.hero-photos.hero-approved{
  margin-top:-48px !important;
  align-self:flex-start !important;
  display:flex !important;
  justify-content:flex-end !important;
}

.hero-photos.hero-approved img{
  width:100% !important;
  max-width:1060px !important;
  height:auto !important;
  object-fit:contain !important;
  display:block !important;
}

@media(max-width:1000px){
  .hero-photos.hero-approved{
    margin-top:20px !important;
  }
}


/* Services page: 4-card layout after removing Engineering Geology & Hydrogeology */
.service-list-grid{
  grid-template-columns:repeat(4, 1fr) !important;
  max-width:1400px;
  margin-left:auto;
  margin-right:auto;
}

@media(max-width:1100px){
  .service-list-grid{
    grid-template-columns:repeat(2, 1fr) !important;
  }
}

@media(max-width:650px){
  .service-list-grid{
    grid-template-columns:1fr !important;
  }
}


/* Center services cards on Services page */
.service-list-grid{
  display:grid !important;
  grid-template-columns:repeat(4, 300px) !important;
  justify-content:center !important;
  justify-items:stretch !important;
  gap:28px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  width:100% !important;
  max-width:none !important;
}

@media(max-width:1350px){
  .service-list-grid{
    grid-template-columns:repeat(2, 300px) !important;
  }
}

@media(max-width:700px){
  .service-list-grid{
    grid-template-columns:1fr !important;
  }
}

/* FINAL: Align page hero text with the left edge of the header logo on all pages */
.hero-copy,
.inner-hero-grid > div{
  padding-left:0 !important;
  margin-left:0 !important;
}

/* FINAL: Larger header logo on all pages */
.site-header{
  height:112px !important;
}
.header-logo{
  width:390px !important;
  height:auto !important;
  max-width:100% !important;
  display:block !important;
}
@media(max-width:760px){
  .site-header{
    height:auto !important;
    padding:16px 0 !important;
  }
  .header-logo{
    width:300px !important;
  }
}

/* FINAL FIX: Homepage Why Salem horizontal layout */
.why-only-section{
  padding:42px 0 58px !important;
  background:#fff !important;
  border-top:1px solid #e6ece9 !important;
  border-bottom:1px solid #e6ece9 !important;
}

.why-only-wrap{
  display:block !important;
  max-width:1240px !important;
  margin:0 auto !important;
  min-height:0 !important;
}

.why-only{
  grid-column:auto !important;
  width:100% !important;
  padding:0 !important;
  border-left:none !important;
}

.why-only h3{
  margin:0 !important;
}

.why-only .why-rule{
  margin:12px 0 44px !important;
}

.why-only .why-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:42px !important;
  align-items:start !important;
}

.why-only .why-icon{
  margin-bottom:22px !important;
}

.why-only strong{
  font-size:15px !important;
  margin-bottom:16px !important;
}

.why-only p{
  font-size:15px !important;
  line-height:1.55 !important;
  max-width:270px !important;
}

@media(max-width:1000px){
  .why-only .why-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media(max-width:640px){
  .why-only .why-grid{
    grid-template-columns:1fr !important;
  }
}


/* Footer office locations - spaced without dashes */
.footer-locations{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:22px 56px !important;
  font-size:28px !important;
  line-height:1.15 !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  text-align:center !important;
  margin:0 !important;
}

.footer-locations span{
  display:inline-block;
  white-space:nowrap;
}

.footer{
  padding:36px 0 !important;
}

@media (max-width:900px){
  .footer-locations{
    font-size:20px !important;
    gap:14px 28px !important;
  }
}




/* Slogan centered between two full-width lines */
.divider-slogan-text{
  width:100%;
  box-sizing:border-box;
  border-top:1px solid #e6ece9;
  border-bottom:1px solid #e6ece9;
  background:#064225;
  text-align:center;
  color:#ffffff;
  font-size:36px;
  font-weight:700;
  line-height:1.25;
  padding:18px 20px;
  margin:0;
}

@media (max-width:768px){
  .divider-slogan-text{
    font-size:24px;
    padding:14px 16px;
  }
}


/* Replacement image section for former Why Salem area */
.lets-work-banner-section{
  width:100%;
  background:#fff;
  padding:0;
  margin:0;
  border-top:1px solid #e6ece9;
  border-bottom:1px solid #e6ece9;
}

.lets-work-banner-wrap{
  width:100%;
  margin:0 auto;
  overflow:hidden;
}

.lets-work-banner-wrap img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
}

@media (max-width:768px){
  .lets-work-banner-wrap img{
    min-height:320px;
    object-fit:cover;
    object-position:center;
  }
}


/* Leadership review - Let's Work section refinement */
.lets-work-banner-section{
  margin-bottom:60px !important;
}

.lets-work-banner-wrap{
  position:relative;
}

.lets-work-banner-wrap img{
  max-height:420px !important;
  object-fit:cover !important;
}

.lets-work-banner-wrap::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:70px;
  background:linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.75) 70%,
    rgba(255,255,255,1) 100%);
  pointer-events:none;
}


/* Let's Work gradient replacement - no texture */
.lets-work-gradient-section{
  width:100%;
  background:linear-gradient(105deg,#003f2a 0%,#005f3d 55%,#007146 100%);
  padding:54px 0;
  margin:0 0 60px 0;
  border-top:1px solid #e6ece9;
  border-bottom:1px solid #e6ece9;
}

.lets-work-gradient-inner{
  max-width:1500px;
  margin:0 auto;
  padding:0 70px;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:34px;
  align-items:center;
}

.lets-work-title h2{
  color:#fff;
  font-size:82px;
  font-weight:300;
  line-height:1;
  margin:0;
  letter-spacing:-2px;
}

.lets-work-accent{
  width:470px;
  max-width:80%;
  height:18px;
  background:#9ac43a;
  margin-top:18px;
}

.lets-work-card{
  background:#fff;
  min-height:245px;
  padding:46px 46px 38px;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  position:relative;
}

.lets-work-card:last-child::after{
  content:"";
  position:absolute;
  top:-26px;
  right:-26px;
  width:120px;
  height:120px;
  background:#9ac43a;
  opacity:.9;
  z-index:-1;
}

.lets-work-card h3{
  color:#064225;
  font-size:48px;
  line-height:1.08;
  font-weight:300;
  margin:0;
}

.card-accent{
  width:58px;
  height:4px;
  background:#9ac43a;
  margin:22px 0 22px;
}

.lets-work-card p{
  color:#333;
  font-size:20px;
  line-height:1.5;
  margin:0;
}

@media (max-width:1100px){
  .lets-work-gradient-inner{
    grid-template-columns:1fr;
    padding:0 28px;
  }

  .lets-work-title h2{
    font-size:58px;
  }

  .lets-work-card{
    min-height:0;
  }
}

@media (max-width:768px){
  .lets-work-gradient-section{
    padding:38px 0;
    margin-bottom:42px;
  }

  .lets-work-title h2{
    font-size:46px;
  }

  .lets-work-accent{
    height:12px;
  }

  .lets-work-card{
    padding:32px 28px;
  }

  .lets-work-card h3{
    font-size:36px;
  }

  .lets-work-card p{
    font-size:17px;
  }
}


/* Updated CTA title */
.lets-work-title h2{
  font-size:64px !important;
  line-height:1.05 !important;
  max-width:700px;
}
@media (max-width:768px){
  .lets-work-title h2{
    font-size:42px !important;
  }
}


/* Make Let's Work CTA cards clickable */
a.lets-work-card{
  display:block;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}

a.lets-work-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 36px rgba(0,0,0,.24);
}

a.lets-work-card:focus{
  outline:3px solid #9ac43a;
  outline-offset:4px;
}


/* FINAL FIX: CTA gradient section layout */
.lets-work-gradient-section{
  width:100% !important;
  background:linear-gradient(105deg,#003f2a 0%,#005f3d 55%,#007146 100%) !important;
  padding:54px 0 !important;
  margin:0 0 60px 0 !important;
  border-top:1px solid #e6ece9 !important;
  border-bottom:1px solid #e6ece9 !important;
}

.lets-work-gradient-inner{
  max-width:1500px !important;
  margin:0 auto !important;
  padding:0 70px !important;
  display:grid !important;
  grid-template-columns:1.25fr 1fr 1fr !important;
  gap:34px !important;
  align-items:center !important;
}

.lets-work-title h2{
  color:#fff !important;
  font-size:60px !important;
  font-weight:300 !important;
  line-height:1.08 !important;
  margin:0 !important;
  letter-spacing:-1px !important;
  max-width:620px !important;
}

.lets-work-accent{
  width:430px !important;
  max-width:85% !important;
  height:16px !important;
  background:#9ac43a !important;
  margin-top:22px !important;
}

.lets-work-card,
a.lets-work-card{
  background:#fff !important;
  min-height:245px !important;
  padding:46px 46px 38px !important;
  box-shadow:0 12px 30px rgba(0,0,0,.18) !important;
  position:relative !important;
  display:block !important;
  text-decoration:none !important;
  color:inherit !important;
  cursor:pointer !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}

.lets-work-card h3,
a.lets-work-card h3{
  color:#064225 !important;
  font-size:48px !important;
  line-height:1.08 !important;
  font-weight:300 !important;
  margin:0 !important;
}

.card-accent{
  width:58px !important;
  height:4px !important;
  background:#9ac43a !important;
  margin:22px 0 22px !important;
}

.lets-work-card p,
a.lets-work-card p{
  color:#333 !important;
  font-size:20px !important;
  line-height:1.5 !important;
  margin:0 !important;
}

a.lets-work-card:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 16px 36px rgba(0,0,0,.24) !important;
}

a.lets-work-card:focus{
  outline:3px solid #9ac43a !important;
  outline-offset:4px !important;
}

@media (max-width:1100px){
  .lets-work-gradient-inner{
    grid-template-columns:1fr !important;
    padding:0 28px !important;
  }

  .lets-work-title h2{
    font-size:50px !important;
  }

  .lets-work-card,
  a.lets-work-card{
    min-height:0 !important;
  }
}

@media (max-width:768px){
  .lets-work-gradient-section{
    padding:38px 0 !important;
    margin-bottom:42px !important;
  }

  .lets-work-title h2{
    font-size:38px !important;
  }

  .lets-work-accent{
    height:12px !important;
  }

  .lets-work-card,
  a.lets-work-card{
    padding:32px 28px !important;
  }

  .lets-work-card h3,
  a.lets-work-card h3{
    font-size:36px !important;
  }

  .lets-work-card p,
  a.lets-work-card p{
    font-size:17px !important;
  }
}


/* FINAL HOMEPAGE SERVICES FORMAT - wide cards aligned with top content */
#services.services-balanced{
  padding: 34px 0 42px !important;
}

#services.services-balanced .services-balanced-wrap{
  width: min(1180px, calc(100vw - 64px)) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

#services.services-balanced .section-title{
  text-align: center !important;
  margin-bottom: 28px !important;
}

#services.services-balanced .service-row{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

#services.services-balanced .service-card{
  display: block !important;
  width: 100% !important;
  min-height: 300px !important;
  background: #fff !important;
  border: 1px solid var(--border) !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

#services.services-balanced .service-card img{
  width: 100% !important;
  height: 150px !important;
  object-fit: cover !important;
  display: block !important;
}

#services.services-balanced .service-card h3{
  padding: 0 14px !important;
  margin: 0 !important;
  min-height: 58px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  color: #0a1815 !important;
}

#services.services-balanced .service-card .learn-more{
  display: block !important;
  margin-top: 22px !important;
  color: var(--green2) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

/* The four service cards use inline spacers after the image; make the gap consistent */
#services.services-balanced .service-card div[style*="height:34px"]{
  height: 30px !important;
}

@media (max-width: 900px){
  #services.services-balanced .services-balanced-wrap{
    width: calc(100vw - 40px) !important;
  }
  #services.services-balanced .service-row{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #services.services-balanced .service-card img{
    height: 190px !important;
  }
}

@media (max-width: 600px){
  #services.services-balanced .service-row{
    grid-template-columns: 1fr !important;
  }
}


/* MATCH GENERATED MOCKUP: large, wide Our Services cards */
.services-large-layout{
  padding: 44px 0 52px !important;
  background:#fff !important;
  border-bottom:1px solid #e6ece9 !important;
}

.services-large-wrap{
  width: min(1400px, calc(100vw - 72px)) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.services-large-layout .section-title{
  text-align:center !important;
  margin-bottom: 34px !important;
}

.services-large-layout .section-title h2{
  font-size: 28px !important;
  line-height:1.1 !important;
  letter-spacing: .16em !important;
  color: #064225 !important;
  margin:0 !important;
}

.services-large-layout .section-title span{
  display:block !important;
  width:48px !important;
  height:3px !important;
  background:#007146 !important;
  margin:12px auto 0 !important;
}

.service-large-row{
  width:100% !important;
  display:grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 26px !important;
  margin:0 !important;
}

.service-large-row .service-card{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  width:100% !important;
  min-height:335px !important;
  background:#fff !important;
  border:1px solid #dfe7e3 !important;
  box-sizing:border-box !important;
  text-align:center !important;
  text-decoration:none !important;
  color:inherit !important;
}

.service-large-row .service-card img{
  width:100% !important;
  height:165px !important;
  object-fit:cover !important;
  display:block !important;
}

.service-large-row .service-card-gap{
  height:34px !important;
  flex:0 0 34px !important;
}

.service-large-row .service-card h3{
  padding:0 18px !important;
  margin:0 !important;
  min-height:62px !important;
  font-size:15px !important;
  line-height:1.18 !important;
  font-weight:900 !important;
  color:#0a1815 !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  text-align:center !important;
}

.service-large-row .service-card .learn-more{
  margin-top:auto !important;
  padding-bottom:26px !important;
  display:block !important;
  color:#007146 !important;
  text-decoration:none !important;
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:.05em !important;
}

@media (max-width:1100px){
  .services-large-wrap{
    width:calc(100vw - 48px) !important;
  }
  .service-large-row{
    gap:18px !important;
  }
  .service-large-row .service-card img{
    height:145px !important;
  }
}

@media (max-width:900px){
  .service-large-row{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
  .service-large-row .service-card img{
    height:190px !important;
  }
}

@media (max-width:600px){
  .service-large-row{
    grid-template-columns:1fr !important;
  }
}


/* backup copy of home-services-redline-final is in index.html critical CSS */

/* FINAL: Fixed header / navigation */
body{
  padding-top:112px !important;
}

.site-header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:9999 !important;
  background:#fff !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.06) !important;
}

@media(max-width:760px){
  body{
    padding-top:96px !important;
  }
}


/* =====================================================================
   EXEC-REQUESTED REVISIONS (About Us + Our Services markups)
   Placed at end of file to win the cascade.
   ===================================================================== */

/* --- SERVICES PAGE: widen service cards to match home-page full width --- */
.service-list-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  justify-content:stretch !important;
  gap:28px !important;
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
@media(max-width:1100px){
  .service-list-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}
@media(max-width:650px){
  .service-list-grid{
    grid-template-columns:1fr !important;
  }
}

/* --- SERVICES PAGE: intro sub-paragraph under the hero lead --- */
.inner-hero-sub{
  font-size:18px;
  line-height:1.6;
  max-width:820px;
  color:#007146;
  margin-top:14px;
  font-weight:600;
}

/* --- ABOUT PAGE: scale the "Our Beginning" photo ~30% smaller --- */
.beginning-photo{
  width:70% !important;
  max-width:70% !important;
  height:auto !important;
  justify-self:center;
  align-self:center;
}
@media(max-width:1000px){
  .beginning-photo{
    width:100% !important;
    max-width:100% !important;
  }
}

/* --- ABOUT PAGE: Core Disciplines as a horizontal multi-column list --- */
.check-list-cols{
  grid-template-columns:repeat(3, 1fr);
  margin-top:8px;
}
@media(max-width:800px){
  .check-list-cols{
    grid-template-columns:1fr;
  }
}

/* --- ABOUT PAGE: vertical company-milestone timeline --- */
.milestone-timeline{
  list-style:none;
  margin:30px 0 0;
  padding:0 0 0 26px;
  position:relative;
}
.milestone-timeline:before{
  content:"";
  position:absolute;
  left:6px;
  top:6px;
  bottom:6px;
  width:2px;
  background:var(--green2, #007146);
}
.milestone-timeline li{
  position:relative;
  padding:0 0 22px 22px;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 12px;
}
.milestone-timeline li:last-child{
  padding-bottom:0;
}
.milestone-timeline li:before{
  content:"";
  position:absolute;
  left:-26px;
  top:6px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--green2, #007146);
  box-shadow:0 0 0 3px #fff, 0 0 0 5px rgba(0,113,70,0.25);
}
.milestone-year{
  color:var(--green, #00432d);
  font-weight:900;
  font-size:18px;
  min-width:70px;
  letter-spacing:.01em;
}
.milestone-text{
  color:#263f38;
  font-size:17px;
  line-height:1.5;
}

/* --- SERVICES PAGE: match card text size/style to the homepage "OUR SERVICES" cards --- */
.service-list-card div{
  padding:24px 16px 26px !important;
  text-align:center !important;
}
.service-list-card h3{
  color:#0a1815 !important;
  font-size:14px !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  text-align:center !important;
  min-height:44px !important;
  margin:0 0 10px 0 !important;
  text-transform:uppercase !important;
}
.service-list-card p{
  color:#263f38 !important;
  font-size:13px !important;
  line-height:1.5 !important;
  text-align:center !important;
  margin:0 !important;
}

/* --- SERVICES PAGE: LEARN MORE link + even card heights (match homepage) --- */
.service-list-card{
  display:flex !important;
  flex-direction:column !important;
}
.service-list-card div{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  padding:26px 16px 26px !important;
  text-align:center !important;
}
.service-list-card .learn-more{
  display:block !important;
  margin-top:auto !important;
  padding-top:18px !important;
  color:#007146 !important;
  text-decoration:none !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.06em !important;
}


/* --- ABOUT PAGE: tagline band --- */
.tagline-band{
  background:#f4f7f5;
  border-top:1px solid #e6ece9;
  border-bottom:1px solid #e6ece9;
  padding:34px 0;
  text-align:center;
}
.tagline-band p{
  margin:0;
  font-size:clamp(20px,2.2vw,30px);
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--green,#007146);
}

/* --- SERVICES PAGE: unbold + justify intro sub-paragraph --- */
.inner-hero-sub--plain{
  font-weight:400;
  text-align:justify;
  color:#183f35;
  margin-top:22px;
}


/* --- ABOUT PAGE: right-align the Our People block --- */
.people-right{
  text-align:right;
}
.people-right .btn{
  margin-left:auto;
}


/* --- ABOUT PAGE: spacing before Our Beginning closing line --- */
.beginning-closing{
  margin-top:1em;
}

/* ---------- Contact hero: rendering / built before-after slider ---------- */

.img-compare{
  position:relative;
  overflow:hidden;
  background:#e8ecea;
  cursor:ew-resize;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
}

.img-compare .compare-img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
}

.img-compare .compare-before{
  clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0);
  transition:clip-path .35s ease;
}

.img-compare.is-active .compare-before{
  transition:none;
}

.img-compare .compare-divider{
  position:absolute;
  top:0;
  bottom:0;
  left:var(--pos,50%);
  width:3px;
  margin-left:-1.5px;
  background:#fff;
  box-shadow:0 0 6px rgba(0,0,0,.35);
  pointer-events:none;
  transition:left .35s ease;
}

.img-compare.is-active .compare-divider{
  transition:none;
}

.img-compare .compare-handle{
  position:absolute;
  top:50%;
  left:50%;
  width:42px;
  height:42px;
  margin:-21px 0 0 -21px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}

.img-compare .compare-handle::before,
.img-compare .compare-handle::after{
  content:"";
  position:absolute;
  top:50%;
  margin-top:-5px;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
}

.img-compare .compare-handle::before{
  left:9px;
  border-right:7px solid #183f35;
}

.img-compare .compare-handle::after{
  right:9px;
  border-left:7px solid #183f35;
}

.img-compare .compare-tag{
  position:absolute;
  bottom:16px;
  z-index:2;
  padding:5px 11px;
  background:rgba(10,24,21,.72);
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.09em;
  pointer-events:none;
}

.img-compare .compare-tag-l{ left:11%; }
.img-compare .compare-tag-r{ right:9%; }

@media(max-width:900px){
  .img-compare .compare-tag-l{ left:14px; }
  .img-compare .compare-tag-r{ right:14px; }
}


/* --- ABOUT PAGE: enlarge the "Our Beginning" anniversary photo by 50% --- */
/* Widens the photo's grid column and the photo within it. Combined effect is
   exactly 1.5x the previous rendered width at every viewport. */
.two-col-beginning{
  grid-template-columns:1.2fr 1fr;
}
.two-col-beginning .beginning-photo{
  width:96% !important;
  max-width:96% !important;
}

@media(max-width:1000px){
  .two-col-beginning{
    grid-template-columns:1fr;
  }
  .two-col-beginning .beginning-photo{
    width:100% !important;
    max-width:100% !important;
  }
}


/* --- SERVICE PAGES: full-width layout after the side directory was removed --- */
.service-detail-grid-full{
  grid-template-columns:1fr;
}
.service-detail-grid-full .scope-grid{
  grid-template-columns:repeat(4, 1fr);
}

@media(max-width:1100px){
  .service-detail-grid-full .scope-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media(max-width:650px){
  .service-detail-grid-full .scope-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================================
   GLOBAL TYPOGRAPHY + LAYOUT NORMALIZATION
   Appended last so these win over the earlier per-page overrides.
   ========================================================================= */

/* --- 1. Section banner headings: identical on every page ---------------- */
/* Was 42px/900 on most pages but 22px with wide tracking on the Home page. */
.section-title{
  text-align:center !important;
  margin-bottom:26px !important;
}
.section-title h2{
  color:var(--green) !important;
  font-size:42px !important;
  font-weight:900 !important;
  line-height:1.05 !important;
  letter-spacing:-.025em !important;
  margin:0 !important;
}
.section-title span{
  display:block !important;
  width:46px !important;
  height:3px !important;
  background:var(--green2) !important;
  margin:12px auto 0 !important;
}

/* --- 2. Column headings: match their paired h2 -------------------------- */
/* "Our People" (About) and "Culture" (Careers) were 36px next to a 42px h2. */
.people-block h3,
.col-heading-block h3{
  color:var(--green) !important;
  font-size:42px !important;
  font-weight:700 !important;
  line-height:1.05 !important;
  letter-spacing:-.025em !important;
  margin-bottom:22px !important;
}

/* --- 3. Card headings: one size across every card ----------------------- */
/* Benefit + office cards were 36px against the 21px used by people cards.  */
.benefit-card h3,
.office-card h3,
.person-card h3{
  color:var(--green) !important;
  font-size:21px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  letter-spacing:normal !important;
  margin-bottom:10px !important;
}

/* --- 4. Paragraph spacing ---------------------------------------------- */
/* Consecutive paragraphs ran together with no gap (Careers "Who We Are",
   About "Our Beginning"). Adds the missing break without trailing space.   */
.content-section p + p,
.inner-hero p + p{
  margin-top:1.05em !important;
}

/* --- 5. Slogan banners: same height and type on Home and About ---------- */
.divider-slogan-text,
.tagline-band{
  box-sizing:border-box !important;
  padding:22px 20px !important;
  text-align:center !important;
  border-top:1px solid #e6ece9 !important;
  border-bottom:1px solid #e6ece9 !important;
}
.divider-slogan-text,
.tagline-band p{
  font-size:32px !important;
  font-weight:700 !important;
  line-height:1.25 !important;
  letter-spacing:-.01em !important;
  margin:0 !important;
}

@media(max-width:900px){
  .divider-slogan-text,
  .tagline-band{
    padding:16px 16px !important;
  }
  .divider-slogan-text,
  .tagline-band p{
    font-size:22px !important;
  }
}

/* --- 6. Home hero now shares the inner-hero treatment ------------------- */
/* The photo sat outside .page-wrap and tucked under the header; it now
   occupies the same slot and size as every other page. The headline keeps a
   smaller clamp because five stacked service lines cannot fit at 84px.     */
.home-hero h1{
  font-size:clamp(34px, 3.1vw, 50px) !important;
  line-height:1.12 !important;
  letter-spacing:-.02em !important;
}

/* --- 7. Home CTA band: match the rest of the site ----------------------- */
/* Was Inter 300 at 60px/48px with 20px body copy; the site is 700-900 with
   17px body copy.                                                          */
.lets-work-title h2{
  font-size:48px !important;
  font-weight:800 !important;
  line-height:1.06 !important;
  letter-spacing:-.025em !important;
}
.lets-work-card h3,
a.lets-work-card h3{
  font-size:26px !important;
  font-weight:700 !important;
  line-height:1.15 !important;
  letter-spacing:-.02em !important;
}
.lets-work-card p,
a.lets-work-card p{
  font-size:17px !important;
  line-height:1.65 !important;
  color:#263f38 !important;
}

@media(max-width:900px){
  .lets-work-title h2{ font-size:36px !important; }
  .lets-work-card h3,
  a.lets-work-card h3{ font-size:24px !important; }
}

/* --- 8. CTA cards: SALEM mark appears in the top-right corner on hover --- */
/* The green corner square that used to sit at the upper right of the white
   card is now the square SALEM logo. The small green rule under each
   heading is left exactly as it was.                                       */
.lets-work-card,
a.lets-work-card{
  overflow:visible !important;
}
.lets-work-card::before,
a.lets-work-card::before{
  content:"";
  position:absolute;
  top:-26px;
  right:-26px;
  width:96px;
  height:96px;
  background:#fff url("../images/salem-mark-square.png") center / 86% no-repeat;
  border:1px solid #d9e2dc;
  border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.18);
  opacity:0;
  transform:scale(.88);
  transform-origin:top right;
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
  z-index:2;
}
.lets-work-card:hover::before,
.lets-work-card:focus-visible::before,
a.lets-work-card:hover::before,
a.lets-work-card:focus-visible::before{
  opacity:1;
  transform:scale(1);
}

@media(max-width:1100px){
  .lets-work-card::before,
  a.lets-work-card::before{
    width:72px;
    height:72px;
    top:-18px;
    right:-18px;
    border-radius:8px;
  }
}

@media(prefers-reduced-motion:reduce){
  .lets-work-card::before,
  a.lets-work-card::before{ transition:none; }
}

/* --- 9. Pre-existing bug: hero image overflowed the viewport ------------ */
/* .inner-hero-grid was "42% 58%" PLUS a 48px gap, so the columns totalled
   100% + 48px and the angled photo pushed past .page-wrap — a horizontal
   scrollbar on every page below ~1400px. fr units divide the space that is
   left after the gap, so the photo now ends flush with the page margin.    */
.inner-hero-grid{
  min-width:0;
}
@media(min-width:1001px){
  .inner-hero-grid{
    grid-template-columns:42fr 58fr !important;
  }
}
@media(max-width:1000px){
  .inner-hero-grid{
    grid-template-columns:1fr !important;
  }
}
.inner-hero-grid > *{
  min-width:0;
  max-width:100%;
}

/* Hero photo pinned to the top of the row on every page. Previously the row
   was centre-aligned, so pages with taller headline copy (Home, Services)
   pushed the photo down and it appeared to move between tabs. The copy
   stays vertically centred; only the photo is pinned.                      */
.inner-hero-img{
  align-self:start !important;
}


/* --- 10. Pre-existing bug: Home CTA band overflowed on phones ----------- */
/* The "Updated CTA title" block re-declared .lets-work-gradient-inner with
   !important AFTER its own media queries, so the collapse-to-one-column
   rule never applied. The three columns stayed side by side and forced the
   page ~54px wider than the viewport below 430px.                          */
@media(max-width:1100px){
  .lets-work-gradient-inner{
    grid-template-columns:1fr !important;
    padding:0 28px !important;
    gap:26px !important;
  }
  .lets-work-gradient-inner > *{
    min-width:0 !important;
    max-width:100% !important;
  }
  .lets-work-title h2{
    max-width:100% !important;
  }
}

@media(max-width:768px){
  .lets-work-gradient-inner{
    padding:0 20px !important;
    gap:22px !important;
  }
  .lets-work-card,
  a.lets-work-card{
    padding:28px 22px !important;
  }
}


/* --- 11. Home headline on phones ---------------------------------------- */
/* "Construction Inspections" is held on one line by the non-breaking
   space, so the type has to scale down to fit narrow screens rather than
   wrap mid-phrase.                                                         */
@media(max-width:620px){
  .home-hero h1{
    font-size:clamp(21px, 6.8vw, 34px) !important;
    line-height:1.16 !important;
  }
}


/* --- 12. Dead decorative square on the last CTA card -------------------- */
/* .lets-work-card:last-child::after is a 120px lime square offset to
   right:-26px with z-index:-1, so it paints behind the section and is never
   visible — but it still extended the page 26px past the viewport on
   phones. Disabled rather than left as an invisible overflow source.       */
.lets-work-card:last-child::after,
a.lets-work-card:last-child::after{
  display:none !important;
}


/* --- 13. Compare-slider labels: equal inset from the slanted edges ------- */
/* The photo is clipped to polygon(8% 0, 100% 0, 92% 100%, 0 100%), so along
   the BOTTOM edge the visible image runs from 0% to 92% - not 0% to 100%.
   The old left:11% / right:9% therefore sat at completely different
   distances from their edges: COMPLETED looked flush right while RENDERING
   floated well inside the left edge.
   The labels sit ~27px above the bottom, where the slant has closed to about
   93% of the way, so the 8% is split 0.55% / 7.45% rather than 0% / 8%.
   Both labels then land the same distance in from their own edge.          */
.img-compare .compare-tag-l{ left:calc(0.55% + 14px) !important; }
.img-compare .compare-tag-r{ right:calc(7.45% + 14px) !important; }

@media(max-width:1000px){
  /* clip-path is removed at this breakpoint - the photo becomes a plain
     rectangle, so the labels simply sit an equal distance from each edge */
  .img-compare .compare-tag-l{ left:14px !important; }
  .img-compare .compare-tag-r{ right:14px !important; }
}


/* --- 14. Home CTA band: soften and unify the two cards ------------------- */
/* Pure white on the dark green read as two hard cut-outs. A very light warm
   grey, matching rounded corners and a lighter shadow tie the cards to the
   corner logo tile and to each other.                                      */
.lets-work-card,
a.lets-work-card{
  background:#f5f8f6 !important;
  border:1px solid rgba(255,255,255,.55) !important;
  border-radius:14px !important;
  box-shadow:0 10px 26px rgba(0,0,0,.20) !important;
  padding:40px 40px 36px !important;
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease !important;
}
.lets-work-card:hover,
a.lets-work-card:hover,
.lets-work-card:focus-visible,
a.lets-work-card:focus-visible{
  background:#fff !important;
  transform:translateY(-3px) !important;
  box-shadow:0 16px 34px rgba(0,0,0,.26) !important;
}

/* headings now sit on a single line */
.lets-work-card h3,
a.lets-work-card h3{
  white-space:nowrap !important;
}

/* At the narrow end of the 3-column layout the card gets tight, so ease the
   heading down a step rather than let a nowrap line run past the card edge. */
@media(max-width:1320px) and (min-width:1101px){
  .lets-work-card h3,
  a.lets-work-card h3{
    font-size:22px !important;
  }
}
@media(max-width:1220px) and (min-width:1101px){
  .lets-work-card,
  a.lets-work-card{
    padding:32px 26px !important;
  }
}

/* soften the hard-edged accent bars so they match the rounded corners */
.card-accent{
  border-radius:2px !important;
}
.lets-work-accent{
  border-radius:3px !important;
}

/* the corner logo tile picks up the same radius language */
.lets-work-card::before,
a.lets-work-card::before{
  border-radius:12px !important;
}

@media(max-width:1100px){
  .lets-work-card,
  a.lets-work-card{
    border-radius:12px !important;
    padding:32px 28px !important;
  }
  .lets-work-card h3,
  a.lets-work-card h3{
    white-space:normal !important;
  }
  .lets-work-card::before,
  a.lets-work-card::before{
    border-radius:10px !important;
  }
}


/* --- 15. CTA cards: the accent rule grows under the whole title on hover -- */
/* The bar is re-attached to the heading itself, and the heading is shrink-
   wrapped to its text (width:fit-content), so "100%" means exactly the width
   of the title - not the width of the card. The standalone .card-accent div
   is retired and its spacing rebuilt on the heading.                        */
.lets-work-card h3,
a.lets-work-card h3{
  display:block !important;
  width:fit-content !important;
  max-width:100% !important;
  margin:0 0 22px 0 !important;
}
.lets-work-card h3::after,
a.lets-work-card h3::after{
  content:"";
  display:block;
  width:58px;
  height:4px;
  border-radius:2px;
  background:#9ac43a;
  margin-top:22px;
  transition:width .38s cubic-bezier(.33,.9,.35,1);
}
.lets-work-card:hover h3::after,
.lets-work-card:focus-visible h3::after,
a.lets-work-card:hover h3::after,
a.lets-work-card:focus-visible h3::after{
  width:100%;
}

/* the old separate bar is no longer used */
.lets-work-card .card-accent,
a.lets-work-card .card-accent{
  display:none !important;
}

@media(prefers-reduced-motion:reduce){
  .lets-work-card h3::after,
  a.lets-work-card h3::after{ transition:none; }
}


/* --- 16. Service directory tiles (Environmental, Drilling) -------------------------------- */
/* Five categories of uneven length. A balanced multi-column flow beats a
   fixed grid here: the browser distributes the cards by height, so there is
   no half-empty final row and no card stretched to match a taller sibling.  */
.svc-lead{
  font-weight:700 !important;
  color:var(--green) !important;
  margin-top:26px !important;
}

.svc-grid{
  columns:3;
  column-gap:26px;
  margin-top:20px;
}

.svc-card{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
  display:block;
  width:100%;
  border:1px solid var(--border);
  background:#fff;
  padding:24px 24px 22px;
  margin:0 0 26px;
}

.svc-card h3{
  color:var(--green);
  font-size:19px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:normal;
  margin:0;
}

.svc-card-rule{
  display:block;
  width:44px;
  height:3px;
  background:#9ac43a;
  border-radius:2px;
  margin:12px 0 16px;
}

.svc-list{
  list-style:none;
  margin:0;
  padding:0;
}

.svc-list li{
  position:relative;
  padding-left:22px;
  margin-bottom:9px;
  font-size:16px;
  line-height:1.5;
  color:#263f38;
}

.svc-list li:last-child{
  margin-bottom:0;
}

.svc-list li:before{
  content:"\2713";
  position:absolute;
  left:0;
  top:0;
  color:var(--green2);
  font-weight:900;
  font-size:14px;
  line-height:1.65;
}

@media(max-width:1200px){
  .svc-grid{ columns:2; }
}

@media(max-width:760px){
  .svc-grid{ columns:1; }
  .svc-card{ padding:22px 20px 20px; }
}


/* --- 17. Service directory tiles: hover treatment ---------------------------- */
/* Same three-part gesture as the home CTA cards: the tile lifts, the green
   rule grows out under the heading, and the SALEM mark fades in at the
   upper-right corner.                                                       */
.svc-card{
  position:relative;
  transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}

.svc-card:hover{
  transform:translateY(-3px);
  border-color:#c5d5ce;
  box-shadow:0 14px 30px rgba(0,0,0,.14), 0 2px 5px rgba(0,0,0,.07);
}

/* room at the top right so the mark never sits on the heading text */
.svc-card h3{
  padding-right:62px;
}

/* the rule grows from its stub to the full width of the tile */
.svc-card-rule{
  transition:width .38s cubic-bezier(.33,.9,.35,1);
}

.svc-card:hover .svc-card-rule{
  width:100%;
}

/* smaller sibling of the home-page corner mark, tucked inside the tile */
.svc-card::before{
  content:"";
  position:absolute;
  top:12px;
  right:16px;
  width:34px;
  height:34px;
  background:#fff url("../images/salem-mark-square.png") center / 86% no-repeat;
  border:1px solid #d9e2dc;
  border-radius:6px;
  box-shadow:0 3px 7px rgba(0,0,0,.15);
  opacity:0;
  transform:scale(.86);
  transform-origin:top right;
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
  z-index:2;
}

.svc-card:hover::before{
  opacity:1;
  transform:scale(1);
}

@media(prefers-reduced-motion:reduce){
  .svc-card,
  .svc-card-rule,
  .svc-card::before{ transition:none; }
  .svc-card:hover{ transform:none; }
}


/* --- 18. Two-category variant of the service directory ------------------- */
/* The Drilling page has two categories rather than five, so the three-column
   flow would leave an empty column. Two columns keeps the pair balanced.    */
.svc-grid-2{
  columns:2;
}

/* The cards carry a 26px bottom margin to space them when stacked. A
   multi-column container TRIMS that margin at the foot of a column, but a
   single-column one keeps it - so the gap above "Contact us..." was 6px in
   column mode and 32px when stacked. The footnote's own margin compensates
   for whichever case applies, landing on 34px everywhere. The two grids drop
   to one column at different widths (760px / 900px), so each gets its own
   breakpoint.                                                               */
.svc-footnote{
  margin-top:34px !important;
}

@media(max-width:900px){
  .svc-grid-2 + .svc-footnote{
    margin-top:8px !important;
  }
}

@media(max-width:760px){
  .svc-grid + .svc-footnote{
    margin-top:8px !important;
  }
}

.svc-cta{
  margin-top:22px;
}

@media(max-width:900px){
  .svc-grid-2{
    columns:1;
  }
}


/* --- 19. Centred service-page heading ----------------------------------- */
/* Used on the Materials Testing / Construction Inspections page, whose title
   is long enough to want the extra symmetry.                                */
.svc-heading-center{
  text-align:center !important;
}


/* --- 20. About Us bottom photo: depth ------------------------------------ */
/* Deeper than the service-tile shadow - this is a large photo on open white,
   so it needs more spread to read as lifted off the page.                   */
.beginning-photo{
  box-shadow:0 26px 54px rgba(0,0,0,.24), 0 8px 18px rgba(0,0,0,.13);
}

/* --- 21. About Us hero: protect the heads from the crop ------------------ */
/* The hero is a fixed 390px tall while its column widens with the viewport,
   so object-fit:cover trims the photo's height by up to ~31% on a wide
   screen. Centred, that cut reached the taller heads in the back row.
   Biasing the crop upward keeps everyone's head clear; what gets sacrificed
   instead is grass and the lower edge of the tablecloth.                    */
.about-hero-photo{
  object-position:50% 20% !important;
}


/* --- 22. Our People hero: keep the drill masts in frame ------------------ */
/* The hero crops height on wide screens; biasing the crop upward keeps the
   tops of the masts, trimming foreground ground instead.                    */
.people-hero-photo{
  object-position:50% 25% !important;
}

@media(max-width:1000px){
  /* the stacked hero is only 280px tall but full width, so it crops harder -
     pull the window further up to keep the mast tops */
  .people-hero-photo{
    object-position:50% 12% !important;
  }
}


/* --- 23. Current Employment Opportunities hero -------------------------- */
/* This photo needs the mechanical bull in frame for the shot to read - a
   tighter crop cuts the rider at the waist and the pose stops making sense.
   Showing rider plus bull needs a taller frame than the standard 390px
   hero, so this one page gets a deeper band and drops to natural height
   once the layout stacks.                                                  */
.openings-hero-photo{
  height:460px !important;
  object-position:50% 50% !important;
}

@media(max-width:1000px){
  .openings-hero-photo{
    height:auto !important;
  }
}


/* --- 24. Performance: responsive image wrappers ------------------------- */
/* <picture> is only a delivery wrapper for the WebP sources. display:contents
   keeps the inner <img> as the direct grid/flex item so every existing
   layout rule continues to apply to it unchanged.                          */
picture{
  display:contents;
}
/* <source> must not become a grid/flex item of the parent - without this it
   adds a phantom track and pushes the image onto a second row. */
picture > source{
  display:none !important;
}
/* Intrinsic width/height attributes were added to every image to stop layout
   shift. The height attribute is a presentational hint, so it must not be
   allowed to win over aspect-ratio on images sized that way.               */
.founder-card img{
  height:auto;
}