/********************************/
/* Letter Spacing Scale */
/********************************/
@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes moveInLeftCentered {
  0% {
    opacity: 0;
    transform: translateX(calc(-50% - 10rem));
  }
  80% {
    transform: translateX(calc(-50% + 1rem));
  }
  100% {
    opacity: 1;
    transform: translateX(-50%);
  }
}
@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(10rem);
  }
  /*80% {
    transform: translateX(-1rem);
  }*/
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-10rem);
  }
  /*80% {
    transform: translateY(1rem);
  }*/
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(10rem);
  }
  /*80% {
    transform: translateY(-1rem);
  }*/
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*********** Skill card learning pill pulse animation ************/
@keyframes learningPulse {
  0%, 100% {
    background-color: rgba(46, 196, 182, 0.36);
    color: #f5f7fa;
    box-shadow: 0 0 1.2rem rgba(46, 196, 182, 0.32), inset 0 0 0 1px rgba(46, 196, 182, 0.55);
  }
  50% {
    background-color: rgba(88, 140, 255, 0.4);
    color: #f5f7fa;
    box-shadow: 0 0 1.8rem rgba(88, 140, 255, 0.48), inset 0 0 0 1px rgba(88, 140, 255, 0.68);
  }
}
html {
  scroll-behavior: smooth;
  /* font-size: 10px; */
  /* 10px / 16px = 0.625 = 62.5% */
  font-size: 62.5%;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.5;
  color: #f5f7fa;
  background-color: #071018;
  overflow-x: hidden;
}

.main-content {
  flex: 1 0 auto;
}

/*
--- 01 TYPOGRAPHY SYSTEM

- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Font weights
Default: 400
Medium: 500
Semi-bold: 600
Bold: 700

- Line heights
Default: 1
Small: 1.05
Medium: 1.2
Paragraph default: 1.6

- Colors

- Shadows

- Border-radius

Default: 8px

- Letter spacing
-0.5px
0.75px
*/
/* ------------------------------
   Modern Reset
------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

.btn {
  display: flex;
  gap: 3rem;
}

.btn-primary,
.btn-secondary,
.btn-outline {
  display: inline-block;
  padding: 1.6rem 3.2rem;
  font-size: 1.8rem;
  border-radius: 0.8rem;
  color: #f5f7fa;
  text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-primary {
  background: linear-gradient(135deg, #2ec4b6 0%, #588cff 100%);
  border: 1.5px solid transparent;
}
.btn-primary:hover, .btn-primary:active {
  background: linear-gradient(135deg, rgb(58.5950413223, 208.9049586777, 194.8760330579) 0%, rgb(108.4, 154.0479041916, 255) 100%);
  border-color: transparent;
  transform: translate(-2px, -2px);
  /*box-shadow: 0 1rem 2rem rgba($color-ink, 0.22);*/
  box-shadow: 0 0.8rem 3rem rgba(88, 140, 255, 0.38);
}
.btn-primary:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  background-color: transparent;
  border: 1.5px solid #2ec4b6;
  color: #f5f7fa;
}
.btn-secondary:hover {
  background-color: rgba(88, 140, 255, 0.14);
  border-color: #588cff;
  color: #f5f7fa;
  transform: translate(-2px, -2px);
}

.btn-outline:link,
.btn-outline:visited,
.nav-cta:link,
.nav-cta:visited {
  background-color: transparent;
  border: 1.5px solid #2ec4b6;
  color: #2ec4b6;
}
.btn-outline:link:hover, .btn-outline:link:active,
.btn-outline:visited:hover,
.btn-outline:visited:active,
.nav-cta:link:hover,
.nav-cta:link:active,
.nav-cta:visited:hover,
.nav-cta:visited:active {
  background-color: rgba(104.0314049587, 219.5685950413, 208.7851239669, 0.14);
  border-color: #588cff;
  color: #2ec4b6;
  transform: translate(-2px, -2px);
  box-shadow: 0 0.8rem 3rem rgba(88, 140, 255, 0.38);
}

.scroll-top {
  position: fixed;
  right: 4rem;
  bottom: 4rem;
  z-index: 9998;
  width: 5.8rem;
  height: 5.8rem;
  border: 1.5px solid #2ec4b6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(14, 23, 34, 0.88);
  color: #2ec4b6;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(1.2rem);
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
}
.scroll-top--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.scroll-top:hover {
  background-color: rgba(46, 196, 182, 0.22);
  border: 1.5px solid #588cff;
  transform: translateY(-2px);
  box-shadow: 0 0.8rem 3rem rgba(88, 140, 255, 0.38);
}
.scroll-top i {
  font-size: 1.8rem;
}

/********************************/
/* Navigation */
/********************************/
.desktop-nav {
  position: absolute;
  top: 4rem;
  right: 6rem;
  z-index: 9999;
}
.desktop-nav__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4rem;
}
.desktop-nav__link:link, .desktop-nav__link:visited {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #f5f7fa;
  font-weight: 500;
  font-size: 1.8rem;
  transition: color 0.3s ease, transform 0.3s ease;
}
.desktop-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.9rem;
  width: 100%;
  height: 0.2rem;
  background-color: #2ec4b6;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.desktop-nav__link.nav-cta::after {
  display: none;
}
.desktop-nav__link:hover, .desktop-nav__link:active {
  color: #f5f7fa;
  transform: translateY(-1px);
}
.desktop-nav__link:hover::after {
  transform: scaleX(1);
}
.desktop-nav__link[aria-current=page]::after {
  transform: scaleX(1);
}

.projects-page .header,
.resume-page .header,
.contact-page .header,
.jfcandleco-page .header {
  display: flex;
  align-items: flex-start;
  padding: 4rem 6rem;
  position: relative;
  z-index: 10;
}
.projects-page.contact-page .header,
.resume-page.contact-page .header,
.contact-page.contact-page .header,
.jfcandleco-page.contact-page .header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
}
.projects-page .desktop-nav,
.resume-page .desktop-nav,
.contact-page .desktop-nav,
.jfcandleco-page .desktop-nav {
  position: static;
  margin-left: auto;
}
.projects-page .desktop-nav__link:link,
.projects-page .desktop-nav__link:visited,
.resume-page .desktop-nav__link:link,
.resume-page .desktop-nav__link:visited,
.contact-page .desktop-nav__link:link,
.contact-page .desktop-nav__link:visited,
.jfcandleco-page .desktop-nav__link:link,
.jfcandleco-page .desktop-nav__link:visited {
  color: #f5f7fa;
}
.projects-page .desktop-nav__link:hover,
.projects-page .desktop-nav__link:active,
.resume-page .desktop-nav__link:hover,
.resume-page .desktop-nav__link:active,
.contact-page .desktop-nav__link:hover,
.contact-page .desktop-nav__link:active,
.jfcandleco-page .desktop-nav__link:hover,
.jfcandleco-page .desktop-nav__link:active {
  color: #f5f7fa;
}
.projects-page .desktop-nav__link.nav-cta:link,
.projects-page .desktop-nav__link.nav-cta:visited,
.resume-page .desktop-nav__link.nav-cta:link,
.resume-page .desktop-nav__link.nav-cta:visited,
.contact-page .desktop-nav__link.nav-cta:link,
.contact-page .desktop-nav__link.nav-cta:visited,
.jfcandleco-page .desktop-nav__link.nav-cta:link,
.jfcandleco-page .desktop-nav__link.nav-cta:visited {
  color: #2ec4b6;
}

/********************************/
/* Navigation CTA */
/********************************/
.nav-cta:link,
.nav-cta:visited {
  padding: 1.2rem 2.4rem;
  border-radius: 0.8rem;
  background-color: transparent;
  border: 1.5px solid #2ec4b6;
  color: #2ec4b6;
}

.nav-cta:hover,
.nav-cta:active {
  background-color: rgba(88, 140, 255, 0.14);
  transform: translate(-2px, -2px);
  box-shadow: 0 1rem 3rem rgba(6, 9, 11, 0.22);
}

/********************************/
/* Mobile Nav */
/********************************/
.mobile-nav {
  position: absolute;
  top: 4rem;
  right: 4rem;
  border: none;
  background: none;
  cursor: pointer;
  display: none;
}
.mobile-nav__links {
  display: none;
}
.mobile-nav__icon {
  position: relative;
  font-size: 4rem;
  color: #f5f7fa;
}

.mobile-nav__icon[name=mobile-nav-close-icon] {
  display: none;
}

/*.mobile-nav__icon {
  text-shadow:
    0 0.1rem 0.2rem rgba(6, 9, 11, 0.65),
    0 0.4rem 1.2rem rgba(6, 9, 11, 0.45);
}
*/
.footer {
  min-height: 42rem;
  padding: 6.4rem 4rem 2rem;
  margin-top: auto;
  background: linear-gradient(135deg, #06090b 0%, #071018 46%, #0b1826 100%);
  color: #f5f7fa;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
}

.footer-intro-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.footer-intro {
  max-width: 48rem;
}
.footer-intro__logo {
  display: block;
  width: 20rem;
  height: auto;
  margin-bottom: 1.6rem;
}
.footer-intro__description {
  max-width: 42rem;
  font-size: 1.6rem;
  line-height: 1.7;
  color: #f5f7fa;
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin: 2.4rem 0 3rem;
}
.footer-socials__link {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2ec4b6;
  background-color: rgba(245, 247, 250, 0.08);
  border: 1.5px solid rgba(46, 196, 182, 0.75);
  font-size: 1.7rem;
  text-decoration: none;
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.footer-socials__link:hover {
  color: #2ec4b6;
  background-color: rgba(46, 196, 182, 0.22);
  border-color: #588cff;
  transform: translateY(-2px);
  box-shadow: 0 0.8rem 3rem rgba(88, 140, 255, 0.38);
}

.footer-nav,
.footer-projects {
  color: #9fb0c0;
  height: 17rem;
  padding-left: 8rem;
  border-left: 1px solid rgba(245, 247, 250, 0.15);
}
.footer-nav__title,
.footer-projects__title {
  font-size: 1.8rem;
  color: #588cff;
  margin-bottom: 1.6rem;
}
.footer-nav__list,
.footer-projects__list {
  display: grid;
  gap: 1rem;
  font-size: 1.6rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-nav__list a,
.footer-projects__list a {
  color: #9fb0c0;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}
.footer-nav__list a:hover,
.footer-projects__list a:hover {
  color: #2ec4b6;
}

/* Pushes separator + copyright to the bottom */
.footer-separator {
  align-self: end;
  height: 1px;
  width: 100%;
  background-color: rgba(245, 247, 250, 0.15);
  margin-bottom: 2rem;
}

.footer-copyright {
  align-self: end;
  margin: 0;
  padding: 1rem 0;
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: #c6d1db;
}
.footer-copyright span {
  display: inline-block;
  font-size: 1.2rem;
  margin-left: 0.5rem;
  opacity: 0.8;
  color: #2ec4b6;
}

/* ------------------------------
   Reusable Layout / Grid
------------------------------ */
.container {
  max-width: 120rem;
  padding: 5rem 1.2rem;
  margin: 0 auto;
}

.container--narrow {
  max-width: 96rem;
}

.container--wide {
  max-width: 132rem;
}

.container--xl {
  max-width: 144rem;
}

.grid {
  display: grid;
  gap: 3.6rem;
}

.grid--2-cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}

.grid--3-cols {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--4-cols {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid--gap-sm {
  gap: 2.4rem;
}

.grid--gap-md {
  gap: 3.6rem;
}

.grid--gap-lg {
  gap: 6.4rem;
}

.grid--gap-xl {
  gap: 9.6rem;
}

.grid--col-gap-lg {
  column-gap: 6.4rem;
}

.grid--row-gap-lg {
  row-gap: 6.4rem;
}

.resume-grid {
  display: grid;
}

.resume-grid--2-cols {
  grid-template-columns: 1.2fr 1fr;
}

/*.header {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 9999;
  width: 100%;
  padding: 4rem 6rem 0;

  &__logo-box {
    top: 4rem;
    left: 4rem;
  }

  &__logo {
    display: block;
    width: 18rem;
    height: auto;
  }
}*/
.header {
  position: relative;
}
.header__logo-box {
  position: absolute;
  top: 4rem;
  left: 4rem;
  z-index: 9999;
}
.header__logo {
  height: 6.4rem;
}
.header__logo-link {
  display: block;
}

.home-hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow: hidden;
  padding: 12rem 8rem 8rem;
  color: #f5f7fa;
  background: radial-gradient(circle at 72% 48%, rgba(88, 140, 255, 0.38), transparent 28rem), radial-gradient(circle at 61% 62%, rgba(46, 196, 182, 0.28), transparent 24rem), linear-gradient(90deg, rgba(7, 16, 24, 0.96) 0%, rgba(7, 16, 24, 0.82) 45%, rgba(7, 16, 24, 0.38) 100%), #071018;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
}
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(46, 196, 182, 0.42) 0 0.12rem, transparent 0.16rem), linear-gradient(rgba(46, 196, 182, 0.11) 1px, transparent 1px), linear-gradient(90deg, rgba(46, 196, 182, 0.11) 1px, transparent 1px);
  background-size: 42px 42px, 42px 42px, 42px 42px;
  background-position: 0 0, 0 0, 0 0;
  background-repeat: repeat, repeat, repeat;
  mask-image: radial-gradient(circle at 75% 48%, black 0%, transparent 48%);
  opacity: 0.65;
}
.home-hero__content {
  position: relative;
  z-index: 3;
  max-width: 64rem;
  padding-top: 0;
}
.home-hero__eyebrow {
  color: #2ec4b6;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  width: fit-content;
  font: 700 1.2rem/1.2 "Inter", sans-serif;
  margin-bottom: 1.6rem;
  animation: slideDown 1.2s ease-in-out both;
}
.home-hero__heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(3.8rem, 4.3vw, 6.8rem);
  line-height: 1.1;
  margin-bottom: 2rem;
  white-space: nowrap;
}
.home-hero__subheading {
  max-width: 43rem;
  margin-bottom: 2.4rem;
  color: #c6d1db;
  font: 400 clamp(1.5rem, 1.5vw, 1.8rem)/1.7 "Inter", sans-serif;
}
.home-hero__heading, .home-hero__subheading {
  animation: moveInLeft 1.2s ease-in-out both;
}
.home-hero__media {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.home-hero__image {
  position: absolute;
  right: max(2rem, 3vw);
  bottom: 0;
  z-index: 2;
  width: clamp(68rem, 52vw, 72rem);
  max-height: 90vh;
  object-fit: contain;
  object-position: bottom right;
  filter: brightness(0.75) contrast(1.06);
}
.home-hero__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 18rem;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(7, 16, 24, 0) 0%, #071018 100%);
}

.hero-btn {
  animation: slideUp 1.2s ease-in-out both;
}

.project-preview {
  padding: 9.6rem 4rem;
}

.project-preview__header,
.projects-page__header {
  max-width: 74rem;
  margin: 0 auto 6.4rem;
  text-align: center;
  opacity: 0;
  transform: translateX(-10rem);
  transition: opacity 1.2s ease-in-out, transform 1.2s ease-in-out;
}
.project-preview__header.is-visible,
.projects-page__header.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.project-preview__eyebrow,
.projects-page__eyebrow {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 2rem;
  color: #2ec4b6;
}
.project-preview__heading,
.projects-page__heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 4.2rem;
  line-height: 1.1;
  font-weight: 500;
  color: #f5f7fa;
  margin-bottom: 2rem;
}
.project-preview__description,
.projects-page__description {
  font-size: 2rem;
  line-height: 1.6;
  font-weight: 400;
  color: #9fb0c0;
}
.project-preview__cta-box,
.projects-page__cta-box {
  margin-top: 3.2rem;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .project-preview__header,
  .projects-page__header {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.project-preview-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.project-preview-card__img {
  width: 100%;
  display: block;
  aspect-ratio: 4.5/3;
  object-fit: cover;
  border-radius: 0.8rem;
  box-shadow: 0.6rem 1.4rem 3.2rem rgba(16, 20, 24, 0.16);
}
.project-preview-card__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 2.4rem;
  margin-top: 2rem;
}
.project-preview-card__eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: 700;
  display: flex;
  align-items: flex-start;
  min-height: 4.2rem;
  margin-bottom: 0.8rem;
  color: #2ec4b6;
}
.project-preview-card__heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 2.4rem;
  line-height: 1.15;
  font-weight: 500;
  display: flex;
  align-items: flex-end;
  min-height: 4rem;
  margin-bottom: 1.3rem;
}
.project-preview-card__description {
  font-size: 1.5rem;
  line-height: 1.6;
  min-height: 12rem;
  margin-bottom: 2rem;
  color: #9fb0c0;
}
.project-preview-card__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2.4rem;
  color: #8fb0ff;
}
.project-preview-card__skills li {
  width: fit-content;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(16, 20, 24, 0.12);
  border-radius: 999px;
  margin-bottom: 1rem;
}
.project-preview-card__link {
  display: inline-block;
  margin-top: auto;
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #2ec4b6;
  text-underline-offset: 0.9rem;
  color: #f5f7fa;
  transition: color 0.2s ease;
}
.project-preview-card__link:hover {
  text-decoration-color: #588cff;
}

.project-card-links {
  display: flex;
  align-items: center;
  gap: 3rem;
  margin-top: auto;
}

.project-card-link,
.live-site-link {
  text-decoration: none;
}
.project-card-link__text,
.live-site-link__text {
  text-decoration: underline;
  text-decoration-color: #2ec4b6;
  text-underline-offset: 0.9rem;
  transition: text-decoration-color 0.2s ease;
}
.project-card-link__arrow,
.live-site-link__arrow {
  display: inline-block;
  text-decoration: none;
}

.live-site-link:hover .project-card-link__text {
  text-decoration-color: #588cff;
}

.about-preview {
  background-color: #0e1722;
  padding: 9.6rem 0;
  text-align: center;
}
.about-preview__header {
  max-width: 80rem;
  margin: 0 auto;
  opacity: 0;
  transform: translateX(10rem);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}
.about-preview__header.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.about-preview__eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 2rem;
  color: #2ec4b6;
}
.about-preview__heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 4.2rem;
  line-height: 1.1;
  font-weight: 500;
  color: #f5f7fa;
  margin-bottom: 2rem;
}
.about-preview__description {
  font-size: 2rem;
  line-height: 1.6;
  font-weight: 400;
  color: #9fb0c0;
  margin-bottom: 3rem;
}

/*
.about-preview__cta-box {
  margin-top: 6rem;
  text-align: center;
}

.about-preview__cta {
  font-size: 1.4rem;
  font-weight: 700;
}
*/
.skills-preview {
  background-color: #071018;
  padding: 9.6rem 3rem;
  text-align: center;
}
.skills-preview__header {
  max-width: 80rem;
  margin: 0 auto;
  padding-bottom: 5.4rem;
  opacity: 0;
  transform: translateX(-10rem);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}
.skills-preview__header.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.skills-preview__eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  color: #2ec4b6;
}
.skills-preview__heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 4.2rem;
  line-height: 1.1;
  font-weight: 500;
  margin-bottom: 2rem;
  color: #f5f7fa;
}
.skills-preview__description {
  font-family: "Inter", sans-serif;
  font-size: 2rem;
  line-height: 1.6;
  font-weight: 400;
  color: #9fb0c0;
}

.skill-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #0e1722;
  border: 1px solid rgba(46, 196, 182, 0.14);
  border-radius: 1.25rem;
  padding: 4rem;
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.skill-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 1.8rem 4.5rem rgba(0, 0, 0, 0.35), 0 0 3rem rgba(46, 196, 182, 0.14);
  border-color: rgba(46, 196, 182, 0.38);
  background-color: #111c2a;
}
.skill-card__icon {
  width: 7.2rem;
  height: 7.2rem;
  border-radius: 999px;
  display: flex;
  background-color: rgba(46, 196, 182, 0.1);
  align-items: center;
  justify-content: center;
  margin: 0 auto 3rem;
  box-shadow: 0.7rem 0.8rem 1.9rem rgba(6, 9, 11, 0.12), inset 0 0 0 1px rgba(46, 196, 182, 0.16);
}
.skill-card__icon-img {
  width: 4.2rem;
  height: 4.2rem;
  object-fit: contain;
  display: block;
  align-items: center;
}
.skill-card__heading {
  font-family: "Inter", Georgia, serif;
  font-size: 1.45rem;
  color: #588cff;
  min-height: 3.6rem;
  margin-bottom: 0.75rem;
}
.skill-card__text {
  font-size: 1.5rem;
  line-height: 1.7;
  color: #9fb0c0;
}
.skill-card__label {
  position: absolute;
  top: 2rem;
  right: 2rem;
  display: inline-block;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  background-color: rgba(88, 140, 255, 0.18);
  color: #f5f7fa;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.skill-card--learning .skill-card__label {
  animation: learningPulse 2s ease-in-out infinite;
}

/* ------------------------------
   Contact CTA
------------------------------ */
.contact-preview-cta {
  padding: 9.6rem 2rem;
  background-color: #0e1722;
  text-align: center;
}
.contact-preview-cta__header {
  max-width: 80rem;
  margin: 0 auto;
  opacity: 0;
  transform: translateX(10rem);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}
.contact-preview-cta__header.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.contact-preview-cta__eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  color: #2ec4b6;
}
.contact-preview-cta__heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 4.2rem;
  line-height: 1.1;
  font-weight: 500;
  margin-bottom: 2rem;
}
.contact-preview-cta__description {
  font-family: "Inter", sans-serif;
  font-size: 2rem;
  line-height: 1.6;
  font-weight: 400;
  color: #9fb0c0;
  margin-bottom: 4rem;
}

.about-page-hero {
  position: relative;
  isolation: isolate;
  min-height: 90vh;
  overflow: hidden;
  padding: 8rem 4rem 0;
  /* display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;*/
  background-color: rgba(6, 9, 11, 0.35);
}
.about-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: rgba(6, 9, 11, 0.35);
  pointer-events: none;
}

.about-page-hero-image-container {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  overflow: hidden;
  pointer-events: none;
}
.about-page-hero-image-container::before {
  content: "";
  position: absolute;
  left: 3%;
  bottom: 4%;
  width: min(68vw, 68rem);
  height: 100%;
  background: radial-gradient(circle at 42% 52%, rgba(88, 140, 255, 0.52), transparent 28rem), radial-gradient(circle at 34% 68%, rgba(46, 196, 182, 0.42), transparent 24rem);
}
.about-page-hero-image-container__img {
  position: absolute;
  left: 6%;
  bottom: 0;
  z-index: 1;
  width: min(65%, 45rem);
  max-height: 90%;
  height: auto;
  display: block;
  object-fit: contain;
}

.about-page-hero-content {
  position: relative;
  z-index: 3;
  grid-column: 2;
  max-width: 64rem;
  padding-right: 5rem;
}
.about-page-hero-content__eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
  color: #588cff;
}
.about-page-hero-content__heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(3rem, 4vw, 6.4rem);
  line-height: 1.05;
  margin-bottom: 2rem;
  color: #f5f7fa;
}
.about-page-hero-content__description {
  font-family: "Inter", sans-serif;
  font-size: 1.8rem;
  line-height: 1.7;
  max-width: 64rem;
  color: rgba(245, 247, 250, 0.86);
}

/* ------------------------------
   Reusable About Section Spacing
------------------------------ */
.about-intro,
.about-skills,
.about-approach,
.about-journey,
.about-cta {
  padding: 4.4rem 4rem;
}

.about-intro,
.about-journey {
  background-color: #071018;
}

.about-skills,
.about-cta {
  background-color: rgba(46, 196, 182, 0.08);
}

.about-approach {
  background-color: #0e1722;
}

/* ------------------------------
   About Intro
------------------------------ */
.about-intro__header {
  max-width: 86rem;
  margin: 0 auto;
  text-align: center;
}
.about-intro__eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  color: #2ec4b6;
}
.about-intro__heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(3.2rem, 3vw, 5.2rem);
  line-height: 1.1;
  margin-bottom: 2rem;
  color: #f5f7fa;
}
.about-intro__description {
  font-family: "Inter", sans-serif;
  font-size: 1.8rem;
  line-height: 1.75;
  color: #9fb0c0;
}

/* ------------------------------
   Skills Section
------------------------------ */
.about-skills {
  gap: 5rem;
}
.about-skills__header {
  max-width: 76rem;
  margin: 0 auto 5.6rem;
  text-align: center;
}
.about-skills__eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  color: #2ec4b6;
}
.about-skills__heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(3.2rem, 3vw, 5.2rem);
  line-height: 1.1;
  margin-bottom: 1.8rem;
  color: #f5f7fa;
}
.about-skills__description {
  font-family: "Inter", sans-serif;
  font-size: 1.7rem;
  line-height: 1.7;
  color: #9fb0c0;
}

.about-skills-card {
  padding: 3.2rem;
  border-radius: 1.6rem;
  background-color: #0e1722;
  border: 1px solid rgba(245, 247, 250, 0.12);
  box-shadow: 0 1.6rem 3.2rem rgba(6, 9, 11, 0.08);
}
.about-skills-card__title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 2.4rem;
  margin-bottom: 2rem;
  color: #2ec4b6;
}
.about-skills-card__list {
  list-style: none;
  display: grid;
  gap: 1.2rem;
  padding: 0;
  margin: 0;
}
.about-skills-card__list li {
  font-family: "Inter", sans-serif;
  font-size: 1.6rem;
  color: #9fb0c0;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(6, 9, 11, 0.08);
}
.about-skills-card__list li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

/* ------------------------------
   Approach Section
------------------------------ */
.about-approach__header {
  max-width: 76rem;
  margin: 0 auto 5.6rem;
  text-align: center;
}
.about-approach__eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  color: #2ec4b6;
}
.about-approach__heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(3.2rem, 3vw, 5.2rem);
  line-height: 1.1;
  margin-bottom: 1.8rem;
  color: #f5f7fa;
}
.about-approach__description {
  font-family: "Inter", sans-serif;
  font-size: 1.7rem;
  line-height: 1.7;
  color: #9fb0c0;
}
.about-approach__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
}

.about-approach-card {
  padding: 3.2rem;
  border-radius: 1.6rem;
  background-color: #0a141e;
  border: 1px solid rgba(245, 247, 250, 0.12);
}
.about-approach-card__number {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 2.4rem;
  color: #2ec4b6;
}
.about-approach-card__title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 2.4rem;
  margin-bottom: 1.4rem;
  color: #2ec4b6;
}
.about-approach-card__text {
  font-family: "Inter", sans-serif;
  font-size: 1.6rem;
  line-height: 1.7;
  color: #9fb0c0;
}

/* ------------------------------
   Journey Section
------------------------------ */
.about-journey {
  text-align: center;
}
.about-journey__container {
  max-width: 92rem;
}
.about-journey__content {
  max-width: 76rem;
  margin: 0 auto;
}
.about-journey__eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  color: #2ec4b6;
}
.about-journey__heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(3.2rem, 3vw, 5.2rem);
  line-height: 1.1;
  margin-bottom: 2rem;
  color: #f5f7fa;
}
.about-journey__description {
  font-family: "Inter", sans-serif;
  font-size: 1.8rem;
  line-height: 1.75;
  color: #9fb0c0;
}

/* ------------------------------
   Certificates Section
------------------------------ */
.about-certificate {
  background-color: #0a141e;
  padding: 8rem;
}
.about-certificate__header {
  max-width: 76rem;
  margin: 0 auto 9rem;
  text-align: center;
}
.about-certificate__eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  color: #2ec4b6;
}
.about-certificate__section-heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(3.2rem, 3vw, 5.2rem);
  line-height: 1.1;
  margin-bottom: 1.8rem;
  color: #f5f7fa;
}
.about-certificate__intro {
  font-family: "Inter", sans-serif;
  font-size: 1.7rem;
  line-height: 1.7;
  color: #9fb0c0;
}
.about-certificate__grid {
  gap: 8rem;
  align-items: stretch;
}
.about-certificate__card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.about-certificate__image {
  width: 92%;
  display: block;
  aspect-ratio: 4.5/3;
  object-fit: cover;
  border-radius: 0.8rem;
  box-shadow: 0.6rem 1.4rem 3.2rem rgba(16, 20, 24, 0.16);
  margin: 0 auto 3rem;
}
.about-certificate__heading {
  min-height: 6.4rem;
  width: 92%;
  margin: 0 auto 1.6rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 2.4rem;
  line-height: 1.3;
  color: #f5f7fa;
}
.about-certificate__provider {
  width: 92%;
  margin: 0 auto 1rem;
  font-family: "Inter", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #2ec4b6;
}
.about-certificate__description {
  width: 92%;
  margin: 0 auto 2.4rem;
  font-family: "Inter", sans-serif;
  font-size: 1.6rem;
  line-height: 1.7;
  color: #9fb0c0;
}
.about-certificate a {
  width: 92%;
  margin: auto auto 0;
  align-self: center;
  font-family: "Inter", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #2ec4b6;
  text-decoration: none;
}

/* ------------------------------
   CTA Section
------------------------------ */
.about-cta {
  text-align: center;
}
.about-cta__container {
  max-width: 76rem;
}
.about-cta__eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  color: #2ec4b6;
}
.about-cta__heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(3.2rem, 3vw, 5.2rem);
  line-height: 1.1;
  margin-bottom: 1.8rem;
  color: #f5f7fa;
}
.about-cta__description {
  font-family: "Inter", sans-serif;
  font-size: 1.7rem;
  line-height: 1.7;
  margin-bottom: 3.2rem;
  color: #9fb0c0;
}
.about-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}

/* ------------------------------
   Responsive
------------------------------ */
.projects-page__header {
  margin-top: 10rem;
}

.contact {
  padding-top: 12rem;
  background: radial-gradient(circle at 20% 14%, rgba(46, 196, 182, 0.1), transparent 28rem), radial-gradient(circle at 82% 28%, rgba(88, 140, 255, 0.08), transparent 32rem), #071018;
}

.contact-hero {
  width: min(118rem, 100% - 4rem);
  min-height: calc(100vh - 16rem);
  margin: 0 auto 10rem;
  padding: 8rem 0 8rem;
  display: grid;
  grid-template-columns: minmax(0, 82rem);
  justify-content: center;
  gap: 4.8rem;
}

.contact-hero__content {
  max-width: 76rem;
  margin: 0 auto;
  text-align: center;
}

.contact-hero__eyebrow {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
  color: #2ec4b6;
}

.contact-hero__heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(4rem, 5vw, 7.2rem);
  line-height: 1.02;
  font-weight: 500;
  margin-bottom: 2.4rem;
  color: #f5f7fa;
}

.contact-hero__description {
  font-size: 1.9rem;
  line-height: 1.7;
  color: #9fb0c0;
  margin-bottom: 3.2rem;
}

.contact-methods {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
}

.contact-method {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.8rem;
  padding: 1.2rem 1.6rem;
  border: 1px solid rgba(46, 196, 182, 0.22);
  border-radius: 999px;
  background-color: rgba(14, 23, 34, 0.72);
  color: #f5f7fa;
  font-size: 1.4rem;
  font-weight: 700;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}
.contact-method i {
  color: #2ec4b6;
  font-size: 1.6rem;
}
.contact-method:hover {
  color: #588cff;
  border-color: rgba(46, 196, 182, 0.5);
  background-color: #0e1722;
  transform: translateY(-2px);
}

.contact-form {
  padding: 4rem;
  border: 1px solid rgba(46, 196, 182, 0.16);
  border-radius: 0.8rem;
  background-color: rgba(14, 23, 34, 0.86);
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.18);
  width: min(100%, 80rem);
  margin: 0 auto;
}
.contact-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
}
.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1.8rem;
}
.contact-form__field label {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f5f7fa;
}
.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
  width: 100%;
  border: 1px solid rgba(46, 196, 182, 0.22);
  border-radius: 0.8rem;
  background-color: #0e1722;
  color: #f5f7fa;
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 1.4rem 1.5rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.contact-form__field textarea {
  resize: vertical;
  min-height: 18rem;
}
.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
  color: rgba(159, 176, 192, 0.72);
}
.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
  border-color: #2ec4b6;
  box-shadow: 0 0 0 0.4rem rgba(104.0314049587, 219.5685950413, 208.7851239669, 0.22);
}
.contact-form__submit {
  width: 100%;
  border: none;
  cursor: pointer;
}
.contact-form__select {
  position: relative;
}
.contact-form__select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 4.8rem;
}
.contact-form__select::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 1.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: #2ec4b6;
  font-size: 1.4rem;
  pointer-events: none;
}

@media (max-width: 900px) {
  .contact-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 4rem;
    padding-top: 2rem;
  }
  .contact-hero__content {
    max-width: 68rem;
    text-align: center;
    margin: 0 auto;
  }
  .contact-methods {
    justify-content: center;
  }
}
@media (max-width: 600px) {
  .contact-hero {
    width: min(100% - 3rem, 118rem);
    padding-bottom: 6rem;
  }
  .contact-form {
    padding: 2.4rem;
  }
  .contact-form__row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
.design-system {
  background: radial-gradient(circle at 12% 8%, rgba(46, 196, 182, 0.16), transparent 34rem), radial-gradient(circle at 88% 18%, rgba(88, 140, 255, 0.16), transparent 40rem), radial-gradient(circle at 16% 46%, rgba(88, 140, 255, 0.12), transparent 44rem), radial-gradient(circle at 84% 68%, rgba(46, 196, 182, 0.14), transparent 46rem), radial-gradient(circle at 18% 90%, rgba(88, 140, 255, 0.14), transparent 42rem), linear-gradient(180deg, #071018 0%, #0a141e 52%, #071018 100%);
}

.design-system-intro {
  margin: 20rem 4rem 9.6rem;
}
.design-system-intro__content {
  max-width: 86rem;
  margin: 0 auto;
  text-align: center;
}
.design-system-intro__eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2ec4b6;
  margin-bottom: 2rem;
}
.design-system-intro__heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 4.2rem;
  line-height: 1.1;
  font-weight: 500;
  color: #f5f7fa;
  margin-bottom: 2rem;
}
.design-system-intro__description {
  font-family: "Inter", sans-serif;
  font-size: 2rem;
  line-height: 1.6;
  font-weight: 400;
  color: #9fb0c0;
}

.design-system-typography {
  position: relative;
  isolation: isolate;
  width: min(100%, 140rem);
  margin: 0 auto;
  padding-inline: clamp(2.4rem, 4vw, 6rem);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  justify-items: center;
}
.design-system-typography::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  transform: translateX(-50%);
  background-color: rgba(14, 23, 34, 0.72);
}
.design-system-typography__images {
  position: relative;
  width: min(100%, 56rem);
  min-height: 58rem;
  justify-self: start;
}
.design-system-typography__image-button, .design-system-components__image-button, .design-system-navigation__image-button, .design-system-forms__image-button, .design-system-cards__image-button, .design-system-buttons__image-button, .design-system-spacing__image-button, .design-system-colors__image-button {
  position: absolute;
  width: min(82%, 48rem);
  padding: 0;
  border: 1px solid rgba(46, 196, 182, 0.22);
  border-radius: 0.8rem;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  transform: translateY(-50%);
  transition: transform 400ms ease, box-shadow 400ms ease;
}
.design-system-typography__image-button:hover, .design-system-components__image-button:hover, .design-system-navigation__image-button:hover, .design-system-forms__image-button:hover, .design-system-cards__image-button:hover, .design-system-buttons__image-button:hover, .design-system-spacing__image-button:hover, .design-system-colors__image-button:hover, .design-system-typography__image-button:focus-visible, .design-system-components__image-button:focus-visible, .design-system-navigation__image-button:focus-visible, .design-system-forms__image-button:focus-visible, .design-system-cards__image-button:focus-visible, .design-system-buttons__image-button:focus-visible, .design-system-spacing__image-button:focus-visible, .design-system-colors__image-button:focus-visible {
  z-index: 3;
  transform: translateY(calc(-50% - 1rem));
  box-shadow: 0 2.8rem 5.6rem rgba(0, 0, 0, 0.58), 0 0 0 2px rgba(88, 140, 255, 0.85), 0 0 4.8rem rgba(88, 140, 255, 0.68);
}
.design-system-typography__image-button--back {
  top: calc(50% - 2.5rem);
  left: 0;
  z-index: 1;
}
.design-system-typography__image-button--front {
  top: calc(50% + 2.5rem);
  left: 5rem;
  z-index: 2;
}
.design-system-typography__image {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.design-system-typography__content {
  width: 100%;
  max-width: 68rem;
  text-align: center;
}
.design-system-typography__eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2ec4b6;
  margin-bottom: 2rem;
}
.design-system-typography__heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 4.2rem;
  line-height: 1.1;
  font-weight: 500;
  color: #f5f7fa;
  margin-bottom: 2rem;
}
.design-system-typography__description {
  font-family: "Inter", sans-serif;
  font-size: 2rem;
  line-height: 1.6;
  font-weight: 400;
  color: #9fb0c0;
}
@media (max-width: 900px) {
  .design-system-typography {
    padding-inline: 2.4rem;
  }
  .design-system-typography__images {
    justify-self: center;
  }
}

.design-system-colors {
  position: relative;
  isolation: isolate;
  width: min(100%, 140rem);
  margin: 0 auto;
  padding: 8rem clamp(2.4rem, 4vw, 6rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  justify-items: center;
}
.design-system-colors::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  transform: translateX(-50%);
  background-color: rgba(7, 16, 24, 0.54);
}
.design-system-colors__content {
  width: 100%;
  max-width: 68rem;
  text-align: center;
}
.design-system-colors__eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2ec4b6;
  margin-bottom: 2rem;
}
.design-system-colors__heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 4.2rem;
  line-height: 1.1;
  font-weight: 500;
  color: #f5f7fa;
  margin-bottom: 2rem;
}
.design-system-colors__description {
  font-family: "Inter", sans-serif;
  font-size: 2rem;
  line-height: 1.6;
  font-weight: 400;
  color: #9fb0c0;
}
.design-system-colors__images {
  position: relative;
  width: min(100%, 56rem);
  min-height: 48rem;
  justify-self: end;
}
.design-system-colors__image-button {
  display: grid;
  place-items: center;
  aspect-ratio: 4/3;
  background-color: rgba(14, 23, 34, 0.96);
  cursor: default;
  opacity: 1;
}
.design-system-colors__image-button:disabled:hover {
  z-index: auto;
  transform: translateY(-50%);
  box-shadow: none;
}
.design-system-colors__image-button--back {
  top: calc(50% - 2.5rem);
  right: 5rem;
  z-index: 1;
}
.design-system-colors__image-button--front {
  top: calc(50% + 2.5rem);
  right: 0;
  z-index: 2;
}
.design-system-colors__image-icon {
  color: rgba(46, 196, 182, 0.72);
  font-size: 7rem;
}
@media (max-width: 900px) {
  .design-system-colors {
    padding-inline: 2.4rem;
  }
  .design-system-colors__images {
    justify-self: center;
  }
}

.design-system-spacing {
  position: relative;
  isolation: isolate;
  width: min(100%, 140rem);
  margin: 0 auto;
  padding: 8rem clamp(2.4rem, 4vw, 6rem);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  justify-items: center;
}
.design-system-spacing::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  transform: translateX(-50%);
  background-color: rgba(14, 23, 34, 0.72);
}
.design-system-spacing__images {
  position: relative;
  width: min(100%, 56rem);
  min-height: 48rem;
  justify-self: start;
}
.design-system-spacing__image-button {
  display: grid;
  place-items: center;
  aspect-ratio: 4/3;
  background-color: rgba(7, 16, 24, 0.96);
  cursor: default;
  opacity: 1;
}
.design-system-spacing__image-button:disabled:hover {
  z-index: auto;
  transform: translateY(-50%);
  box-shadow: none;
}
.design-system-spacing__image-button--back {
  top: calc(50% - 2.5rem);
  left: 0;
  z-index: 1;
}
.design-system-spacing__image-button--front {
  top: calc(50% + 2.5rem);
  left: 5rem;
  z-index: 2;
}
.design-system-spacing__image-icon {
  color: rgba(46, 196, 182, 0.72);
  font-size: 7rem;
}
.design-system-spacing__content {
  width: 100%;
  max-width: 68rem;
  text-align: center;
}
.design-system-spacing__eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2ec4b6;
  margin-bottom: 2rem;
}
.design-system-spacing__heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 4.2rem;
  line-height: 1.1;
  font-weight: 500;
  color: #f5f7fa;
  margin-bottom: 2rem;
}
.design-system-spacing__description {
  font-family: "Inter", sans-serif;
  font-size: 2rem;
  line-height: 1.6;
  font-weight: 400;
  color: #9fb0c0;
}
@media (max-width: 900px) {
  .design-system-spacing {
    padding-inline: 2.4rem;
  }
  .design-system-spacing__images {
    justify-self: center;
  }
}

.design-system-buttons {
  position: relative;
  isolation: isolate;
  width: min(100%, 140rem);
  margin: 0 auto;
  padding: 8rem clamp(2.4rem, 4vw, 6rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  justify-items: center;
}
.design-system-buttons::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  transform: translateX(-50%);
  background-color: rgba(7, 16, 24, 0.54);
}
.design-system-buttons__content {
  width: 100%;
  max-width: 68rem;
  text-align: center;
}
.design-system-buttons__eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2ec4b6;
  margin-bottom: 2rem;
}
.design-system-buttons__heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 4.2rem;
  line-height: 1.1;
  font-weight: 500;
  color: #f5f7fa;
  margin-bottom: 2rem;
}
.design-system-buttons__description {
  font-family: "Inter", sans-serif;
  font-size: 2rem;
  line-height: 1.6;
  font-weight: 400;
  color: #9fb0c0;
}
.design-system-buttons__images {
  position: relative;
  width: min(100%, 56rem);
  min-height: 48rem;
  justify-self: end;
}
.design-system-buttons__image-button {
  display: grid;
  place-items: center;
  aspect-ratio: 4/3;
  background-color: rgba(14, 23, 34, 0.96);
  cursor: default;
  opacity: 1;
}
.design-system-buttons__image-button:disabled:hover {
  z-index: auto;
  transform: translateY(-50%);
  box-shadow: none;
}
.design-system-buttons__image-button--back {
  top: calc(50% - 2.5rem);
  right: 5rem;
  z-index: 1;
}
.design-system-buttons__image-button--front {
  top: calc(50% + 2.5rem);
  right: 0;
  z-index: 2;
}
.design-system-buttons__image-icon {
  color: rgba(46, 196, 182, 0.72);
  font-size: 7rem;
}
@media (max-width: 900px) {
  .design-system-buttons {
    padding-inline: 2.4rem;
  }
  .design-system-buttons__images {
    justify-self: center;
  }
}

.design-system-cards {
  position: relative;
  isolation: isolate;
  width: min(100%, 140rem);
  margin: 0 auto;
  padding: 8rem clamp(2.4rem, 4vw, 6rem);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  justify-items: center;
}
.design-system-cards::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  transform: translateX(-50%);
  background-color: rgba(14, 23, 34, 0.72);
}
.design-system-cards__images {
  position: relative;
  width: min(100%, 56rem);
  min-height: 48rem;
  justify-self: start;
}
.design-system-cards__image-button {
  display: grid;
  place-items: center;
  aspect-ratio: 4/3;
  background-color: rgba(7, 16, 24, 0.96);
  cursor: default;
  opacity: 1;
}
.design-system-cards__image-button:disabled:hover {
  z-index: auto;
  transform: translateY(-50%);
  box-shadow: none;
}
.design-system-cards__image-button--back {
  top: calc(50% - 2.5rem);
  left: 0;
  z-index: 1;
}
.design-system-cards__image-button--front {
  top: calc(50% + 2.5rem);
  left: 5rem;
  z-index: 2;
}
.design-system-cards__image-icon {
  color: rgba(46, 196, 182, 0.72);
  font-size: 7rem;
}
.design-system-cards__content {
  width: 100%;
  max-width: 68rem;
  text-align: center;
}
.design-system-cards__eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2ec4b6;
  margin-bottom: 2rem;
}
.design-system-cards__heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 4.2rem;
  line-height: 1.1;
  font-weight: 500;
  color: #f5f7fa;
  margin-bottom: 2rem;
}
.design-system-cards__description {
  font-family: "Inter", sans-serif;
  font-size: 2rem;
  line-height: 1.6;
  font-weight: 400;
  color: #9fb0c0;
}
@media (max-width: 900px) {
  .design-system-cards {
    padding-inline: 2.4rem;
  }
  .design-system-cards__images {
    justify-self: center;
  }
}

.design-system-forms {
  position: relative;
  isolation: isolate;
  width: min(100%, 140rem);
  margin: 0 auto;
  padding: 8rem clamp(2.4rem, 4vw, 6rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  justify-items: center;
}
.design-system-forms::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  transform: translateX(-50%);
  background-color: rgba(7, 16, 24, 0.54);
}
.design-system-forms__content {
  width: 100%;
  max-width: 68rem;
  text-align: center;
}
.design-system-forms__eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2ec4b6;
  margin-bottom: 2rem;
}
.design-system-forms__heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 4.2rem;
  line-height: 1.1;
  font-weight: 500;
  color: #f5f7fa;
  margin-bottom: 2rem;
}
.design-system-forms__description {
  font-family: "Inter", sans-serif;
  font-size: 2rem;
  line-height: 1.6;
  font-weight: 400;
  color: #9fb0c0;
}
.design-system-forms__images {
  position: relative;
  width: min(100%, 56rem);
  min-height: 48rem;
  justify-self: end;
}
.design-system-forms__image-button {
  display: grid;
  place-items: center;
  aspect-ratio: 4/3;
  background-color: rgba(14, 23, 34, 0.96);
  cursor: default;
  opacity: 1;
}
.design-system-forms__image-button:disabled:hover {
  z-index: auto;
  transform: translateY(-50%);
  box-shadow: none;
}
.design-system-forms__image-button--back {
  top: calc(50% - 2.5rem);
  right: 5rem;
  z-index: 1;
}
.design-system-forms__image-button--front {
  top: calc(50% + 2.5rem);
  right: 0;
  z-index: 2;
}
.design-system-forms__image-icon {
  color: rgba(46, 196, 182, 0.72);
  font-size: 7rem;
}
@media (max-width: 900px) {
  .design-system-forms {
    padding-inline: 2.4rem;
  }
  .design-system-forms__images {
    justify-self: center;
  }
}

.design-system-navigation {
  position: relative;
  isolation: isolate;
  width: min(100%, 140rem);
  margin: 0 auto;
  padding: 8rem clamp(2.4rem, 4vw, 6rem);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  justify-items: center;
}
.design-system-navigation::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  transform: translateX(-50%);
  background-color: rgba(14, 23, 34, 0.72);
}
.design-system-navigation__images {
  position: relative;
  width: min(100%, 56rem);
  min-height: 48rem;
  justify-self: start;
}
.design-system-navigation__image-button {
  display: grid;
  place-items: center;
  aspect-ratio: 4/3;
  background-color: rgba(7, 16, 24, 0.96);
  cursor: default;
  opacity: 1;
}
.design-system-navigation__image-button:disabled:hover {
  z-index: auto;
  transform: translateY(-50%);
  box-shadow: none;
}
.design-system-navigation__image-button--back {
  top: calc(50% - 2.5rem);
  left: 0;
  z-index: 1;
}
.design-system-navigation__image-button--front {
  top: calc(50% + 2.5rem);
  left: 5rem;
  z-index: 2;
}
.design-system-navigation__image-icon {
  color: rgba(46, 196, 182, 0.72);
  font-size: 7rem;
}
.design-system-navigation__content {
  width: 100%;
  max-width: 68rem;
  text-align: center;
}
.design-system-navigation__eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2ec4b6;
  margin-bottom: 2rem;
}
.design-system-navigation__heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 4.2rem;
  line-height: 1.1;
  font-weight: 500;
  color: #f5f7fa;
  margin-bottom: 2rem;
}
.design-system-navigation__description {
  font-family: "Inter", sans-serif;
  font-size: 2rem;
  line-height: 1.6;
  font-weight: 400;
  color: #9fb0c0;
}
@media (max-width: 900px) {
  .design-system-navigation {
    padding-inline: 2.4rem;
  }
  .design-system-navigation__images {
    justify-self: center;
  }
}

.design-system-components {
  position: relative;
  isolation: isolate;
  width: min(100%, 140rem);
  margin: 0 auto;
  padding: 8rem clamp(2.4rem, 4vw, 6rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  justify-items: center;
}
.design-system-components::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  transform: translateX(-50%);
  background-color: rgba(7, 16, 24, 0.54);
}
.design-system-components__content {
  width: 100%;
  max-width: 68rem;
  text-align: center;
}
.design-system-components__eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2ec4b6;
  margin-bottom: 2rem;
}
.design-system-components__heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 4.2rem;
  line-height: 1.1;
  font-weight: 500;
  color: #f5f7fa;
  margin-bottom: 2rem;
}
.design-system-components__description {
  font-family: "Inter", sans-serif;
  font-size: 2rem;
  line-height: 1.6;
  font-weight: 400;
  color: #9fb0c0;
}
.design-system-components__images {
  position: relative;
  width: min(100%, 56rem);
  min-height: 48rem;
  justify-self: end;
}
.design-system-components__image-button {
  display: grid;
  place-items: center;
  aspect-ratio: 4/3;
  background-color: rgba(14, 23, 34, 0.96);
  cursor: default;
  opacity: 1;
}
.design-system-components__image-button:disabled:hover {
  z-index: auto;
  transform: translateY(-50%);
  box-shadow: none;
}
.design-system-components__image-button--back {
  top: calc(50% - 2.5rem);
  right: 5rem;
  z-index: 1;
}
.design-system-components__image-button--front {
  top: calc(50% + 2.5rem);
  right: 0;
  z-index: 2;
}
.design-system-components__image-icon {
  color: rgba(46, 196, 182, 0.72);
  font-size: 7rem;
}
@media (max-width: 900px) {
  .design-system-components {
    padding-inline: 2.4rem;
  }
  .design-system-components__images {
    justify-self: center;
  }
}

.image-preview {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: grid;
  place-items: center;
  padding: 6rem 4rem;
  background-color: rgba(7, 16, 24, 0.92);
}
.image-preview[hidden] {
  display: none;
}
.image-preview__image {
  max-width: min(120rem, 100vw - 8rem);
  max-height: calc(100vh - 12rem);
  padding: clamp(1.2rem, 2vw, 2.4rem);
  border: 1px solid rgba(46, 196, 182, 0.2);
  border-radius: 0.8rem;
  background-color: #0e1722;
  object-fit: contain;
  box-shadow: 0 1.6rem 5rem rgba(0, 0, 0, 0.45), 0 0 3.2rem rgba(88, 140, 255, 0.42);
}
.image-preview__close {
  position: absolute;
  top: 2.4rem;
  right: 2.4rem;
  width: 5rem;
  height: 5rem;
  border: 1.5px solid #2ec4b6;
  border-radius: 50%;
  background-color: rgba(14, 23, 34, 0.88);
  color: #2ec4b6;
  cursor: pointer;
  font-size: 2.4rem;
  transition: background-color 250ms ease, transform 250ms ease;
}
.image-preview__close:hover, .image-preview__close:focus-visible {
  background-color: rgba(46, 196, 182, 0.22);
  transform: translateY(-2px);
  box-shadow: 0 0.8rem 3rem rgba(88, 140, 255, 0.38);
}

.jfcandleco-case-study {
  min-height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.coming-soon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
  text-align: center;
}
.coming-soon__heading, .coming-soon__subheading {
  display: inline-block;
  width: fit-content;
  margin: 0 auto;
  line-height: 1.15;
  padding-bottom: 0.6rem;
  color: #2ec4b6;
  text-shadow: 0.5rem 0.5rem 2.5rem rgba(0, 0, 0, 0.25);
}
.coming-soon__heading {
  font-family: "Playfair Display", Georgia, "Times New Roman", Times, serif;
  font-size: 10.4rem;
}
.coming-soon__subheading {
  font-weight: 600;
  font-size: 8.2rem;
}

/* Resume Header */
.resume-page {
  background: radial-gradient(circle at 78% 12%, rgba(88, 140, 255, 0.16), transparent 34rem), radial-gradient(circle at 18% 32%, rgba(46, 196, 182, 0.12), transparent 30rem), #071018;
  min-height: 100vh;
}

.resume-page-intro {
  padding: 8rem 4rem 7.2rem;
}
.resume-page-intro__content {
  max-width: 86rem;
  margin: 0 auto;
  text-align: center;
}
.resume-page-intro__eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2ec4b6;
  margin-bottom: 2rem;
}
.resume-page-intro__heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 4.2rem;
  line-height: 1.1;
  font-weight: 500;
  color: #f5f7fa;
  margin-bottom: 2rem;
}
.resume-page-intro__description {
  font-family: "Inter", sans-serif;
  font-size: 2rem;
  line-height: 1.6;
  font-weight: 400;
  color: #9fb0c0;
}
@media (max-width: 600px) {
  .resume-page-intro {
    padding: 6.4rem 2rem 5.6rem;
  }
}

.resume {
  position: relative;
  max-width: 110rem;
  margin: 0 auto 12rem;
  background: linear-gradient(145deg, rgba(14, 23, 34, 0.96), rgba(10, 20, 30, 0.96)), #0e1722;
  border: 1px solid rgba(46, 196, 182, 0.16);
  box-shadow: 0 1.8rem 4.5rem rgba(0, 0, 0, 0.35), 0 0 4rem rgba(88, 140, 255, 0.08);
  border-radius: 1.2rem;
  overflow: hidden;
  color: #f5f7fa;
}

.resume-header {
  display: flex;
  align-items: center;
  padding: 4rem 6rem;
  /*&__logo {
    display: flex;
    place-content: center;
  }

  &__logo-img {
    width: 18rem;
    height: auto;
    display: block;
  }*/
}
.resume-header__nav {
  margin-left: auto;
}
.resume-header__nav-list {
  display: flex;
  align-items: center;
  gap: 3.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.resume-header__nav-link:link, .resume-header__nav-link:visited {
  display: inline-block;
  text-decoration: none;
  color: #f5f7fa;
  font-weight: 500;
  font-size: 1.8rem;
  transition: color 0.3s ease, transform 0.3s ease;
}
.resume-header__nav-link:link:hover, .resume-header__nav-link:link:active, .resume-header__nav-link:visited:hover, .resume-header__nav-link:visited:active {
  color: #f5f7fa;
  transform: translateY(-1px);
}
.resume-header__nav-link.nav-cta:link, .resume-header__nav-link.nav-cta:visited {
  padding: 1.6rem 3.2rem;
  border-radius: 0.8rem;
  background-color: transparent;
  border: 1.5px solid #2ec4b6;
  color: #f5f7fa;
}
.resume-header__nav-link.nav-cta:hover, .resume-header__nav-link.nav-cta:active {
  background-color: rgba(88, 140, 255, 0.14);
  border-color: #588cff;
  color: #f5f7fa;
}

.resume-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4rem;
  padding: 8rem 8rem 3rem;
}
.resume-intro__name {
  font-family: "Playfair Display", Georgia, "Times New Roman", Times, serif;
  font-size: 4.4rem;
  color: #2ec4b6;
  margin-bottom: 0.4rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.resume-intro__title {
  font-family: "Inter", sans-serif;
  font-size: 1.8rem;
  letter-spacing: 0.04em;
  color: #c6d1db;
}
.resume-intro__name, .resume-intro__title {
  transform: translateY(-2.6rem);
}
.resume-intro__separator {
  flex-basis: 100%;
  width: 86%;
  height: 2px;
  background-color: rgba(46, 196, 182, 0.78);
  margin: 0 auto 1rem;
}

.resume-contact__list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.8rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.resume-contact__text, .resume-contact__link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2rem;
  margin: 0;
  font-size: 1.6rem;
  color: inherit;
  text-decoration: none;
}
.resume-contact__label {
  line-height: 1;
  text-align: right;
}
.resume-contact__icon {
  font-size: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.6rem;
  color: #2ec4b6;
}
.resume-contact__link {
  transition: color 0.2s ease;
}
.resume-contact__link:hover, .resume-contact__link:focus-visible {
  color: #2ec4b6;
}

.resume-container {
  padding: 3rem 12rem 10rem;
}

.resume-section {
  padding: 2rem 4rem;
}
.resume-section__title {
  margin-bottom: 0.6rem;
  font-size: 1.8rem;
  color: #f5f7fa;
}
.resume-section__title-separator {
  flex-basis: 100%;
  width: 12%;
  height: 2px;
  background-color: rgba(46, 196, 182, 0.78);
  margin-bottom: 1.5rem;
}
.resume-section__description {
  margin: 0;
  line-height: 1.7;
  max-width: 44rem;
  font-size: 1.6rem;
  color: #9fb0c0;
}

.resume-projects {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.resume-project__title {
  margin: 0 0 0.5rem;
}
.resume-project__name {
  font-size: 1.8rem;
  color: #f5f7fa;
}
.resume-project__type {
  font-size: 1.4rem;
  color: #9fb0c0;
  margin-bottom: 0.5rem;
}
.resume-project__role {
  font-size: 1.6rem;
  margin: 0 0 0.8rem;
  color: #c6d1db;
}
.resume-project__list {
  list-style: disc;
  font-size: 1.4rem;
  margin: 0;
  padding-left: 2rem;
  font-size: 1.6rem;
  color: #9fb0c0;
}

.resume-skills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem 3.2rem;
}

.resume-skill-group__full {
  grid-column: 1/-1;
}
.resume-skill-group__title {
  margin: 0 0 0.8rem;
  font-size: 1.6rem;
  color: #588cff;
}
.resume-skill-group__list {
  list-style: disc;
  padding-left: 2rem;
  margin: 0;
  color: #9fb0c0;
}
.resume-skill-group__list li {
  font-size: 1.6rem;
}

.resume-certifications {
  font-size: 1.6rem;
  line-height: 1.7;
  color: #9fb0c0;
}

.resume-sidebar__link {
  font-size: 1.6rem;
  color: #2ec4b6;
  text-decoration: none;
}
.resume-sidebar__link:hover {
  color: #588cff;
}

.resume-actions {
  position: absolute;
  right: 6rem;
  bottom: 6rem;
  z-index: 10;
}

/* ------------------------------
 No Break Point Media
------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .skill-card--learning .skill-card__label {
    animation: none;
  }
}
/* ------------------------------
  Desktop 1440px and up
------------------------------ */
@media (min-width: 1281px) {
  .home-hero {
    grid-template-columns: minmax(68rem, 1.08fr) minmax(0, 0.92fr);
  }
  .home-hero__content {
    max-width: 78rem;
  }
}
@media (min-width: 1440px) {
  .container {
    max-width: 132rem;
  }
  .container--xl {
    max-width: 152rem;
  }
  .home-hero__content {
    max-width: 78rem;
  }
  .home-hero__image {
    width: clamp(68rem, 52vw, 72rem);
  }
}
/* ------------------------------
  MacBook / Laptop 1280px max-width
------------------------------ */
@media (min-width: 1101px) and (max-width: 1280px) {
  .container,
  .container--wide,
  .container--xl {
    max-width: 112rem;
  }
  .home-hero__content {
    max-width: 78rem;
  }
  .home-hero__image {
    width: clamp(68rem, 52vw, 72rem);
  }
  .grid--4-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .skill-card {
    padding: 3.2rem;
  }
}
/* ------------------------------
  Media Queries 1100px max-width
------------------------------ */
@media (max-width: 1100px) {
  /* Mobile Navigation */
  .mobile-nav {
    position: fixed;
    top: 4rem;
    right: 4rem;
    display: block;
    z-index: 10000;
  }
  .mobile-nav__links {
    display: flex;
  }
  .mobile-nav__icon {
    color: #f5f7fa;
  }
  .desktop-links {
    display: none;
  }
  .desktop-nav {
    position: fixed;
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(7, 16, 24, 0.95);
    transform: translateX(100%);
    display: flex;
    justify-content: center;
    align-items: center;
    /* Hide Navigation */
    /* Allows no transitions at all */
    /* display: none; */
    /* 1) Hide it visually */
    opacity: 0;
    /* 2) Make it unaccessible to mouse and keybord */
    pointer-events: none;
    /* 3) Hide it from screen readers */
    visibility: hidden;
  }
  .projects-page .desktop-nav,
  .resume-page .desktop-nav,
  .contact-page .desktop-nav,
  .jfcandleco-page .desktop-nav {
    position: fixed;
    margin-left: 0;
  }
  .nav-open .desktop-nav {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);
    transition: all 0.3s ease;
  }
  .mobile-nav-menu-icon {
    color: #f5f7fa;
  }
  .mobile-nav-past-hero .mobile-nav-menu-icon {
    color: #f5f7fa;
  }
  .projects-page .mobile-nav-menu-icon,
  .resume-page .mobile-nav-menu-icon,
  .contact-page .mobile-nav-menu-icon,
  .jfcandleco-page .mobile-nav-menu-icon {
    color: #f5f7fa;
  }
  .nav-open .mobile-nav__icon[name=mobile-nav-close-icon] {
    display: block;
  }
  .nav-open .mobile-nav__icon[name=mobile-nav-menu-icon] {
    display: none;
  }
  .desktop-nav__list {
    flex-direction: column;
  }
  .desktop-nav__link:link,
  .desktop-nav__link:visited {
    color: #f5f7fa;
    font-size: 2.5rem;
  }
  .desktop-nav__link:link:hover, .desktop-nav__link:link:active,
  .desktop-nav__link:visited:hover,
  .desktop-nav__link:visited:active {
    color: #f5f7fa;
    transform: translateY(-1px);
  }
  .desktop-nav__link.nav-cta:link,
  .desktop-nav__link.nav-cta:visited {
    color: #2ec4b6;
    font-size: 2.5rem;
  }
  .desktop-nav__link.nav-cta:link:hover, .desktop-nav__link.nav-cta:link:active,
  .desktop-nav__link.nav-cta:visited:hover,
  .desktop-nav__link.nav-cta:visited:active {
    color: #2ec4b6;
    transform: translateY(-1px);
  }
  .projects-page .header,
  .resume-page .resume-header,
  .resume-page .header,
  .contact-page .header,
  .jfcandleco-page .header {
    padding: 6rem 4rem;
  }
  .resume-page .resume-header,
  .resume-page .header {
    padding: 6rem 4rem 6rem 0;
  }
  .resume-page .resume {
    width: calc(100% - 2rem);
    margin: 0 auto 8rem;
  }
  .resume-intro {
    padding: 6rem 5rem 2.4rem;
  }
  .resume-container {
    grid-template-columns: 1fr;
    padding: 3rem 5rem 8rem;
  }
  .resume-section {
    padding: 2rem 0;
  }
  .resume-section__description {
    max-width: none;
  }
  .resume-actions {
    position: static;
    margin-top: 3rem;
  }
  .scroll-top {
    right: 4rem;
    bottom: 3rem;
  }
  .about-skills {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .about-skills-card {
    max-width: 70rem;
    text-align: center;
    width: min(100%, 52rem);
  }
  .about-skills-card li {
    border-bottom: none;
  }
  .about-skills-card li::after {
    content: "";
    display: block;
    width: 70%;
    height: 1px;
    background-color: rgba(245, 247, 250, 0.2);
    margin: 1.6rem auto 0;
  }
  .about-skills-card li:last-child::after {
    display: none;
  }
  .about-certificate {
    padding: 7.2rem 4rem;
  }
  .about-certificate__grid {
    gap: 5.6rem;
  }
  .home-hero {
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;
  }
  .home-hero__content {
    max-width: 76rem;
    margin-inline: auto;
    padding-top: 0;
    text-align: center;
  }
  .home-hero__subheading {
    margin: 0 auto 3rem;
  }
  .home-hero__eyebrow {
    margin-right: auto;
    margin-left: auto;
  }
  .home-hero__media {
    opacity: 0.28;
  }
  .home-hero__image {
    right: 50%;
    width: min(70vw, 68rem);
    max-height: min(84vh, 62vw);
    transform: translateX(50%);
  }
  .hero-btn {
    justify-content: center;
  }
}
/* ------------------------------
  Media Queries 900px max-width
------------------------------ */
@media (max-width: 950px) {
  .home-hero,
  .container {
    grid-template-columns: 1fr;
  }
  .project-preview-card__eyebrow,
  .project-preview-card__heading,
  .skill-card__heading {
    min-height: 0;
  }
  .project-preview-card__description {
    min-height: 6rem;
  }
  .home-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    align-items: center;
    justify-items: center;
  }
  .home-hero__content {
    position: relative;
    z-index: 3;
    max-width: 76rem;
    text-align: center;
    margin: 0 auto;
    padding-left: 0;
  }
  .home-hero__media {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.28;
  }
  .home-hero__subheading {
    margin: 0 auto 3rem;
  }
  .hero-btn {
    place-content: center;
    /* same as align-items: center; justify-content: center; */
  }
  .home-hero__image {
    position: absolute;
    right: auto;
    left: 50%;
    bottom: 0;
    transform: translate3d(-50%, 0, 0);
    width: min(70vw, 68rem);
    max-height: min(84vh, 62vw);
    height: auto;
    transition: none;
  }
  .footer-intro-container {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    text-align: center;
  }
  .footer-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
  }
  .footer-nav,
  .footer-projects {
    border: none;
    padding-left: 0;
  }
  .header__logo {
    width: 15rem;
  }
  /* ------------------------------
     About Page Media Queries 900px
  ------------------------------ */
  .about-page-hero {
    display: block;
    min-height: auto;
    padding: 12rem 2.4rem 8rem;
    grid-template-columns: 1fr;
  }
  .about-page-hero-image-container {
    position: absolute;
    opacity: 0.28;
  }
  .about-page-hero-image-container::before {
    left: 50%;
    bottom: 0;
    width: min(100vw, 54rem);
    height: 100%;
    transform: translateX(-50%);
  }
  .about-page-hero-image-container__img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(90%, 38rem);
    max-height: 80%;
  }
  .about-page-hero-content {
    /*grid-column: 1;*/
    position: relative;
    margin: 0 auto;
    max-width: 64rem;
    padding: 3rem 3rem 0;
    text-align: center;
  }
  .about-skills__grid,
  .about-approach__grid {
    grid-template-columns: 1fr;
  }
  .about-intro,
  .about-skills,
  .about-approach,
  .about-journey,
  .about-certificate,
  .about-cta {
    padding: 7.2rem 2.4rem;
  }
  .about-journey__content {
    margin-left: 0;
  }
  .about-certificate__header {
    margin-bottom: 5.6rem;
  }
  .about-certificate__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 5.6rem;
    max-width: 68rem;
    margin: 0 auto;
  }
  .about-certificate__heading {
    min-height: 0;
  }
}
/* ------------------------------
  Tablet 900px max-width
------------------------------ */
@media (max-width: 900px) {
  .container,
  .container--narrow,
  .container--wide,
  .container--xl {
    max-width: 72rem;
    padding-inline: 2.4rem;
  }
  .grid--2-cols,
  .grid--3-cols,
  .grid--4-cols,
  .resume-grid--2-cols {
    grid-template-columns: 1fr;
  }
  .home-hero {
    min-height: 100vh;
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;
  }
  .home-hero::after {
    right: 50%;
    bottom: 8%;
    width: min(78vw, 46rem);
    height: auto;
    aspect-ratio: 1;
    opacity: 0;
    transform: translateX(50%);
  }
  .home-hero__content {
    max-width: 76rem;
    margin-inline: auto;
    padding-top: 0;
    text-align: center;
  }
  .home-hero__subheading {
    margin: 0 auto 3rem;
  }
  .home-hero__media {
    opacity: 0.32;
  }
  .home-hero__image {
    right: auto;
    left: 50%;
    width: min(70vw, 68rem);
    max-height: min(84vh, 62vw);
    transform: translateX(-50%);
  }
  .hero-btn {
    justify-content: center;
  }
  .project-preview__header,
  .projects-page__header,
  .about-preview__header,
  .skills-preview__header,
  .contact-preview-cta__header {
    margin-inline: auto;
    padding-inline: 2.4rem;
  }
  .footer {
    padding-inline: 2.4rem;
  }
  .footer-intro-container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-intro,
  .footer-socials {
    justify-content: center;
    margin-inline: auto;
  }
  .footer-nav,
  .footer-projects {
    height: auto;
    padding-left: 0;
    border-left: none;
  }
  .footer-projects__list {
    padding-bottom: 3.4rem;
  }
}
/* ------------------------------
  Resume Intro 724px max-width
------------------------------ */
@media (max-width: 724px) {
  .resume-intro {
    flex-direction: column;
    align-items: center;
    gap: 2.4rem;
    padding: 4.8rem 2.4rem 2.4rem;
    text-align: center;
  }
  .resume-intro__name,
  .resume-intro__title {
    transform: none;
  }
  .resume-intro__name {
    font-size: 3.4rem;
  }
  .resume-contact__list {
    align-items: stretch;
    width: min(100%, 26rem);
    max-width: 100%;
    margin: 0 auto;
  }
  .resume-contact__item {
    width: 100%;
  }
  .resume-contact__text,
  .resume-contact__link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.8rem;
    width: 100%;
    gap: 1.2rem;
  }
  .resume-contact__label {
    text-align: right;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  .resume-intro__separator {
    width: calc(100% - 4.8rem);
  }
}
/* ------------------------------
  Media Queries 600px max-width
------------------------------ */
@media (max-width: 600px) {
  .container,
  .container--narrow,
  .container--wide,
  .container--xl {
    padding-inline: 2rem;
  }
  .header__logo-box {
    top: 3.2rem;
    left: 2rem;
  }
  .header__logo {
    height: 5.2rem;
  }
  .mobile-nav {
    top: 3.2rem;
    right: 2rem;
  }
  .home-hero__content {
    justify-self: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .home-hero__heading {
    width: 100vw;
    max-width: none;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    font-size: 2.5rem;
    line-height: 1;
    text-align: center;
  }
  .home-hero__subheading {
    font-size: 1.6rem;
  }
  .home-hero__image {
    width: min(96vw, 42rem);
    max-height: 64vh;
  }
  .home-hero::after {
    width: min(96vw, 40rem);
    bottom: 9%;
  }
  .hero-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
  }
  .hero-btn a {
    width: min(100%, 28rem);
    text-align: center;
  }
  .project-preview__heading,
  .projects-page__heading,
  .about-preview__heading,
  .skills-preview__heading,
  .contact-preview-cta__heading {
    font-size: 3.4rem;
  }
  .project-preview__description,
  .projects-page__description,
  .about-preview__description,
  .skills-preview__description,
  .contact-preview-cta__description {
    font-size: 1.6rem;
  }
  .skill-card,
  .project-preview-card__content {
    padding: 2.4rem;
  }
  /* ------------------------------
     About Page Media Queries
  ------------------------------ */
  .about-page-hero {
    padding: 10rem 2rem 7rem;
  }
  .about-page-hero-content__heading {
    font-size: 3.8rem;
  }
  .about-page-hero-content__description {
    font-size: 1.6rem;
  }
  .about-intro,
  .about-skills,
  .about-approach,
  .about-journey,
  .about-certificate,
  .about-cta {
    padding: 6.4rem 2rem;
  }
  .about-skills-card,
  .about-approach-card {
    padding: 2.4rem;
  }
  .about-cta__buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .about-certificate__header {
    margin-bottom: 4.8rem;
  }
  .about-certificate__section-heading {
    font-size: 3.6rem;
  }
  .about-certificate__intro {
    font-size: 1.6rem;
  }
  .about-certificate__grid {
    gap: 4.8rem;
  }
  .about-certificate__image, .about-certificate__provider, .about-certificate__heading, .about-certificate__description,
  .about-certificate a {
    width: 100%;
  }
  .resume-page .header,
  .resume-page .resume-header,
  .jfcandleco-page .header {
    padding: 4rem 2rem;
  }
  .resume-page .mobile-nav,
  .jfcandleco-page .mobile-nav {
    top: 3.2rem;
    right: 2.4rem;
  }
  .resume {
    border-radius: 0.8rem;
  }
  .resume-container {
    padding: 2rem 2.4rem 5.6rem;
    text-align: center;
  }
  .resume-section__title-separator {
    margin-right: auto;
    margin-left: auto;
  }
  .resume-section__description {
    margin-right: auto;
    margin-left: auto;
  }
  .resume-project__list,
  .resume-certifications {
    display: inline-block;
    text-align: left;
  }
  .resume-skill-group {
    width: min(100%, 28rem);
  }
  .resume-skill-group__list {
    display: block;
    text-align: left;
  }
  .resume-project__title span {
    display: block;
  }
  .resume-project__type {
    margin-top: 0.4rem;
  }
  .resume-skills {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .resume-actions .btn-primary {
    width: 100%;
    text-align: center;
  }
  .scroll-top {
    right: 2rem;
    bottom: 2rem;
  }
}
/* ------------------------------
  Media Queries 430px max-width
------------------------------ */
@media (max-width: 430px) {
  .home-hero {
    min-height: 100vh;
  }
  .home-hero__heading {
    font-size: clamp(1.6rem, 5.1vw, 2.8rem);
  }
  .hero-btn a {
    width: min(100%, 26rem);
  }
  .home-hero__image {
    width: min(105vw, 48rem);
    max-height: 64vh;
  }
  .resume-intro {
    padding-inline: 1.8rem;
  }
  .resume-intro__name {
    font-size: 2.9rem;
  }
  .resume-intro__title,
  .resume-contact__text,
  .resume-contact__link,
  .resume-section__description,
  .resume-project__role,
  .resume-project__list,
  .resume-skill-group__list li,
  .resume-certifications {
    font-size: 1.5rem;
  }
  .resume-container {
    padding-inline: 1.8rem;
  }
  .about-certificate {
    padding: 5.6rem 1.8rem;
  }
  .about-certificate__section-heading {
    font-size: 3.2rem;
  }
  .about-certificate__provider {
    font-size: 1.6rem;
  }
  .about-certificate__heading {
    font-size: 2.1rem;
  }
  .about-certificate__description,
  .about-certificate a {
    font-size: 1.5rem;
  }
}
/* ------------------------------
  Small Phone 400px max-width
------------------------------ */
/* ------------------------------
  Small Phone 350px max-width
------------------------------ */
@media (max-width: 350px) {
  .home-hero__heading {
    font-size: 1.6rem;
    white-space: normal;
  }
  .home-hero__subheading {
    font-size: 1.4rem;
  }
  .hero-btn a {
    width: 100%;
    padding-inline: 2rem;
    font-size: 1.6rem;
  }
}
/* ------------------------------
  Mobile 600px max-width
------------------------------ */

/*# sourceMappingURL=main.css.map */