/* Import Open Sans from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300&display=swap');

:root {
  --green-dark: #2a5e48;
  --green-light: #84c61c;
  --green-light-2: #61bc95;
  --bullet-color: #0ca165;
  --text-color: #000000;
  --box-color: #e6e6e6;
  --gray-background: #e4e4e4;
  --white-background: #ffffff;
  --offwhite-background: #f5f5f5;
  --content-max: 1700px;      /* max readable width for text/content */
  --pad-min: 0px;            /* smallest side padding */
  --pad-ideal: 8vw;           /* scales with viewport */
  --pad-max: 120px;            /* cap the side padding */
  --category-pad-vertical: clamp(14px, 4vw, 48px);      /* vertical padding for project category sections */
}


body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  color: var(--text-color);
  height: 100%;
  overflow: auto;
  }

.grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  column-gap: 2.69%;
}

.custom-list li {
  display: grid;
  grid-template-columns: 12px 1fr;
  align-items: start;
  column-gap: 0.5em;
  position: relative;
  padding-left: 0;
  max-width: 55%;
  overflow-wrap: anywhere; /* or word-wrap: break-word; for older browsers */
}

.custom-list li::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 8px;
  background-color: var(--bullet-color);
  /* align-self: baseline; */
  margin-top: 0.45em;
}

/* ----- Header tag ----- */
header {
  display: flex;
  align-items: center;
  background: white;
}

/* ----- header items and classes ----- */
#main-header {
  will-change: height; /* optimize for animation */
  /* scale knob (1 = full size; 0.5 = half, etc.) */
  --logo-scale: 1;

  /* header’s natural height at scale=1:
     (logo + top and bottom padding) */
  --header-h0: 100px;

  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(245, 245, 245, 0.85);
  backdrop-filter: blur(6px);

  /* Let layout height follow the scale */
  height: calc(var(--header-h0) * var(--logo-scale));
  transition: height 600ms ease;
  overflow: clip;           /* clip any overhang during animation */

  margin: 0;
  width: 100%;
  /* remove padding so height is purely driven by --header-h0 * scale */
  padding: 0;
}

/* Logo sizing & shrink animation */
#main-header .logo {
  backface-visibility: hidden; /* prevent flicker on scale */
  will-change: transform /* optimize for animation */;
  grid-column: 1 / span 3;
  justify-self: start;            /* anchor to left edge of grid column */
  display: block;               /* don't treat as inline with text */
  width: 100%;                    /* responsive to the 3-column grid area */
  height: auto;
  max-height: none;               /* avoid conflicting with visual scale */
  transform-origin: left center;  /* keep left edge fixed on scale */
  transform: translateZ(0) scale(var(--logo-scale, 1));
  transition: transform 600ms ease;
}


.header-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  column-gap: 2.69%;
  align-items: center;            /* nav aligns to scaled logo */
  position: static;
}

.header-grid nav {
  grid-column: 6 / span 3;
  display: flex;
  justify-content: flex-end;
  gap: 25px;
  min-height: 0; /* guard against overflow in tight heights */
}

/* .header-grid .logo {
  grid-column: 1 / span 3;
  width: 100%;
} */

/* On scroll, shrink the header driven by logo size */
#main-header.shrink {
  --logo-scale: 0.55;                    /* smaller bar */
}

#main-header.shrink .logo {
  --logo-scale: 0.55;              /* scale down logo */
}

header a {
  text-decoration: none;
  color: var(--green-dark);
  font-weight: 300;
  font-size: clamp(9pt, 1.38vw, 16pt);
  text-transform: lowercase;
}

header a:hover,
header a.active {
  font-weight: 700;
}

/* === Header: Mobile responsiveness  === */
/* make shrunk logo bigger on mobile */
@media (max-width: 640px) {
  /* Give the logo more width, keep nav on the right */
  #main-header .logo { grid-column: 1 / span 4; }
  .header-grid nav   { grid-column: 6 / span 3; gap: clamp(8px, 3vw, 12px); }

  /* Don’t let the shrunken state get tiny on phones */
  #main-header.shrink,
  #main-header.shrink .logo {
    --logo-scale: 0.70; /* was 0.55 */
  }

  /* Safety net: ensure the bar never gets too short */
  #main-header { min-height: 50px; }
}

/* Optional: on very narrow phones, stack nav under the logo for max logo size */
@media (max-width: 380px) {
  .header-grid       { grid-template-columns: 1fr; }
  #main-header .logo { grid-column: 1 / -1; justify-self: start; }
  .header-grid nav   { grid-column: 1 / -1; justify-content: flex-start; gap: 10px; }
}


/* Hero */
.hero {
  position: relative;
  z-index: 0; /* under header */
  text-align: center;
  color: var(--green-light);
  background-color: var(--offwhite-background);
}

.hero img {
  width: 100%;
  height: auto;
  display: block;
}

#projects .section-header {
  padding-top: 20px; /* pushes entire heading + rule down */
}

#projects .project-item:last-child {
  margin-bottom: 0; /* remove bottom margin from last project, so the spacing can be controlled at the section level*/
}

/* Section header */
.section-title {
  font-weight: 500;
  text-transform: lowercase;
  font-size: 24pt;
  line-height: .9;
  color: var(--green-dark);
  text-align: left;
  margin: 45px 0 12px 1px;
}

.section-rule {
  grid-column: 1 / span 3;
  width: 100%;
  border: none;
  border-top: 2px solid var(--green-dark);
  /* box-shadow: 0 -1px 3px rgba(42, 150, 10, 0.4); x | y | blur | color, same RGB as #2a5348 but 40% opacity */
}

/* Buttons */
.button-group {
  display: flex;
  width: 80%;
  gap: 20px;
  margin: 20px 0;
  align-items: center;
  justify-content: center;
}

.button-group button {
  flex: 1 1 550px;
  position: relative;
  padding: 10px 25px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--green-light);
  background: transparent;
  border: 2px solid var(--green-light);
  box-sizing: border-box;
  cursor: pointer;
  overflow: visible;
  transition: color 0.2s ease;
}

/* ::after creates the offset bold bottom + left edge */
.button-group button::after {
  content: "";
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 100%;
  height: 100%;
  border-right: 4px solid var(--green-light);
  border-bottom: 4px solid var(--green-light);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Show the offset "shadow border" on hover or when active */
.button-group button:hover::after,
.button-group button.active::after {
  opacity: 1;
}

/* Adjust scroll position for anchor targets so they're not hidden behind sticky header */
#projects,
#services,
#contact,
#mentalhealth,
#oncology,
#biomechanical,
#realestate,
#other {
  scroll-margin-top: var(--sticky-offset, 125px);
}

/* === Projects: floating hamburger menu (shows only inside #projects) === */
#projects-fab {
  position: fixed;
  top: calc(var(--sticky-offset, 125px) + 10px);
  /* `right` is set inline by JS to align with the container's right edge */
  right: 12px;
  z-index: 600;
  display: none; /* JS toggles */
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--green-light);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

#projects-fab .bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--green-light);
  margin: 3px 0;
}

#projects-fab.show { display: flex; }

#projects-menu {
  position: fixed;
  top: calc(var(--sticky-offset, 125px) + 10px);
  right: 12px; /* JS aligns to container */
  z-index: 600;
  display: none; /* JS toggles */
  background: #fff;
  border: 2px solid var(--green-light);
  padding: 8px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

#projects-menu.open { display: block; }

/* Compact buttons inside the menu; keep your brand styling */
#projects-menu .menu-btn {
  display: block;
  width: 220px;
  max-width: 80vw;
  margin: 6px 0;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--green-light);
  background: transparent;
  border: 2px solid var(--green-light);
  cursor: pointer;
}

/* Keep the double-line accent consistent with your main buttons */
#projects-menu .menu-btn::after {
  content: "";
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  border-right: 4px solid var(--green-light);
  border-bottom: 4px solid var(--green-light);
  transform: translate(2px, 6px);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
#projects-menu .menu-btn:hover::after { opacity: 1; }



/* Apply to all sections */
.section-header {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

/* Project layout */
#projects {
  background-color: var(--gray-background);
}

.project-item {
  margin-bottom: 40px;
}

/* Category is the full-bleed background wrapper */
.category {
  width: 100%;
  margin: 0;        /* no centering margins on the full-bleed wrapper */
  padding: 0;       /* let the inner .container provide gutters */
  padding-bottom: var(--category-pad-vertical); /* bottom padding for project category sections */
  padding-top: var(--category-pad-vertical)
}

/* (Keeps your alternating backgrounds working at full width) */
.category:nth-child(odd){
  background-color: var(--gray-background);
}
.category:nth-child(even){
  background-color: var(--white-background);
}

.category-title {
  margin-top: 0px;
  padding-top: 30px;
  font-weight: 700;
  font-size: 12pt;
  color: #2a5e48;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.category-rule {
  grid-column: 1 / span 3;
  width: 100%;
  border: none;
  border-top: 2px solid var(--green-dark);
  margin-bottom: 32px;
  margin-top: -10px;
}

.project-title {
  font-weight: 300;
  font-size: 13pt;
  color: #1d3d33;
}

.project-subtitle {
  font-weight: 300;
  font-size: 8pt;
  color: #1d3d33;
  font-style: italic;
}

.project-item .body {
  font-weight: 300;
  font-size: 11pt;
}

.project-item .body.italic {
  font-style: italic;
}

.text-box {
  background: var(--box-color);
  border-radius: 999px;
  padding: 5px 15px;
  display: inline-block;
  font-weight: 400;
  font-size: 16pt;
  color: var(--text-color);
}

/* Sticky header */
#sticky-header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.75); /* white, 85% opaque */
  backdrop-filter: blur(6px);            /* optional: glassy blur */
  z-index: 100;
  width: 100vw;
  left: 0; 
  margin-left: calc(-1 * (100vw - 99%) / 2);
  display: grid;
  align-items: center;
}

/* Grid images */
.project-images img {
  width: 100%;
  height: auto;
  margin-bottom: 15px;
}

/* Stacked images */
.project-images.image-stack {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.project-images.image-stack img {
  width: 100%;
  height: auto;
  margin-bottom: 0; /* remove bottom margin, rely on gap */
}

.image-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2.69%;
  align-items: start;
}

 /* CONTACT */
    #contact { display: grid; row-gap: 28px; }
    /* #contact .intro { max-width: 800px; font-size: 15pt; } */

    .cta-row { 
      display: flex;
      justify-content: center;
      margin: 8px 0; 
    }
    .cta-button {
      position: relative;
      display: inline-block;
      padding: 12px 26px;
      margin-bottom: 40px;
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--green-light);
      background: #fff;
      border: 2px solid var(--green-light);
      text-decoration: none;
      user-select: none;
    }
    .cta-button::after {
      content: "";
      position: absolute;
      bottom: -4px;
      right: -4px;
      width: 100%;
      height: 100%;
      border-right: 4px solid var(--green-light);
      border-bottom: 4px solid var(--green-light);
      opacity: 0;
      transition: opacity .2s ease;
      pointer-events: none;
    }
    .cta-button:hover::after { opacity: 1; }

    .contact-items { 
      display: grid; 
      grid-template-columns: repeat(3, 150px); 
      justify-content: center;
      gap: 16px 22px; 
    }
      
    .contact-item { 
      display: flex;
      flex-direction: column;
      width: 150px;
      align-items: center;
      text-align: center;
      gap: 12px;
      padding: 18px 0;
      background: transparent; 
      border-radius: 0; 
    }
    .contact-item img { 
      width: 50px; 
      height: 50px; 
      display: block; }

    .contact-item a, .contact-item span { 
      color: #053f27; 
      font-weight: 700; 
      font-size: 11pt;
      text-decoration: none; 
      word-break: break-word; }

@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .button-group {
    flex-direction: column;
    align-items: center;
    width: 100%
  }

  .button-group button {
    width: 100%;
    max-width: 250px;
    flex: none;
  }

   /* Reset all grid children inside project items to span full width */
  .project-item.grid > * {
    grid-column: 1 / -1 !important;
  }

  /* Ensure project images always remain visible */
  .project-images img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Stack image rows vertically on small screens */
  .image-row {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* Override inline grid placements inside image rows */
  .image-row > * {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}

/* Section Settings */
.section-wrapper {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 0;
  margin-bottom: 0px;
}

.bg-white {
  background-color: var(--white-background);
}

.bg-green-dark {
  background-color: var(--bullet-color);
  color: #fff;
} 

.bg-green-light {
  background-color: var(--green-light-2);
  color: #000;
}

.site-footer {
  position: relative;
  z-index: 50;
  background-color: var(--green-dark);
  /* background: #097348; */
  color: var(--bullet-color);
  text-align: center;
  padding: 16px 0;
  font-size: 0.8rem;
}

/* Projects section overrides */
/* Biomechanical: neutralize fixed margins/gaps & enable a variable gap */
#biomechanical .project-images.image-stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, 0px);   /* JS sets this value */
}
#biomechanical .project-images.image-stack img {
  width: 100%;
  height: auto;                 /* keep proportions (no stretch) */
  display: block;
  margin: 0 !important;         /* override global margin-bottom */
}

/* Middle (single) image column: bottom-align the image */
#biomechanical .project-item.grid > .project-images:not(.image-stack) {
  display: flex;
  align-items: flex-start;
}
#biomechanical .project-item.grid > .project-images:not(.image-stack) img {
  width: 100%;
  height: auto;
  margin: 0 !important;
}

/* Text: align to top; it won’t affect image bottoms */
#biomechanical .project-text {
  align-self: start;
}

/* ===== Bioinformatics (Oncology) mobile fixes ===== */
@media (max-width: 640px) {
  /* 1) Make each project stack in one column and stop overlaps */
  #oncology .project-item.grid {
    grid-template-columns: 1fr;     /* one column on phones */
    row-gap: 16px;                  /* breathing room between blocks */
  }
  /* Inline grid-column in HTML loses on mobile so nothing stacks off-grid */
  #oncology .project-item.grid > * {
    grid-column: 1 / -1 !important; /* override inline placements */
  }

  /* 2) Ensure images scale and stay visible */
  #oncology .project-images img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* 3) Image rows inside oncology: stack on phones */
  #oncology .image-row {
    grid-template-columns: 1fr;     /* was multiple columns */
    gap: 12px;
  }

  /* 4) Don’t squeeze list text to 55% width on phones */
  .custom-list li {
    max-width: 100%;
  }

  /* Optional: add a touch of spacing between text blocks when stacked */
  #oncology .project-text {
    margin-top: 8px;
  }
}


/* Services section overrides */
#services > :last-child {
  margin-bottom: 0; /* override section-wrapper margin bottom for services section elements */
  padding-bottom: 20px;
}

/* Contact section overrides */
.section-wrapper:has(.contact-items), 
.section-wrapper:has(> #contact) {
  margin-bottom: 0; /*override section-wrapper margin bottom for contact section elements*/
}

/* ===== CONTACT (mobile-responsive) ===== */

/* 1) Light-green band: title, hr, blurb, CTA */
#contact .section-header {
  display: flex;               /* stays flex on desktop too */
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#contact .section-title {
  /* Scales from small phones → desktop */
  text-align: center;
  text-transform: capitalize;
  font-size: clamp(1.6rem, 5vw, 2rem);
  letter-spacing: 1px;
  margin: 1.8em 0 0 0;
}

#contact .section-rule {
  /* Keep your white rule, but make width responsive */
  width: clamp(160px, 60vw, 550px);
  margin: 30px auto 0px auto;    /* centered under the title */
  border: none;
  border-top: 2px solid #fff;
  display: block;
}

#contact .body {
  text-align: center;
  color: #fff;                 /* ensures white on the light-green band */
  margin: 0 0 0 0;           /* remove any negative top margin */
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  line-height: 1.35;
  font-style: italic;
}

#contact .cta-row {
  display: flex;
  justify-content: center;
  margin: 12px 0 20px 0;
}

#contact .cta-button {
  /* Comfortable tap target on phones; doesn’t look huge on desktop */
  width: min(100%, 280px);
  text-align: center;
  padding: 12px 12px;
}

/* 2) Dark-green band: 3 contact cards */
/* ==== CONTACT (dark band) — icon-driven, equal spacing, mobile-friendly ==== */
.section-wrapper.bg-green-dark .contact-items {
  /* variables control icon size and fixed card width */
  --icon-size: clamp(40px, 8vw, 56px);
  --card-w:    clamp(120px, 20vw, 160px);

  display: grid;

  /* fixed-width tracks so spacing is uniform and the middle item centers */
  grid-template-columns: repeat(auto-fit, minmax(var(--card-w), var(--card-w)));

  /* center the whole row; leftover space is split evenly on the sides */
  justify-content: center;

  /* equal spacing between cards */
  gap: 10px 16px;

  /* keep content clamped and padded while the band stays full-bleed */
  width: min(100%, var(--content-max, 1200px));
  margin-inline: auto;
  padding: clamp(12px, 3vw, 20px)
           clamp(var(--pad-min, 16px), var(--pad-ideal, 4vw), var(--pad-max, 48px));
}

.section-wrapper.bg-green-dark .contact-item {
  /* each card takes the fixed track width; text won’t change spacing */
  inline-size: var(--card-w);
  display: grid;
  grid-template-rows: max-content max-content; /* icon, then text */
  justify-items: center;
  align-items: start;
  text-align: center;
  gap: 8px;
  padding: 12px 0;
}

.section-wrapper.bg-green-dark .contact-item img {
  width: var(--icon-size);
  height: auto;
  display: block;
}

/* keep text below the icon, centered and wrapping inside the fixed card */
.section-wrapper.bg-green-dark .contact-item a,
.section-wrapper.bg-green-dark .contact-item span {
  display: block;
  max-width: 100%;
  color: #000;                /* use #fff if you prefer white on the dark band */
  font-weight: 700;
  font-size: clamp(0.85rem, 2.2vw, 1.05rem);
  line-height: 1.2;
  text-decoration: none;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Phones up to ~420–480px: force single centered column */
@media (max-width: 480px) {
  .section-wrapper.bg-green-dark .contact-items {
    --card-w: clamp(220px, 90vw, 420px); /* bigger cards → only one fits */
    grid-template-columns: 1fr;   /* one column */
    justify-items: center;        /* center the card in the column */
    gap: 12px 0;                  /* vertical spacing */
  }
  .section-wrapper.bg-green-dark .contact-item {
    inline-size: min(100%, 420px); /* keep the card from going edge-to-edge */
  }
}



/* inherit the band’s white text color for links/spans */
.section-wrapper.bg-green-dark .contact-item a,
.section-wrapper.bg-green-dark .contact-item span {
  color: inherit;              /* fixes earlier dark-green text on dark bg */
  font-weight: 500;
  font-size: clamp(0.95rem, 2.2vw, 1.05rem);
  line-height: 1.2;
  text-decoration: none;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Tiny phones: force single column for extra breathing room */
@media (max-width: 360px) {
  .section-wrapper.bg-green-dark .contact-items { grid-template-columns: 1fr; }
}

/* Contact cards: make text black again (override the band's white) */
.section-wrapper.bg-green-dark .contact-item a,
.section-wrapper.bg-green-dark .contact-item span {
  color: #2b5e47;   /* or use your old color: #053f27 */
  font-weight: 400;
}

/* Contact section heading: restore bold weight */
#contact .section-title {
  font-weight: 700;   /* bold */
}



/* Keep main header + hero visually fixed while they’re in view,
   and let later sections scroll "over" them */
.pinned {
  position: sticky;
  top: 0;
  z-index: 0;          /* under content */
  overflow: hidden;    /* clip any child during scroll */
  will-change: transform; /* helps Safari/Chrome paint during scroll */
  transform: none !important;
}

.container {
  width: min(100%, var(--content-max)); /* max width for readability */
  max-width: var(--content-max);
  margin-inline: auto;

  /* side padding driven by variables */
  padding-left: clamp(var(--pad-min), var(--pad-ideal), var(--pad-max));
  padding-right: clamp(var(--pad-min), var(--pad-ideal), var(--pad-max));

}

*, *::before, *::after {
  box-sizing: border-box; /* include padding/border in width/height */
}

/* iOS-specific: avoid legacy momentum scrolling that breaks z-index with sticky */
@supports (-webkit-touch-callout: none) {
  .scroll-container {
    -webkit-overflow-scrolling: auto; /* not 'touch' */
  }
}

/* Replace background-attachment: fixed on mobile (iOS paints it oddly) */
@media (max-width: 768px) {
  .hero-bg {
    background-attachment: scroll; /* don’t use 'fixed' on iOS */
  }

    /* Always apply to your current <section class="hero pinned"> */
  .hero.pinned {
    z-index: -1 !important;   /* force hero below all later sections */
    will-change: auto;        /* disable layer promotion on iOS */
  }
}

/* ===== Fix hero bleeding over later sections on some iOS ===== */
/* JS fallback helpers for the hero */
.hero.pinned.hero--no-promote { will-change: auto; }
.hero.pinned.hero--lower { z-index: -1 !important; }  /* ensure it stays behind later sections */

/* --- Services divider: guaranteed full-bleed white band with centered image --- */
#services-divider.section-divider-band {
  position: relative;                 /* create a local stacking context */
  z-index: 20;                        /* paint above the hero on all browsers */
  padding-block: 16px;                /* buffer around the image */
}

/* Full-bleed white plate rendered independent of layout width */
#services-divider.section-divider-band::before {
  content: "";
  position: absolute;
  inset: 0;                           /* top/right/bottom/left: 0 (relative to the band) */
  left: 50%;
  width: 100vw;                       /* true viewport width, ignores container gutters */
  transform: translateX(-50%);        /* center the 100vw plate under the band */
  background: #fff;
  z-index: -1;                        /* sit behind the divider contents */
  pointer-events: none;
}

/* Keep the divider image at its intrinsic size (no upscale), centered */
#services-divider.section-divider-band .divider-img {
  display: block;
  width: auto;                        /* do NOT force 100% width */
  max-width: 100%;                    /* shrink on small screens if needed */
  height: auto;
  margin-inline: auto;                /* horizontally center */
}