/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  background: #ffffff;
  font-family: sans-serif;
}

p {text-wrap: pretty;}

.frame-wrapper {
  position: relative;
  width: 100%;
  padding: 0 20px 40px;
  background-color: #ffffffe4;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

/* ---------- Navigation (mobile first) ---------- */
/* The nav takes no space in the page (negative bottom margin), stays stuck to
   the top, and is hidden until the script adds .nav-visible after the intro
   has scrolled out of view. Without JavaScript it simply stays visible. */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  align-self: center;
  height: 73px;
  margin-bottom: -73px;
  padding: 16px 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  background: rgb(255 255 255 / .70);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgb(0 0 0 / .06);
}

.js .nav {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.js .nav.nav-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease;
}

.nav-brand {
	color: #000000;
  font-family: 'Source Serif 4', serif;
  font-size: 30px;
  font-weight: 700;
  white-space: nowrap;
	text-decoration: underline;
  text-decoration-color: #ffbf0f;
	text-decoration-thickness: 5px;
  text-underline-offset: -1px;
  text-decoration-skip-ink: none;
}

.nav-links a {
  color: #000000;
  text-decoration: none;
}

.nav-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  margin-right: -8px;
  background: none;
  border: 0;
  cursor: pointer;
}

/* Dropdown menu on mobile */
.nav-links {
  display: none;
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  flex-direction: column;
  padding: 8px 20px;
  border-top: 1px solid #ffbf0f;
  border-bottom: 1px solid #ffbf0f;
}

.nav-links.open { display: flex; }

.nav-links a {
  display: block;
  padding: 14px 0;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 18px;
  font-weight: 500;
}

.nav-links a + a { border-top: 1px solid #eeeeee; }

/* ---------- Intro (mobile first) ---------- */
.intro {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 58px 0;
	border-bottom: 1px solid #0000000f;
}

.intro-photo {
  order: -1; /* photo sits above the text on mobile */
  display: block;
  width: 236px;
  height: auto;
  margin-left: 9px;
  object-fit: contain;
}

.intro-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  max-width: 100%;
  margin-top: 14px;
}

/* Name with the yellow highlight bar behind it */
.intro-name {
  position: relative;
  display: inline-block;
  max-width: 100%;
  font-size: min(83px, 14.5vw);
	height: 1.25em;
}

.intro-name::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.99em;
  z-index: 1;
  width: 100%;
  height: 10px;
  background-color: #ffbf0f;
}

.intro-name h1 {
  position: relative;
  z-index: 2;
  font-family: 'Source Serif 4', serif;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.37;
  white-space: nowrap;
}

.intro-tagline {
  font-family: 'Source Sans 3', sans-serif;
  font-size: clamp(22px, 6vw, 36px);
  font-weight: 400;
}

.intro-bio {
  width: 100%;
  max-width: 720px;
  margin-top: 10px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 20px;
  font-weight: 400;
}

/* ---------- Navigation + intro: desktop (769px and up) ---------- */
@media (min-width: 769px) {
  html { scroll-padding-top: 90px; }

  body {
		display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #eeeff2;
    flex-direction: column;
  }

  .frame-wrapper {
    max-width: 1140px;
    padding: 0 clamp(20px, 4vw, 60px) 40px;
  }

	.frame-wrapper , .nav {
		border-left: 1px solid #00000021;
    border-right: 1px solid #00000021;
	}

  /* Nav becomes a single row */
  .nav {
    height: 78px;
    margin-bottom: -78px;
    padding: 0 50px;
		width: 100%;
		max-width: 1140px;
  }

  .nav-toggle { display: none; }

  .nav-links {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(20px, 3.5vw, 48px);
    padding: 0;
    border: 0;
  }

  .nav-links a {
    display: inline;
    padding: 0;
    font-size: 16px;
  }

  .nav-links a + a { border-top: 0; }

  /* Same animated bar as .project-title span, drawn on the link itself */
  .nav-links a {
    --bar-height: 0.16em;
    --bar-lift: 0em;
    background: linear-gradient(#ffbf0f, #ffbf0f) no-repeat 0 calc(100% - var(--bar-lift)) / 0 var(--bar-height);
    transition: background-size 0.3s;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .nav-links a:hover,
  .nav-links a:focus-visible { background-size: 100% var(--bar-height); }

  /* Text on the left, photo on the right */
  .intro {
    flex-direction: row;
    justify-content: space-between;
    gap: 4%;
  }

  .intro-photo {
    order: 0;
    flex-shrink: 0;    
    max-width: none;
    margin: 0 0 50px;
  }

  .intro-text {
    flex: 1 1 0;
    margin-top: 0;
  }

  .intro-name { font-size: clamp(48px, 7.6vw, 83px); }

  .intro-tagline { font-size: clamp(22px, 3.3vw, 36px); }

  .intro-bio { margin-top: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .nav,
  .js .nav.nav-visible { transition: none; }
}

.layer-experience-7 {
  width: 1048px;
  height: 1332px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  gap: 30px;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  align-self: center;
	margin: 30px 0;
}
.layer-other-8 {
  width: 300px;
  height: 1332px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
}
.layer-frame-1-9 {
  width: 300px;
  height: 1332px;
  display: flex;
  flex-direction: column;
  gap: 50px;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 20px 0px;
  position: relative;
  align-self: stretch;
  flex-grow: 1;
}
.layer-frame-2-10 {
  width: 300px;
  height: 430px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
}
.layer-h2-and-spacing-11 {
  width: 243px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
}
.layer-frame-5-13 {
  width: 100%;
  height: 374px;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  align-self: stretch;
}
.layer-skill-box-14 {
  width: 102px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid #cccccc;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 7px 13px 7px 13px;
  position: relative;
}
.text-9 {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
  color: #000000;
}
.layer-skill-box-15 {
  width: 95px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid #cccccc;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 7px 13px 7px 13px;
  position: relative;
}
.text-10 {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
  color: #000000;
}
.layer-skill-box-16 {
  width: 99px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid #cccccc;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 7px 13px 7px 13px;
  position: relative;
}
.text-11 {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
  color: #000000;
}
.layer-skill-box-17 {
  width: 152px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid #cccccc;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 7px 13px 7px 13px;
  position: relative;
}
.text-12 {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
  color: #000000;
}
.layer-skill-box-18 {
  width: 109px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid #cccccc;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 7px 13px 7px 13px;
  position: relative;
}
.text-13 {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
  color: #000000;
}
.layer-skill-box-19 {
  width: 86px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid #cccccc;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 7px 13px 7px 13px;
  position: relative;
}
.text-14 {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
  color: #000000;
}
.layer-skill-box-20 {
  width: 82px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid #cccccc;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 7px 13px 7px 13px;
  position: relative;
}
.text-15 {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
  color: #000000;
}
.layer-skill-box-21 {
  width: 172px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid #cccccc;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 7px 13px 7px 13px;
  position: relative;
}
.text-16 {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
  color: #000000;
}
.layer-skill-box-22 {
  width: 101px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid #cccccc;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 7px 13px 7px 13px;
  position: relative;
}
.text-17 {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
  color: #000000;
}
.layer-skill-box-23 {
  width: 57px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid #cccccc;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 7px 13px 7px 13px;
  position: relative;
}
.text-18 {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
  color: #000000;
}
.layer-skill-box-24 {
  width: 101px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid #cccccc;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 7px 13px 7px 13px;
  position: relative;
}
.text-19 {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
  color: #000000;
}
.layer-skill-box-25 {
  width: 54px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid #cccccc;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 7px 13px 7px 13px;
  position: relative;
}
.text-20 {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
  color: #000000;
}
.layer-skill-box-26 {
  width: 88px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid #cccccc;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 7px 13px 7px 13px;
  position: relative;
}
.text-21 {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
  color: #000000;
}
.layer-skill-box-27 {
  width: 90px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid #cccccc;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 7px 13px 7px 13px;
  position: relative;
}
.text-22 {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
  color: #000000;
}
.layer-skill-box-28 {
  width: 70px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid #cccccc;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 7px 13px 7px 13px;
  position: relative;
}
.text-23 {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
  color: #000000;
}
.layer-skill-box-29 {
  width: 75px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid #cccccc;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 7px 13px 7px 13px;
  position: relative;
}
.text-24 {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
  color: #000000;
}
.layer-skill-box-30 {
  width: 99px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid #cccccc;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 7px 13px 7px 13px;
  position: relative;
}
.text-25 {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
  color: #000000;
}
.layer-skill-box-31 {
  width: 67px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid #cccccc;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 7px 13px 7px 13px;
  position: relative;
}
.text-26 {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
  color: #000000;
}
.layer-frame-3-32 {
  width: 300px;
  height: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
}
.layer-h2-and-spacing-33 {
  width: 201px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
}
.text-27 {
  width: 300px;
  font-size: 16px;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}
.layer-line-1-35 {
  width: 1332px;
  height: 1px;
  flex-shrink: 0;
  transform: rotate(-90.00000250447806deg);
  transform-origin: center;
  align-self: stretch;
}
.layer-jobs-36 {
  width: 688px;
  height: 1332px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  flex-grow: 1;
}
.layer-jobs-36 div:last-child {padding-bottom:0;}
.layer-h2-and-spacing-37 {
  width: 214px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 20px 0px;
  position: relative;
}
.layer-job-1-39 {
  width: 688px;
  height: 351px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 50px 0px;
  position: relative;
}
.layer-intro-40 {
  width: 688px;
  height: 46px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
}
.layer-title-41 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 229px;
  height: 45px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.job-title {
  width: 229px;
  font-family: 'Source Serif 4', sans-serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 25px;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}
.text-29 {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.1em;
  text-align: right;
  white-space: nowrap;
  color: #000000;
}
.text-30 {
  position: absolute;
  left: 229px;
  top: 0px;
  width: 459px;
  height: 46px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
}
.text-31 {
  width: 688px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}
.layer-job-2-42 {
  width: 688px;
  height: 316px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 50px 0px;
  position: relative;
}
.layer-intro-43 {
  width: 688px;
  height: 57px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
}
.layer-title-44 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 229px;
  height: 57px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.text-33 {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-align: left;
  white-space: nowrap;
  color: #000000;
}
.text-34 {
  position: absolute;
  left: 229px;
  top: 0px;
  width: 459px;
  height: 57px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
}
.text-35 {
  width: 688px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}
.layer-job-3-45 {
  width: 688px;
  height: 339px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 50px 0px;
  position: relative;
}
.layer-intro-46 {
  width: 688px;
  height: 57px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
}
.layer-title-47 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 229px;
  height: 57px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.text-37 {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-align: left;
  white-space: nowrap;
  color: #000000;
}
.text-38 {
  position: absolute;
  left: 229px;
  top: 0px;
  width: 459px;
  height: 57px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
}
.text-39 {
  width: 688px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}
.layer-job-4-48 {
  width: 688px;
  height: 270px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 50px 0px;
  position: relative;
}
.layer-intro-49 {
  width: 688px;
  height: 57px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
}
.layer-title-50 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 229px;
  height: 57px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.text-41 {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-align: left;
  white-space: nowrap;
  color: #000000;
}
.text-42 {
  position: absolute;
  left: 229px;
  top: 0px;
  width: 459px;
  height: 57px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
}
.text-43 {
  width: 688px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}
.layer-projects-51 {
  width: 1048px;
  height: 5008px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
	border-top: 1px solid #0000000f;
  padding-top: 20px;
}
.layer-h2-52 {
  width: 159px;
  height: 49px;
  flex-shrink: 0;
  position: relative;
}
.layer-rectangle-2-53 {
  position: absolute;
  left: 0px;
  top: 12px;
  z-index: 2;
  width: 10px;
  height: 27px;
  background-color: #ffbf0f;
}
.text-44 {
  position: absolute;
  left: 23px;
  top: 0px;
  z-index: 1;
  font-family: 'Source Serif 4', sans-serif;
  font-size: 36px;
  font-weight: 700;
	font-style:italic;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
  color: #000000;
}
.layer-jobs-54 {
  width: 1048px;
  height: 4907px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
}
/* ---------- Project showcase (Cisco Live, Abbey Labs): one shared class ----------
   Mobile first: stacked. Desktop overrides live in the 769px+ query below. */
.layer-showcase {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  width: 100%;
  align-self: stretch;
  flex-shrink: 0;
}
.layer-showcase.swap { margin-bottom: 3px; }

.layer-showcase > .media-wrap {
  flex-shrink: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 560 / 760;
  object-fit: cover;
  background-color: #e0e0e0;
}

/* text column */
.layer-showcase > div:not(.media-wrap) {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  padding: 0 0 20px;
}

/* title + subtitle group */
.layer-showcase > div:not(.media-wrap) > div {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  flex-shrink: 0;
}

.layer-showcase .project-title { width: 100%; }

.layer-showcase p {
  width: 100%;
  align-self: stretch;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
}
.layer-showcase > div:not(.media-wrap) > div > p { font-weight: 600; } /* subtitle */

.project-title {
  width: 315px;
  font-family: 'Source Serif 4', sans-serif;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}
.layer-jobs-small {
  width: 1048px;
  height: 3287px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 50px 0px;
  position: relative;
  align-self: stretch;
}
.layer-small-1-64 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 315px;
  height: 743px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
}
.layer-img-02-65 {
  width: 315px;
  height: 396px;
  flex-shrink: 0;
  align-self: stretch;
  object-fit: cover;
  background-color: #e0e0e0;
}
.layer-title-66 {
  width: 315px;
  height: 327px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 20px 0px;
  position: relative;
  align-self: stretch;
}
.layer-frame-6-67 {
  width: 315px;
  height: 57px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
}
.text-52 {
  width: 315px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}
.text-53 {
  width: 315px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}
.layer-small-2-68 {
  position: absolute;
  left: 366px;
  top: 0px;
  width: 315px;
  height: 766px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
}
.layer-img-03-69 {
  width: 315px;
  height: 396px;
  flex-shrink: 0;
  object-fit: cover;
  background-color: #e0e0e0;
}
.layer-title-70 {
  width: 315px;
  height: 350px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 20px 0px;
  position: relative;
  align-self: stretch;
}
.layer-frame-6-71 {
  width: 315px;
  height: 57px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
}
.text-55 {
  width: 315px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}
.text-56 {
  width: 315px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}
.layer-small-3-72 {
  position: absolute;
  left: 732px;
  top: 0px;
  width: 315px;
  height: 766px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
}
.layer-img-04-73 {
  width: 315px;
  height: 396px;
  flex-shrink: 0;
  object-fit: cover;
  background-color: #e0e0e0;
}
.layer-title-74 {
  width: 315px;
  height: 350px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 20px 0px;
  position: relative;
  align-self: stretch;
}
.layer-frame-6-75 {
  width: 315px;
  height: 80px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
}
.text-58 {
  width: 315px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}
.text-59 {
  width: 315px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}
.layer-small-4-76 {
  position: absolute;
  left: 0px;
  top: 816px;
  width: 315px;
  height: 766px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
}
.layer-img-05-77 {
  width: 350px;
  height: 396px;
  flex-shrink: 0;
  object-fit: cover;
  background-color: #e0e0e0;
}
.layer-title-78 {
  width: 315px;
  height: 350px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 20px 0px;
  position: relative;
  align-self: stretch;
}
.layer-frame-6-79 {
  width: 315px;
  height: 57px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
}
.text-61 {
  width: 315px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}
.text-62 {
  width: 315px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}
.layer-small-5-80 {
  position: absolute;
  left: 366px;
  top: 816px;
  width: 315px;
  height: 743px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
}
.layer-img-06-81 {
  width: 315px;
  height: 396px;
  flex-shrink: 0;
  object-fit: cover;
  background-color: #e0e0e0;
}
.layer-title-82 {
  width: 315px;
  height: 327px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 20px 0px;
  position: relative;
  align-self: stretch;
}
.layer-frame-6-83 {
  width: 315px;
  height: 57px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
}
.text-64 {
  width: 315px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}
.text-65 {
  width: 315px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}
.layer-small-6-84 {
  position: absolute;
  left: 732px;
  top: 816px;
  width: 315px;
  height: 743px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
}
.layer-img-07-85 {
  width: 315px;
  height: 396px;
  flex-shrink: 0;
  object-fit: cover;
  background-color: #e0e0e0;
}
.layer-title-86 {
  width: 315px;
  height: 327px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 20px 0px;
  position: relative;
  align-self: stretch;
}
.layer-frame-6-87 {
  width: 315px;
  height: 57px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
}
.text-67 {
  width: 315px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}
.text-68 {
  width: 315px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}
.layer-small-7-88 {
  position: absolute;
  left: 0px;
  top: 1632px;
  width: 315px;
  height: 766px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
}
.layer-img-08-89 {
  width: 315px;
  height: 396px;
  flex-shrink: 0;
  object-fit: cover;
  background-color: #e0e0e0;
}
.layer-title-90 {
  width: 315px;
  height: 350px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 20px 0px;
  position: relative;
  align-self: stretch;
}
.layer-frame-6-91 {
  width: 315px;
  height: 57px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
}
.text-70 {
  width: 315px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}
.text-71 {
  width: 315px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}
.layer-small-8-92 {
  position: absolute;
  left: 366px;
  top: 1632px;
  width: 315px;
  height: 651px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
}
.layer-img-11-93 {
  width: 315px;
  height: 396px;
  flex-shrink: 0;
  object-fit: cover;
  background-color: #e0e0e0;
}
.layer-title-94 {
  width: 315px;
  height: 235px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 20px 0px;
  position: relative;
  align-self: stretch;
}
.layer-frame-6-95 {
  width: 315px;
  height: 57px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
}
.text-73 {
  width: 315px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}
.text-74 {
  width: 315px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}
.layer-small-9-96 {
  position: absolute;
  left: 732px;
  top: 1632px;
  width: 315px;
  height: 743px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
}
.layer-img-09-97 {
  width: 315px;
  height: 396px;
  flex-shrink: 0;
  object-fit: cover;
  background-color: #e0e0e0;
}
.layer-title-98 {
  width: 315px;
  height: 327px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 20px 0px;
  position: relative;
  align-self: stretch;
}
.layer-frame-6-99 {
  width: 315px;
  height: 57px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
}
.text-76 {
  width: 315px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}
.text-77 {
  width: 315px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}
.layer-small-10-100 {
  position: absolute;
  left: 0px;
  top: 2448px;
  width: 315px;
  height: 697px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
}
.layer-img-12-101 {
  width: 315px;
  height: 396px;
  flex-shrink: 0;
  object-fit: cover;
  background-color: #e0e0e0;
}
.layer-title-102 {
  width: 315px;
  height: 281px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 20px 0px;
  position: relative;
  align-self: stretch;
}
.layer-frame-6-103 {
  width: 315px;
  height: 57px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
}
.text-79 {
  width: 315px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}
.text-80 {
  width: 315px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}
.layer-small-11-104 {
  position: absolute;
  left: 366px;
  top: 2448px;
  width: 315px;
  height: 789px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
}
.layer-img-13-105 {
  width: 315px;
  height: 396px;
  flex-shrink: 0;
  object-fit: cover;
  background-color: #e0e0e0;
}
.layer-title-106 {
  width: 315px;
  height: 373px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 20px 0px;
  position: relative;
  align-self: stretch;
}
.layer-frame-6-107 {
  width: 315px;
  height: 57px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
}
.text-82 {
  width: 315px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}
.text-83 {
  width: 315px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}
.layer-small-12-108 {
  position: absolute;
  left: 732px;
  top: 2448px;
  width: 315px;
  height: 697px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
}
.layer-img-14-109 {
  width: 315px;
  height: 396px;
  flex-shrink: 0;
  object-fit: cover;
  background-color: #e0e0e0;
}
.layer-title-110 {
  width: 315px;
  height: 281px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 0px 20px 0px;
  position: relative;
  align-self: stretch;
}
.layer-frame-6-111 {
  width: 315px;
  height: 57px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
}
.text-85 {
  width: 315px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}
.text-86 {
  width: 315px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0em;
  text-align: left;
  text-transform: none;
  color: #000000;
  align-self: stretch;
}

    /* ---- Experience section fixes ---- */
    .exp-h2 {
      position: relative;
      padding-left: 25px;
      font-family: 'Source Serif 4', serif;
      font-size: 36px;
      font-weight: 700;
      font-style: italic;
      line-height: 49px;
      white-space: nowrap;
      color: #000000;
    }
    .exp-h2-bar {
      position: absolute;
      left: 0; top: 12px;
      width: 10px; height: 27px;
      background-color: #ffbf0f;
    }
    .layer-h2-and-spacing-11,
    .layer-h2-and-spacing-33 { width: auto; height: auto; }
    .layer-h2-and-spacing-37 { width: auto; height: auto; padding-bottom: 6px; }
    .layer-frame-2-10 { height: auto; }
    .layer-frame-3-32 { height: auto; }
    .layer-frame-1-9 { height: auto; }
    .layer-frame-5-13 {
      height: auto;
      flex-wrap: wrap;
      gap: 10px;
      align-items: flex-start;
      align-content: flex-start;
    }
    .skill-tag {
      border: 1px solid #cccccc;
      padding: 7px 13px;
      flex-shrink: 0;
    }
    .skill-tag p {
      font-family: 'Source Sans 3', sans-serif;
      font-size: 16px;
      font-weight: 500;
      line-height: 22px;
      white-space: nowrap;
      color: #000000;
    }
    .layer-experience-7 { position: relative; }
    .layer-line-1-35 {
      position: absolute;
      left: 330px; top: 0;
      width: 1px; height: 100%;
      background-color: rgb(0 0 0 / .06);
      transform: none;
      align-self: auto;
    }
    .layer-jobs-36 { width: 688px; height: auto; flex-grow: 0; flex-shrink: 0; margin-left: 31px; }
    .layer-job-1-39, .layer-job-2-42, .layer-job-3-45, .layer-job-4-48 { height: auto; }
    .layer-intro-40, .layer-intro-43, .layer-intro-46, .layer-intro-49 { height: auto; min-height: 46px; padding:10px 0; }
    .layer-title-41, .layer-title-44, .layer-title-47, .layer-title-50 { height: auto; }
    .text-29, .text-33, .text-37, .text-41 {
      font-size: 13px;
      line-height: 20px;
      letter-spacing: 0.1em;
      text-align: left;
      text-transform: uppercase;
      margin-top: 3px;
    }
    .layer-intro-40, .layer-intro-43, .layer-intro-46, .layer-intro-49 { flex-direction: row; align-items: flex-start; }
    .layer-title-41, .layer-title-44, .layer-title-47, .layer-title-50 { position: static; flex: 0 0 229px; width: 229px; }
    .text-30, .text-34, .text-38, .text-42 { position: static; flex: 1; width: auto; height: auto; line-height: 23px; }
    .text-31, .text-35, .text-39, .text-43 {
      list-style: disc;
      padding-left: 24px;
      line-height: 23px;
    }
    .text-31 li, .text-35 li, .text-39 li, .text-43 li { padding-left: 0; }

    /* Anchor offsets */
    #top, #skills, #education, #experience, #projects { scroll-margin-top: 20px; }


    /* ================= DESKTOP: fluid, percentage-based (>= 769px) ================= */
    @media (min-width: 769px) {
      /* Experience block */
      .layer-experience-7 { width: 100%; height: auto; overflow: visible; gap: 0; }
      .layer-other-8 { width: 28.6%; height: auto; }
      .layer-frame-1-9, .layer-frame-2-10, .layer-frame-3-32, .layer-frame-5-13, .text-27 { width: 100%; }
      .layer-line-1-35 { left: 31.5%; }
      .layer-jobs-36 { flex: 1 1 0; width: auto; min-width: 0; margin-left: 5.8%; }
      .layer-job-1-39, .layer-job-2-42, .layer-job-3-45, .layer-job-4-48,
      .layer-intro-40, .layer-intro-43, .layer-intro-46, .layer-intro-49,
      .text-31, .text-35, .text-39, .text-43 { width: 100%; }
      .layer-title-41, .layer-title-44, .layer-title-47, .layer-title-50 { flex: 0 0 33%; width: 33%; padding-right: 10px; }
      .job-title { width: 100%; }

      /* Projects */
      .layer-projects-51 { width: 100%; height: auto; overflow: visible; }
      .layer-jobs-54 { width: 100%; height: auto; }
      .layer-showcase { flex-direction: row; align-items: center; gap: 5%; }
      .layer-showcase > .media-wrap { width: 64.4%; aspect-ratio: 675 / 760; }
      .layer-showcase > div:not(.media-wrap) { flex: 1 1 0; }

      .layer-jobs-small {
        width: 100%; height: auto;
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 1%; align-items: stretch;
      }
      .layer-jobs-small > div[class^="layer-small-"] {
        position: static; width: 100%; height: auto;
      }
      .layer-jobs-small .media-wrap { width: 100%; height: auto; aspect-ratio: 315 / 396; object-fit: cover; }
      .layer-jobs-small [class^="layer-title-"] { width: 100%; height: auto; }
      .layer-jobs-small [class^="layer-frame-6-"] { width: 100%; height: auto; }
      .layer-jobs-small h3, .layer-jobs-small p { width: 100%; }
    }

    /* ================= MOBILE (<= 768px)=================*/
    @media (max-width: 768px) {
    .intro-bio {padding-top:10px;}
		/* Experience block */
    .layer-experience-7 { width: 100%; height: auto; overflow: visible; flex-direction: column; gap: 0; }
    .layer-other-8, .layer-frame-1-9, .layer-frame-2-10, .layer-frame-3-32 { width: 100%; }
    .layer-other-8 { height: auto; }
    .layer-frame-1-9 { padding-bottom: 40px; gap: 40px; }
    .text-27 { width: 100%; }
    .layer-line-1-35 { position: static; width: 100%; height: 1px; left: auto; margin: 0 0 40px; }
    .layer-jobs-36 { width: 100%; margin-left: 0; }
    .layer-job-1-39, .layer-job-2-42, .layer-job-3-45, .layer-job-4-48 { width: 100%; padding-bottom: 40px; }
    .layer-intro-40, .layer-intro-43, .layer-intro-46, .layer-intro-49 { width: 100%; flex-direction: column; gap: 8px; min-height: 0; }
    .layer-title-41, .layer-title-44, .layer-title-47, .layer-title-50 { flex: none; width: 100%; }
    .job-title { width: 100%; }
    .text-30, .text-34, .text-38, .text-42 { flex: none; width: 100%; }
    .text-31, .text-35, .text-39, .text-43 { width: 100%; } 
    /* Projects: every project uses the same full-width stacked layout */
    .layer-projects-51 { width: 100%; height: auto; overflow: visible; gap: 40px; }
    .layer-jobs-54 { width: 100%; height: auto; display: flex; flex-direction: column; gap: 50px; }
    .layer-jobs-small { width: 100%; height: auto; padding: 0; display: flex; flex-direction: column; gap: 50px; align-items: stretch; }
    /* flatten the 12 absolutely-positioned cards into the same stack */
    .layer-jobs-small { display: contents; }
    .layer-jobs-small> div[class^="layer-small-"] {
        position: static; width: 100%; height: auto;
        display: flex; flex-direction: column; gap: 20px;
      }

      /* images: full width, same ratio as first project */
      .layer-jobs-small .media-wrap {
        width: 100%; height: auto; aspect-ratio: 560 / 760; object-fit: cover;
        border: 0; flex-shrink: 0;
      }
      /* Abbey Labs: image first, then text (matches the first project) */
      .layer-showcase.swap > .media-wrap { order: -1; }

      /* text blocks fill the width */
      .layer-jobs-small [class^="layer-title-"] {
        width: 100%; height: auto; flex-grow: 0; padding: 0 0 20px;
      }
      .layer-jobs-small [class^="layer-frame-6-"] { width: 100%; height: auto; }
      .layer-jobs-small h3, .layer-jobs-small p { width: 100%; }
    }

/* ---------- Project hover effects ---------- */
/* Yellow bar that draws in from the left behind each project title.
   Same method and timing as the footer links on orioncreative.com.au:
   a background bar whose size animates from 0 to 100% over 0.3s.
   Backgrounds paint behind the text, so the bar overlaps the letters.
   Tune it with the two variables: raise --bar-lift to move the bar up into
   the letters, raise --bar-height to make it thicker. */
.project-title span {
  --bar-height: 0.2em;
  --bar-lift: 0.1em;
  background: linear-gradient(#ffbf0f, #ffbf0f) no-repeat 0 calc(100% - var(--bar-lift)) / 0 var(--bar-height);
  transition: background-size 0.3s;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.project-card:hover .project-title span { background-size: 100% var(--bar-height); }

.project-card {
	border: 1px solid #fff0;
  padding: 20px;
  height: 100%;
  display: flex;
	border-radius:6px;
	box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
	-webkit-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
	-moz-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
	transition: box-shadow 0.5s;
}

/* Mobile and touch devices: the bar is simply always there */
@media (max-width: 768px), (hover: none) {
  .project-title span {
    background-size: 100% var(--bar-height);
    transition: none;
  }
}

@media (hover: hover) {
	.project-card:hover{
		box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
		-webkit-box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
		-moz-box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
		}
	/* Photo zoom: triggered by hovering anywhere on the card, together with the
   title bar. The wrapper (.media-wrap) clips the scaled photo with overflow:hidden,
   so the edge sits on whole pixels and doesn't shimmer during the zoom. */
	.media-wrap img {
		transition: transform 0.5s ease;
	}
	.project-card:hover .media-wrap img {
		transform: translateZ(0) scale(1.05);
	}
}

@media (prefers-reduced-motion: reduce) {
  .nav-links a,
  .project-title span,
  .media-wrap img { transition: none; }
}

/* ---------- Animated page background (desktop only, fixed behind the page) ---------- */
.background-animation { display: none; }

@media (min-width: 769px) {
  .background-animation {
    --c: var(--bgx-color, #ffbf0f);          /* yellow */
    font-size: var(--bgx-size, 60px);
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background: linear-gradient(0deg,rgba(231, 247, 255, 1) 0%, rgb(255, 253, 247) 100%);
    isolation: isolate;
  }
  .background-animation span {
    position: absolute;
    left: -30%;
    right: -30%;
    top: var(--y);
    height: var(--h);
    border-radius: 50%;
    background: linear-gradient(90deg, transparent 4%, var(--a) 28%, var(--b) 54%, var(--e) 78%, transparent 96%);
    filter: blur(1.2em);
    mix-blend-mode: multiply;
    opacity: var(--o);
    animation: background-animation-sway var(--t) cubic-bezier(0.45, 0, 0.55, 1) var(--d) infinite alternate;
  }

  /* Band 1: rich yellows -> golden */
  .background-animation span:nth-child(1) {
    --y: 2%; --h: 6em; --r: -10deg; --t: 9s; --d: -3s; --o: 0.85;
		--a: rgb(255, 216, 123);
    --b: rgb(251, 176, 164);
    --e: rgb(255, 255, 255);
  }

  /* Band 2: pale yellow with a soft grey in the middle */
  .background-animation span:nth-child(2) {
    --y: 26%; --h: 4.5em; --r: 7deg; --t: 12s; --d: -8s; --o: 0.75;
		--a: rgb(255, 255, 255);
    --b: rgb(253, 221, 154);
    --e: rgb(255, 227, 198);
  }

  /* Band 3: grey */
  .background-animation span:nth-child(3) {
    --y: 46%; --h: 3.5em; --r: -14deg; --t: 7s; --d: -1s; --o: 0.6;
		--a: rgb(255, 255, 255);
    --b: rgb(233, 157, 110);
    --e: rgb(255, 197, 0);
  }
}

@keyframes background-animation-sway {
  from { transform: translateX(-10%) rotate(var(--r)) scaleY(0.75); }
  to   { transform: translateX(10%) rotate(calc(var(--r) * -0.5)) scaleY(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .background-animation span { animation: none; }
}


/* ---------- Photo wrapper: clips the hover zoom ---------- */
.media-wrap {
  position: relative;
  overflow: hidden;
  background-color: #e0e0e0;
	border-radius:6px;
}
.media-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}