diff --git a/assets/Puneet Sondh.jpg b/assets/Puneet Sondh.jpg
index 5ef7a2c..04618c0 100644
Binary files a/assets/Puneet Sondh.jpg and b/assets/Puneet Sondh.jpg differ
diff --git a/assets/Rohit Tripathy.jpg b/assets/Rohit Tripathy.jpg
index ef757d1..02647ef 100644
Binary files a/assets/Rohit Tripathy.jpg and b/assets/Rohit Tripathy.jpg differ
diff --git a/assets/Ruchir Gupta.jpg b/assets/Ruchir Gupta.jpg
index 01b0bd6..276f8ba 100644
Binary files a/assets/Ruchir Gupta.jpg and b/assets/Ruchir Gupta.jpg differ
diff --git a/assets/bg-art-1.svg b/assets/bg-art-1.svg
deleted file mode 100644
index d2a90e0..0000000
--- a/assets/bg-art-1.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="1728" height="1175" viewBox="0 0 1728 1175" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M-420.48 1174.2C-359.098 941.18 -93.793 462.175 476.375 410.341C1046.54 358.508 1373.23 31.8202 1465.3 -125.044" stroke="#CCCCCC"/>
-<path d="M-381.042 1174.2C-319.66 941.18 -54.355 462.175 515.813 410.341C1085.98 358.508 1412.67 31.8202 1504.74 -125.044" stroke="#CCCCCC"/>
-<path d="M-341.604 1174.2C-280.223 941.18 -14.9171 462.175 555.251 410.341C1125.42 358.508 1452.11 31.8202 1544.18 -125.044" stroke="#CCCCCC"/>
-<path d="M-302.167 1174.2C-240.785 941.18 24.5208 462.175 594.689 410.341C1164.86 358.508 1491.54 31.8202 1583.62 -125.044" stroke="#CCCCCC"/>
-<path d="M-262.729 1174.2C-201.347 941.18 63.9587 462.175 634.127 410.341C1204.3 358.508 1530.98 31.8202 1623.06 -125.044" stroke="#CCCCCC"/>
-<path d="M-223.291 1174.2C-161.909 941.18 103.396 462.175 673.565 410.341C1243.73 358.508 1570.42 31.8202 1662.49 -125.044" stroke="#CCCCCC"/>
-<path d="M-183.853 1174.2C-122.471 941.18 142.834 462.175 713.003 410.341C1283.17 358.508 1609.86 31.8202 1701.93 -125.044" stroke="#CCCCCC"/>
-<path d="M-144.415 1174.2C-83.0332 941.18 182.272 462.175 752.441 410.341C1322.61 358.508 1649.3 31.8202 1741.37 -125.044" stroke="#CCCCCC"/>
-</svg>
diff --git a/assets/bg-art-2.svg b/assets/bg-art-2.svg
deleted file mode 100644
index 9d9e6d8..0000000
--- a/assets/bg-art-2.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="390" height="390" viewBox="0 0 390 390" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="1.14136" y="1.13965" width="327.538" height="327.538" stroke="#D9D9D9"/>
-<rect x="21.1414" y="21.1396" width="327.538" height="327.538" stroke="#D9D9D9"/>
-<rect x="41.1414" y="41.1396" width="327.538" height="327.538" stroke="#D9D9D9"/>
-<rect x="61.1414" y="61.1396" width="327.538" height="327.538" stroke="#D9D9D9"/>
-</svg>
diff --git a/assets/craig-mckay-jmURdhtm7Ng-unsplash.jpg b/assets/craig-mckay-jmURdhtm7Ng-unsplash.jpg
index 64a2c87..10275dc 100644
Binary files a/assets/craig-mckay-jmURdhtm7Ng-unsplash.jpg and b/assets/craig-mckay-jmURdhtm7Ng-unsplash.jpg differ
diff --git a/assets/stamp-full.svg b/assets/stamp-full.svg
new file mode 100644
index 0000000..fc295e1
--- /dev/null
+++ b/assets/stamp-full.svg
@@ -0,0 +1,4 @@
+<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M77.9602 42.7793C78.4095 43.4518 78.4095 44.3287 77.9602 45.0012L75.0787 49.3147C74.7841 49.7557 74.6768 50.2955 74.7802 50.8157L75.7916 55.9035C75.9493 56.6967 75.6138 57.5069 74.9413 57.9563L70.6285 60.8387C70.1876 61.1334 69.8818 61.5911 69.7783 62.1111L68.7657 67.1988C68.6079 67.992 67.9878 68.612 67.1946 68.7699L62.107 69.7825C61.5869 69.886 61.1292 70.1918 60.8345 70.6327L57.9521 74.9455C57.5027 75.618 56.6925 75.9535 55.8993 75.7958L50.8115 74.7843C50.2914 74.6809 49.7515 74.7883 49.3105 75.0829L44.9971 77.9644C44.3245 78.4137 43.4476 78.4137 42.7751 77.9644L38.4617 75.0829C38.0207 74.7883 37.4808 74.6809 36.9607 74.7843L31.8729 75.7958C31.0796 75.9535 30.2695 75.618 29.8201 74.9455L26.9377 70.6327C26.643 70.1918 26.1853 69.886 25.6652 69.7824L20.5776 68.7699C19.7844 68.612 19.1643 67.992 19.0065 67.1988L17.9939 62.1111C17.8904 61.5911 17.5846 61.1334 17.1437 60.8387L12.8308 57.9563C12.1584 57.5069 11.8228 56.6967 11.9805 55.9035L12.992 50.8157C13.0954 50.2955 12.988 49.7557 12.6935 49.3147L9.81194 45.0012C9.36268 44.3287 9.36268 43.4518 9.81194 42.7793L12.6935 38.4658C12.988 38.0249 13.0954 37.485 12.992 36.9649L11.9805 31.8771C11.8228 31.0838 12.1584 30.2737 12.8308 29.8243L17.1437 26.9419C17.5846 26.6472 17.8904 26.1895 17.9939 25.6694L19.0065 20.5818C19.1643 19.7886 19.7844 19.1685 20.5776 19.0106L25.6652 17.9981C26.1853 17.8946 26.643 17.5888 26.9377 17.1479L29.8201 12.835C30.2695 12.1626 31.0796 11.827 31.8729 11.9847L36.9607 12.9962C37.4808 13.0996 38.0207 12.9922 38.4617 12.6976L42.7751 9.81613C43.4476 9.36687 44.3245 9.36687 44.9971 9.81613L49.3105 12.6976C49.7515 12.9922 50.2914 13.0996 50.8115 12.9962L55.8993 11.9847C56.6925 11.827 57.5027 12.1626 57.9521 12.835L60.8345 17.1479C61.1292 17.5888 61.5869 17.8946 62.107 17.9981L67.1946 19.0106C67.9878 19.1685 68.6079 19.7886 68.7657 20.5818L69.7783 25.6694C69.8818 26.1895 70.1876 26.6472 70.6285 26.9419L74.9413 29.8243C75.6138 30.2737 75.9493 31.0838 75.7916 31.8771L74.7802 36.9649C74.6768 37.485 74.7841 38.0249 75.0787 38.4658L77.9602 42.7793Z" fill="#446DFF"/>
+<path d="M85.6314 44.4457L81.7526 50.2521C81.3107 50.9135 81.1496 51.7234 81.3047 52.5035L82.6663 59.3523C82.7451 59.7489 82.5774 60.154 82.2411 60.3787L76.4356 64.2587C75.7742 64.7007 75.3155 65.3872 75.1603 66.1674L73.7973 73.0158C73.7183 73.4124 73.4083 73.7225 73.0117 73.8014L66.1632 75.1644C65.3831 75.3196 64.6966 75.7784 64.2546 76.4397L60.3745 82.2453C60.1498 82.5815 59.7448 82.7493 59.3481 82.6704L52.4994 81.3089C51.7192 81.1538 50.9094 81.3148 50.248 81.7567L44.4416 85.6355C44.1053 85.8601 43.6669 85.8601 43.3306 85.6355L37.5243 81.7567C36.8628 81.3148 36.053 81.1538 35.2728 81.3089L28.4241 82.6704C28.0275 82.7493 27.6224 82.5815 27.3977 82.2453L23.5177 76.4397C23.0757 75.7784 22.3891 75.3196 21.609 75.1644L14.7605 73.8014C14.3639 73.7225 14.0539 73.4124 13.975 73.0158L12.612 66.1674C12.4567 65.3872 11.998 64.7007 11.3367 64.2587L5.53109 60.3787C5.19488 60.154 5.02709 59.7489 5.10595 59.3523L6.46751 52.5035C6.62261 51.7233 6.46152 50.9135 6.01967 50.2521L2.14085 44.4457C1.91622 44.1095 1.91622 43.671 2.14085 43.3348L6.01967 37.5284C6.46153 36.867 6.62261 36.0571 6.46751 35.277L5.10595 28.4282C5.02709 28.0316 5.19488 27.6265 5.5311 27.4018L11.3367 23.5218C11.998 23.0798 12.4567 22.3933 12.612 21.6131L13.975 14.7647C14.0539 14.3681 14.3639 14.058 14.7606 13.9791L21.609 12.6161C22.3891 12.4608 23.0757 12.0021 23.5177 11.3408L27.3977 5.53521C27.6224 5.199 28.0275 5.03122 28.4241 5.11007L35.2728 6.47163C36.053 6.62673 36.8628 6.46564 37.5243 6.02379L43.3306 2.14497C43.6669 1.92034 44.1053 1.92034 44.4416 2.14497L50.248 6.02379C50.9094 6.46564 51.7192 6.62673 52.4994 6.47163L59.3481 5.11007C59.7448 5.03122 60.1498 5.199 60.3745 5.53522L64.2546 11.3408C64.6966 12.0021 65.3831 12.4608 66.1632 12.6161L73.0117 13.9791C73.4083 14.058 73.7183 14.3681 73.7973 14.7647L75.1603 21.6131C75.3155 22.3933 75.7742 23.0798 76.4356 23.5218L82.2411 27.4018C82.5774 27.6265 82.7451 28.0316 82.6663 28.4282L81.3047 35.277C81.1496 36.0571 81.3107 36.867 81.7526 37.5284L85.6314 43.3348C85.856 43.671 85.856 44.1095 85.6314 44.4457Z" stroke="#446DFF" stroke-width="2"/>
+</svg>
diff --git a/assets/triangle-up.svg b/assets/triangle-up.svg
new file mode 100644
index 0000000..6f95659
--- /dev/null
+++ b/assets/triangle-up.svg
@@ -0,0 +1,3 @@
+<svg width="50" height="24" viewBox="0 0 50 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.6649 0.532471L49.3298 23.6902L0 23.6902L24.6649 0.532471Z" fill="#4A72FF"/>
+</svg>
diff --git a/css/main.css b/css/main.css
index 935d785..b1f2d0c 100644
--- a/css/main.css
+++ b/css/main.css
@@ -42,15 +42,19 @@ body[data-theme=dark] {
 }
 
 h1 {
-  font-size: max(1.8rem, 4vw);
+  font-size: max(2rem, 4vw);
 }
 
 h2 {
-  font-size: 3vw;
+  font-size: max(1.8rem, 3vw);
 }
 
 h3 {
-  font-size: max(1.2rem, 2vw);
+  font-size: max(1.5rem, 2vw);
+}
+
+h4 {
+  font-size: max(1.2rem, 1.3vw);
 }
 
 a {
@@ -67,6 +71,43 @@ p {
   line-height: 1.5;
 }
 
+button,
+.button {
+  display: inline-flex;
+  cursor: pointer;
+  border: none;
+  outline: none;
+  background: none;
+  font-size: 0.8rem;
+  font-weight: 700;
+  text-decoration: none;
+  text-transform: uppercase;
+  color: rgba(var(--text-color), 1);
+  background-color: rgba(var(--text-color), 0.1);
+  border-radius: 3rem;
+  letter-spacing: 0.05em;
+  padding: 0.5rem 1rem;
+}
+
+.icon {
+  width: 1.2rem;
+  height: 1.2rem;
+  fill: rgba(var(--text-color), 0.9);
+}
+
+.reveal {
+  display: flex;
+  overflow: hidden;
+}
+.reveal span {
+  opacity: 0;
+  transform-origin: left bottom;
+}
+
+.move-in {
+  opacity: 0;
+}
+
 header {
   display: flex;
   position: fixed;
@@ -87,11 +128,49 @@ header {
 }
 
 section {
-  height: 100vh;
+  min-height: 80vh;
   padding-top: 8vh;
   padding-bottom: 8vh;
 }
 
+.section-title {
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  margin-bottom: 3rem;
+  line-height: 1.1;
+}
+.section-title h3 {
+  font-size: 2em;
+}
+
+.colored-section {
+  background-color: var(--accent-color);
+  color: rgba(var(--foreground-color), 1);
+}
+
+.fancy-border {
+  position: relative;
+}
+.fancy-border::before, .fancy-border::after {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 2rem;
+  left: 0;
+}
+.fancy-border--top::before {
+  background: url("../assets/triangle-up.svg");
+  bottom: calc(100% - 0.04rem);
+  background-repeat: repeat-x;
+  background-size: 1.8rem;
+}
+.fancy-border--bottom::after {
+  top: calc(100% - 0.04rem);
+  background: url("../assets/triangle-down.svg");
+  background-repeat: repeat-x;
+  background-size: 1.8rem;
+}
+
 #hero_section {
   position: relative;
   display: flex;
@@ -99,36 +178,19 @@ section {
   gap: 2rem;
   justify-items: center;
   justify-content: center;
-  height: calc(100vh - 6rem);
+  height: calc(100vh - 5rem);
   background-color: var(--accent-color);
   color: rgba(var(--foreground-color), 1);
   text-align: center;
-}
-#hero_section::after {
-  position: absolute;
-  content: "";
-  background: url("../assets/triangle-down.svg");
-  background-repeat: repeat-x;
-  background-size: 1.8rem;
-  width: 100%;
-  height: 2rem;
-  top: calc(100% - 0.03rem);
-  left: 0;
+  margin-top: 3rem;
 }
 #hero_section p {
   max-width: none;
 }
 
-.section-title {
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  font-size: 1.2rem;
-}
-
 #team_members {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
-  margin-top: 2rem;
   gap: 3rem 1.5rem;
 }
 
@@ -136,6 +198,7 @@ section {
   display: flex;
   flex-direction: column;
   text-align: center;
+  cursor: pointer;
 }
 .team-member__image-container {
   display: grid;
@@ -167,11 +230,181 @@ section {
   line-height: normal;
   font-weight: 500;
   font-size: 0.9rem;
+  margin-bottom: 1rem;
+}
+.team-member__button {
+  margin-top: auto;
+  padding: 0.5rem 1rem;
+  align-self: center;
+  background-color: rgba(var(--text-color), 0.1);
+  border-radius: 5rem;
+  text-transform: uppercase;
+  font-weight: 700;
+  font-size: 0.8rem;
+  letter-spacing: 0.05em;
 }
 
+.fancy-list {
+  display: grid;
+  align-items: flex-start;
+}
+.fancy-list__item {
+  display: grid;
+  max-width: 42rem;
+  width: auto;
+  gap: 1rem 2rem;
+  grid-template-areas: "label title" "label description";
+  padding-right: 0;
+  --stamp-size: 3.5rem;
+}
+.fancy-list__item:not(:last-of-type) .fancy-list__item__label-wrapper::after {
+  content: "";
+  position: absolute;
+  width: 0.1rem;
+  height: calc(100% - var(--stamp-size) - 1rem);
+  top: calc(var(--stamp-size) + 0.5rem);
+  background-color: var(--accent-color);
+  z-index: -1;
+}
+.fancy-list__item__label-wrapper {
+  grid-area: label;
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  height: 100%;
+}
+.fancy-list__item__label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--stamp-size);
+  width: var(--stamp-size);
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: rgba(var(--foreground-color), 1);
+  line-height: 1;
+  z-index: 2;
+  text-align: center;
+  background: url("../assets/stamp-full.svg") no-repeat center/contain;
+}
+.fancy-list__item__title {
+  grid-area: title;
+  line-height: 1.4;
+}
+.fancy-list__item__title:last-child {
+  padding-bottom: 3rem;
+}
+.fancy-list__item__description {
+  grid-area: description;
+}
+.fancy-list__item__description:last-child {
+  padding-bottom: 3rem;
+}
+
+#person_bio {
+  margin: auto;
+  border: none;
+  border-radius: 0.5rem;
+  padding: max(1rem, 2vw);
+  box-shadow: 0 1rem 2rem rgba(var(--text-color), 0.1);
+  -webkit-animation: popup 0.3s forwards;
+          animation: popup 0.3s forwards;
+  width: min(100%, 48rem);
+}
+#person_bio button {
+  padding: 0.5rem;
+  background-color: rgba(var(--text-color), 0.2);
+  border-radius: 5rem;
+  margin-bottom: 1.5rem;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  -webkit-backdrop-filter: blur(0.5rem);
+          backdrop-filter: blur(0.5rem);
+}
+
+#person_bio_wrapper {
+  display: grid;
+  gap: 0.5rem 1.5rem;
+  grid-template-columns: min(16rem, 100%) 1fr;
+  grid-template-areas: "image name" "image title" "image bio";
+  grid-template-rows: auto auto 1fr;
+}
+
+#person__image {
+  grid-area: image;
+  width: 100%;
+  height: auto;
+  border-radius: 0.5rem;
+  -o-object-fit: cover;
+     object-fit: cover;
+  aspect-ratio: 3/4;
+}
+
+#person__name {
+  grid-area: name;
+  font-size: 1.5rem;
+  font-weight: 500;
+}
+
+#person__title {
+  grid-area: title;
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+#person__bio {
+  grid-area: bio;
+  font-size: 1rem;
+  font-weight: 400;
+  color: rgba(var(--text-color), 0.8);
+  line-height: 1.5;
+  margin-top: 1rem;
+}
+
+@-webkit-keyframes popup {
+  from {
+    opacity: 0;
+    transform: scale(1.1);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes popup {
+  from {
+    opacity: 0;
+    transform: scale(1.1);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@media screen and (max-width: 40rem) {
+  #poc_images .poc-wrapper:nth-of-type(5) {
+    grid-area: 3/2/4/3;
+  }
+  #person_bio_wrapper {
+    grid-template-columns: 1fr;
+    grid-template-areas: "image" "name" "title" "bio";
+  }
+  #person__image {
+    aspect-ratio: 1/1;
+    margin-bottom: 1.5rem;
+  }
+  .hide-on-small {
+    display: none !important;
+  }
+}
 @media screen and (min-width: 40rem) {
   #team_members {
-    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+    gap: 4vw;
+    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
   }
 }
 @media (hover: hover) {
diff --git a/css/main.min.css b/css/main.min.css
index 8ed32fb..df1554d 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-*{padding:0;margin:0;box-sizing:border-box;font-family:"Poppins",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #4a72ff;--secondary-color: #ffac2e;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);color:rgba(var(--text-color), 1);background-color:rgba(var(--foreground-color), 1)}body>*{padding:0 max(1rem,6vw)}body[data-theme=dark]{--accent-color: #6d83ff;--secondary-color: #d60739;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}h1{font-size:max(1.8rem,4vw)}h2{font-size:3vw}h3{font-size:max(1.2rem,2vw)}a{text-decoration:none;color:var(--accent-color)}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}p{color:rgba(var(--text-color), 0.8);max-width:70ch;line-height:1.5}header{display:flex;position:fixed;top:0;left:0;right:0;z-index:100;padding:1rem;align-items:center;justify-content:space-between;background-color:var(--accent-color)}#company_title{position:relative;margin:auto;color:rgba(var(--foreground-color), 1)}section{height:100vh;padding-top:8vh;padding-bottom:8vh}#hero_section{position:relative;display:flex;flex-direction:column;gap:2rem;justify-items:center;justify-content:center;height:calc(100vh - 6rem);background-color:var(--accent-color);color:rgba(var(--foreground-color), 1);text-align:center}#hero_section::after{position:absolute;content:"";background:url("../assets/triangle-down.svg");background-repeat:repeat-x;background-size:1.8rem;width:100%;height:2rem;top:calc(100% - .03rem);left:0}#hero_section p{max-width:none}.section-title{text-transform:uppercase;letter-spacing:.05em;font-size:1.2rem}#team_members{display:grid;grid-template-columns:repeat(auto-fill, minmax(8rem, 1fr));margin-top:2rem;gap:3rem 1.5rem}.team-member{display:flex;flex-direction:column;text-align:center}.team-member__image-container{display:grid;margin-bottom:1.2rem;place-items:center}.team-member__image-container>*{grid-area:1/1}.team-member__image-container img:first-of-type{width:calc(100% - 1.5rem)}.team-member img{-o-object-fit:cover;object-fit:cover;width:100%;-o-object-position:center;object-position:center;aspect-ratio:1/1;-webkit-mask:url("../assets/stamp.svg") no-repeat center/contain;mask:url("../assets/stamp.svg") no-repeat center/contain}.team-member__name{font-weight:700;font-size:1rem;line-height:1.2}.team-member__title{line-height:normal;font-weight:500;font-size:.9rem}@media screen and (min-width: 40rem){#team_members{grid-template-columns:repeat(auto-fill, minmax(12rem, 1fr))}}@media(hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interactive:hover{background-color:rgba(var(--text-color), 0.06)}}@supports(overflow: overlay){body{overflow:overlay}}.hidden{display:none !important}
\ No newline at end of file
+*{padding:0;margin:0;box-sizing:border-box;font-family:"Poppins",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #4a72ff;--secondary-color: #ffac2e;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);color:rgba(var(--text-color), 1);background-color:rgba(var(--foreground-color), 1)}body>*{padding:0 max(1rem,6vw)}body[data-theme=dark]{--accent-color: #6d83ff;--secondary-color: #d60739;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}h1{font-size:max(2rem,4vw)}h2{font-size:max(1.8rem,3vw)}h3{font-size:max(1.5rem,2vw)}h4{font-size:max(1.2rem,1.3vw)}a{text-decoration:none;color:var(--accent-color)}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}p{color:rgba(var(--text-color), 0.8);max-width:70ch;line-height:1.5}button,.button{display:inline-flex;cursor:pointer;border:none;outline:none;background:none;font-size:.8rem;font-weight:700;text-decoration:none;text-transform:uppercase;color:rgba(var(--text-color), 1);background-color:rgba(var(--text-color), 0.1);border-radius:3rem;letter-spacing:.05em;padding:.5rem 1rem}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.9)}.reveal{display:flex;overflow:hidden}.reveal span{opacity:0;transform-origin:left bottom}.move-in{opacity:0}header{display:flex;position:fixed;top:0;left:0;right:0;z-index:100;padding:1rem;align-items:center;justify-content:space-between;background-color:var(--accent-color)}#company_title{position:relative;margin:auto;color:rgba(var(--foreground-color), 1)}section{min-height:80vh;padding-top:8vh;padding-bottom:8vh}.section-title{text-transform:uppercase;letter-spacing:.02em;margin-bottom:3rem;line-height:1.1}.section-title h3{font-size:2em}.colored-section{background-color:var(--accent-color);color:rgba(var(--foreground-color), 1)}.fancy-border{position:relative}.fancy-border::before,.fancy-border::after{position:absolute;content:"";width:100%;height:2rem;left:0}.fancy-border--top::before{background:url("../assets/triangle-up.svg");bottom:calc(100% - .04rem);background-repeat:repeat-x;background-size:1.8rem}.fancy-border--bottom::after{top:calc(100% - .04rem);background:url("../assets/triangle-down.svg");background-repeat:repeat-x;background-size:1.8rem}#hero_section{position:relative;display:flex;flex-direction:column;gap:2rem;justify-items:center;justify-content:center;height:calc(100vh - 5rem);background-color:var(--accent-color);color:rgba(var(--foreground-color), 1);text-align:center;margin-top:3rem}#hero_section p{max-width:none}#team_members{display:grid;grid-template-columns:repeat(auto-fill, minmax(8rem, 1fr));gap:3rem 1.5rem}.team-member{display:flex;flex-direction:column;text-align:center;cursor:pointer}.team-member__image-container{display:grid;margin-bottom:1.2rem;place-items:center}.team-member__image-container>*{grid-area:1/1}.team-member__image-container img:first-of-type{width:calc(100% - 1.5rem)}.team-member img{-o-object-fit:cover;object-fit:cover;width:100%;-o-object-position:center;object-position:center;aspect-ratio:1/1;-webkit-mask:url("../assets/stamp.svg") no-repeat center/contain;mask:url("../assets/stamp.svg") no-repeat center/contain}.team-member__name{font-weight:700;font-size:1rem;line-height:1.2}.team-member__title{line-height:normal;font-weight:500;font-size:.9rem;margin-bottom:1rem}.team-member__button{margin-top:auto;padding:.5rem 1rem;align-self:center;background-color:rgba(var(--text-color), 0.1);border-radius:5rem;text-transform:uppercase;font-weight:700;font-size:.8rem;letter-spacing:.05em}.fancy-list{display:grid;align-items:flex-start}.fancy-list__item{display:grid;max-width:42rem;width:auto;gap:1rem 2rem;grid-template-areas:"label title" "label description";padding-right:0;--stamp-size: 3.5rem}.fancy-list__item:not(:last-of-type) .fancy-list__item__label-wrapper::after{content:"";position:absolute;width:.1rem;height:calc(100% - var(--stamp-size) - 1rem);top:calc(var(--stamp-size) + .5rem);background-color:var(--accent-color);z-index:-1}.fancy-list__item__label-wrapper{grid-area:label;position:relative;display:flex;align-items:flex-start;justify-content:center;height:100%}.fancy-list__item__label{display:flex;align-items:center;justify-content:center;height:var(--stamp-size);width:var(--stamp-size);font-size:1.5rem;font-weight:700;color:rgba(var(--foreground-color), 1);line-height:1;z-index:2;text-align:center;background:url("../assets/stamp-full.svg") no-repeat center/contain}.fancy-list__item__title{grid-area:title;line-height:1.4}.fancy-list__item__title:last-child{padding-bottom:3rem}.fancy-list__item__description{grid-area:description}.fancy-list__item__description:last-child{padding-bottom:3rem}#person_bio{margin:auto;border:none;border-radius:.5rem;padding:max(1rem,2vw);box-shadow:0 1rem 2rem rgba(var(--text-color), 0.1);-webkit-animation:popup .3s forwards;animation:popup .3s forwards;width:min(100%,48rem)}#person_bio button{padding:.5rem;background-color:rgba(var(--text-color), 0.2);border-radius:5rem;margin-bottom:1.5rem;position:-webkit-sticky;position:sticky;top:0;z-index:1;-webkit-backdrop-filter:blur(0.5rem);backdrop-filter:blur(0.5rem)}#person_bio_wrapper{display:grid;gap:.5rem 1.5rem;grid-template-columns:min(16rem,100%) 1fr;grid-template-areas:"image name" "image title" "image bio";grid-template-rows:auto auto 1fr}#person__image{grid-area:image;width:100%;height:auto;border-radius:.5rem;-o-object-fit:cover;object-fit:cover;aspect-ratio:3/4}#person__name{grid-area:name;font-size:1.5rem;font-weight:500}#person__title{grid-area:title;font-size:1rem;font-weight:500}#person__bio{grid-area:bio;font-size:1rem;font-weight:400;color:rgba(var(--text-color), 0.8);line-height:1.5;margin-top:1rem}@-webkit-keyframes popup{from{opacity:0;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes popup{from{opacity:0;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@media screen and (max-width: 40rem){#poc_images .poc-wrapper:nth-of-type(5){grid-area:3/2/4/3}#person_bio_wrapper{grid-template-columns:1fr;grid-template-areas:"image" "name" "title" "bio"}#person__image{aspect-ratio:1/1;margin-bottom:1.5rem}.hide-on-small{display:none !important}}@media screen and (min-width: 40rem){#team_members{gap:4vw;grid-template-columns:repeat(auto-fit, minmax(11rem, 1fr))}}@media(hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interactive:hover{background-color:rgba(var(--text-color), 0.06)}}@supports(overflow: overlay){body{overflow:overlay}}.hidden{display:none !important}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index 41c3231..cf19072 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -42,13 +42,16 @@ body[data-theme="dark"] {
 }
 
 h1 {
-  font-size: max(1.8rem, 4vw);
+  font-size: max(2rem, 4vw);
 }
 h2 {
-  font-size: 3vw;
+  font-size: max(1.8rem, 3vw);
 }
 h3 {
-  font-size: max(1.2rem, 2vw);
+  font-size: max(1.5rem, 2vw);
+}
+h4 {
+  font-size: max(1.2rem, 1.3vw);
 }
 
 a {
@@ -64,6 +67,39 @@ p {
   max-width: 70ch;
   line-height: 1.5;
 }
+button,
+.button {
+  display: inline-flex;
+  cursor: pointer;
+  border: none;
+  outline: none;
+  background: none;
+  font-size: 0.8rem;
+  font-weight: 700;
+  text-decoration: none;
+  text-transform: uppercase;
+  color: rgba(var(--text-color), 1);
+  background-color: rgba(var(--text-color), 0.1);
+  border-radius: 3rem;
+  letter-spacing: 0.05em;
+  padding: 0.5rem 1rem;
+}
+.icon {
+  width: 1.2rem;
+  height: 1.2rem;
+  fill: rgba(var(--text-color), 0.9);
+}
+.reveal {
+  display: flex;
+  overflow: hidden;
+  span {
+    opacity: 0;
+    transform-origin: left bottom;
+  }
+}
+.move-in {
+  opacity: 0;
+}
 header {
   display: flex;
   position: fixed;
@@ -82,10 +118,50 @@ header {
   color: rgba(var(--foreground-color), 1);
 }
 section {
-  height: 100vh;
+  min-height: 80vh;
   padding-top: 8vh;
   padding-bottom: 8vh;
 }
+.section-title {
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  margin-bottom: 3rem;
+  line-height: 1.1;
+  h3 {
+    font-size: 2em;
+  }
+}
+.colored-section {
+  background-color: var(--accent-color);
+  color: rgba(var(--foreground-color), 1);
+}
+.fancy-border {
+  position: relative;
+  &::before,
+  &::after {
+    position: absolute;
+    content: "";
+    width: 100%;
+    height: 2rem;
+    left: 0;
+  }
+  &--top {
+    &::before {
+      background: url("../assets/triangle-up.svg");
+      bottom: calc(100% - 0.04rem);
+      background-repeat: repeat-x;
+      background-size: 1.8rem;
+    }
+  }
+  &--bottom {
+    &::after {
+      top: calc(100% - 0.04rem);
+      background: url("../assets/triangle-down.svg");
+      background-repeat: repeat-x;
+      background-size: 1.8rem;
+    }
+  }
+}
 #hero_section {
   position: relative;
   display: flex;
@@ -93,40 +169,25 @@ section {
   gap: 2rem;
   justify-items: center;
   justify-content: center;
-  height: calc(100vh - 6rem);
+  height: calc(100vh - 5rem);
   background-color: var(--accent-color);
   color: rgba(var(--foreground-color), 1);
   text-align: center;
-  &::after {
-    position: absolute;
-    content: "";
-    background: url("../assets/triangle-down.svg");
-    background-repeat: repeat-x;
-    background-size: 1.8rem;
-    width: 100%;
-    height: 2rem;
-    top: calc(100% - 0.03rem);
-    left: 0;
-  }
+  margin-top: 3rem;
   p {
     max-width: none;
   }
 }
-.section-title {
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  font-size: 1.2rem;
-}
 #team_members {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
-  margin-top: 2rem;
   gap: 3rem 1.5rem;
 }
 .team-member {
   display: flex;
   flex-direction: column;
   text-align: center;
+  cursor: pointer;
   &__image-container {
     display: grid;
     margin-bottom: 1.2rem;
@@ -154,11 +215,169 @@ section {
     line-height: normal;
     font-weight: 500;
     font-size: 0.9rem;
+    margin-bottom: 1rem;
+  }
+  &__button {
+    margin-top: auto;
+    padding: 0.5rem 1rem;
+    align-self: center;
+    background-color: rgba(var(--text-color), 0.1);
+    border-radius: 5rem;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 0.8rem;
+    letter-spacing: 0.05em;
+  }
+}
+
+.fancy-list {
+  display: grid;
+  align-items: flex-start;
+  &__item {
+    display: grid;
+    max-width: 42rem;
+    width: auto;
+    gap: 1rem 2rem;
+    grid-template-areas: "label title" "label description";
+    padding-right: 0;
+    --stamp-size: 3.5rem;
+    &:not(:last-of-type) {
+      .fancy-list__item__label-wrapper {
+        &::after {
+          content: "";
+          position: absolute;
+          width: 0.1rem;
+          height: calc(100% - var(--stamp-size) - 1rem);
+          top: calc(var(--stamp-size) + 0.5rem);
+          background-color: var(--accent-color);
+          z-index: -1;
+        }
+      }
+    }
+    &__label-wrapper {
+      grid-area: label;
+      position: relative;
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      height: 100%;
+    }
+    &__label {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: var(--stamp-size);
+      width: var(--stamp-size);
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: rgba(var(--foreground-color), 1);
+      line-height: 1;
+      z-index: 2;
+      text-align: center;
+      background: url("../assets/stamp-full.svg") no-repeat center / contain;
+    }
+    &__title {
+      grid-area: title;
+      line-height: 1.4;
+      &:last-child {
+        padding-bottom: 3rem;
+      }
+    }
+    &__description {
+      grid-area: description;
+      &:last-child {
+        padding-bottom: 3rem;
+      }
+    }
+  }
+}
+
+#person_bio {
+  margin: auto;
+  border: none;
+  border-radius: 0.5rem;
+  padding: max(1rem, 2vw);
+  box-shadow: 0 1rem 2rem rgba(var(--text-color), 0.1);
+  animation: popup 0.3s forwards;
+  width: min(100%, 48rem);
+  button {
+    padding: 0.5rem;
+    background-color: rgba(var(--text-color), 0.2);
+    border-radius: 5rem;
+    margin-bottom: 1.5rem;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    backdrop-filter: blur(0.5rem);
+  }
+}
+#person_bio_wrapper {
+  display: grid;
+  gap: 0.5rem 1.5rem;
+  grid-template-columns: min(16rem, 100%) 1fr;
+  grid-template-areas: "image name" "image title" "image bio";
+  grid-template-rows: auto auto 1fr;
+}
+#person__image {
+  grid-area: image;
+  width: 100%;
+  height: auto;
+  border-radius: 0.5rem;
+  object-fit: cover;
+  aspect-ratio: 3/4;
+}
+#person__name {
+  grid-area: name;
+  font-size: 1.5rem;
+  font-weight: 500;
+}
+#person__title {
+  grid-area: title;
+  font-size: 1rem;
+  font-weight: 500;
+}
+#person__bio {
+  grid-area: bio;
+  font-size: 1rem;
+  font-weight: 400;
+  color: rgba(var(--text-color), 0.8);
+  line-height: 1.5;
+  margin-top: 1rem;
+}
+@keyframes popup {
+  from {
+    opacity: 0;
+    transform: scale(1.1);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@media screen and (max-width: 40rem) {
+  #poc_images {
+    .poc-wrapper {
+      &:nth-of-type(5) {
+        grid-area: 3/2/4/3;
+      }
+    }
+  }
+  #person_bio_wrapper {
+    grid-template-columns: 1fr;
+    grid-template-areas: "image" "name" "title" "bio";
+  }
+  #person__image {
+    aspect-ratio: 1/1;
+    margin-bottom: 1.5rem;
+  }
+  .hide-on-small {
+    display: none !important;
   }
 }
 @media screen and (min-width: 40rem) {
   #team_members {
-    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+    gap: 4vw;
+    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
   }
 }
 @media (hover: hover) {
diff --git a/index.html b/index.html
index 050722c..6530691 100644
--- a/index.html
+++ b/index.html
@@ -20,45 +20,107 @@
             TC<sup>2</sup>
         </h4>
     </header>
-    <section id="hero_section">
+    <section id="hero_section" class="fancy-border fancy-border--bottom">
         <h1>Company Mission here <br>
             in huge font</h1>
     </section>
-    <section id="team_section">
-        <h3 class="section-title">Team</h3>
-        <ul id="team_members"></ul>
+    <section>
+        <div class="grid section-title">
+            <h4 class="reveal">
+                <span>
+                    What can be
+                </span>
+            </h4>
+            <h3 class="reveal">
+                <span>
+                    Certified?
+                </span>
+            </h3>
+        </div>
     </section>
+    <section id="">
+        <h3 class="section-title reveal">
+            <span>
+                Methodology
+            </span>
+        </h3>
+        <ul id="methodology_list" class="fancy-list"> </ul>
+    </section>
+    <section id="team_section">
+        <h3 class="section-title reveal">
+            <span>
+                Team
+            </span>
+        </h3>
+        <ul id="team_members" class="move-in"></ul>
+    </section>
+    <dialog id="person_bio">
+        <button onclick="closePersonBio()">
+            <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                fill="#000000">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path
+                    d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+            </svg>
+        </button>
+        <div id="person_bio_wrapper">
+            <img src="" alt="" id="person__image">
+            <h3 id="person__name"></h3>
+            <p id="person__title"></p>
+            <p id="person__bio"></p>
+        </div>
+    </dialog>
     <script>
         const teamMembers = [
             {
                 name: 'Parin Lapasia',
                 title: 'Principal director and shareholder',
-                image: 'assets/craig-mckay-jmURdhtm7Ng-unsplash.jpg'
+                image: 'assets/craig-mckay-jmURdhtm7Ng-unsplash.jpg',
+                bio: `Parin Lapasia is a highly experienced cybersecurity professional with expertise in conducting PCI Data Security assessments globally in over 30 countries. He has worked with various cybersecurity standards and frameworks, including ISA 62443, ISO 27001, NSW Cyber Security Policy Reporting, ACSC Essential Eight, Prudential Standard CPS 234, HITRUST, HIPAA, BITS FISAP, and more.
+                    \n\nParin holds multiple certifications in the cybersecurity domain, such as Certified Information Systems Security Professional (CISSP), Certified Information Systems Auditor (CISA), Certified Information Security Manager (CISM), Payment Card Industry (PCI) Qualified Security Assessor (QSA), and others.
+                    \n\nHe has a strong educational background, with a Master of Science in Computer Applications (M.Sc) from Symbiosis Institute of Computer Studies & Research and a Bachelor of Commerce (B.Com) from Ramniranjan Anandilal Podar College.
+                    \n\nIn his professional experience, Parin has worked with various organizations, including DeepComply Pty Ltd, where he provided cybersecurity consulting and advisory services to multiple clients. He has worked on projects related to cyber security risk assessments, compliance, vulnerability management, third-party supplier risk assessment, and technology assessments.
+                    \n\nBefore DeepComply, Parin served as the Senior Vice President of Security Consulting at ControlCase International Pvt. Ltd., where he conducted a wide range of compliance-related assignments and audits, including PCI DSS, ISO 27001, HIPAA, HITRUST, VISA PIN Security, and more. He managed a team of QSAs and consultants and was responsible for project management and delivery.
+                    \n\nAdditionally, Parin worked as a Security Consultant & ISMS Manager at Network Intelligence (I) Pvt Ltd., where he focused on vulnerability assessment, penetration testing, ISO 27001/BS7799 consulting, and information security audits.
+                    \n\nOverall, Parin Lapasia's extensive experience and expertise in cybersecurity make him a valuable asset in the field, with a track record of successful assessments and risk management for various organizations.`
             },
             {
                 name: 'Rohit Tripathy',
                 title: 'Principal director and shareholder',
-                image: 'assets/Rohit Tripathy.jpg'
+                image: 'assets/Rohit Tripathy.jpg',
+                bio: `Rohit Tripathy is a versatile entrepreneur who has taken on various roles throughout his career. He started as an ethical hacker, then transitioned to become a Technology Consultant, followed by a Product Designer, and later a Credit Card Security Entrepreneur. He further evolved into a thinker/experimenter and eventually became a long-term investor and full-time traveler. Currently, he is a Blockchain Entrepreneur and the Founder of RanchiMall, a blockchain-based virtual mall that focuses on selling unique and innovative products purely on the internet.
+                    \n\nRohit has a strong belief in bootstrapping, which he feels provides valuable learning experiences and enjoyment. He has applied blockchain technology to different industries, including real estate, startups, financial investments, internships, and e-commerce, with the goal of captivating the people of Ranchi.
+                    \n\nAs an avid traveler, Rohit has worked on all continents except Antarctica and has visited over 120 countries. He is a seasoned public speaker, having given three TEDx Talks and made multiple appearances on Indian national television, sharing his entrepreneurial journey.
+                    \n\nHis professional experience includes founding RanchiMall, co-founding Control Case, and being part of Intricap. Prior to his entrepreneurial ventures, he worked as a Senior Consultant at Ernst & Young, where he gained valuable experience in setting up e-Security practices.
+                    \n\nRohit holds a PGDIM degree in Finance/Technology from the National Institute of Industrial Engineering and a BE degree in Industrial Electronics from Shivaji University.
+                    \n\nIn summary, Rohit Tripathy is a multi-faceted individual with a diverse background, a passion for blockchain technology, and a keen interest in entrepreneurship and innovation.`
             },
             {
                 name: 'Puneet Sondh',
                 title: 'Principal director',
-                image: 'assets/Puneet Sondh.jpg'
+                image: 'assets/Puneet Sondh.jpg',
+                bio: `Puneet Sondh is a highly experienced financial services professional with a strong leadership background. He has successfully managed teams in diverse global environments, specializing in operational risk, financial crime, and business transformation.\n\n Puneet's notable roles include Partner at Wipro Ltd, Business and Risk Consultant, Head of Risk and Compliance at State Street Syntel Services, and Assistant General Manager at ICICI Bank.\n\nHe holds advanced degrees in finance and industrial management, and has certifications in FinTech and Financial Crime.\n\n Puneet's expertise and achievements make him a valuable asset in the financial services industry.`
             },
             {
                 name: 'Ruchir Gupta',
                 title: 'Principal director',
-                image: 'assets/Ruchir Gupta.jpg'
+                image: 'assets/Ruchir Gupta.jpg',
+                bio: `Ruchir Gupta is a highly experienced and accomplished professional with over 23 years of expertise in global Supply Management. He holds a Bachelor's degree in Mechanical Engineering from Delhi College of Engineering and a Post Graduate Diploma in Industrial Management from NITIE Mumbai.
+                    \n\nRuchir started his career as a Planning Engineer at Punj Lloyd Ltd, then moved on to work for Marico Ltd, where he managed the Edible Oils Business and implemented various planning strategies. He later ventured into management consulting, providing solutions to clients worldwide in areas like Planning Solution Enhancement, Global Inventory Optimization, S&OP process Design, and predictive models.
+                    \n\nIn 2009, Ruchir joined Timex Watches group and led the Supply Chain and Distribution center operations, driving significant transformations and cost improvement programs. He later worked for various consulting firms, including Accenture, Scanomi, and Chainalytics, where he continued to excel in delivering supply chain optimization projects for clients across different industries.
+                    \n\nCurrently, Ruchir is the Director of Material Planning at Micron Semiconductor Asia Operations, where he oversees the Global Back-end Materials Planning team and is responsible for establishing robust and scalable planning processes. His expertise covers 20+ locations with a focus on Package Assembly & SMT operations.
+                    \n\nThroughout his career, Ruchir has been recognized for his excellence in supply chain management and has received numerous accolades for his contributions to various projects. He is known for his open communication, delegation with trust, attention to detail, and soft influence through cross-stakeholder collaboration.
+                    \n\nRuchir's vast experience, leadership, and expertise make him a valuable asset in the field of supply chain management and materials planning.`
             },
         ]
 
-        window.onload = () => {
-            const teamMembersList = document.getElementById('team_members')
-            teamMembers.sort((a, b) => a.name.localeCompare(b.name))
-            teamMembers.forEach(member => {
-                const { image, name, title } = member
+
+        const render = {
+            teamMember(details, index) {
+                const { image, name, title } = details
                 const memberItem = document.createElement('li')
                 memberItem.classList.add('team-member')
+                memberItem.setAttribute('data-index', index)
                 memberItem.innerHTML = `
                     <div class="team-member__image-container">
                         <img src="${image}" alt="${name} profile picture" loading="lazy">
@@ -66,10 +128,177 @@
                     </div>
                     <p class="team-member__name">${name},</p>
                     <p class="team-member__title">${title}</p>
+                    <span class="team-member__button">Learn more</span>
                 `
+                return memberItem
+            },
+            fancyListItem(details, index) {
+                const { label, title, description } = details
+                const listItem = document.createElement('li')
+                listItem.classList.add('fancy-list__item')
+                listItem.innerHTML = `
+                    <div class="fancy-list__item__label-wrapper">
+                        <span class="fancy-list__item__label">${label || index + 1}</span>
+                    </div>
+                    ${title ? `<h4 class="fancy-list__item__title">${title}</h4>` : ''}
+                    ${description ? `<p class="fancy-list__item__description">${description}</p>` : ''}
+                `
+                return listItem
+            }
+        }
+
+        window.onload = () => {
+            const teamMembersList = document.getElementById('team_members')
+            teamMembers.sort((a, b) => a.name.localeCompare(b.name))
+            teamMembers.forEach((member, index) => {
+                const memberItem = render.teamMember(member, index)
                 teamMembersList.appendChild(memberItem)
             })
+            document.getElementById('team_members').addEventListener('click', e => {
+                const index = e.target.closest('li').dataset.index
+                const { image, name, title, bio } = teamMembers[index]
+                document.getElementById('person__image').src = image
+                document.getElementById('person__name').textContent = name
+                document.getElementById('person__title').textContent = title
+                document.getElementById('person__bio').innerText = bio
+                document.getElementById('person_bio').showModal()
+                document.body.style.overflow = 'hidden';
+                document.body.style.top = `-${window.scrollY}px`;
+            })
+            dataLists.forEach(list => {
+                const { target, list: items } = list
+                const listContainer = document.getElementById(target)
+                if (!listContainer) return console.error(`No element found with id ${target}`)
+                items.forEach((item, index) => {
+                    const listItem = render.fancyListItem(item, index)
+                    listContainer.appendChild(listItem)
+                })
+            })
+            const headingObserver = new IntersectionObserver((entries, observer) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.firstElementChild.animate([
+                            {
+                                transform: 'translateY(0.5em)',
+                                opacity: 0
+                            },
+                            {
+                                transform: 'none',
+                                opacity: 1
+                            },
+                        ], {
+                            duration: 300,
+                            easing: 'ease',
+                            fill: 'forwards',
+                            delay: 100
+                        })
+                        observer.unobserve(entry.target)
+                    }
+                })
+            }, {
+                threshold: 0.8
+            })
+
+            document.querySelectorAll('.reveal').forEach(heading => {
+                headingObserver.observe(heading)
+            })
+            const sectionObserver = new IntersectionObserver((entries, observer) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.animate([
+                            {
+                                transform: 'translateX(-0.5em)',
+                                opacity: 0
+                            },
+                            {
+                                transform: 'none',
+                                opacity: 1
+                            },
+                        ], {
+                            duration: 300,
+                            easing: 'ease',
+                            fill: 'forwards',
+                            delay: 100
+                        })
+                        observer.unobserve(entry.target)
+                    }
+                })
+            }, {
+                threshold: 0.1
+            })
+
+            document.querySelectorAll('.move-in').forEach(section => {
+                sectionObserver.observe(section)
+            })
         }
+        function closePersonBio() {
+            const scrollY = document.body.style.top;
+            window.scrollTo(0, parseInt(scrollY || '0') * -1);
+            document.body.style.overflow = '';
+            document.body.style.top = 'initial';
+            document.getElementById('person_bio').animate([
+                {
+                    opacity: 1,
+                    transform: 'scale(1)'
+                },
+                {
+                    opacity: 0,
+                    transform: 'scale(1.1)'
+                }
+            ], {
+                duration: 100,
+                easing: 'ease',
+            }).finished.then(animation => {
+                animation.commitStyles();
+                document.getElementById('person_bio').close()
+            })
+        }
+
+        const dataLists = [
+            {
+                target: 'methodology_list',
+                list: [
+                    {
+                        title: 'Title',
+                        description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.'
+                    },
+                    {
+                        title: 'Title',
+                        description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.'
+                    },
+                    {
+                        title: 'Title',
+                        description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.'
+                    },
+                    {
+                        title: 'Title',
+                        description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.'
+                    },
+                    {
+                        title: 'Title',
+                        description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.'
+                    },
+                    {
+                        title: 'Title',
+                        description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.'
+                    },
+                    {
+                        title: 'Title',
+                        description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.'
+                    },
+                    {
+                        title: 'Title',
+                        description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.'
+                    },
+                    {
+                        title: 'Title',
+                        description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.'
+                    },
+                ]
+            }
+        ]
+
+
     </script>
 </body>