:root {

  /* Foundation LR — UND-inspired color palette */

  --blue-950: #003D1B;

  --blue-900: #005B28;

  --blue-800: #007A36;

  --blue-700: #009A44;

  --blue-600: #00A94F;

  --blue-100: #E6F5ED;

  --blue-50: #F3FAF6;



  --ink: #111111;

  --muted: #5F6368;

  --line: #D9D9D9;

  --surface: #FFFFFF;

  --surface-2: #F5F5F5;

  --white: #FFFFFF;



  --max: 1180px;



  --shadow: 0 16px 40px rgba(0, 61, 27, .12);

}



/* Base */



* {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  margin: 0;

  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",

    sans-serif;

  color: var(--ink);

  background: #fff;

  line-height: 1.65;

}



a {

  color: inherit;

  text-decoration: none;

}



img {

  max-width: 100%;

}



.container {

  width: min(calc(100% - 40px), var(--max));

  margin-left: auto;

  margin-right: auto;

}



/* Typography */



.eyebrow {

  font-size: .78rem;

  font-weight: 800;

  letter-spacing: .14em;

  text-transform: uppercase;

  color: var(--blue-600);

  margin: 0 0 14px;

}



h1,

h2,

h3 {

  line-height: 1.08;

  letter-spacing: -.025em;

  margin-top: 0;

}



h1 {

  font-size: clamp(2.8rem, 6vw, 5.6rem);

}



h2 {

  font-size: clamp(2rem, 4vw, 3.5rem);

}



h3 {

  font-size: 1.35rem;

}



p {

  margin: 0 0 1.15rem;

}



.lead {

  font-size: clamp(1.08rem, 2vw, 1.28rem);

  color: var(--muted);

  max-width: 760px;

}



/* Header */



.site-header {

  position: sticky;

  top: 0;

  z-index: 20;

  background: rgba(255, 255, 255, .95);

  backdrop-filter: blur(14px);

  border-bottom: 1px solid rgba(0, 154, 68, .16);

}



.nav-wrap {

  height: 78px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

}



.brand {

  display: flex;

  align-items: center;

  gap: 12px;

  font-weight: 800;

  color: var(--blue-950);

  letter-spacing: -.02em;

}



/* Legacy FLR block — retained in case an older page still uses it */



.brand-mark {

  display: grid;

  place-items: center;

  width: 42px;

  height: 42px;

  background: var(--blue-800);

  color: white;

  border-radius: 8px;

  font-size: .92rem;

  letter-spacing: .04em;

}



/* New Foundation LR logo */



.brand-logo {

  display: flex;

  align-items: center;

  padding: 0;

  flex-shrink: 0;

}



.site-logo {

  display: block;

  width: 300px;

  height: auto;

  max-height: 54px;

  object-fit: contain;

  object-position: left center;

}



.nav-links {

  display: flex;

  align-items: center;

  gap: 28px;

  font-size: .94rem;

  font-weight: 650;

  white-space: nowrap;

}



.nav-links a:hover,

.nav-links a.active {

  color: var(--blue-600);

}



.menu-button {

  display: none;

  border: 0;

  background: none;

  font-size: 1.6rem;

  color: var(--blue-950);

}



/* Buttons */



.button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 13px 19px;

  border-radius: 7px;

  background: var(--blue-700);

  color: #fff;

  font-weight: 750;

  border: 1px solid var(--blue-700);

  transition: .2s;

}



.button:hover {

  transform: translateY(-1px);

  background: var(--blue-800);

}



.button.secondary {

  background: transparent;

  color: var(--blue-900);

  border-color: #80CCA2;

}



.button.light {

  background: #fff;

  color: var(--blue-900);

  border-color: #fff;

}



/* Hero */



.hero {

  position: relative;

  overflow: hidden;

  background: linear-gradient(

    125deg,

    var(--blue-950),

    var(--blue-800)

  );

  color: #fff;

  padding: 110px 0 100px;

}



.hero:after {

  content: "";

  position: absolute;

  width: 540px;

  height: 540px;

  border: 1px solid rgba(255, 255, 255, .12);

  border-radius: 50%;

  right: -150px;

  top: -180px;

  box-shadow:

    0 0 0 80px rgba(255, 255, 255, .025),

    0 0 0 160px rgba(255, 255, 255, .018);

}



.hero .eyebrow {

  color: #80D6A6;

}



.hero h1 {

  max-width: 950px;

  margin-bottom: 24px;

}



.hero .lead {

  color: #D9F2E4;

  max-width: 810px;

}



.hero-actions {

  display: flex;

  gap: 12px;

  flex-wrap: wrap;

  margin-top: 34px;

}



/* Images */



.content-photo {

  width: 100%;

  display: block;

  border-radius: 12px;

  object-fit: cover;

  aspect-ratio: 16 / 9;

  box-shadow: 0 10px 30px rgba(0, 61, 27, .10);

}



.photo-card-stack {

  display: grid;

  gap: 20px;

}



.service-photo {

  margin: 36px 0;

}



/* Homepage workforce banner */



.home-photo-section {

  padding: 28px 0 0;

}



.home-workforce-photo {

  aspect-ratio: 21 / 8;

  object-position: center;

}



/* Approach photo */



.approach-photo-section {

  padding-top: 20px;

  padding-bottom: 20px;

}



.approach-photo {

  aspect-ratio: 21 / 8;

  object-position: center;

}



/* About photos */



.about-photo {

  margin: 36px 0;

}



/* Sections */



.section {

  padding: 92px 0;

}



.section.alt {

  background: var(--blue-50);

}



.section-head {

  display: flex;

  justify-content: space-between;

  gap: 50px;

  align-items: end;

  margin-bottom: 42px;

}



.section-head h2 {

  max-width: 680px;

  margin-bottom: 0;

}



/* Cards */



.pillars {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

}



.card {

  background: #fff;

  border: 1px solid var(--line);

  border-radius: 12px;

  padding: 34px;

  box-shadow: 0 7px 24px rgba(0, 61, 27, .05);

}



.card-number {

  font-size: .76rem;

  font-weight: 850;

  letter-spacing: .12em;

  color: var(--blue-600);

  margin-bottom: 42px;

}



.card h3 {

  font-size: 1.7rem;

  color: var(--blue-900);

}



.card ul {

  padding-left: 19px;

  color: var(--muted);

}



/* Split content */



.split {

  display: grid;

  grid-template-columns: 1.05fr .95fr;

  gap: 72px;

  align-items: center;

}



/* Dark green feature panels */



.feature-panel {

  background: var(--blue-950);

  color: #ffffff;

  border-radius: 16px;

  padding: 44px;

  box-shadow: var(--shadow);

}



/* All regular text inside dark panels is white */



.feature-panel h2,

.feature-panel h3,

.feature-panel h4,

.feature-panel p,

.feature-panel .lead,

.feature-panel .check {

  color: #ffffff;

}



/* Keep eyebrow headings a lighter green */



.feature-panel .eyebrow {

  color: #A8E6C2;

}



/* Process flow */



.flow {

  display: grid;

  gap: 9px;

  margin-top: 26px;

}



.flow-step {

  display: flex;

  align-items: center;

  justify-content: space-between;

  background: rgba(255, 255, 255, .08);

  padding: 15px 17px;

  border-radius: 7px;

  font-weight: 750;

  color: #ffffff;

}



.flow-step span {

  color: #80D6A6;

  font-size: .8rem;

}



/* ==========================================

   CHECKLISTS

   Consistent checkmark and text alignment

   \========================================== */



.checks {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  column-gap: 28px;

  row-gap: 22px;

  margin-top: 28px;

  align-items: start;

}



/* Each item uses a fixed column for the checkmark */



.check {

  display: grid;

  grid-template-columns: 24px minmax(0, 1fr);

  column-gap: 12px;

  align-items: start;



  margin: 0;

  padding: 0;



  color: var(--muted);

  line-height: 1.6;

  min-width: 0;

}



/* Checkmarks are part of the grid, not absolutely positioned */



.check::before {

  content: "✓";

  display: block;

  position: static;



  width: 24px;

  height: auto;



  margin: 0;

  padding: 0;



  color: var(--blue-600);

  font-size: 1.2em;

  font-weight: 900;

  line-height: 1.6;

  text-align: left;

}



/* Dark panel checklist text is always white */



.feature-panel .checks .check {

  color: #ffffff;

}



/* Checkmarks stay green inside dark panels */



.feature-panel .check::before {

  color: #00A94F;

}



/* White sections retain gray checklist text */



.section:not(.alt) .check {

  color: var(--muted);

}



/* Dark panels override the white-section text rule */



.section:not(.alt) .feature-panel .check {

  color: #ffffff;

}



/* Quote band */



.quote-band {

  background: var(--blue-100);

  border-top: 1px solid #C5E8D5;

  border-bottom: 1px solid #C5E8D5;

  padding: 56px 0;

  text-align: center;

}



.quote-band p {

  font-size: clamp(1.4rem, 3vw, 2.3rem);

  font-weight: 800;

  color: var(--blue-950);

  max-width: 900px;

  margin: auto;

  line-height: 1.25;

}



/* CTA */



.cta {

  background: var(--blue-800);

  color: #fff;

  border-radius: 16px;

  padding: 52px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 40px;

}



.cta h2 {

  font-size: clamp(2rem, 4vw, 3rem);

  margin-bottom: 10px;

}



.cta p {

  color: #DCF4E7;

  margin: 0;

  max-width: 700px;

}



/* Interior page hero */



.page-hero {

  background: var(--blue-50);

  padding: 90px 0 72px;

  border-bottom: 1px solid var(--line);

}



.page-hero h1 {

  font-size: clamp(2.7rem, 5vw, 4.6rem);

  color: var(--blue-950);

  max-width: 900px;

  margin-bottom: 20px;

}



/* Interior content */



.content-grid {

  display: grid;

  grid-template-columns: .75fr 1.25fr;

  gap: 70px;

}



.sticky-label {

  position: sticky;

  top: 120px;

}



.prose h2 {

  font-size: 2rem;

  color: var(--blue-950);

  margin-top: 48px;

}



.prose h2:first-child {

  margin-top: 0;

}



.prose h3 {

  color: var(--blue-800);

  margin-top: 30px;

}



.prose p,

.prose li {

  color: var(--muted);

}



.prose strong {

  color: var(--ink);

}



/* Services */



.service-block {

  padding: 36px 0;

  border-bottom: 1px solid var(--line);

}



.service-block:first-child {

  padding-top: 0;

}



.service-block h2 {

  color: var(--blue-900);

}



/* Contact */



.contact-grid {

  display: grid;

  grid-template-columns: .9fr 1.1fr;

  gap: 60px;

}



.contact-card {

  background: var(--blue-50);

  border: 1px solid var(--line);

  padding: 38px;

  border-radius: 12px;

}



form {

  display: grid;

  gap: 18px;

}



label {

  font-weight: 700;

  font-size: .9rem;

}



input,

textarea {

  width: 100%;

  padding: 14px;

  border: 1px solid #B8D8C6;

  border-radius: 6px;

  font: inherit;

  margin-top: 7px;

}



textarea {

  min-height: 160px;

  resize: vertical;

}



.form-note {

  font-size: .85rem;

  color: var(--muted);

}



/* Footer */



footer {

  background: #003D1B;

  color: #CBE5D6;

  padding: 58px 0 28px;

  margin-top: 0;

}



.footer-grid {

  display: grid;

  grid-template-columns: 1.6fr .8fr .8fr;

  gap: 50px;

}



.footer-brand {

  color: white;

  font-size: 1.2rem;

  font-weight: 800;

}



.footer-title {

  color: white;

  font-weight: 750;

  margin-bottom: 12px;

}



.footer-links {

  display: grid;

  gap: 8px;

}



.footer-bottom {

  border-top: 1px solid rgba(255, 255, 255, .12);

  margin-top: 42px;

  padding-top: 22px;

  font-size: .85rem;

  color: #91BCA3;

}



/* Tablet */



@media (max-width: 900px) {

  .site-logo {

    width: 220px;

    max-height: 44px;

  }



  .nav-wrap {

    gap: 16px;

  }



  .nav-links {

    gap: 18px;

  }

}



/* Mobile */



@media (max-width: 820px) {

  .nav-links {

    display: none;

    position: absolute;

    top: 78px;

    left: 0;

    right: 0;

    background: #fff;

    padding: 24px 20px;

    border-bottom: 1px solid var(--line);

    flex-direction: column;

    align-items: flex-start;

    white-space: normal;

  }



  .nav-links.open {

    display: flex;

  }



  .menu-button {

    display: block;

  }



  .nav-links .button {

    width: 100%;

  }



  .hero {

    padding: 78px 0;

  }



  .section {

    padding: 68px 0;

  }



  .pillars,

  .split,

  .content-grid,

  .contact-grid,

  .footer-grid {

    grid-template-columns: 1fr;

  }



  .section-head {

    display: block;

  }



  .section-head .lead {

    margin-top: 18px;

  }



  .split,

  .content-grid,

  .contact-grid {

    gap: 38px;

  }



  /* Stack checklists into one column on mobile */



  .checks {

    grid-template-columns: 1fr;

    column-gap: 0;

    row-gap: 18px;

  }



  .check {

    grid-template-columns: 24px minmax(0, 1fr);

    column-gap: 12px;

  }



  .cta {

    padding: 36px;

    display: block;

  }



  .cta .button {

    margin-top: 24px;

  }



  .sticky-label {

    position: static;

  }



  .footer-grid {

    gap: 28px;

  }

}



/* Small mobile */



@media (max-width: 700px) {

  .site-logo {

    width: 185px;

    max-height: 40px;

  }





}

/* ABOUT PAGE CTA BUTTON ONLY */



.cta .cta-button {

  display: inline-block;

  width: 340px;

  max-width: 100%;

  flex-shrink: 0;



  padding: 24px 20px;



  text-align: center !important;

  white-space: nowrap;



  font-size: 24px;

  font-weight: 700;

  line-height: 1.35;

}



/* Mobile */



@media (max-width: 480px) {

  .cta .cta-button {

    width: 100%;

    font-size: 18px;

    padding: 20px 12px;

  }

}

/* Home page CTA: large button matching the requested About-page appearance.
   Add class="cta home-cta" to the home page CTA wrapper. */
.cta.home-cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 32px;
}

.cta.home-cta .cta-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 680px;
  min-height: 230px;
  margin: 0 auto;
  padding: 36px 24px;
  white-space: normal;
  font-size: clamp(1.6rem, 4.5vw, 3rem);
  line-height: 1.3;
  text-align: center;
  border-radius: 14px;
}

@media (max-width: 480px) {
  .cta.home-cta .cta-button {
    min-height: 160px;
    padding: 24px 14px;
    font-size: clamp(1.3rem, 6vw, 1.8rem);
  }
}

/* ==========================================
   HOME PAGE CTA — WIDE BUTTON FIX
   ========================================== */

.home-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
}

.home-cta .cta-button {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 230px;

  padding: 30px 20px;

  background: #ffffff;
  color: #005b28;

  font-size: clamp(24px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  white-space: normal;

  border-radius: 14px;
}

/* Mobile layout */
@media (max-width: 900px) {
  .home-cta {
    grid-template-columns: 1fr;
  }

  .home-cta .cta-button {
    max-width: 680px;
    margin: 0 auto;
    min-height: 180px;
    font-size: clamp(24px, 5vw, 40px);
  }
}