/* ==========================================================================
   Mayscene portfolio — faithful rebuild of the Webflow site (homepage)
   Desktop-first, with max-width breakpoints at 991px and 479px
   to mirror the original's responsive behaviour.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: #333;
  background-color: #fff;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
  min-height: 100%;
}

img { vertical-align: middle; max-width: 100%; display: inline-block; }

a { background-color: transparent; color: #0082f3; }

h1, h2 { margin-top: 20px; font-weight: bold; }

p { margin-top: 0; margin-bottom: 10px; }

/* --- shared layout --------------------------------------------------------- */

.container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

/* --- header -------------------------------------------------------------- */

.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.95);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.brand {
  display: inline-block;
  position: relative;
  color: #333;
  text-decoration: none;
}

.brand img { width: 63px; margin-top: 20px; display: block; }

.nav-menu { display: flex; align-items: center; }

.nav-link {
  color: #333;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 14px;
  line-height: 20px;
  padding: 20px;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

.nav-link.current { color: #0082f3; }
.nav-link:active { color: #8b5050; }
.nav-link:visited { color: #333; }
.nav-link.sub-link { display: none; }

.menu-button {
  display: none;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  padding: 18px;
}

.menu-button .bars,
.menu-button .bars::before,
.menu-button .bars::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background-color: #333;
  transition: transform .2s ease, opacity .2s ease;
}
.menu-button .bars { position: relative; }
.menu-button .bars::before { position: absolute; top: -7px; left: 0; }
.menu-button .bars::after  { position: absolute; top: 7px;  left: 0; }

.menu-button.open { background-color: #000; }
.menu-button.open .bars { background-color: transparent; }
.menu-button.open .bars::before { transform: translateY(7px) rotate(45deg); background-color: #fff; }
.menu-button.open .bars::after  { transform: translateY(-7px) rotate(-45deg); background-color: #fff; }

/* --- hero -------------------------------------------------------------- */

.section {
  display: flex;
  max-width: none;
  height: 550px;
  margin: 0 0 100px;
  padding-top: 100px;
  border-bottom: 1px solid #000;
}

.hero-inner { display: flex; width: 100%; }

.hero-copy { width: 50%; flex: 0 auto; }

.heading-2 {
  margin-top: 20px;
  margin-bottom: 20px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 80px;
  font-weight: 500;
  line-height: 82px;
  color: #333;
}

.title {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 34px;
  color: #333;
}

.about-link {
  display: flex;
  align-items: flex-start;
  color: #333;
  text-decoration: none;
}
.about-link:hover { color: #636363; }

.link-about {
  display: block;
  margin-top: 30px;
  color: #574ae9;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 40px;
  font-weight: 500;
  text-decoration: none;
}

.image-arrow {
  width: 42px;
  height: 23px;
  margin-top: 35px;
  margin-left: 5px;
  padding-bottom: 2px;
}

.hero-illustration {
  width: 44%;
  align-self: flex-start;
  margin-top: -20px;
  will-change: transform, opacity;
}
.hero-illustration img { display: block; width: 100%; height: auto; }

/* --- featured projects ------------------------------------------------- */

.section-2 { margin: 0 60px; }

.title.projects { margin-bottom: 0; }

.project {
  position: relative;
  top: 0;
  display: flex;
  height: 470px;
  margin-top: 60px;
  margin-bottom: 100px;
  background-color: #fff;
  border: 1px solid #000;
  transition: top .2s ease, box-shadow .2s ease;
}
.project:hover { top: -7px; box-shadow: 9px 9px rgba(0, 0, 0, 0.08); }

.project-media {
  display: block;
  width: 50%;
  height: 100%;
  background-color: #e9e9e9;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.project-media.project-1 {
  background-color: #dce2d8;
  background-image: url(../assets/img/project-rebiome-webshop.jpg);
  background-size: 144%;
}
.project-media.project-2 { background-image: url(../assets/img/project-noscomed.jpg); }
.project-media.project-3 { background-image: url(../assets/img/project-editorial.jpg); }
.project-media.project-5 { background-image: url(../assets/img/project-email.jpg); }
.project-media.project-6 { background-image: url(../assets/img/project-explainer.jpg); background-position: 70%; }
.project-media.project-3-rebiome { background-image: url(../assets/img/project-rebiome-some.jpg); }

.project-video { position: relative; width: 50%; overflow: hidden; }
.project-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* click-to-load YouTube poster facade */
.yt-facade {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
}
.yt-facade .yt-play {
  position: relative;
  width: 68px;
  height: 48px;
  border-radius: 14px;
  background-color: rgba(20, 20, 20, 0.8);
  transition: background-color .2s ease;
}
.yt-facade:hover .yt-play,
.yt-facade:focus-visible .yt-play { background-color: #f00; }
.yt-facade .yt-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-38%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent #fff;
}

.project-body {
  width: 50%;
  padding-left: 30px;
  overflow: hidden;
}

.category {
  margin-bottom: 20px;
  color: #838282;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
}

.paragraph {
  margin-top: 30px;
  margin-right: 60px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 16px;
}

.readmore {
  display: flex;
  align-items: center;
  margin-top: 28px;
  color: #333;
  text-decoration: none;
}
.readmore:hover { color: #636363; }
.readmore a {
  color: #333;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
}
.readmore a:hover { color: #636363; }

.image-4 {
  width: 26px;
  height: 15px;
  margin-top: 0;
  margin-left: 8px;
  padding-bottom: 0;
}

.rm-divider { display: none; }

/* --- qualifications + contact ---------------------------------------- */

.section-4 {
  border-top: 1px solid #000;
  padding-top: 60px;
  padding-bottom: 100px;
}

.title.footer { margin-bottom: 40px; }

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  margin-bottom: 60px;
}

.footer-category {
  margin-bottom: 10px;
  color: #333;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
}

.footer-text {
  color: #333;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 400;
}

.div-block-11 {
  margin-top: 60px;
  padding-bottom: 100px;
}

.title.centered {
  margin-top: 0;
  text-align: center;
  text-decoration: none;
}

.paragraph-2 {
  margin-top: 10px;
  text-align: center;
  font-family: "IBM Plex Sans", sans-serif;
}

.email-link {
  display: block;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  text-decoration: none;
}

.title.email { text-align: center; color: #333; }
.title.email:hover { color: silver; }

/* --- scroll reveal (Webflow IX2 stand-in) --------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-illustration { transform: none !important; opacity: 1 !important; }
}

/* ==========================================================================
   Tablet and below
   ========================================================================== */

@media screen and (max-width: 991px) {
  body { margin-left: 30px; margin-right: 30px; }

  .container { max-width: 728px; }

  .heading-2 { font-size: 60px; line-height: 62px; }

  .section { max-width: none; }

  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background-color: #fff;
    border: 1px solid #000;
    padding: 20px;
  }
  .nav-menu.open { display: flex; }
  .nav-menu .nav-link { display: block; padding: 12px 0; }

  .menu-button { display: block; }
}

/* ==========================================================================
   Phone
   ========================================================================== */

@media screen and (max-width: 479px) {
  body { margin-left: 0; margin-right: 0; }

  .container { max-width: none; }

  .navbar { margin-left: 15px; }

  .heading-2 { margin-top: 20px; font-size: 50px; line-height: 54px; }

  .title { max-width: 300px; margin-bottom: 0; font-size: 22px; line-height: 26px; }
  .title.projects { margin-bottom: 0; }
  .title.centered, .title.email { margin-left: auto; margin-right: auto; }

  .section {
    display: block;
    margin-bottom: 0;
    padding-top: 20px;
    padding-left: 15px;
    padding-right: 15px;
    border-bottom-width: 0;
  }
  .hero-inner { display: block; }
  .hero-copy { width: 100%; }
  .hero-illustration { width: 80%; margin-top: -48px; margin-left: auto; }
  .hero-illustration img { margin-top: 0; }

  .nav-menu { padding-top: 40px; min-height: 100vh; }
  .nav-link {
    background-color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 30px;
    font-weight: 500;
    line-height: 60px;
  }
  .nav-link.sub-link {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 18px;
    font-weight: 300;
    display: block;
  }

  .project {
    display: block;
    height: auto;
    margin-top: 0;
    margin-bottom: 80px;
    border-width: 0;
    box-shadow: none;
  }
  .project:hover { top: 0; box-shadow: none; }
  .project-media {
    width: 100%;
    height: 340px;
    margin-top: 40px;
  }
  .project-media.project-1 { height: 340px; }
  .project-media.project-2,
  .project-media.project-3,
  .project-media.project-5,
  .project-media.project-6,
  .project-media.project-3-rebiome { height: 340px; margin-top: 0; }
  .project-video { width: 100%; height: 340px; }

  .project-body {
    width: 100%;
    margin-bottom: 0;
    padding-bottom: 40px;
    padding-left: 0;
  }

  .paragraph { margin-top: 25px; margin-bottom: 5px; margin-right: 0; }

  .rm-divider {
    display: block;
    margin-top: 40px;
    border-bottom: 1px solid #333;
  }

  .section-2 { margin-left: 0; margin-right: 0; padding-left: 15px; padding-right: 15px; }
  .projects-inner { margin-top: 60px; }

  .link-about { margin-top: 20px; font-size: 27px; }
  .image-arrow { margin-top: 24px; margin-bottom: 11px; padding-bottom: 5px; }

  .section-4 { padding-bottom: 0; padding-left: 15px; padding-right: 15px; }
  .grid {
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 20px;
    margin-bottom: 0;
  }
  .div-block-11 { margin-top: 60px; margin-left: 15px; margin-right: 15px; padding-bottom: 100px; }
  .email-link { width: 100%; margin-top: 20px; }
}

/* ==========================================================================
   Interior pages — About, Contact, project detail pages
   ========================================================================== */

.page-head { padding-top: 100px; }
.page-head .container { max-width: 940px; }

.page-body { max-width: 940px; margin: 0 auto; }

/* intro paragraph on project pages */
.pb-intro {
  width: 500px;
  max-width: 100%;
  margin: 0 auto 30px;
  text-align: left;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 22px;
}

/* large statement line */
.pb-statement {
  margin: 60px auto;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 36px;
}

/* media blocks */
.media {
  background-color: #d5d5d5;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.media.pos-bottom { background-position: 50% 100%; }
.media.pos-left { background-position: -25% 50%; }
.media.contain { background-color: transparent; background-size: contain; }
.media.natural { background-color: transparent; background-size: auto; }

.pb-hero { height: 537px; margin-top: 100px; margin-bottom: 40px; background-color: transparent; }
.pb-wide { height: 500px; margin-top: 80px; }
.pb-tall { height: 537px; margin-bottom: 20px; }

.pb-duo { margin-top: 20px; }
.pb-duo .grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  height: 500px;
}
.pb-duo .grid-2 > * { height: 100%; }

/* embeds */
.embed-vimeo { position: relative; width: 100%; padding-top: 55.4255%; margin-top: 0; }
.embed-vimeo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.embed-youtube {
  position: relative;
  width: 100%;
  height: 537px;
  margin-top: 100px;
  margin-bottom: 40px;
  overflow: hidden;
  background: #000;
}
.embed-youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.loop-video { position: relative; overflow: hidden; background-color: #d5d5d5; }
.loop-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* about page */
.about-media { max-width: 940px; margin: 100px auto 0; }
.text-block-5 {
  max-width: 500px;
  margin: 30px auto 0;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 30px;
  line-height: 36px;
}
.paragraph-3 { max-width: 500px; margin: 60px auto 0; }
.rule-heavy { border-bottom: 1px solid #000; margin-top: 60px; margin-bottom: 80px; }

/* contact page */
.contact-illustration { display: block; margin: 60px auto 0; }
.text-block-6 {
  margin: 0 auto;
  text-align: center;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 32px;
  line-height: 34px;
}

/* explainer video page */
.media.images-contain {
  height: 537px;
  margin-top: 100px;
  margin-bottom: 40px;
  background-color: transparent;
  background-size: contain;
}
.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  height: 500px;
  margin-top: 100px;
}
.grid-3 .text-cell { display: flex; align-items: center; }
.grid-3 .text-cell .pb-statement { margin: 0; }

@media screen and (max-width: 991px) {
  .page-head .container,
  .page-body,
  .about-media { max-width: 728px; }
}

@media screen and (max-width: 479px) {
  .page-head { margin-left: 15px; margin-right: 15px; padding-top: 60px; }
  .page-body,
  .about-media { padding-left: 15px; padding-right: 15px; }

  .pb-intro { width: auto; }
  .pb-statement { font-size: 22px; line-height: 26px; }

  .pb-hero { height: 200px; margin-top: 60px; margin-bottom: 60px; }
  .pb-wide { height: 200px; margin-top: 60px; }
  .pb-tall { height: 200px; margin-bottom: 15px; }

  .pb-duo .grid-2 {
    display: block;
    height: auto;
  }
  .pb-duo .grid-2 > * { height: 200px; margin-bottom: 15px; }

  .embed-youtube { height: 200px; margin-top: 40px; margin-bottom: 60px; }
  .media.images-contain { height: 200px; margin-top: 0; margin-bottom: 60px; }

  .grid-3 { display: block; height: auto; margin-top: 60px; }
  .grid-3 .loop-video { height: 300px; }
  .grid-3 .text-cell { display: block; margin-top: 20px; }

  .about-media { padding-left: 15px; padding-right: 15px; }
  .text-block-5 { font-size: 20px; line-height: 24px; }
  .rule-heavy { display: none; }
  .contact-illustration { margin-top: 20px; }
  .text-block-6 { margin-top: 20px; font-size: 22px; line-height: 24px; }
}