/* ============================================
   PORTFOLIO — STYLESHEET
   style.css
   ============================================ */

/* ── RESET & ROOT ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

* {
  user-select: none;
  -webkit-user-select: none;
}

:root {
  --bg:      #0a0a0a;
  --bg2:     #111111;
  --surface: #161616;
  --border:  #2e2e2e;
  --accent:  #c8f04a;
  --text:    #B7AB98;
  --muted:   #5a5a5a;
  --muted2:  #3a3a3a;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  font-size: 16px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Mono', monospace;
  overflow-x: hidden;
  cursor: none;
}

html.is-loading,
body.is-loading {
  overflow-y: hidden;
   scrollbar-width: none;
  -ms-overflow-style: none;
}

html.is-loading::-webkit-scrollbar,
body.is-loading::-webkit-scrollbar {
  display: none;
}

a, button, [role="button"], input, textarea, select, label, summary {
  cursor: none !important;
}


/* ── NOISE OVERLAY ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: .03;
  pointer-events: none;
  z-index: 1;
}

/* ── REVEAL ANIMATIONS ── */
.reveal {
  opacity: 0;
  transform: translateY(2.5rem);
}


/* ============================================
   CURSOR
   ============================================ */
#cursor {
  width: 1.75rem;
  height: 1.75rem;
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-0.25rem, -0.125rem);
  transition: opacity .2s;
}

/* Hide on touch devices before JS runs — prevents flash during load */
@media (hover: none) {
  #cursor, #cursor-ring { display: none; }
}

#cursor svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0.0625rem 0.1875rem rgba(0,0,0,.45));
}

#cursor-ring {
  width: 2.1875rem;
  height: 2.1875rem;
  background: var(--accent);
  border: none;
  border-radius: 50%;
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width .3s, height .3s, opacity .3s;
  opacity: 0.85;
}


/* ============================================
   LOADER
   ============================================ */
body:not(.is-enter) nav,
body:not(.is-enter) .hero-socials,
body:not(.is-enter) .footer-sound,
body:not(.is-enter) .press-btn {
  opacity: 0 !important;
  pointer-events: none !important;
}

body:not(.is-enter) {
  overflow: hidden !important;
}

#page-loading_circle,
.page-loading_text {
  opacity: 0;
}

.page-loading.is-progress #page-loading_circle,
.page-loading.is-progress .page-loading_text {
  opacity: 1;
}

.page-loading {
  --po: 829;
  --size-circle: 16.875rem;
  align-items: center;
  background: #0d0d0d;
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  left: 0;
  top: 0;
  position: fixed;
  will-change: opacity;
  z-index: 9992;
  cursor: none;
}

.page-loading_text {
  color: #b7ab98;
  font-family: 'Avalon', monospace;
  font-size: 0.625rem;
  font-weight: 400;
  left: 0;
  letter-spacing: -0.03em;
  line-height: 110%;
  margin-top: 1.125rem;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
}

@media (min-width: 900px) {
  .page-loading_text {
    font-size: 0.75rem;
  }
}

.page-loading_inner {
  position: relative;
}

#page-loading_circle {
  stroke-dasharray: 829;
  stroke-dashoffset: var(--po);
  height: var(--size-circle);
  transform: rotate(-90deg);
  width: var(--size-circle);
}

.page-loading_logo {
  align-items: center;
  display: flex;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.page-loading_logo img {
  height: 6.5rem;
  width: 6.5rem;
  object-fit: contain;
}

.page-loading_start {
  --size-w: 11.14rem;
  align-items: center;
  background: transparent;
  border: 1px solid #b7ab98;
  border-radius: 4.375rem;
  bottom: 1.0625rem;
  box-shadow: none;
  color: #b7ab98;
  cursor: none;
  display: flex;
  font-family: 'Avalon', sans-serif;
  font-size: 0.875rem;
  font-weight: 540;
  height: 2.6rem;
  justify-content: center;
  left: calc((var(--size-circle) - var(--size-w)) / 2);
  letter-spacing: 0.44em;
  line-height: 0.625rem;
  opacity: 0;
  outline: none;
  pointer-events: none;
  position: absolute;
  text-transform: uppercase;
  transition: background-color 0.6s cubic-bezier(0.165, 0.84, 0.44, 1),
              color 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  width: var(--size-w);
}

@media (any-hover: hover) {
  .page-loading_start:hover {
    background: #b7ab98;
    color: #0d0d0d;
  }
}


/* ============================================
   NAVIGATION
   ============================================ */
nav {
  position: fixed;
  top: 2.6%; left: 1%; right: 0;
  z-index: 10002;
  padding: 1.85% 2.96%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}

.nav-left {
  display: flex;
  align-items: center;
  pointer-events: all;
}

.nav-green-dot {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  cursor: none !important;
  color: var(--text);
  will-change: transform;
  position: relative;
  z-index: 9999;
  transition: filter 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-green-dot.is-magnetic {
  filter: brightness(0);
}

.nav-logo {
  color: var(--text);
  text-decoration: none;
  pointer-events: all;
  opacity: 0.85;
  transition: opacity .3s;
}
.nav-logo:hover { opacity: 1; }

.nav-links {
  margin-right: 0.625rem;
  margin-top: 0.15625rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4375rem;
  list-style: none;
  pointer-events: all;
  line-height: 1.125rem;
}

.nav-links li {
  margin: 0;
  padding: 0;
  line-height: 1.125rem;
}

.nav-links a {
  margin-right: 0.4375rem;
  color: var(--text);
  text-decoration: none;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.894rem;
  font-weight: 650;
  text-transform: uppercase;
  opacity: 0.7;
  transition: opacity .3s;
  display: block;
  line-height: 1.125rem;
  height: 1.125rem;
}

.nav-item-inner {
  clip-path: inset(0);
  display: block;
  position: relative;
  overflow: hidden;
  height: 1.125rem;
  line-height: 1.125rem;
}

.nav-item-deep,
.nav-item-active {
  display: block;
  transition: transform 0.4s cubic-bezier(.165,.84,.44,1);
}

.nav-item-active {
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(100%);
  color: var(--accent);
}

.nav-links a:hover .nav-item-deep,
.nav-links a.is-section-active .nav-item-deep {
  transform: translateY(-100%);
}

.nav-links a:hover .nav-item-active,
.nav-links a.is-section-active .nav-item-active {
  transform: translateY(0);
}

.nav-links a:hover,
.nav-links a.is-section-active { opacity: 1; }  


/* ============================================
   HERO SOCIAL SIDEBAR
   ============================================ */
.hero-socials {
  position: fixed;
  left: 3.5875rem;
  bottom: 4.65rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.625rem;
}

.hero-social-link {
  color: var(--muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  transition: color .3s;
  will-change: transform;
  cursor: none !important;
  position: relative;
  z-index: 9999;
}

.hero-social-link svg {
  width: 1.33125rem;
  height: 1.33125rem;
  position: absolute;
}

.hero-social-link .svg-green {
  fill: #B7AB98;
}

.hero-social-link .svg-black {
  fill: #000000;
  clip-path: circle(0 at 50% 50%);
}

.hero-social-link:hover {
  color: var(--text);
}


/* ============================================
   SOUND BUTTON
   ============================================ */
.footer-sound {
  background: none;
  border: none;
  cursor: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  color: var(--muted);
  transition: color .3s;
  position: fixed;
  bottom: 6.875rem;
  right: 1.8125rem;
  transform: rotate(-90deg);
  overflow: hidden;
  padding: 0 0.3em;
  margin: 0 -0.3em;
  z-index: 200;
}

.footer-sound:hover {
  color: var(--text);
}

.footer-sound__label {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.8875rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
  transition: color .3s;
}

.footer-sound__list {
  position: relative;
  margin-top: 0.0625rem;
}

.footer-sound__item {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.8875rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  line-height: 1.2;
  display: block;
  will-change: transform;
}

.footer-sound__item:first-child {
  position: relative;
}

.footer-sound__item:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
}


/* ============================================
   SHARED SECTION STYLES
   ============================================ */
section:not(#hero) {
  padding: 7.5rem 4rem;
  max-width: 92%;
  margin: 0 auto;
}

.section-label {
  font-size: 0.625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 3rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.section-label::before {
  content: '';
  display: block;
  width: 2rem;
  height: 1px;
  background: var(--accent);
}


/* ============================================
   HERO
   ============================================ */
#hero {
  position: relative;
  width: 100%;
  height: 114vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
}

#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 80% at 72% 50%, #1e1612 0%, transparent 65%),
    radial-gradient(ellipse 80% 60% at 30% 50%, #111 0%, transparent 70%);
  z-index: 0;
}

#hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #0a0a0a 0%, transparent 45%, #0a0a0a 100%);
  z-index: 1;
}

.hero-bg-marquee {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.hero-bg-marquee-track {
  display: flex;
  gap: 5rem;
  animation: bgMarquee 14s linear infinite;
  white-space: nowrap;
  flex-shrink: 0;
}

.hero-bg-marquee-track span {
  font-family: 'Avalon', 'Syne', sans-serif;
  font-weight: 590;
  font-size: clamp(11.25rem, 38vh, 30rem);
  color: transparent;
  -webkit-text-stroke: 2px rgba(255,255,255,0.15);
  letter-spacing: -.02em;
  text-transform: uppercase;
  flex-shrink: 0;
}

@keyframes bgMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.hero-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 6rem;
}

.hero-center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  margin: 4.0625rem 0 0 0;
  margin-left: -0.75rem;
  margin-top: 5.75rem;
}

#hero .has-alt {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
}

#hero .layer-1,
body > .layer-2:has(.hero-title) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
}

.layer-2 .line--mask-element {
  transform: translateY(0);
}

.hero-name-tag {
  display: block;
  margin-bottom: 0.75rem;
  pointer-events: none;
}

.line--mask-wrap {
  display: block;
  overflow: hidden;
}

.line--mask-element {
  display: block;
  font-family: 'Avalon', sans-serif;
  font-size: 1rem;
  font-weight: 550;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #B7AB98;
  transform: translateY(100%);
}

.hero-title {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  line-height: .9;
  padding: 0;
  margin: 0.625rem 0 0 0;
}

.hero-line {
  display: block;
  font-family: 'Avalon', sans-serif;
  font-weight: 590;
  overflow: hidden;
  font-style: normal;
  letter-spacing: -.04em;
  font-size: 8.5625rem;
  line-height: .77;
}

.word {
  display: block;
  visibility: hidden;
}
.hero-line--light .word  { color: #B7AB98; }
.hero-line--accent .word { color: #C8F04A; }
.hero-line--year .word   { color: #B7AB98; }

.hero-line--light .char  { color: #B7AB98; }
.hero-line--accent .char { color: #C8F04A; }


/* ============================================
   MARQUEE
   ============================================ */
.marquee-wrap {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.125rem 0;
  overflow: hidden;
  background: var(--bg2);
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.marquee-track {
  display: flex;
  gap: 4rem;
  animation: marquee 20s linear infinite;
  white-space: nowrap;
}

.marquee-item {
  font-family: 'Syne', sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4rem;
  flex-shrink: 0;
}

.marquee-item span {
  color: var(--accent);
  font-size: 1.125rem;
  line-height: 0;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ============================================
   ABOUT
   ============================================ */
#about {
  padding-top: 10.625rem !important;
  padding-left: 16.0625rem !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-align: left;
}

#about .hero-name-tag {
  margin-bottom: 1.5625rem !important;
}

#about .line--mask-element {
  transform: translateY(0);
  font-size: 0.875rem;
  letter-spacing: .4em;
}

.about-headline {
  font-family: 'Avalon', sans-serif;
  font-weight: 600;
  font-size: 5rem;
  line-height: 0.92;
  letter-spacing: -.05em;
  color: var(--text);
  max-width: 89%;
  margin: 0 0 5rem 0;
}

.about-accent {
  color: var(--accent);
}

.about-muted {
  color: var(--muted);
}


/* ============================================
   PROJECTS
   ============================================ */
#projects {
  padding-top: 12.5rem !important;
  padding-left: 16.0625rem !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-align: left;
  position: relative;
  overflow: visible;
  padding-bottom: 1.6875rem !important;
}

.projects-bg {
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 140%;
  z-index: 0;
  pointer-events: none;
  transform: translate3d(0, var(--offset-parallax, 0rem), 0);
  will-change: transform;
}

.projects-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 85%;
  display: block;
  filter: brightness(.35);
}

#projects > *:not(.projects-bg) {
  position: relative;
  z-index: 1;
}

#projects .hero-name-tag {
  margin-bottom: 1.5rem;
}

#projects .line--mask-element {
  transform: translateY(0);
  font-size: 0.875rem;
  letter-spacing: .4em;
}


/* ============================================
   HISTORY HEADING
   ============================================ */
.history-heading {
  position: relative;
  z-index: 2;
  padding-top: 8.25rem;
}

.history-heading .line--mask-element {
  transform: translateY(0);
  font-size: 0.875rem;
  letter-spacing: .4em;
}


/* ============================================
   HISTORY LIST
   ============================================ */
#history {
  padding: 0;
  max-width: 100%;
  margin: 0;
}

.history-list {
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.history-item {
  display: grid;
  grid-template-columns: 16.25rem 1fr;
  align-items: center;
  padding: 2.5625rem 4rem 2.75rem 12.1875rem;
  cursor: none;
  position: relative;
  overflow: visible;
  transition: background .3s;
}

.history-item::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -624.9375rem;
  right: -624.9375rem;
  height: 1px;
  background: var(--border);
  pointer-events: none;
}

.history-year {
  font-family: 'Avalon', sans-serif;
  font-size: 2.5rem;
  font-weight: 590;
  letter-spacing: -.03em;
  color: var(--text);
  line-height: 1;
  transition: color .3s;
  margin-bottom: 1.5625rem;
}

.history-item.is-active .history-year {
  color: #0d0d0d;
}

.history-name {
  font-family: 'Avalon', sans-serif;
  font-size: 2.5rem;
  font-weight: 590;
  letter-spacing: -.03em;
  color: var(--text);
  line-height: 1;
  margin-bottom: 0.5rem;
  transition: color .3s;
  cursor: none;
  width: fit-content;
}

.history-item.is-active .history-name {
  color: #0d0d0d;
}

.history-sub {
  font-family: 'Avalon', sans-serif;
  font-weight: normal;
  font-size: 0.875rem;
  letter-spacing: .08em;
  color: var(--muted);
  transition: color .3s;
}

.history-item.is-active .history-sub {
  color: #000000;
}

.history-arrow {
  font-size: 1.75rem;
  color: var(--muted);
  transform: rotate(-45deg);
  transition: transform .3s, color .3s;
  position: absolute;
  right: 4rem;
  top: 50%;
  translate: 0 -50%;
}

.history-mask-reveal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  display: grid;
  grid-template-columns: 16.25rem 1fr;
  align-items: center;
  padding: 2.5625rem 4rem 2.75rem 12.1875rem;
  clip-path: inset(50% 0 50% 0);
  transition: clip-path 0.4s cubic-bezier(.165,.84,.44,1);
  z-index: 3;
  pointer-events: none;
}

.history-item.is-active .history-arrow {
  transform: rotate(0deg);
  color: #0d0d0d;
}

.history-item::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -624.9375rem;
  right: -624.9375rem;
  background: var(--accent);
  clip-path: inset(50% 0 50% 0);
  transition: clip-path 0.4s cubic-bezier(.165,.84,.44,1);
  z-index: 1;
  pointer-events: none;
}

.history-item.is-active::after {
  clip-path: inset(0);
}

.history-item.is-active .history-mask-reveal {
  clip-path: inset(0);
  pointer-events: all;
}

.history-mask-reveal .history-year { color: #0d0d0d; }
.history-mask-reveal .history-name { color: #0d0d0d; }
.history-mask-reveal .history-sub  { color: #0d0d0d; }

.history-mask-reveal .history-arrow {
  color: #0d0d0d;
  transform: rotate(-45deg);
  transition: transform .4s cubic-bezier(.165,.84,.44,1);
  position: absolute;
  right: 4rem;
  top: 50%;
  translate: 0 -50%;
}

.history-item.is-active .history-mask-reveal .history-arrow {
  transform: rotate(0deg);
}


#work {
  padding-top: 8.75rem;
}

.work-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 4rem;
}

.work-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
}

.work-count {
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: .1em;
}

.project-list {
  display: flex;
  flex-direction: column;
}

.project-item {
  border-top: 1px solid var(--border);
  padding: 2.25rem 0;
  display: grid;
  grid-template-columns: 3.75rem 1fr auto;
  gap: 2rem;
  align-items: center;
  cursor: none;
  position: relative;
  overflow: hidden;
}

.project-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--surface);
  transform: translateX(-101%);
  transition: transform .4s cubic-bezier(.76, 0, .24, 1);
  z-index: 0;
}

.project-item:hover::after {
  transform: translateX(0);
}

.project-item > * {
  position: relative;
  z-index: 1;
}

.project-num {
  font-size: 0.6875rem;
  color: var(--muted);
  letter-spacing: .1em;
}

.project-name {
  font-family: 'Avalon', sans-serif;
  font-size: clamp(1.375rem, 3vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: 0.375rem;
  transition: color .3s;
}

.project-item:hover .project-name {
  color: var(--accent);
}

.project-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tag {
  font-size: 0.625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 0.25rem 0.625rem;
  transition: border-color .3s, color .3s;
}

.project-item:hover .tag {
  border-color: var(--muted2);
  color: var(--text);
}

.project-arrow {
  font-size: 1.5rem;
  color: var(--muted);
  transform: rotate(-45deg);
  transition: transform .3s, color .3s;
}

.project-item:hover .project-arrow {
  transform: rotate(0deg);
  color: var(--accent);
}

.project-item:last-child {
  border-bottom: 1px solid var(--border);
}


/* ============================================
   TESTIMONIALS
   ============================================ */
#testimonials {
  padding: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.testimonials-label {
  padding-left: 16.0625rem;
  padding-top: 7.5rem;
  margin-bottom: 0 !important;
}

.testimonials-label .line--mask-element {
  transform: translateY(0);
  font-size: 0.90625rem;
  font-weight: 600;
  letter-spacing: .4em;
}

.testimonial-wrap {
  display: grid;
  grid-template-columns: 1fr 6.25%;
  position: relative;
}

.testimonial-blocks {
  display: flex;
  flex-direction: column;
}

.testimonial-block {
  padding: 8.4375rem 4rem 4rem 11.5625rem;
  position: relative;
}

.testimonial-content {
  width: fit-content;
}

.testimonial-block:last-child {
  padding-bottom: 6.25rem;
}

.testimonial-block::before {
  margin-top: 2.125rem;
  content: '';
  position: absolute;
  top: 0;
  left: 16.0625rem;
  width: 70.8%;
  height: 1px;
  background: var(--border);
}

.testimonial-block-inner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.testimonial-quote-mark {
  font-family: 'Avalon', serif;
  font-size: 8.4375rem;
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
  flex-shrink: 0;
  margin-top: -0.5rem;
}

.testimonial-text {
  margin-bottom: 0 !important;
  flex: 1;
  max-width: 55%;
  letter-spacing: -0.04em;
}

.testimonial-author {
  margin-top: 2.5rem;
  padding-top: 0;
}

.testimonial-name {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--text);
  margin-bottom: 0.5rem;
  margin-left: 4.375rem;
}

.testimonial-role,
.testimonial-company {
  font-family: 'Avalon', sans-serif;
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--muted);
  letter-spacing: .08em;
  line-height: 1.6;
  margin-left: 4.375rem;
}

.testimonial-avatars-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  align-self: start;
  padding-top: 9.25rem;
}

.testimonial-avatars {
  display: flex;
  flex-direction: column;
  gap: 1.5625rem;
  align-items: center;
  transform: translateX(-16.125rem);
  margin-top: 0;
}

.testimonial-avatar {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: none;
}

.avatar-arrow {
  font-size: 0.75rem;
  color: var(--accent);
  opacity: 0;
  transition: opacity .3s;
}

.testimonial-avatar.active .avatar-arrow {
  opacity: 1;
}

.avatar-placeholder {
  width: 5rem;
  height: 5rem;
  background: var(--surface);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Avalon', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--muted);
  opacity: 0.35;
  border: 2px solid transparent;
  transition: opacity .3s, border-color .3s, transform .3s;
  overflow: hidden;
}

.avatar-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.testimonial-avatar.active .avatar-placeholder {
  opacity: 1;
  border-color: var(--accent);
  transform: scale(1.08);
}

.testimonial-avatar:hover .avatar-placeholder {
  opacity: 0.7;
}


/* ============================================
   MOTTO
   ============================================ */
#motto {
  padding: 0;
  max-width: 100%;
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

#motto::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(200, 240, 74, 0.04) 0%, transparent 70%);
  pointer-events: none;
}

.motto-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 5.0625rem 3rem;
  width: 100%;
}

.motto-label {
  margin-bottom: 2.5rem !important;
}

.motto-label .line--mask-element {
  transform: translateY(0);
  font-size: 1rem;
  letter-spacing: .44em;
}

.motto-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}

.motto-line {
  display: flex;
  justify-content: center;
  gap: 0.22em;
  line-height: 0.84;
  overflow: visible;
  width: 75%;
}

.motto-word {
  font-family: 'Avalon', sans-serif;
  font-weight: 600;
  font-size: 8.625rem;
  letter-spacing: -.057em;
  line-height: 0.75em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--border);
  display: inline-block;
  transition: -webkit-text-stroke .4s;
  will-change: -webkit-text-stroke, color;
}

.motto-word.is-filled {
  color: var(--text);
  -webkit-text-stroke: 0 transparent;
}

.motto-attribution {
  margin-top: 1.5rem;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}


/* ============================================
   CONTACT
   ============================================ */
#contact {
  padding: 10rem 3rem 5.5rem !important;
}

#contact .line--mask-element {
  transform: translateY(0);
  font-size: 0.875rem;
  letter-spacing: .09em;
}

.connect-label {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 3.125rem;
  margin-left: 9.25rem;
  font-family: 'Avalon', sans-serif;
  letter-spacing: 0.01em;
  position: relative;
  top: -0.375rem;
}

.connect-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: -1rem;
  align-items: start;
  margin-left: 9.25rem;
}

.connect-col {
  display: flex;
  flex-direction: column;
  margin-top: -0.4375rem;
}

.connect-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  font-family: 'Avalon', sans-serif;
  font-size: 2.4375rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -.02em;
  line-height: 0.7;
  transition: color .3s;
  padding: 0.25rem 0;
}

.connect-link::before {
  content: '◥';
  display: inline-block;
  font-size: 0.825rem;
  color: #C8F04A;
  margin-bottom: 0.18125rem;
  border: none;
  flex-shrink: 0;
  transition: transform .3s;
}

.connect-info {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  justify-content: center;
  padding-top: 0.5rem;
}

.connect-info-block {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin-top: -0.4375rem;
}

.connect-info-label {
  font-family: 'Avalon', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .05em;
}

.connect-info-value {
  font-family: 'Avalon', sans-serif;
  font-size: 0.84375rem;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  transition: color .3s;
}

.connect-info-mask {
  position: relative;
  padding: 0.75rem 0;
  margin: -0.75rem 0;
}

.connect-info-mask-reveal {
  left: 0 !important;
  width: 100% !important;
  top: 0 !important;
  height: 100% !important;
  display: flex;
  align-items: center;
  padding: 0.75rem 0;
}

.connect-info-label--dark {
  font-family: 'Avalon', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0d0d0d;
  letter-spacing: .05em;
  margin-bottom: 0.125rem;
}

.connect-info-value--dark {
  font-family: 'Avalon', sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #0d0d0d;
  text-decoration: none;
}

.connect-mask {
  position: relative;
}

.connect-mask-deep {
  position: relative;
}

.connect-mask-reveal {
  position: absolute;
  top: -0.125rem; left: 0;
  width: 100%;
  height: calc(100% + 0.3625rem);
  background: var(--accent);
  clip-path: inset(50% 0 50% 0);
  transition: clip-path 0.4s cubic-bezier(.165,.84,.44,1);
  z-index: 2;
  pointer-events: none;
}

@media (hover: hover) {
  .connect-mask:hover .connect-mask-reveal {
    clip-path: inset(0);
    pointer-events: all;
  }
}

.connect-col .connect-mask-reveal {
  left: 1.125rem;
  width: 90.6%;
}

.resume-cta-wrap .connect-mask-reveal {
  left: 0;
  width: 100%;
  top: -0.15em;
  bottom: -0.15em;
  height: auto;
}

.resume-cta-wrap .connect-link--dark {
  padding-left: 0;
}

.resume-cta-wrap .connect-link--dark::before {
  display: inline-block;
  color: #0d0d0d;
}

.connect-link--dark {
  color: #0d0d0d;
  padding-left: 0.375rem;
}

.connect-link--dark::before {
  display: none;
}


/* ============================================
   TWO-LAYER REVEAL
   ============================================ */
.has-alt {
  position: relative;
  cursor: none;
}

.layer-2 {
  position: fixed;
  pointer-events: none;
  z-index: 9990;
  background: var(--accent);
  clip-path: circle(var(--reveal-r, 0rem) at var(--reveal-x, -624.9375rem) var(--reveal-y, -624.9375rem));
  box-sizing: content-box;
}

.layer-2,
.layer-2 *,
.layer-2 .about-accent,
.layer-2 .resume-accent,
.layer-2 .motto-word,
.layer-2 .motto-word.is-filled,
.layer-2 .__dim,
.layer-2 .__bright {
  color: #0d0d0d !important;
  -webkit-text-stroke: 0 transparent !important;
}

.layer-2 .word {
  visibility: visible !important;
}

.layer-2[data-section="about"] { text-align: left; }
.layer-2[data-section="about"] .hero-name-tag { margin-bottom: 1.5625rem !important; }
.layer-2[data-section="about"] .line--mask-element { font-size: 0.875rem; letter-spacing: .4em; }

.layer-2[data-section="resume"] { text-align: left; }
.layer-2[data-section="resume"] .hero-name-tag { margin-bottom: 1.75rem !important; }
.layer-2[data-section="resume"] .line--mask-element { font-size: 0.875rem; letter-spacing: .4em; }

.layer-2[data-section="projects"] { text-align: left; }
.layer-2[data-section="projects"] .hero-name-tag { margin-bottom: 1.5rem; }
.layer-2[data-section="projects"] .line--mask-element { font-size: 0.875rem; letter-spacing: .4em; }

.layer-2[data-section="motto"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.layer-2[data-section="motto"] .motto-label { margin-bottom: 2rem !important; }
.layer-2[data-section="motto"] .motto-label .line--mask-element { font-size: 1rem; letter-spacing: .44em; }
.layer-2[data-section="motto"] .motto-attribution { margin-top: 2rem; }
.layer-2[data-section="motto"] .motto-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}

.layer-2[data-section="testimonials"] .testimonial-quote-mark { color: #0d0d0d; }
.layer-2[data-section="testimonials"] .testimonial-name { color: #0d0d0d; }
.layer-2[data-section="testimonials"] .testimonial-role,
.layer-2[data-section="testimonials"] .testimonial-company { color: #333; }
.layer-2[data-section="testimonials"] .about-accent { color: #0d0d0d; }
.layer-2[data-section="testimonials"] .testimonial-block::before { background: #0d0d0d; }
.layer-2[data-section="testimonials"] .testimonials-label .line--mask-element { color: #0d0d0d; }


/* ============================================
   SOLID BACKGROUND BLOCK
   ============================================ */
.solid-block {
  background: #0d0d0d;
  position: relative;
  z-index: 2;
  isolation: isolate;
  margin-top: -0.75rem;
  overflow: visible;
}


/* ============================================
   WHAT I DO
   ============================================ */
#whatido {
  padding-top: 0 !important;
  padding-left: 16.0625rem !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-align: left;
  position: relative;
}

.whatido-items {
  display: flex;
  flex-direction: column;
}

.whatido-line {
  transform: translateY(0);
  font-size: 8.75rem;
  font-weight: 550;
  letter-spacing: -.04em;
  line-height: .68;
  overflow: visible;
  padding: 0.375rem 0;
  border-top: none;
  margin-left: -16.0625rem;
  padding-left: 16.0625rem;
  width: calc(100% + 16.0625rem);
  position: relative;
  cursor: none;
}

.whatido-line::before,
.whatido-line:last-child::after {
  content: '';
  position: absolute;
  left: -624.9375rem;
  right: -624.9375rem;
  height: 1px;
  background: var(--border);
}

.whatido-line::before { top: 0; }
.whatido-line:last-child::after { bottom: 0; }
.whatido-line:last-child { border-bottom: none; }

.whatido-mask-reveal {
  position: absolute;
  top: 0;
  left: -624.9375rem;
  right: -624.9375rem;
  height: 100%;
  background: var(--accent);
  display: flex;
  align-items: center;
  padding-left: calc(624.9375rem + 16.0625rem);
  color: #0d0d0d;
  font-family: 'Avalon', sans-serif;
  font-weight: 550;
  font-size: 8.75rem;
  letter-spacing: -.04em;
  line-height: .68;
  clip-path: inset(50% 0 50% 0);
  transition: clip-path 0.4s cubic-bezier(.165,.84,.44,1);
  pointer-events: none;
  z-index: 2;
}

.whatido-desc {
  position: absolute;
  right: calc(624.9375rem + 5rem);
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Avalon', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #000000;
  max-width: 22.5rem;
  text-align: left;
  line-height: 1.5;
}

.whatido-line .word {
  width: fit-content;
  cursor: none;
}

.whatido-line.is-active .whatido-mask-reveal {
  clip-path: inset(0);
}

#history {
  padding: 0 !important;
  max-width: 100%;
  margin: 0;
}

.hero-alt-marquee {
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.125rem 0;
  background: var(--bg2);
  pointer-events: none;
  z-index: 9989;
}

.hero-alt-marquee-track {
  display: flex;
  gap: 4rem;
  white-space: nowrap;
  will-change: transform;
}

.hero-alt-marquee-item {
  font-family: 'Avalon', 'Syne', sans-serif;
  font-size: 0.8125rem;
  font-weight: 550;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg);
  flex-shrink: 0;
}

.hero-alt-marquee-item span {
  color: var(--accent);
  margin: 0 0.5rem;
}

.layer-2 .hero-alt-marquee {
  background: rgba(0, 0, 0, 0.12);
  border-top: 1px solid rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

.layer-2 .hero-alt-marquee-item span {
  color: rgba(0, 0, 0, 0.45) !important;
}


/* ============================================
   WHATIDO — 3D OBJECTS
   ============================================ */
.whatido-3d-left,
.whatido-3d-right {
  --size-3d: 21.875rem;
  pointer-events: none;
  position: absolute;
  width: var(--size-3d);
  height: var(--size-3d);
  z-index: 10;
}

@media (min-width: 900px) {
  .whatido-3d-left,
  .whatido-3d-right {
    --size-3d: 37.5rem;
  }
}

.whatido-3d-inner {
  width: 100%;
  height: 100%;
}

.whatido-3d-left canvas,
.whatido-3d-right canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.whatido-3d-left {
  bottom: -7.5rem;
  left: calc(0rem - var(--size-3d) / 2);
}

@media (min-width: 900px) {
  .whatido-3d-left {
    bottom: 0;
  }
}

@media (min-width: 1200px) {
  .whatido-3d-left {
    bottom: unset;
    top: calc(0rem - var(--size-3d) / 3);
  }
}

.whatido-3d-right {
  left: unset;
  right: calc(-0.3125rem - var(--size-3d) / 2);
  top: -7.5rem;
}

@media (min-width: 900px) {
  .whatido-3d-right {
    top: -10rem;
  }
}

@media (min-width: 1200px) {
  .whatido-3d-right {
    bottom: 0;
    right: calc(0rem - var(--size-3d) / 2);
    top: unset;
  }
}

canvas.three-app {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 10;
  touch-action: pan-y;
}


/* ============================================
   RESUME — LANYARD SECTION
   ============================================ */
#resume {
  padding: 5rem 4rem !important;
  padding-top: 12.5rem !important;
  max-width: 92% !important;
  margin: 0 auto !important;
  position: relative;
  z-index: 3;
}

.resume-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(1.125rem) saturate(140%);
  -webkit-backdrop-filter: blur(1.125rem) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.5rem;
  box-shadow:
    0 0.5rem 2rem rgba(0, 0, 0, 0.45),
    inset 0 0.0625rem 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  position: relative;
}

.resume-inner::before {
  content: '';
  position: absolute;
  top: -5rem;
  left: -5rem;
  width: 20rem;
  height: 20rem;
  background: radial-gradient(circle, rgba(200, 240, 74, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.resume-text {
  display: flex;
  flex-direction: column;
  padding: 4rem 3.5rem;
  position: relative;
  z-index: 1;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.resume-text .hero-name-tag {
  margin-bottom: 1.75rem;
}

.resume-text .line--mask-element {
  font-size: 0.875rem;
  letter-spacing: .4em;
}

.resume-headline {
  font-family: 'Avalon', sans-serif;
  font-weight: 600;
  letter-spacing: -.05em;
  color: var(--text);
  font-size: 3.375rem !important;
  max-width: 100% !important;
  margin-bottom: 0 !important;
  line-height: 0.9 !important;
}

.resume-cta-wrap {
  margin-top: 3.25rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.resume-3d {
  position: relative;
  width: 100%;
  height: 33.75rem;
  z-index: 1;
}

.resume-3d canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

#lanyard-canvas-wrap canvas {
  touch-action: none;
}

.resume-3d-hint {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Avalon', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
  opacity: 0.5;
  z-index: 2;
  white-space: nowrap;
}


/* ============================================
   MOBILE ≤ 900px
   ============================================ */
@media (max-width: 900px) {

  html {
    font-size: calc(7.92453px + 1.88679vw);
  }

  body {
    cursor: default;
  }
  * { cursor: default !important; }

  nav {
    top: 0;
    padding: 1.25rem;
    padding-right: 0.5rem; /* ← reduce this to taste */
  }

  .footer-sound {
    right: -1rem; /* match whatever you set for nav padding-right */
    bottom: 3rem;
  }

  .marquee-track { animation-duration: 4s; }

  .nav-links {
    gap: 0;
    margin: 0;
  }

  .nav-links a {
    font-size: .875rem;
    font-weight: 700;
    line-height: 1;
    padding: .25rem 0;
    text-align: right;
    height: auto;
  }

  .nav-item-inner {
    height: auto;
    line-height: 1;
  }

  #hero {
    height: calc(var(--vh, 1svh) * 100);
    min-height: 32.5rem;
  }

  .hero-bg-marquee-track span {
    font-size: clamp(6.25rem, 28vw, 12.5rem);
  }

  .hero-wrapper {
    margin-bottom: 2.4375rem;
  }

  .hero-center {
    margin-top: 0;
    margin-left: 0;
    align-items: center;
    text-align: center;
  }

  .hero-line {
    font-size: 5rem;
    letter-spacing: -.05em;
    line-height: 84%;
    text-transform: uppercase;
  }

  #about {
    padding-top: 12.5rem !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    margin-bottom: 12.5rem !important;
  }

  .about-headline {
    font-size: 2.75rem;
    letter-spacing: -.04em;
    line-height: 100%;
    max-width: 100%;
    margin-bottom: 0;
  }

  #whatido {
    padding-left: 1.25rem !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 12.5rem !important;
  }

  .whatido-line {
    font-size: 5rem;
    letter-spacing: -.05em;
    line-height: 84%;
    margin-left: -1.25rem;
    padding-left: 1.25rem;
    width: calc(100% + 1.25rem);
  }

  .whatido-mask-reveal {
    font-size: 5rem;
    padding-left: calc(624.9375rem + 1.25rem);
  }

  .whatido-3d-left,
  .whatido-3d-right {
    display: block !important;
    --size-3d: 21.875rem;
    width: var(--size-3d);
    height: var(--size-3d);
  }

  .whatido-3d-left {
    bottom: -7.5rem;
    left: calc(0rem - var(--size-3d) / 2);
  }

  .whatido-3d-right {
    left: unset;
    right: calc(-0.3125rem - var(--size-3d) / 2);
    top: -7.5rem;
  }

  .resume-inner {
    grid-template-columns: 1fr;
  }

  .resume-text {
    border-right: none;
  }

  #projects {
    padding-top: 12.5rem !important;
    padding-bottom: 3rem !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    overflow: hidden;
  }

  #projects .projects-bg {
    height: 100%;
    top: 0;
  }

  .projects-bg-img {
    object-position: 90%;
  }

  #projects .about-headline {
    font-size: 2.75rem;
    letter-spacing: -.04em;
    line-height: 100%;
  }

  .history-heading {
    padding-left: 1.25rem;
  }

  .history-item,
  .history-mask-reveal {
    grid-template-columns: 5.625rem 1fr auto;
    padding: 2rem 1.25rem;
  }

  .history-year { font-size: 1.5rem; }
  .history-name { font-size: 1.5rem; }

  #resume {
    padding: 3.75rem 1.25rem !important;
  }

  .resume-inner {
    grid-template-columns: 1fr;
  }

  .resume-text {
    padding: 2.5rem 2rem;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }

  .resume-headline {
    font-size: 2.375rem !important;
  }

  .resume-3d {
    height: 18.75rem;
  }

  .resume-stat-num {
    font-size: 2.375rem;
  }

  #testimonials {
    max-width: 85% !important;
    padding: 0 !important;
  }

  .testimonials-label {
    padding-left: 1.25rem;
    padding-top: 9.375rem;
    padding-bottom: 2.2rem;
    margin-bottom: 0 !important;
  }

  .testimonial-avatars-wrap {
    display: block;
    position: absolute;
    right: 1.25rem;
    top: 9.375rem;
    width: auto;
    padding: 0;
    align-self: unset;
  }

  .testimonial-avatars {
    flex-direction: column;
    gap: .625rem;
    transform: none;
    margin-top: 0;
    align-items: center;
  }

  .avatar-placeholder {
    width: 3.125rem;
    height: 3.125rem;
  }

  .avatar-arrow {
    display: block;
    font-size: 0.5rem;
  }

  .testimonial-wrap {
    grid-template-columns: 1fr;
    position: relative;
  }

  .testimonial-blocks {
    display: block;
  }

  .testimonial-block {
    height: 42.5rem;
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    border-top: 1px solid hsla(37, 18%, 66%, .15);
    position: relative;
  }

  .testimonial-block::before {
    display: block;
    position: absolute;
    top: -1px;
    left: calc(100% + 0.01px);
    right: auto;
    width: 5rem;
    height: 1px;
    margin-top: 0;
    background: hsla(37, 18%, 66%, .15);
  }

  .testimonial-block:last-child {
    padding-bottom: 0;
  }

  .testimonial-content {
    width: 100%;
  }

  .testimonial-block-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .testimonial-quote-mark {
    display: block;
    font-size: 7.5rem;
    line-height: 84%;
    letter-spacing: -.05em;
    margin-left: -.05em;
    margin-bottom: 0;
  }

  .testimonial-text {
    max-width: 100%;
    font-size: 2.75rem !important;
    letter-spacing: -.04em;
    line-height: 100%;
    flex: none;
  }

  .testimonial-author {
    margin-top: 1.875rem;
  }

  .testimonial-name,
  .testimonial-role,
  .testimonial-company {
    margin-left: 0;
  }

  .testimonial-avatars-wrap {
    top: 12.4%;
    transform: translateY(-12.5%);
    right: -2rem;
  }

  #motto {
    padding: 0;
    min-height: calc(var(--vh, 1svh) * 100);
  }

  .motto-inner {
    padding: 9.375rem 1.25rem;
  }

  .motto-word {
    font-size: 5rem;
    letter-spacing: -.05em;
    line-height: 84%;
  }

  .motto-line { width: 100%; }

  #contact {
    padding-top: 6.25rem !important;
    padding-bottom: 9.6875rem !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .connect-label {
    margin-left: 0;
    margin-bottom: 1.875rem;
  }

  .connect-grid {
    grid-template-columns: 1fr;
    gap: 0.4rem;
    margin-left: 0;
  }

  .connect-info {
    margin-top: 5rem; /* adjust to taste */
  }

  .connect-link {
    font-size: 1.75rem;
    letter-spacing: -.04em;
  }

  .hero-socials {
    display: none;
  }

  .marquee-item { font-size: .875rem; }

  .history-mask-reveal {
    pointer-events: none !important;
  }

  .layer-2 {
    pointer-events: none !important;
  }

  .resume-3d,
  #lanyard-canvas-wrap {
    touch-action: pan-y;
  }

  /* connect-mask tap reveal disabled — mask animations do not fire on mobile */
}
/* ============================================
   MOBILE PRESS REVEAL BUTTON
   ============================================ */
.press-btn {
  --size-btn: 78px;
  background: none;
  border: none;
  bottom: 2.1875rem;
  display: none;
  left: calc(50% - var(--size-btn) / 2);
  padding: 0;
  position: fixed;
  z-index: 10002;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

.press-btn__inner {
  display: block;
  position: relative;
  width: var(--size-btn);
  height: var(--size-btn);
}

.press-btn__ring-wrap {
  position: absolute;
  inset: 0;
  animation: pressBtnRing 10s infinite forwards linear;
  will-change: transform;
}

.press-btn__ring {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes pressBtnRing {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(1turn); }
  100% { transform: rotate(2turn); }
}

.press-btn__touch {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.press-btn__icon {
  width: 14px;
  height: auto;
  display: block;
  transition: transform 0.15s ease;
}

/* Mobile full-page reveal overlay */
#mobile-layer2 {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--accent);
  pointer-events: none;
  clip-path: circle(0px at 50% 100%);
  overflow: hidden;
  color: #0d0d0d;
}

#mobile-layer2 * {
  color: #0d0d0d !important;
  -webkit-text-stroke: 0 transparent !important;
}

#mobile-layer2 .about-accent,
#mobile-layer2 .motto-word {
  color: #0d0d0d !important;
}

/* Nav, logo, sound turn black when reveal is active */
body.is-mobile-reveal nav,
body.is-mobile-reveal .nav-green-dot {
  opacity: 0 !important;
  pointer-events: none !important;
}

body.is-mobile-reveal .footer-sound {
  color: #0d0d0d !important;
}

body.is-mobile-reveal .footer-sound__item {
  color: #0d0d0d !important;
}

body.is-mobile-reveal .press-btn {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ============================================
   MOBILE FRAME FADES — exact match to minpham reference
   ============================================ */
.frame-mobile {
  display: block;
  height: 100vh;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 4;
}

@media (min-width: 900px) {
  .frame-mobile {
    display: none;
  }
}

.frame-mobile::before {
  background: linear-gradient(360deg, hsla(0, 0%, 4%, 0), var(--bg) 92.91%);
  height: 12.5rem;
  top: 0;
}

.frame-mobile::after,
.frame-mobile::before {
  content: "";
  display: block;
  left: 0;
  position: absolute;
  width: 100%;
}

.frame-mobile::after {
  background: linear-gradient(0deg, var(--bg) 31.25%, hsla(0, 0%, 4%, 0) 92.91%);
  bottom: 0;
  height: 15.625rem;
}

/* Alt (green) view — hide the fades entirely */
body.is-mobile-reveal .frame-mobile {
  display: none;
}

@media (max-width: 900px) {
  .press-btn {
    display: block;
  }

  #mobile-layer2 {
    display: block;
  }
}

/* ============================================
   MOBILE REVEAL PANEL — RESUME ALT
   Strip glassmorphism card visuals (already green background in panel)
   and hide the 3D lanyard.
   ============================================ */
@media (max-width: 900px) {
  #mobile-reveal-panel .layer-2[data-section="resume"] .resume-inner {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  #mobile-reveal-panel .layer-2[data-section="resume"] .resume-text {
    padding: 0 2rem 2.5rem !important;
    border: none !important;
  }

  #mobile-reveal-panel .layer-2[data-section="resume"] .resume-3d {
    display: none !important;
  }

  /* Smaller font for resume alt headline */
  #mobile-reveal-panel .layer-2[data-section="resume"] .resume-headline {
    font-size: 2.189rem !important;
    line-height: 1.1 !important;
  }

  /* Lift the Three.js lanyard canvas above the panel when revealed */
  body.is-mobile-reveal canvas.three-app {
    display: none !important;
  }

  /* CTA clone — match layer-1 spacing exactly */
  /* padding-top/bottom both 2.5rem mirror .resume-text's padding so the
     block height and both border lines land at the same document Y as layer-1 */
  #mobile-reveal-panel .resume-cta-wrap {
    border-top: 1px solid #2e2e2e !important;
    border-bottom: 1px solid #2e2e2e !important;
    margin-top: 0 !important;
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  #mobile-reveal-panel .resume-cta-wrap .connect-link--dark::before {
    display: inline-block !important;
    color: #0d0d0d !important;
  }
}

/* ============================================
   MOBILE REVEAL PANEL — WHATIDO ALT TEXT ONLY
   Strategy:
   - Zero container padding so lines sit flush edge-to-edge
   - Give the hero-name-tag ("WHAT I DO") its own indent to match
   - Kill ::before/::after pseudo-elements, use border-top instead
   - Hide .word via display:none (JS resets visibility but not display)
   - Flatten .whatido-mask-reveal to static flow, font-size:0 hides
     the raw text node; .whatido-desc restores its own size
   ============================================ */
@media (max-width: 900px) {
  /* Full-width container, no padding — lines will go edge to edge */
  #mobile-reveal-panel #whatido {
    padding: 0 !important;
  }

  /* Re-indent the "WHAT I DO" label to match the line text */
  #mobile-reveal-panel #whatido .hero-name-tag {
    padding-left: 1.25rem !important;
  }

  /* Each line: full width, text indented, real border instead of pseudo */
  #mobile-reveal-panel #whatido .whatido-line {
    margin-left: 0 !important;
    width: 100% !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border-top: 1px solid #2e2e2e !important;
  }

  #mobile-reveal-panel #whatido .whatido-line:last-child {
    border-bottom: 1px solid #2e2e2e !important;
  }

  /* Kill pseudo-element dividers — replaced by border-top above */
  #mobile-reveal-panel #whatido .whatido-line::before,
  #mobile-reveal-panel #whatido .whatido-line:last-child::after {
    display: none !important;
  }

  /* Hide the big word (display:none is immune to JS visibility reset) */
  #mobile-reveal-panel #whatido .whatido-line .word {
    display: none !important;
  }

  /* Flatten mask-reveal; font-size:0 hides the unwrapped text node */
  #mobile-reveal-panel #whatido .whatido-mask-reveal {
    position: static !important;
    display: block !important;
    height: auto !important;
    width: 100% !important;
    background: transparent !important;
    clip-path: none !important;
    padding: 0.75rem 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transition: none !important;
  }

  /* Restore only the description text */
  #mobile-reveal-panel #whatido .whatido-desc {
    position: static !important;
    display: block !important;
    transform: none !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    color: #0d0d0d !important;
    max-width: 100% !important;
    padding: 0 !important;
    text-align: left !important;
  }
}

/* ============================================
   MOBILE REVEAL PANEL — HISTORY FIXES
   ============================================ */
@media (max-width: 900px) {
  #mobile-reveal-panel #history {
    overflow: hidden !important;
    padding: 0 !important;
  }

  #mobile-reveal-panel #history .history-item::before,
  #mobile-reveal-panel #history .history-item::after {
    display: none !important;
  }

  #mobile-reveal-panel #history .history-list {
    border-top: 1px solid #2e2e2e !important;
  }

  /* Show history items as a normal grid — same as the base mobile layout */
  #mobile-reveal-panel #history .history-item {
    border-bottom: 1px solid #2e2e2e !important;
    background: transparent !important;
    display: grid !important;
    grid-template-columns: 5.625rem 1fr auto !important;
    align-items: center !important;
    padding: 2rem 1.25rem !important;
    box-sizing: border-box !important;
  }

  /* Hide the normal project names — the alt overlay takes their place */
  #mobile-reveal-panel #history .history-item > .history-year,
  #mobile-reveal-panel #history .history-item > .history-info,
  #mobile-reveal-panel #history .history-item > .history-arrow {
    visibility: hidden !important;
  }

  /* Show the alt-text overlay (same text as desktop hover state) */
  #mobile-reveal-panel #history .history-mask-reveal {
    display: grid !important;
    clip-path: inset(0) !important;
    pointer-events: auto !important;
  }

  /* Remove arrow and subtext from the alt overlay */
  #mobile-reveal-panel #history .history-mask-reveal .history-arrow,
  #mobile-reveal-panel #history .history-mask-reveal .history-sub {
    display: none !important;
  }
}

/* ============================================
   MOBILE REVEAL PANEL — MOTTO ALT ALIGNMENT + FONT SIZE
   The layer-2 motto label has margin-bottom: 2rem (overridden from 2.5rem)
   which shifts the big word down relative to layer-1. Match it here so
   the clone's internal spacing is identical to layer-1's.
   ============================================ */
@media (max-width: 900px) {
  #mobile-reveal-panel .layer-2[data-section="motto"] .motto-label {
    margin-bottom: 2.5rem !important;
  }
}

/* ============================================
   MOBILE REVEAL PANEL — MOTTO WORD WRAP
   .motto-word is display:inline-block which overflows instead
   of wrapping. Switch to block + word-break so long text
   wraps to the next line on small screens.
   ============================================ */
@media (max-width: 900px) {
  #mobile-reveal-panel .layer-2[data-section="motto"] .motto-word {
    display: block;
    white-space: normal;
    word-break: break-word;
    width: 100%;
  }
  .resume-cta-wrap .connect-link {
    font-size: 1.4rem;
  }
}

/* ============================================
   MOBILE REVEAL PANEL — CONNECT LINK TRIANGLE
   Show the triangle on .connect-link--dark and remove the
   padding-left offset that was only there to compensate for it.
   ============================================ */
@media (max-width: 900px) {
  #mobile-reveal-panel .connect-link--dark {
    padding-left: 0 !important;
  }

  #mobile-reveal-panel .connect-link--dark::before {
    display: inline-block !important;
    color: #0d0d0d !important;
  }

  /* Reset the desktop left-offset on the reveal overlay so alt links
     align with normal links inside the mobile panel */
  #mobile-reveal-panel .connect-col .connect-mask-reveal {
    left: 0 !important;
    width: 100% !important;
  }
}

/* ============================================
   MOBILE REVEAL PANEL — TESTIMONIALS LINE FIXES
   border-top on .testimonial-block is near-invisible (hsla .15 opacity)
   against the green panel background — swap to a solid dark line.
   ============================================ */
@media (max-width: 900px) {
  #mobile-reveal-panel .testimonial-block {
    border-top-color: rgba(13, 13, 13, 0.25) !important;
  }

  #mobile-reveal-panel .testimonial-block::before {
    background: rgba(13, 13, 13, 0.25) !important;
  }
}

@media (min-width: 900px) and (max-width: 1440px) {
  html {
    font-size: clamp(13px, calc(13px + (100vw - 900px) / 180), 16px);
  }
  .projects-bg-img {
    object-position: 90%;
  }
  .testimonial-text.about-headline {
    font-size: clamp(4.565rem, calc(3rem + (100vw - 900px) / 270), 6.5rem);
  }
  .testimonial-quote-mark {
    font-size: clamp(5rem, calc(5rem + (100vw - 900px) / 162), 8.4375rem);
  }
  .connect-link {
    font-size: clamp(1.6rem, calc(1.6rem + (100vw - 900px) / 509), 2.4375rem);
  }
  .connect-info {
    justify-content: flex-start;
    padding-top: 0;
    margin-top: -0.4375rem;
  }
}

@media (max-width: 900px) {
  body > .layer-2[data-section] {
    display: none !important;
  }
}

@media (min-width: 1600px) {
  html {
    font-size: 1vw;
  }
}