@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

:root {
  --clr-primary-400: #ffffff;
  --clr-secondary-400: #48556a;
  --clr-secondary-500: #19212e;
  --clr-neutral-100: #ffffff;
  --clr-neutral-200: #ffffff;
  --clr-neutral-300: #cfcfcf;
  --clr-blackish: #000000;
  --person-photo-bot-space: 7rem;

  --ff-primary: "Roboto", sans-serif;

  --fw-400: 500;
  --fw-700: 600;

  --fs-300: 0.6875rem;
  --fs-400: 0.8125rem;
  --fs-500: 1.25rem;
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  margin: 0;
  background: rgb(14, 13, 13);
  background-image: linear-gradient(55deg, rgb(14, 13, 13) 0%);
  /*background-image: linear-gradient(
    55deg,
    rgb(0, 0, 0) 0%,
    rgb(5, 5, 6) 30%,
    rgb(13, 18, 27) 56%,
    rgb(7, 4, 37) 96%,
    rgba(0, 0, 0, 1) 99%
  );*/
  overflow-x: hidden;
}

.highlight {
  /*background: rgb(255, 255, 255);*/
  color: rgb(255, 145, 0);
}

.color-change {
  color: rgb(255, 145, 0);
}
.main-image {
  position: absolute;
  top: 15%;
  left: -11%;
  max-width: 33%;
  z-index: 0;
}
.main-video {
  position: absolute;
  top: 15%;
  left: 40%;
  max-width: 33%;
  z-index: 0;
}
.main-image-right {
  position: absolute;
  align-self: flex-start;

  right: -5%;
  max-width: 25%;
  z-index: -1;
}
.main-image-right-big {
  position: absolute;
  align-self: flex-start;

  right: -5%;
  width: 35%;
  z-index: -1;
}
.main-image-left {
  position: absolute;
  align-self: flex-start;

  left: -5%;
  max-width: 25%;
  z-index: -1;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  display: grid;
  place-content: center;
  min-height: 100vh;
  position: relative; /* ensures fixed children anchor to viewport, not grid cell */

  font-family: var(--ff-primary);
  font-weight: var(--fw-400);

  /*background-color: var(--clr-neutral-200);*/
}

h1,
h2,
h3 {
  font-weight: var(--fw-700);
}

/* utilities */
.flex {
  display: flex;
  gap: var(--gap, 1rem);
  justify-content: center;
  /*align-items: center;*/
}

.flow > *:where(:not(:first-child)) {
  margin-top: var(--flow-spacer, 1em);
}

.bg-primary-400 {
  background: var(--clr-primary-400);
}
.bg-secondary-400 {
  background: var(--clr-secondary-400);
}
.bg-secondary-500 {
  background: var(--clr-secondary-500);
}
.bg-ppdyp-grey {
  background: rgb(14, 13, 13);
}

.bg-neutral-100 {
  background: var(--clr-neutral-100);
}
.bg-blackish {
  background: var(--clr-blackish);
}

.text-white {
  color: white;
  /*font-family: "Lato", sans-serif;*/
  font-family: "Roboto", sans-serif;
}
.uppercase {
  text-transform: uppercase;
}

.text-neutral-100 {
  color: var(--clr-neutral-100);
}
.text-secondary-400 {
  color: var(--clr-secondary-400);
}
.text-blackish {
  color: var(--clr-blackish);
}
.border-primary-400 {
  border: 2px solid #a775f1;
}

/* components */
.research-grid {
  display: grid;
  gap: 1.5rem;
  grid-auto-columns: 1fr;

  grid-template-areas:
    "one"
    "two"
    "three"
    "four"
    "five"
    "six"
    "seven"
    "eight"
    "nine"
    "ten";

  padding-block: 1rem;
  width: min(60%, 60rem);
  margin-inline: auto;
  z-index: 999;
}

.research {
  font-size: var(--fs-400);
  padding-bottom: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 0.5rem;
  box-shadow: 2.5rem 3.75rem 3rem -3rem (var(--clr-secondary-400) / 0.25);
}

.testimonial:nth-child(1) {
  grid-area: one;
}
.testimonial:nth-child(2) {
  grid-area: two;
}
.testimonial:nth-child(3) {
  grid-area: three;
}
.testimonial:nth-child(4) {
  grid-area: four;
}
.testimonial:nth-child(5) {
  grid-area: five;
}
.testimonial:nth-child(6) {
  grid-area: six;
}
.testimonial:nth-child(7) {
  grid-area: seven;
}
.testimonial:nth-child(8) {
  grid-area: eight;
}
.testimonial:nth-child(9) {
  grid-area: nine;
}
.testimonial:nth-child(10) {
  grid-area: ten;
}
.testimonial:nth-child(11) {
  grid-area: eleven;
}
.testimonial:nth-child(12) {
  grid-area: twelve;
}
.testimonial:nth-child(13) {
  grid-area: thirteen;
}
.testimonial:nth-child(14) {
  grid-area: fourteen;
}
.testimonial:nth-child(15) {
  grid-area: fifteen;
}
.testimonial:nth-child(16) {
  grid-area: sixteen;
}
.testimonial:nth-child(17) {
  grid-area: seventeen;
}

@media screen and (max-width: 33em) {
  .research-grid {
    grid-template-areas:
      "one one"
      "two two"
      "three three"
      "four four"
      "five five"
      "six six "
      "seven seven"
      "eight eight"
      "nine nine"
      "ten ten "
      "eleven eleven"
      "twelve twelve "
      "thirteen thirteen"
      "fourteen fourteen"
      "fifteen fifteen"
      "sixteen sixteen "
      "seventeen seventeen";
    width: min(95%, 95rem);

    padding: 0;
  }
}

@media screen and (min-width: 38em) {
  .research-grid {
    grid-template-areas:
      "one one"
      "two two"
      "three three"
      "four four"
      "five five"
      "six six "
      "seven seven"
      "eight eight"
      "nine nine"
      "ten ten "
      "eleven eleven"
      "twelve twelve "
      "thirteen thirteen"
      "fourteen fourteen"
      "fifteen fifteen"
      "sixteen sixteen "
      "seventeen seventeen";
  }
}

@media screen and (min-width: 54em) {
  .research-grid {
    grid-template-areas:
      "one one one"
      "two two two "
      "three three three"
      "four four four"
      "five five five"
      "six six six"
      "seven seven seven"
      "eight eight eight"
      "nine nine nine"
      "ten ten ten"
      "eleven eleven eleven"
      "twelve twelve twelve"
      "thirteen thirteen thirteen"
      "fourteen fourteen fourteen"
      "fifteen fifteen fifteen"
      "sixteen sixteen sixteen"
      "seventeen seventeen seventeen";
  }
}

@media screen and (min-width: 75em) {
  .research-grid {
    grid-template-areas:
      "one one one one"
      "two two two two"
      "three three three three"
      "four four four four"
      "five five five five"
      "six six six six"
      "seven seven seven seven"
      "eight eight eight eight";
  }
}

.research.quote {
  background-image: url("./images/bg-pattern-quotation.svg");
  background-repeat: no-repeat;
  background-position: top right 10%;
}

.research .name {
  font-family: "Open Sans", sans-serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
}

.research .people {
  text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: 100;
  opacity: 0.9;
}

.research > p:first-of-type {
  font-size: var(--fs-500);
  line-height: 1.2;
}

.research > p:last-of-type {
  opacity: 0.7;
}

.research-container {
  top: 10vh;
  position: relative;
  padding-bottom: 150px;
}
.container-grid {
  display: grid;
  grid-template-columns: 0.4fr 1fr;
  gap: 2px 2px;
  z-index: 999;
}

.gridTitle {
  grid-area: 1 / 2 / 2 / 2;
}

.gridText {
  grid-area: 1 / 2 / 2 / 2;
  text-align: justify;
  text-justify: inter-word;
  z-index: 999;
  font-size: 16px;
  font-weight: 250;
  font-style: normal;
  line-height: 1.6em;
  font-family: "Roboto", sans-serif;
  z-index: 999;
}

.flex-item {
  min-width: 12rem;
}

.grid-col-span-4 {
  grid-column: span 4;
}
.grid-col-span-3 {
  grid-column: span 3;
}

.person__container {
  background: #ff6adf00;
  aspect-ratio: 1 / 1.4;
  display: grid;
  align-items: end;
  border-radius: 100vw 100vw 100vw 100vw;
  overflow: hidden;
}

.person__circle {
  grid-area: 1 / 1 / 1 / 1;
  position: relative;
  inset: auto 0 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  border-radius: 50%;
  object-fit: cover;

  transform: scale(1);
  background: linear-gradient(
    0deg,
    rgb(18, 18, 18) 12%,
    rgba(0, 0, 0, 0.258) 40%,
    rgba(237, 238, 234, 0.638) 50%,
    rgba(237, 238, 234, 0.379) 99%
  );
}
.person__img {
  grid-area: 1 / 1 / 1 / 1;
  position: relative;
  left: -0.5rem;
  bottom: 3rem;
  z-index: 2;
  transform: scale(1.2);
}

.person {
  max-width: 25rem;
  margin-inline: auto;
  position: relative;
}

.redim_pcontainer {
  transform: scale(0.9);
}

.pull_img_down {
  translate: 0% 15%;
}

.heading-dummy {
  /*this is strictly to push the grid down, because I'm a noob and don't know how to do it in a simpler way*/
  top: 50vh;
  margin: 50px;
  color: rgb(14, 13, 13);
}

.floating {
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes floating {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(3px);
  }
  100% {
    transform: translateY(-0px);
  }
}
.subheading {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
}

.align-right {
  text-align: right;
}
.align-left {
  text-align: left;
}

.color-swirl {
  background: #000;
  position: relative;
  z-index: -1;
}

.color-swirl:after {
  z-index: -1;
  position: absolute;
  content: "";
  top: -5px;
  bottom: -5px;
  left: -5px;
  right: -5px;
  background: linear-gradient(45deg, #ff0047, #6eff00);
  pointer-events: none;
  animation: animate 10s linear infinite;
}

@keyframes animate {
  0% {
    filter: blur(4px) hue-rotate(0deg);
  }

  100% {
    filter: blur(4px) hue-rotate(360deg);
  }
}

/* ── Research page mobile fixes ────────────────────────────────────────────
   body { display: grid; place-content: center } centers the content grid
   but on some iOS browsers it shifts the grid area, causing position:fixed
   elements (logo, nav) to appear misaligned or off-screen.
   Override the body layout on mobile to plain block so fixed elements
   anchor correctly to the viewport.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 75em) {
  body {
    display: block;
    /* Prevent the absolutely-positioned decorative images from creating
       a horizontal scroll that pushes the fixed hamburger off-screen */
    overflow-x: hidden;
  }

  /* Hide the large decorative molecule images that overflow sideways —
     they are purely aesthetic and not readable at mobile sizes anyway */
  .main-image-container,
  .main-image,
  .main-image-right,
  .main-image-right-big,
  .main-image-left,
  .main-video {
    display: none;
  }

  /* Clamp logo width so it doesn't overflow on narrow screens */
  .logo-head {
    width: clamp(80px, 16vw, 180px) !important;
    max-width: clamp(80px, 16vw, 180px) !important;
  }
}

/* ── Research lineage visualisation ─────────────────────────────────── */
.rv-section {
  position: relative;
  max-width: 1240px;
  margin: 5rem auto 6rem;
  padding: 0 1.5rem;
  z-index: 2;
}

.rv-header {
  text-align: center;
  margin-bottom: 1.8rem;
}

.rv-title {
  margin: 0 0 0.45rem;
  color: #f4f6fb;
  font-family: "Roboto", sans-serif;
  font-size: clamp(1.6rem, 2.8vw, 2.35rem);
  font-weight: 300;
}

.rv-sub,
.rv-note {
  margin: 0;
  color: rgba(230, 235, 245, 0.72);
  font-family: "Roboto", sans-serif;
}

.rv-tabs-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.35rem;
}

.rv-tab {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  padding: 0.7rem 1.1rem;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.rv-tab:hover,
.rv-tab:focus-visible {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.34);
  outline: none;
  transform: translateY(-1px);
}

.rv-tab.on {
  color: #0b1216;
  background: rgba(127, 224, 138, 0.96);
  border-color: rgba(127, 224, 138, 1);
}

.rv-panel {
  display: none;
}

.rv-panel.on {
  display: block;
}

.rv-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(18rem, 0.95fr);
  gap: 1rem;
  align-items: start;
}

.rv-wrap,
.rv-detail {
  backdrop-filter: blur(14px);
  background: rgba(7, 9, 12, 0.62);
  border: none;
  border-radius: 1.35rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
}

.rv-wrap {
  overflow-x: auto;
  overflow-y: hidden;
}

.rv-detail {
  min-height: 28rem;
  max-height: 42rem;
  overflow: auto;
  padding: 1.15rem 1.1rem;
}

.rv-svg {
  width: 100%;
  min-height: 30rem;
  display: block;
}

.rv-note {
  margin-top: 0.9rem;
  text-align: center;
  font-size: 0.92rem;
}

.rv-tree-link {
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 1.35px;
}

.rv-tree-node circle {
  stroke-width: 1.3px;
}

.rv-tree-label {
  fill: #edf2f8;
  font-family: "Roboto", sans-serif;
}

.rv-tree-label-root,
.rv-tree-label-cluster {
  font-size: 0.98rem;
  font-weight: 500;
}

.rv-tree-label-period {
  font-size: 0.88rem;
  fill: rgba(237, 242, 248, 0.92);
}

.rv-tree-label-paper {
  font-size: 0.77rem;
  fill: rgba(237, 242, 248, 0.76);
}

.rv-lane-label,
.rv-timeline-count {
  fill: #edf2f8;
  font-family: "Roboto", sans-serif;
}

.rv-lane-label {
  font-size: 0.9rem;
}

.rv-timeline-count {
  font-size: 0.78rem;
  font-weight: 600;
  pointer-events: none;
}

.rv-detail-card h3 {
  margin: 0 0 0.65rem;
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 500;
}

.rv-detail-card p {
  margin: 0 0 0.65rem;
  color: rgba(237, 242, 248, 0.78);
}

.rv-detail-kicker {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  color: rgba(127, 224, 138, 0.95) !important;
}

.rv-detail-copy {
  line-height: 1.6;
}

.rv-detail-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: 0.55rem;
}

.rv-detail-list li {
  padding: 0.72rem 0.8rem;
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(244, 246, 251, 0.9);
  line-height: 1.45;
}

.rv-paper-year {
  display: inline-block;
  min-width: 4.2rem;
  color: rgba(127, 224, 138, 0.95);
  font-weight: 500;
}

.rv-detail-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  margin: 0 0.35rem 0.35rem 0;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.rv-detail-pill:first-child {
  border-color: rgba(127, 224, 138, 0.45);
}

@media (max-width: 980px) {
  .rv-panel-grid {
    grid-template-columns: 1fr;
  }

  .rv-detail {
    min-height: 15rem;
    max-height: none;
  }

  .rv-svg {
    min-height: 24rem;
  }
}

@media (max-width: 680px) {
  .rv-section {
    padding: 0 0.85rem;
    margin-top: 3.5rem;
  }

  .rv-wrap,
  .rv-detail {
    border-radius: 1rem;
  }

  .rv-tab {
    width: 100%;
  }

  .rv-paper-year {
    min-width: 3.6rem;
  }
}


.rv-root-link {
  fill: none;
  stroke-width: 1.8px;
  opacity: 0.72;
}

.rv-root-node {
  fill: rgba(255, 255, 255, 0.1);
  stroke: rgba(255, 255, 255, 0.8);
  stroke-width: 1.4px;
}

.rv-root-label,
.rv-year-label,
.rv-trunk-label {
  font-family: "Roboto", sans-serif;
}

.rv-root-label {
  fill: #edf2f8;
  font-size: 1rem;
  font-weight: 500;
}

.rv-trunk-label {
  fill: currentColor;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  opacity: 0.96;
}

.rv-cluster-node {
  stroke: #101013;
  stroke-width: 1.3px;
}

.rv-cluster-group.is-selected .rv-cluster-node,
.rv-root-node.is-selected {
  stroke: #ffffff;
  stroke-width: 2px;
}

.rv-trunk {
  stroke-width: 2px;
  opacity: 0.78;
}

.rv-year-guide {
  stroke: rgba(255, 255, 255, 0.08);
  stroke-dasharray: 3 8;
}

.rv-year-label {
  font-size: 0.78rem;
  fill: rgba(237, 242, 248, 0.68);
}

.rv-paper-stem {
  fill: none;
  stroke-width: 1px;
  opacity: 0.55;
}

@media (max-width: 980px) {
  .rv-svg {
    min-height: 26rem;
  }

  .rv-root-label {
    font-size: 0.94rem;
  }

  .rv-trunk-label {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
  }
}

.rv-tabs-row { display: none; }