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



   FONTS



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







@font-face {



  font-family: 'Montserrat';



  src: url('/fonts/Montserrat-Regular.woff2') format('woff2');



  font-weight: 400;



  font-style: normal;



  font-display: swap;



}







@font-face {



  font-family: 'Montserrat';



  src: url('/fonts/Montserrat-Italic.woff2') format('woff2');



  font-weight: 400;



  font-style: italic;



  font-display: swap;



}







@font-face {



  font-family: 'Montserrat';



  src: url('/fonts/Montserrat-SemiBold.woff2') format('woff2');



  font-weight: 600;



  font-style: normal;



  font-display: swap;



}







@font-face {



  font-family: 'Montserrat';



  src: url('/fonts/Montserrat-SemiBoldItalic.woff2') format('woff2');



  font-weight: 600;



  font-style: italic;



  font-display: swap;



}











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



   VARIABLES



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







:root {



  --pix-blue: #004d84;



  --pix-green: #4d8400;







  --background-green: #78B988;







  --deep-teal: #1f5f5a;



  --deep-teal-dark: #173f3b;







  --text-dark: #10201f;



  --text-soft: #40504d;



  --text-muted: #60706d;







  --panel-bg: rgba(255, 255, 255, 0.90);



  --panel-bg-strong: rgba(255, 255, 255, 0.95);







  /*



    Darker borders are now an important visual element,



    rather than relying heavily on shadows.



  */



  --panel-border:#1f5f5a;



  /* // rgba(23, 63, 59, 0.38); */



  --panel-border-soft: rgba(23, 63, 59, 0.54);







  --shadow-soft:



    0 0.8rem 2rem rgba(18, 55, 51, 0.08);







  --shadow-hover:



    0 1rem 2.4rem rgba(18, 55, 51, 0.12);







  --radius-main: 1.25rem;



  --radius-card: 1.35rem;



}











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



   RESET / BASE



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







*,



*::before,



*::after {



  box-sizing: border-box;



}







html {



  scroll-behavior: smooth;



}







html,



body {



  margin: 0;



  width: 100%;



  min-height: 100%;



}







body {



  font-family: 'Montserrat', Arial, Helvetica, sans-serif;







  /*



    particles.js paints the visible background, but this



    provides the correct fallback.



  */



  background: var(--background-green);







  color: var(--text-dark);







  overflow-x: hidden;



}







h1 {



  color: var(--pix-blue);



}







h2,



h3 {



  color: var(--pix-green);



}







p {



  color: var(--text-soft);



}







a {



  transition:



    color 0.18s ease,



    background 0.18s ease,



    border-color 0.18s ease,



    opacity 0.18s ease,



    transform 0.18s ease;



}











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



   NETWORK BACKGROUND



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







#network {



  position: fixed;



  inset: 0;







  display: block;







  width: 100%;



  height: 100%;







  z-index: 0;



}











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



   MAIN PAGE LAYOUT



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







.page-layer {



  position: relative;



  z-index: 1;







  min-height: 100vh;







  padding: 2rem;







  display: grid;



  grid-template-rows: auto 1fr auto;







  justify-items: center;







  gap: 3rem;



}







.top-panel,



.main-panel,



.info-grid,



.contact-panel,



footer {



  width: min(64rem, calc(100vw - 4rem));



}











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



   HEADER



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







.top-panel {



  min-height: 4.5rem;







  padding: 0.8rem 1.4rem;







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



  border-radius: var(--radius-main);







  background: var(--panel-bg-strong);







  box-shadow: var(--shadow-soft);







  backdrop-filter: blur(14px);



  -webkit-backdrop-filter: blur(14px);







  display: grid;



  grid-template-columns: auto 1fr auto;







  align-items: center;







  gap: 2rem;



}











/* subtle inner highlight */



.top-panel,



.main-panel,



.info-panel,



.contact-panel,



footer {



  box-shadow:



    inset 0 1px 0 rgba(255, 255, 255, 0.70),



    var(--shadow-soft);



}











.brand {



  display: flex;



  align-items: center;







  gap: 0.9rem;







  text-decoration: none;



}











.logo-slot {



  width: clamp(6rem, 12vw, 10rem);



  height: 3rem;







  display: flex;



  align-items: center;



}











.logo-slot svg,



.logo-slot img {



  display: block;







  max-width: 100%;



  max-height: 100%;



}











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



   NAVIGATION



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







.main-nav {



  display: flex;







  justify-content: center;



  align-items: center;







  gap: 1.4rem;



}











.main-nav a {



  position: relative;







  color: #334441;







  font-size: 0.88rem;



  font-weight: 600;







  text-transform: uppercase;







  letter-spacing: 0.045em;







  text-decoration: none;



}











.main-nav a:hover {



  color: var(--pix-blue);



}











/* small modern underline */



.main-nav a::after {



  content: '';







  position: absolute;







  left: 50%;



  bottom: -0.45rem;







  width: 0;



  height: 2px;







  background: var(--pix-green);







  transform: translateX(-50%);







  transition: width 0.18s ease;



}











.main-nav a:hover::after {



  width: 100%;



}











.nav-button {



  padding: 0.78rem 1.4rem;







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



  border-radius: 999px;







  background: var(--pix-blue);







  color: #fff;







  font-size: 0.9rem;



  font-weight: 600;







  text-decoration: none;







  white-space: nowrap;







  box-shadow:



    0 0.35rem 0.9rem rgba(0, 77, 132, 0.12);



}











.nav-button:hover {



  transform: translateY(-1px);







  background: #003f6d;







  border-color: #003f6d;



}











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



   MAIN / HERO PANEL



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







.main-panel {



  align-self: center;







     padding: clamp(1.4rem, 3vw, 3rem) clamp(1.4rem, 4vw, 4rem);







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



  border-radius: var(--radius-main);







  background: var(--panel-bg-strong);







  backdrop-filter: blur(14px);



  -webkit-backdrop-filter: blur(14px);



}











.eyebrow {



  margin: 0 0 1rem;







  color: var(--pix-green);







  font-size: 0.82rem;



  font-weight: 600;







  text-transform: uppercase;







  letter-spacing: 0.10em;



}











.main-panel h1 {



  max-width: 58rem;







  margin: 0;







  color: var(--pix-blue);







  font-size: clamp(2.8rem, 3.75vw, 4rem);







  font-weight: 600;







  line-height: 1;







  /*



    Montserrat doesn't need the extremely tight -0.065em



    used previously.



  */



  letter-spacing: -0.045em;



}











.main-panel p {



 margin: 1.5rem 0 .5rem 0;







  color: var(--text-soft);







  font-size: 1.08rem;







  line-height: 1.7;



}



.main-panel p:first-of-type:has(~ p) {

  color: var(--pix-green);

  font-weight: 700;

}







.main-panel > p + p {

  margin-top: 0.25rem;

}







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



   INFORMATION GRID



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







.info-grid {



  display: grid;







  grid-template-columns:



    repeat(auto-fit, minmax(20rem, 1fr));







  gap: 1.3rem;







  align-items: stretch;



}











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



   INFORMATION CARDS



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







.info-panel {



  position: relative;







  padding: 2rem;







  display: flex;



  flex-direction: column;







  height: 100%;







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



  border-radius: var(--radius-card);







  background: var(--panel-bg);







  backdrop-filter: blur(14px);



  -webkit-backdrop-filter: blur(14px);







  transition:



    transform 0.20s ease,



    border-color 0.20s ease,



    box-shadow 0.20s ease,



    background 0.20s ease;



}











.info-panel:hover {



  transform: translateY(-3px);







  border-color: rgba(23, 63, 59, 0.55);







  background: rgba(255, 255, 255, 0.95);







  box-shadow:



    inset 0 1px 0 rgba(255, 255, 255, 0.75),



    var(--shadow-hover);



}











.info-panel h2 {



  margin: 0.4rem 0 0.45rem;







  color: var(--pix-green);







  font-size: 1.25rem;







  font-weight: 600;







  line-height: 1.25;



}











.info-panel h3 {



  margin: 0.4rem 0 0.45rem;







  color: var(--pix-green);







  font-weight: 600;



}











.info-panel p {



  margin: 0.5rem 0;







  color: var(--text-soft);







  font-size: 0.95rem;







  line-height: 1.65;







  flex-grow: 1;



}











.info-panel > a {



  align-self: flex-start;







  margin-top: 0.8rem;







  padding-bottom: 0.15rem;







  color: var(--pix-blue);







  border-bottom: 1px solid transparent;







  font-size: 0.9rem;



  font-weight: 600;







  text-decoration: none;



}











.info-panel > a:hover {



  border-bottom-color: var(--pix-blue);



}











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



   CONTACT SECTION



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







.contact-panel {



  padding: clamp(2rem, 5vw, 4rem);







  display: grid;







  grid-template-columns:



    minmax(0, 0.8fr)



    minmax(0, 1.2fr);







  gap: 3rem;







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



  border-radius: var(--radius-card);







  background: var(--panel-bg-strong);







  backdrop-filter: blur(14px);



  -webkit-backdrop-filter: blur(14px);



}











.contact-intro h2 {



  margin: 0;







  color: var(--pix-green);







  font-size: clamp(1.8rem, 3vw, 2.6rem);







  font-weight: 600;







  line-height: 1.15;



}











.contact-intro p:not(.eyebrow) {



  margin: 1rem 0 0;







  color: var(--text-soft);







  line-height: 1.7;



}











.contact-form {



  display: grid;







  gap: 1.3rem;



}











.form-row {



  display: grid;







  grid-template-columns:



    repeat(2, minmax(0, 1fr));







  gap: 1.3rem;



}











.form-field {



  display: grid;







  gap: 0.5rem;



}











.form-field label {



  color: var(--deep-teal-dark);







  font-size: 0.86rem;



  font-weight: 600;



}











.form-field input,



.form-field select,



.form-field textarea {



  width: 100%;







  padding: 0.9rem 1rem;







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



  border-radius: 0.7rem;







  background: rgba(255, 255, 255, 0.72);







  color: var(--text-dark);







  font: inherit;







  outline: none;







  transition:



    border-color 0.18s ease,



    box-shadow 0.18s ease,



    background 0.18s ease;



}











.form-field input:hover,



.form-field select:hover,



.form-field textarea:hover {



  background: rgba(255, 255, 255, 0.92);



}











.form-field input:focus,



.form-field select:focus,



.form-field textarea:focus {



  border-color: var(--deep-teal);







  background: #fff;







  box-shadow:



    0 0 0 3px rgba(31, 95, 90, 0.13);



}











.form-field textarea {



  min-height: 10rem;







  resize: vertical;



}











.contact-submit {



  justify-self: start;







  padding: 0.9rem 1.55rem;







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



  border-radius: 999px;







  background: var(--pix-blue);







  color: #fff;







  font-family: inherit;



  font-size: 0.9rem;



  font-weight: 600;







  cursor: pointer;







  box-shadow:



    0 0.35rem 0.9rem rgba(0, 77, 132, 0.12);







  transition:



    transform 0.18s ease,



    background 0.18s ease,



    box-shadow 0.18s ease;



}











.contact-submit:hover {



  transform: translateY(-1px);







  background: #003f6d;







  box-shadow:



    0 0.55rem 1.2rem rgba(0, 77, 132, 0.18);



}











.form-trap {



  position: absolute;







  left: -10000px;







  width: 1px;



  height: 1px;







  overflow: hidden;



}











.form-privacy {



  margin: 0;







  color: var(--text-muted);







  font-size: 0.76rem;







  line-height: 1.55;



}











.form-privacy a {



  color: var(--pix-blue);







  font-weight: 600;







  text-decoration: none;



}











.form-privacy a:hover {



  text-decoration: underline;



}











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



   PRIVACY PAGE



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







.privacy-panel h1 {



  margin-bottom: 0.5rem;



}











.privacy-panel h2 {



  margin: 2.4rem 0 0.7rem;







  color: var(--pix-green);







  font-size: 1.3rem;







  font-weight: 600;



}











.privacy-panel p,



.privacy-panel li {



  font-size: 0.95rem;







  line-height: 1.7;



}











.privacy-panel ul {



  margin: 1rem 0;







  padding-left: 1.4rem;



}











.privacy-panel a {



  color: var(--pix-blue);







  font-weight: 600;



}











.privacy-updated {



  margin-top: 0.8rem !important;







  color: var(--text-muted) !important;







  font-size: 0.8rem !important;



}











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



   ABOUT / PEOPLE



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







.people-intro h2 {



  margin: 0;







  color: var(--pix-green);







  font-size: clamp(1.8rem, 3vw, 2.6rem);







  font-weight: 600;



}











.people-intro p:not(.eyebrow) {



  max-width: 48rem;



}











.person-panel {











  display: none!important;







  position: absolute;







  width: 1px;



  height: 1px;







  left: -100000px;



  pointer-events: none;



  flex-direction: column;



}











.person-panel h2 {



  margin-bottom: 0.3rem;



}











.person-role {



  margin: 0 0 1.2rem !important;







  color: var(--deep-teal) !important;







  font-size: 0.78rem !important;







  font-weight: 600;







  text-transform: uppercase;







  letter-spacing: 0.055em;



}











.person-panel > p:not(.person-role) {



  flex-grow: 1;



}











.linkedin-link {



  align-self: flex-start;







  margin-top: 1.3rem;







  color: var(--pix-blue);







  font-weight: 600;







  text-decoration: none;



}











.linkedin-link:hover {



  text-decoration: underline;



}











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



   FOOTER



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







footer {



  position: relative;



  z-index: 1;







  min-height: 4rem;







  margin: 0 auto 1rem;







  padding: 0.9rem 1.4rem;







  display: grid;







  grid-template-columns: 1fr;







  justify-items: center;



  align-items: center;







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



  border-radius: var(--radius-main);







  background: var(--panel-bg);







  backdrop-filter: blur(14px);



  -webkit-backdrop-filter: blur(14px);



}











footer p {



  margin: 0;







  color: var(--text-muted);







  font-size: 0.76rem;







  text-align: center;



}











footer a {



  color: var(--pix-blue);







  font-weight: 600;







  text-decoration: none;



}











footer a:hover {



  text-decoration: underline;



}











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



   RESPONSIVE



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







@media (max-width: 900px) {







  .page-layer {



    padding: 1rem;







    gap: 2rem;



  }











  .top-panel,



  .main-panel,



  .info-grid,



  .contact-panel,



  footer {



    width: 100%;



  }











  .top-panel {



    grid-template-columns: 1fr;







    gap: 1rem;



  }











  .main-nav {



    justify-content: flex-start;







    flex-wrap: wrap;







    gap: 0.9rem 1.3rem;



  }











  .nav-button {



    justify-self: start;



  }











  .info-grid {



    grid-template-columns: 1fr;



  }











  .contact-panel {



    grid-template-columns: 1fr;







    gap: 2rem;



  }











  .form-row {



    grid-template-columns: 1fr;



  }







}











@media (max-width: 520px) {







  .main-panel {



    padding: 2rem 1.5rem;



  }











  .info-panel {



    padding: 1.6rem;



  }











  .contact-panel {



    padding: 1.7rem;



  }











  .main-panel h1 {



    font-size: clamp(2.4rem, 12vw, 3.5rem);



  }







}