:root {
  font-family: "General Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #171315;
  background: transparent;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --ink: #171315;
  --muted: #b9bec2;
  --gutter: 40px;
  --page-gutter: 40px;
  --space-section: clamp(72px, 12vw, 160px);
  --page-width: 1488px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background-color: #fff;
  color: #171315;
  transition: background-color .5s ease-in-out, color .5s ease-in-out;
}
#page.is-dark { background-color: #131313; color: #fff; }

/* Keep the Archive page's soft, blurred fade at the viewport bottom. */
#page::after {
  position: fixed;
  z-index: 10;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(120px, 19vh, 240px);
  content: "";
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .14));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 100%);
}

#page.is-dark::after {
  background: linear-gradient(to bottom, transparent, rgba(19, 19, 19, .18));
}

.site-header {
  position: relative;
  z-index: 30;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 72px;
  padding-inline: max(32px, calc((100vw - var(--page-width)) / 2));
}
.site-header__wordmark { display: inline-flex; color: #111; line-height: 0; }
#page.is-dark .site-header__wordmark { color: #fff; }
.site-header__wordmark svg { display: block; width: 84px; height: 24px; }
.site-header__menu {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #111;
  cursor: pointer;
  transition: background-color 180ms ease;
}
#page.is-dark .site-header__menu { color: #fff; }
.site-header__menu:hover { background: #eee; }
#page.is-dark .site-header__menu:hover { background: #292929; }
.site-header__menu:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.site-header__menu-dots,
.site-header__menu-dots::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.site-header__menu-dots::before {
  content: "";
  box-shadow: -12px -12px currentColor, 0 -12px currentColor, 12px -12px currentColor,
    -12px 0 currentColor, 12px 0 currentColor, -12px 12px currentColor,
    0 12px currentColor, 12px 12px currentColor;
  transition: box-shadow 300ms cubic-bezier(.4, 0, .2, 1);
}
.site-header__menu:hover .site-header__menu-dots::before {
  box-shadow: 0 -18px currentColor, 0 -9px currentColor, 18px 0 currentColor,
    -9px 0 currentColor, 9px 0 currentColor, -18px 0 currentColor,
    0 9px currentColor, 0 18px currentColor;
}
.is-header-menu-open .site-header__menu-dots::before {
  box-shadow: -12px -12px currentColor, 6px -6px currentColor, 12px -12px currentColor,
    -6px -6px currentColor, 6px 6px currentColor, -12px 12px currentColor,
    -6px 6px currentColor, 12px 12px currentColor;
}
a { color: inherit; }

.bottom-dock {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 32px;
  width: max-content;
  max-width: calc(100% - 24px);
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
}
#page.is-dock-visible .bottom-dock {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#page.is-dock-visible .bottom-dock:has(#resumeLauncher[aria-expanded="true"]) {
  z-index: 101;
}
.bottom-nav { position: relative; flex: 0 1 auto; width: max-content; max-width: 100%; }
.resume-launcher {
  display: block;
  flex: 0 0 auto;
  width: clamp(68px, 8vw, 100px);
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 0;
  cursor: pointer;
  transition: transform 320ms cubic-bezier(.2, .8, .2, 1);
}
.resume-folder-art { position: relative; display: block; width: 100%; aspect-ratio: 83 / 91; }
.resume-folder-art > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; transition: opacity 240ms ease; }
.resume-folder-hover { opacity: 0; }
.resume-launcher:hover .resume-folder-default,
.resume-launcher:focus-visible .resume-folder-default { opacity: 0; }
.resume-launcher:hover .resume-folder-hover,
.resume-launcher:focus-visible .resume-folder-hover { opacity: 1; }
.resume-launcher:hover { transform: translateY(-4px); }
.resume-launcher:focus-visible { outline: 2px solid #3e4f5f; outline-offset: 4px; border-radius: 8px; }
.bottom-nav__pill {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: rgba(94, 94, 94, .76);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, .1),
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -1px 0 rgba(255, 255, 255, .1),
    inset 0 0 14px 7px rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}
.bottom-nav__pill::before,
.bottom-nav__pill::after {
  position: absolute;
  z-index: 2;
  content: "";
  pointer-events: none;
}
.bottom-nav__pill::before {
  top: 0;
  right: 12px;
  left: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
}
.bottom-nav__pill::after {
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .8), transparent, rgba(255, 255, 255, .3));
}
.bottom-nav__link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  color: rgba(255, 255, 255, .94);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color 300ms ease, background-color 300ms ease, box-shadow 300ms ease;
}
.bottom-nav__link:hover { color: #fff; }
.bottom-nav__link.is-active {
  color: #171315;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.bottom-nav__link:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

.resume-overlay {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 24px 24px 124px;
  overflow: hidden;
  background: rgba(8, 8, 10, .46);
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 0s linear 520ms;
}
.resume-overlay[hidden] { display: none; }
.resume-overlay.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.resume-image {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 148px);
  max-height: calc(100dvh - 148px);
  object-fit: contain;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  opacity: 0;
  transition: opacity 140ms ease;
}
.resume-overlay.is-open .resume-image { opacity: 1; }
.resume-overlay.is-animating .resume-image { opacity: 0; }
.resume-genie {
  position: fixed;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 2px 8px rgba(99, 99, 99, 0.2));
  opacity: 0;
  transition: opacity 140ms ease;
}
.resume-overlay.is-animating .resume-genie { opacity: 1; }
.resume-controls {
  position: fixed;
  z-index: 3;
  display: flex;
  gap: 24px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.resume-overlay.is-open:not(.is-animating) .resume-controls { opacity: 1; transform: translateY(0); }
.resume-action {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 20px;
  color: inherit;
  cursor: pointer;
}
.resume-action svg { position: relative; z-index: 1; display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.resume-action:has(svg) { text-decoration: none; }

.portfolio-shell {
  width: min(var(--page-width), calc(100% - 64px));
  margin-inline: auto;
  padding: 100px 0 72px;
}

/* Shared 12-column layout for the hero and following sections. */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

.hero { row-gap: 0; }
.hero-profile { grid-column: 1 / span 7; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.intro { padding: 0%; }
.eyebrow {
  margin: 0 0 18px;
  font-size: 20px;
  line-height: 140%;
  font-weight: 600;
  letter-spacing: -1px;
}
.portrait {
  display: block;
  width: 260px;
  height: 260px;
  overflow: hidden;
  border-radius: 15px;
  object-fit: cover;
}

.summary { grid-column: 8 / 13; grid-row: 1; }
.summary-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.summary-copy > p {
  max-width: 100%;
  margin: 0;
  font-size: 18px;
  line-height: 150%;
  font-weight: 500;
}
.summary-accordion {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.summary-command {
  display: flex;
  align-items: center;
  gap: 9px;
  order: 1;
  width: 164px;
  height: 32px;
  padding: 8px 12px;
  border: 0;
  border-radius: 4px;
  background: rgb(231 231 232 / 50%);
  color: #9298a4;
  font-family: Menlo, ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}
.summary-command:hover { background: rgb(218 218 221 / 65%); transform: translateY(-1px); }
.summary-command:focus-visible { outline: 2px solid #171315; outline-offset: 4px; }
.summary-command__prompt { width: 9px; height: 16px; color: #18a765; font-size: 14px; font-weight: 700; line-height: 16px; }
.summary-command__label { width: 116px; color: #9298a4; white-space: nowrap; }
.summary-command__label::after {
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 2px;
  background: currentColor;
  content: "";
  vertical-align: -.12em;
  animation: summary-command-caret 1s steps(2, start) infinite;
}
@keyframes summary-command-caret { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .summary-command__label::after { animation: none; }
}
.summary-more {
  display: grid;
  grid-template-rows: 0fr;
  order: 2;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: grid-template-rows 460ms cubic-bezier(.2, .75, .25, 1), margin-bottom 300ms ease, opacity 240ms ease, transform 320ms ease, visibility 460ms;
}
.summary-more.is-open {
  grid-template-rows: 1fr;
  order: 1;
  margin-bottom: 18px;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.summary-more.is-open.is-settled { z-index: 2; }
.summary-accordion.is-open .summary-command { order: 2; }
.summary-more__inner { min-height: 0; overflow: hidden; }
.summary-more.is-open.is-settled .summary-more__inner { overflow: visible; }
.summary-more__inner p { margin: 0 0 18px; font-size: 18px; line-height: 150%; font-weight: 500; }
.summary-more__inner p:last-child { margin-bottom: 0; }
.summary-highlight {
  position: relative;
  display: inline;
  padding: 0 .07em;
  color: inherit;
  text-decoration: none;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-color 180ms ease;
}
.summary-highlight--blue { background: #dceaff; }
.summary-highlight--mint { background: #c9f0df; }
.summary-highlight--coral { background: #ffe0d0; }
.summary-highlight--lilac { background: #f0dcf5; }
.summary-highlight--gold { background: #ffe6ae; }
.summary-highlight:hover,
.summary-highlight:focus-visible { background-color: #ffd979; outline: none; }
.summary-highlight:focus-visible { box-shadow: 0 0 0 2px #171315; }
.summary-highlight--site { cursor: none; }
.summary-cursor-label {
  position: fixed;
  z-index: 45;
  top: 0;
  left: 0;
  padding: 9px 13px;
  border-radius: 999px;
  background: #5d5d5d;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(14px, 14px) scale(.94);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
}
.summary-cursor-label.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(14px, 14px) scale(1);
}
.summary-preview {
  position: absolute;
  z-index: 40;
  left: 50%;
  bottom: calc(100% + 12px);
  display: block;
  width: clamp(150px, 19vw, 210px);
  height: clamp(96px, 12vw, 136px);
  padding: 5px;
  overflow: hidden;
  border: 1px solid rgba(23, 19, 21, .08);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(23, 19, 21, .2);
  opacity: 0;
  visibility: hidden;
  pointer-events: auto;
  transform: translate(-50%, 7px) scale(.97);
  transform-origin: bottom center;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}
.summary-preview::after {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 14px;
  content: "";
}
.summary-preview img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 7px;
  object-fit: cover;
}
.summary-highlight:hover .summary-preview,
.summary-highlight:focus-visible .summary-preview {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
}

.project-previews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, .3fr));
  gap: 16px;
  margin-top: 32px;
}
.project-card {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: block;
  padding: 0;
  border-radius: 15px;
  isolation: isolate;
  cursor: default;
}
.project-card > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-card__label {
  position: relative;
  z-index: 1;
  color: white;
  font-size: 13px;
  line-height: 1.05;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}
.project-card__shape {
  position: absolute;
  width: 52%;
  aspect-ratio: 1;
  right: -4%;
  bottom: -22%;
  border-radius: 24px 50% 18px 50%;
  background: rgb(255 255 255 / 31%);
  transform: rotate(-25deg);
}
.project-card--coral { background: #ee2736; }
.project-card--coral .project-card__shape { background: #ffb4a6; }
.project-card--lilac { background: #eff0fa; }
.project-card--lilac .project-card__label { color: #34334b; }
.project-card--lilac .project-card__shape { background: #b7a9eb; }
.project-card--green { background: #087b38; }
.project-card--green .project-card__shape { background: #74bd87; }

.identity { width: 100%; margin-top: 16px; }
.identity h1 {
  margin: 0;
  font-size: clamp(72px, 8.4vw, 132px);
  line-height: 0.96;
  font-weight: 700;
  letter-spacing: -2px;
}
.role {
  margin: 20px 0 0;
  font-size: clamp(20px, 3.2vw, 28px);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -0.045em;
}
.role__dot { display: inline-block; margin-left: 5px; }
.design-philosophy__reveal {
  display: block;
  width: 120px;
  height: 32px;
  max-width: 100%;
  margin: 32px auto 0;
  line-height: 0;
}
.design-philosophy__reveal svg { display: block; width: 100%; height: 100%; overflow: visible; }
.design-philosophy__reveal svg path { fill: currentColor !important; stroke: currentColor !important; }
.design-philosophy__reveal.is-fallback { aspect-ratio: auto; color: inherit; font-size: clamp(42px, 8vw, 76px); font-weight: 500; line-height: 1; letter-spacing: -.06em; }

.client-list {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 2;
  display: block;
  margin-top: 68px;
  min-width: 0;
}
.logo-window { overflow: hidden; }
.logo-track { display: flex; width: max-content; animation: logo-marquee 28s linear infinite; }
.logo-group { display: flex; align-items: center; gap: clamp(42px, 5vw, 84px); padding-right: clamp(42px, 5vw, 84px); }
.brand {
  position: relative;
  appearance: none;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.brand img { display: block; width: auto; max-width: 150px; height: auto; max-height: 34px; opacity: .5; filter: opacity(2.5); transition: filter 180ms ease, opacity 180ms ease, transform 180ms ease; }
.brand:hover img, .brand:focus-visible img { opacity: 1; filter: opacity(2.5) brightness(0) saturate(100%) invert(27%) sepia(13%) saturate(1115%) hue-rotate(166deg) brightness(94%) contrast(87%); transform: scale(1.06); }
.brand:focus-visible { outline: 2px solid #3e4f5f; outline-offset: 4px; border-radius: 4px; }
.brand-overlay {
  position: absolute;
  z-index: 20;
  left: 8px;
  width: max-content;
  max-width: calc(100% - 16px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  padding: 16px;
  border-radius: 8px;
  background: #fff;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  text-align: left;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: auto;
  transform: translateY(10px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}
.brand-overlay strong { color: #8c8c8c; font-size: 14px; line-height: 1.1; font-weight: 500; }
.brand-overlay span { color: #000; font-size: 12px; line-height: 1.25; font-weight: 400; white-space: normal; }
.brand-overlay.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
@keyframes logo-marquee { to { transform: translateX(-50%); } }
.client-list.is-hovering .logo-track { animation-play-state: paused; }

.design-philosophy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 800px;
  text-align: center;
  margin: 0 auto;
  padding: var(--space-section) var(--page-gutter) 170px;
  color: inherit;
}
.design-philosophy p {
  margin: 0 0 22px;
  color: inherit;
  font-size: 32px;
  line-height: 150%;
  font-weight: 500;
  letter-spacing: -0.025em;
}
.design-philosophy p:last-of-type { margin-bottom: 0; }
.design-philosophy strong { color: inherit; font-weight: 500; }

.Expertise h2 {
  margin: 0;
  font-size: 68px;
  text-align: center;
}
.expertise-heading__muted { color: #818181; }
.Expertise {
  padding: 0 0 120px;
  color: #fff;
}
.expertise-stack {
  display: grid;
  gap: 18px;
  justify-items: center;
  width: min(100%, 960px);
  margin: 92px auto 0;
  padding: 0 var(--page-gutter);
}
.expertise-card {
  position: sticky;
  top: 110px;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 20px;
  align-items: start;
  padding: 32px;
  border: 1px solid #313131;
  border-radius: 16px;
  background: #131313;
  box-shadow: 0 10px 30px rgba(17, 12, 46, .08);
}
.expertise-card { width: 100% !important; }
.expertise-card:nth-child(1) { top: 110px; z-index: 1; }
.expertise-card:nth-child(2) { top: 126px; z-index: 2; }
.expertise-card:nth-child(3) { top: 142px; z-index: 3; }
.expertise-card:nth-child(4) { top: 230px; z-index: 4; }
.expertise-card__icon {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: invert(1);
}
.expertise-card h3 { margin: 0 0 12px; font-size: 24px; font-weight: 600; }
.expertise-card p { margin: 0; color: #555; font-size: 16px; font-weight: 400; line-height: 140%; }

.experience {
  --experience-type-size: clamp(56px, 5.3vw, 68px);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 120px max(32px, calc((100vw - var(--page-width)) / 2));
  align-content: center;
  column-gap: var(--gutter);
  row-gap: 48px;
  background: transparent;
}
.experience > h2 {
  grid-column: 1 / span 5;
  margin: 0;
  font-size: var(--experience-type-size);
  line-height: 120%;
  font-weight: 600;
}
.experience-content { grid-column: 8 / 13; }
.experience-summary {
  margin: 0 0 112px;
  font-size: 20px;
  line-height: 140%;
  font-weight: 500;
}
.experience-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 5vw, 96px);
  row-gap: 64px;
}
.experience-stat {
  min-width: 0;
  padding-top: 12px;
  border-top: 1px solid #b7b7b7;
}
.experience-stat__value {
  display: block;
  font-size: var(--experience-type-size);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.065em;
}
.experience-stat p {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 400;
  text-transform: uppercase;
}

.career-history {
  --career-type-size: clamp(56px, 5.3vw, 68px);
  padding: 120px 0 80px;
}
.career-history > h2 {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--career-type-size);
  line-height: 120%;
  font-weight: 600;
  text-align: center;
}
.experience-list {
  grid-column: 1 / -1;
  margin-top: 72px;
}
.experience-row {
  display: grid;
  grid-template-columns: 4fr 4fr 2fr 2fr;
  column-gap: var(--gutter);
  align-items: center;
  min-width: 0;
  padding: 30px 0;
  border-bottom: 1px solid #b7b7b7;
  font-size: 20px;
  line-height: 1.35;
}
.experience-row:first-child { }
.experience-row p,
.experience-role { min-width: 0; margin: 0; }
.experience-role { font-size: inherit; font-weight: 600; letter-spacing: -.025em; }
.experience-company,
.experience-sector,
.experience-date { color: #5d5d5d; font-weight: 500; letter-spacing: -.025em; }
.experience-company { display: flex; align-items: center; gap: 10px; }
.experience-company[href] { text-decoration: none; }
.experience-company[href]:hover { color: #171315; }
.experience-company svg { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.experience-date { text-align: right; white-space: nowrap; }

.testimonials {
  padding: 96px 0 120px;
}
.testimonials > h2 {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 68px;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -.065em;
  text-align: center;
}
.testimonial-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  margin: 72px 0 0;
}
.testimonial-card {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: 1160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 0;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 900ms ease-in-out, visibility 0s linear 900ms;
}
.testimonial-card.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 900ms ease-in-out, visibility 0s;
}
.testimonial-quote {
  margin: 0;
  color: #27272c;
  font-size: 40px;
  font-weight: 500;
  line-height: 52px;
  letter-spacing: -.035em;
}
.testimonial-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 56px;
}
.testimonial-avatar {
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: #aeb7bc;
  color: #58646b;
  font-size: 13px;
  font-weight: 600;
}
.testimonial-person__details { display: grid; gap: 2px; min-width: 0; text-align: center; }
.testimonial-person__details strong {
  color: #27272c;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.testimonial-person__details > span {
  color: #686873;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.testimonial-indicators {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.testimonial-indicator {
  display: block;
  width: 4px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgb(0 0 0 / 6%);
  cursor: pointer;
  transition: width 220ms ease, background-color 220ms ease;
}
.testimonial-indicator.is-active {
  width: 20px;
  background: #131313;
}
.testimonial-indicator:focus-visible {
  outline: 2px solid #131313;
  outline-offset: 5px;
}
.adplist-stats {
  grid-column: 1 / -1;
  display: flex;
  min-width: 0;
  min-height: 335px;
  margin-top: 72px;
  overflow: hidden;
  border: 1px solid rgb(0 0 0 / 6%);
  border-radius: 16px;
}
.adplist-stat {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  min-width: 0;
  padding: 30px 32px 32px;
}
.adplist-stat + .adplist-stat { border-left: 1px solid rgb(0 0 0 / 6%); }
.adplist-stat__value {
  display: flex;
  align-items: flex-start;
  color: #27272c;
  font-size: clamp(56px, 6.2vw, 92px);
  font-weight: 400;
  line-height: 87px;
  letter-spacing: -2px;
  white-space: nowrap;
}
.adplist-stat__number { font-variant-numeric: tabular-nums; }
.adplist-stat__unit {
  margin: 3px 0 0 8px;
  font-size: 32px;
  line-height: 38px;
  letter-spacing: -.04em;
}
.adplist-stat > p {
  margin: 0;
  color: #27272c;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.adplist-booking {
  grid-column: 1 / -1;
  justify-self: center;
  display: inline-flex;
  gap: 12px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin-top: 36px;
  padding: 0 24px;
  border-radius: 12px;
  background: #131313;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 180ms ease, transform 180ms ease;
}
.adplist-booking:hover { transform: translateY(-2px); background: #303030; }
.adplist-booking__icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 180ms ease;
}
.adplist-booking:hover .adplist-booking__icon { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) {
  .testimonial-card,
  .testimonial-card.is-active,
  .testimonial-indicator,
  .adplist-booking__icon { transition: none; }
}

.site-footer {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 72px;
  padding: clamp(120px, 16vh, 160px) max(32px, calc((100vw - var(--page-width)) / 2)) 32px;
  overflow: hidden;
  border-radius: 0 0 24px 24px;
  background: #0b0305;
  color: #fff;
}
.site-footer__content { text-align: center; }
.site-footer__content h2 {
  margin: 0;
  font-size: 68px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.07em;
}
.site-footer__content > p {
  margin: 24px auto 48px;
  color: #f2f2f2;
  font-size: 16px;
  line-height: 140%;
  font-weight: 500;
}
.site-footer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin-top: 36px;
  border-radius: 12px;
  padding: 0 24px;
  background: #fff;
  color: #171315;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: transform 220ms ease, background-color 220ms ease;
}
.site-footer__cta:hover { transform: translateY(-2px); background: #f0eeee; }
.site-footer__cta:focus-visible,
.site-footer__social a:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.site-footer__cta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.site-footer__bottom,
.site-footer__social { display: flex; align-items: center; }
.site-footer__bottom { justify-content: space-between; gap: 32px; font-size: 14px; }
.site-footer__social { gap: clamp(24px, 3vw, 48px); }
.site-footer__social a { color: #f2f2f2; text-decoration: none; transition: color 180ms ease; }
.site-footer__social a:hover { color: #aaa; }
.site-footer__copyright { margin: 0; color: #f2f2f2; font-size: 13px; white-space: nowrap; }

@font-face {
  font-family: "Arcade Pixel";
  src: url("assets/arcade/Quadrit.ttf") format("truetype");
  font-display: swap;
}

/* The arcade sits beneath the footer and stays fixed as the footer scrolls away. */
.arcade-reveal {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 428px;
  min-height: 428px;
  overflow: hidden;
  background: #020519;
  line-height: 0;
  touch-action: none;
}
.arcade-canvas,
.arcade-ui {
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  height: 428px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 520ms ease, visibility 520ms ease;
}
.arcade-canvas { z-index: 0; display: block; pointer-events: none; }
.arcade-ui {
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 12px clamp(18px, 3vw, 48px) 14px;
  color: #baf5ff;
  pointer-events: none;
  line-height: normal;
  font-family: "Arcade Pixel", "Courier New", monospace;
  position: relative;
}
.arcade-reveal.is-visible .arcade-canvas,
.arcade-reveal.is-visible .arcade-ui { opacity: 1; visibility: visible; }
.arcade-reveal.is-visible .arcade-ui { pointer-events: auto; }
.arcade-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 36px);
  color: #bdf6ff;
  font-size: clamp(11px, 1.22vw, 20px);
  font-weight: 700;
  letter-spacing: .02em;
  text-shadow: 0 0 12px rgba(70, 220, 255, .85);
}
.arcade-hud__cluster { display: flex; align-items: center; gap: clamp(14px, 2.25vw, 42px); white-space: nowrap; }
.arcade-hud__cluster--right { margin-left: auto; }
.arcade-hud strong { color: #fff6cd; font-weight: 700; }
#arcadeLives { color: #ffeb35; letter-spacing: .18em; }
.arcade-hud__controls { display: inline-flex; align-items: center; gap: 8px; }
.arcade-sound-toggle,
.arcade-reset {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 5px;
  line-height: 0;
  border: 1px solid rgba(189, 246, 255, .58);
  border-radius: 50%;
  background: rgba(2, 10, 34, .64);
  color: #bdf6ff;
  cursor: pointer;
  pointer-events: auto;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.arcade-reset svg { display: block; width: 100%; height: 100%; margin: auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.arcade-sound-toggle:hover,
.arcade-sound-toggle:focus-visible,
.arcade-reset:hover,
.arcade-reset:focus-visible {
  border-color: #fff6cd;
  outline: 0;
  background: rgba(25, 53, 103, .9);
  box-shadow: 0 0 12px rgba(70, 220, 255, .55);
  color: #fff6cd;
}
.arcade-sound-toggle svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.arcade-sound-toggle__speaker { fill: currentColor; stroke: none; }
.arcade-sound-toggle__mute { display: none; }
.arcade-sound-toggle.is-muted { border-color: rgba(255, 97, 122, .72); color: #ff8193; }
.arcade-sound-toggle.is-muted .arcade-sound-toggle__wave { display: none; }
.arcade-sound-toggle.is-muted .arcade-sound-toggle__mute { display: block; }
.arcade-center {
  display: grid;
  place-items: center;
  min-height: 0;
  transform: translateY(var(--arcade-center-offset, 0px));
  transition: transform 120ms linear;
}
.arcade-hud,
.arcade-brand { opacity: 0; transition: opacity 220ms ease; }
.arcade-reveal.is-footer-clear .arcade-hud,
.arcade-reveal.is-footer-clear .arcade-brand { opacity: 1; }
.arcade-reveal:not(.has-play-area) .arcade-center { visibility: hidden; }
.arcade-start-panel,
.arcade-end-panel {
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
  pointer-events: auto;
}
.arcade-start-panel p {
  margin: 0;
  color: rgba(221, 246, 255, .78);
  font-size: 13px;
  font-weight: 500;
  text-shadow: 0 0 10px rgba(70, 220, 255, .55);
}
.arcade-start-panel[hidden] { display: none; }
.arcade-action {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(240px, 38vw, 500px);
  min-height: clamp(82px, 12vh, 138px);
  padding: 14px 34px;
  border: 3px solid #27e7ff;
  border-radius: 18px;
  background: rgba(2, 10, 34, .86);
  box-shadow: inset 0 0 0 5px rgba(39, 231, 255, .13), 0 0 18px rgba(39, 231, 255, .35), inset 0 0 24px rgba(39, 231, 255, .12);
  color: #1aff34;
  font: 700 clamp(30px, 5vw, 68px)/1 "Arcade Pixel", "Courier New", monospace;
  letter-spacing: .1em;
  text-shadow: 0 0 8px rgba(26, 255, 52, .8), 0 0 24px rgba(26, 255, 52, .4);
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.arcade-action--play {
  width: fit-content;
  min-width: 0;
  padding-inline: clamp(28px, 4vw, 56px);
}
.arcade-play-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.8vw, 26px);
}
.arcade-action::before {
  position: absolute;
  z-index: -1;
  inset: 6px;
  border: 1px solid rgba(39, 231, 255, .7);
  border-radius: 10px;
  content: "";
}
.arcade-action:hover { transform: scale(1.025); background: rgba(5, 20, 52, .94); box-shadow: inset 0 0 0 5px rgba(39, 231, 255, .16), 0 0 28px rgba(39, 231, 255, .52), inset 0 0 28px rgba(39, 231, 255, .16); }
.arcade-action:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.arcade-pacman-mark {
  position: relative;
  left: auto;
  display: block;
  flex: 0 0 auto;
  width: clamp(28px, 4.4vw, 58px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 42deg, transparent 0 86deg, #ffe600 86deg 360deg);
  filter: drop-shadow(0 0 9px rgba(255, 230, 0, .8));
}
.arcade-play-triangle {
  position: relative;
  left: auto;
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-top: clamp(13px, 1.7vw, 22px) solid transparent;
  border-bottom: clamp(13px, 1.7vw, 22px) solid transparent;
  border-left: clamp(18px, 2.5vw, 32px) solid #1aff34;
  filter: drop-shadow(0 0 8px rgba(26, 255, 52, .8));
}
.arcade-end-panel h2 {
  margin: 0;
  color: #ff3232;
  font-size: clamp(36px, 6vw, 78px);
  font-family: "Arcade Pixel", "Courier New", monospace;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: .95;
  text-shadow: 0 0 10px rgba(255, 50, 50, .85), 0 0 28px rgba(255, 50, 50, .52);
}
.arcade-action--again { min-width: 240px; min-height: 64px; color: #ff3838; font-size: 20px; }
.arcade-brand {
  justify-self: end;
  align-self: end;
  display: grid;
  justify-items: end;
  color: #a6f2ff;
  font-size: clamp(14px, 1.25vw, 21px);
  font-family: "Arcade Pixel", "Courier New", monospace;
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.03em;
  text-align: right;
  text-shadow: 0 0 10px rgba(97, 220, 255, .8);
}
.arcade-brand span:last-child { color: #dc94ff; text-shadow: 0 0 10px rgba(207, 108, 255, .76); }
.arcade-end-panel[hidden] { display: none; }
.arcade-dpad { display: none; }

/* Pixel arcade player-name screen. The veil blurs the board while the panel stays crisp. */
.arcade-name-overlay {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(1, 5, 24, .3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  line-height: normal;
  pointer-events: auto;
}
.arcade-name-overlay[hidden] { display: none !important; }
.arcade-name-panel {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 22px;
  width: min(548px, calc(100vw - 36px));
  padding: 42px 38px 28px;
  border: 3px solid #36e7ff;
  outline: 2px solid #2879ff;
  outline-offset: 4px;
  background: rgba(3, 9, 32, .96);
  box-shadow: inset 0 0 0 5px rgba(44, 90, 255, .42), inset 0 0 28px rgba(39, 231, 255, .12), 0 0 16px rgba(39, 231, 255, .9), 0 0 38px rgba(46, 77, 255, .65);
  color: #fffbd3;
  text-align: center;
}
.arcade-name-panel::before {
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(58, 126, 255, .9);
  content: "";
  pointer-events: none;
}
.arcade-name-panel h2 {
  margin: 0;
  color: #fffbd3;
  font: 900 clamp(20px, 2.15vw, 31px)/1.15 "Arcade Pixel", "Courier New", monospace;
  letter-spacing: .015em;
  text-shadow: 0 0 8px rgba(255, 251, 211, .55);
}
.arcade-name-field {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: 68px;
  padding: 0 16px;
  border: 3px solid #aafff4;
  background: rgba(1, 9, 31, .88);
  box-shadow: inset 0 0 0 3px rgba(36, 231, 255, .12), 0 0 9px rgba(91, 255, 239, .95), 0 0 20px rgba(39, 231, 255, .38);
}
.arcade-name-field__cursor {
  flex: 0 0 13px;
  width: 13px;
  height: 25px;
  background: #fffbd3;
  box-shadow: 0 0 8px rgba(255, 251, 211, .58);
  animation: arcade-cursor-blink 850ms steps(2, start) infinite;
}
.arcade-name-field input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #dfe7ff;
  caret-color: #b9ff43;
  font: 700 clamp(22px, 2.4vw, 34px)/1 "Arcade Pixel", "Courier New", monospace;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(223, 231, 255, .4);
}
.arcade-name-submit {
  position: relative;
  min-width: min(314px, 100%);
  min-height: 62px;
  padding: 10px 20px;
  border: 3px solid #a1ff00;
  border-radius: 3px;
  background: rgba(1, 10, 24, .88);
  box-shadow: inset 0 0 0 4px rgba(161, 255, 0, .12), 0 0 11px rgba(161, 255, 0, .75), 0 0 24px rgba(161, 255, 0, .24);
  color: #a1ff00;
  cursor: pointer;
  font: 900 clamp(21px, 2.45vw, 34px)/1 "Arcade Pixel", "Courier New", monospace;
  letter-spacing: .015em;
  text-shadow: 0 0 8px rgba(161, 255, 0, .75);
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.arcade-name-submit:hover {
  transform: translateY(-2px);
  background: rgba(26, 61, 4, .82);
  box-shadow: inset 0 0 0 4px rgba(161, 255, 0, .18), 0 0 18px rgba(161, 255, 0, .9), 0 0 32px rgba(161, 255, 0, .35);
}
.arcade-name-submit:focus-visible,
.arcade-name-field:focus-within { outline: 2px solid #36e7ff; outline-offset: 4px; }
.arcade-name-pacman {
  position: absolute;
  top: 17px;
  left: 18px;
  width: 34px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 42deg, transparent 0 86deg, #ffe600 86deg 360deg);
  filter: drop-shadow(0 0 8px rgba(255, 230, 0, .85));
}
.arcade-name-ghost {
  position: absolute;
  width: 26px;
  height: 31px;
  border-radius: 14px 14px 3px 3px;
  background: var(--ghost-color, #f28cff);
  clip-path: polygon(0 100%, 0 30%, 11% 10%, 30% 0, 70% 0, 89% 10%, 100% 30%, 100% 100%, 75% 84%, 50% 100%, 25% 84%);
  filter: drop-shadow(0 0 7px var(--ghost-color, #f28cff));
}
.arcade-name-ghost::before {
  position: absolute;
  top: 11px;
  left: 6px;
  width: 4px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 9px 0 0 #fff;
  content: "";
}
.arcade-name-ghost::after {
  position: absolute;
  top: 13px;
  left: 7px;
  width: 2px;
  height: 3px;
  background: #243a93;
  box-shadow: 9px 0 0 #243a93;
  content: "";
}
.arcade-name-ghost--top { --ghost-color: #f28cff; top: 17px; right: 18px; }
.arcade-name-ghost--left { --ghost-color: #ff364a; bottom: 14px; left: 18px; }
.arcade-name-ghost--right { --ghost-color: #f28cff; bottom: 14px; right: 18px; }
@keyframes arcade-cursor-blink { to { opacity: .18; } }

@media (max-width: 620px) {
  .arcade-reveal { height: 70vh; height: 70dvh; min-height: 70vh; min-height: 70dvh; }
  .arcade-canvas,
  .arcade-ui { height: 70vh; height: 70dvh; }
  .arcade-ui { padding: 12px 12px 14px; }
  .arcade-hud { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; gap: 5px; font-size: 9px; }
  .arcade-hud__cluster { justify-content: center; gap: 10px; }
  .arcade-hud__cluster--right { margin-left: 0; }
  .arcade-start-panel { gap: 12px; }
  .arcade-start-panel p { max-width: 240px; font-size: 11px; }
  .arcade-action { min-width: 230px; min-height: 80px; border-radius: 14px; }
  .arcade-action--play { min-width: 0; max-width: calc(100vw - 32px); padding-inline: 24px; }
  .arcade-brand { font-size: 13px; }
  .arcade-name-panel { gap: 16px; padding: 36px 20px 22px; }
  .arcade-name-field { min-height: 58px; gap: 13px; padding-inline: 12px; }
  .arcade-name-field__cursor { flex-basis: 10px; width: 10px; height: 21px; }
  .arcade-name-submit { min-height: 54px; }
  .arcade-dpad {
    position: fixed;
    z-index: 4;
    left: 50%;
    bottom: max(48px, calc(env(safe-area-inset-bottom) + 24px));
    display: block;
    width: min(40vw, 160px);
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 18px;
    transform: translateX(-50%);
    pointer-events: auto;
    touch-action: none;
  }
  .arcade-dpad img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .arcade-dpad button {
    position: absolute;
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    touch-action: none;
  }
  .arcade-dpad button:focus-visible { outline: 2px solid #fff6cd; outline-offset: -4px; }
  .arcade-dpad [data-arcade-direction="ArrowUp"] { top: 0; left: 34%; width: 32%; height: 36%; }
  .arcade-dpad [data-arcade-direction="ArrowLeft"] { top: 34%; left: 0; width: 38%; height: 32%; }
  .arcade-dpad [data-arcade-direction="ArrowRight"] { top: 34%; right: 0; width: 38%; height: 32%; }
  .arcade-dpad [data-arcade-direction="ArrowDown"] { bottom: 0; left: 34%; width: 32%; height: 36%; }
}

.work { margin-top: 140px; padding-top: 24px; border-top: 1px solid #e8e7e7; }
.section-heading { grid-column: 1 / span 4; display: flex; gap: 20px; align-items: baseline; }
.section-heading span { color: inherit; opacity: .6; font-size: 13px; }
.section-heading h2 { margin: 0; font-size: 24px; font-weight: 500; letter-spacing: -0.05em; }
.work-note { grid-column: 9 / span 5; margin: 0; color: inherit; opacity: .7; font-size: 16px; }

@media (max-width: 1000px) {
  .portfolio-shell { width: min(100% - 48px, 760px); padding-top: 48px; }
  .Expertise {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
  .expertise-stack {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    padding-inline: 24px;
  }
  .hero-profile { grid-column: 1 / span 6; }
  .summary { grid-column: 7 / span 6; }
  .summary-copy > p { font-size: 20px; }
  .project-previews { gap: 10px; margin-top: 30px; }
  .project-card { border-radius: 12px; }
  .identity h1 { font-size: clamp(64px, 11vw, 100px); }
  .client-list { margin-top: 54px; }
  .work { margin-top: 100px; }
  .experience {
    --experience-type-size: clamp(48px, 7vw, 68px);
    padding-inline: 24px;
  }
  .experience > h2 { grid-column: 1 / span 5; }
  .experience-content { grid-column: 7 / 13; }
  .experience-summary { margin-bottom: 76px; font-size: 20px; }
  .experience-stats { column-gap: 28px; row-gap: 52px; }
  .career-history { --career-type-size: clamp(48px, 7vw, 68px); padding: 96px 0 64px; }
  .experience-row { grid-template-columns: 4fr 4fr 2fr 2fr; column-gap: 16px; }
  .experience-company { gap: 6px; }
  .testimonials > h2 { font-size: clamp(48px, 7vw, 68px); }
  .testimonial-grid { margin-top: 72px; }
  .testimonial-quote { font-size: clamp(30px, 4vw, 40px); line-height: 1.3; }
  .adplist-stats { min-height: 270px; }
  .adplist-stat { padding: 22px 20px 24px; }
  .adplist-stat__value { font-size: clamp(48px, 6vw, 60px); line-height: 1; }
  .adplist-stat__unit { margin-left: 6px; font-size: 24px; line-height: 30px; }
  .site-footer { padding-inline: 24px; }
  .site-footer__content h2 { font-size: clamp(48px, 7vw, 68px); }
  .site-footer__bottom { align-items: flex-start; }
  .site-footer__social { gap: 20px; }
}

@media (max-width: 760px) {
  .site-header {
    height: 100px;
    padding-inline: 20px;
  }
  .site-header__wordmark svg { width: 100px; height: auto; }
  .site-header__menu { width: 48px; height: 48px; }
  .site-header__menu-dots,
  .site-header__menu-dots::before { width: 9px; height: 9px; }
  .site-header__menu-dots::before {
    box-shadow: -18px -18px currentColor, 0 -18px currentColor, 18px -18px currentColor,
      -18px 0 currentColor, 18px 0 currentColor, -18px 18px currentColor,
      0 18px currentColor, 18px 18px currentColor;
  }
  .site-header__menu:hover .site-header__menu-dots::before {
    box-shadow: 0 -27px currentColor, 0 -13.5px currentColor, 27px 0 currentColor,
      -13.5px 0 currentColor, 13.5px 0 currentColor, -27px 0 currentColor,
      0 13.5px currentColor, 0 27px currentColor;
  }
  .is-header-menu-open .site-header__menu-dots::before {
    box-shadow: -18px -18px currentColor, 9px -9px currentColor, 18px -18px currentColor,
      -9px -9px currentColor, 9px 9px currentColor, -18px 18px currentColor,
      -9px 9px currentColor, 18px 18px currentColor;
  }
  .portfolio-shell { width: calc(100% - 40px); padding: 32px 0 48px; }
  .hero-profile {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 1;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .intro { grid-column: auto; grid-row: auto; padding: 0; }
  .eyebrow { margin-bottom: 16px; font-size: 20px; line-height: 140%; text-align: left; }
  .portrait { width: min(100%, 456px); height: auto; aspect-ratio: 1; }
  .identity { grid-column: auto; grid-row: auto; width: 100%; margin-top: 40px; text-align: left; }
  .identity h1 { font-size: 48px; line-height: 120%; letter-spacing: -0.06em; }
  .role { max-width: 24ch; margin-top: 20px; font-size: 24px; line-height: 120%; font-weight: 500; }
  .summary { grid-column: 1 / -1; grid-row: 2; margin-top: 40px; text-align: left; }
  .summary-copy { align-items: flex-start; }
  .summary-copy > p,
  .summary-more__inner p { max-width: 100%; font-size: 16px; line-height: 150%; text-align: left; }
  .project-previews { max-width: 100%; gap: 12px; margin-top: 24px; }
  .client-list { grid-row: 3; margin-top: 48px; }
  .design-philosophy p { font-size: 22px; line-height: 150%; }
}

@media (max-width: 620px) {
  .site-header { padding-inline: 20px; }
  .bottom-dock { bottom: max(12px, env(safe-area-inset-bottom)); max-width: calc(100% - 20px); gap: 32px; }
  .bottom-nav { min-width: 0; }
  .bottom-nav__pill { gap: 0; padding: 3px; }
  .bottom-nav__link { min-height: 44px; padding-inline: clamp(8px, 2.6vw, 14px); font-size: clamp(11px, 3.2vw, 13px); }
  .resume-launcher { width: clamp(50px, 15vw, 68px); }
  .resume-overlay { padding: 16px 12px 104px; }
  .resume-image { max-width: calc(100vw - 24px); max-height: calc(100vh - 128px); max-height: calc(100dvh - 128px); }
  .resume-controls { gap: 24px; }
  .resume-action { width: 40px; height: 40px; }
  .grid-12 { column-gap: 12px; }
  .project-card { aspect-ratio: 4 / 3; }
  .design-philosophy { --page-gutter: 20px; --space-section: 72px; }
  .expertise-stack { margin-top: 48px; padding-inline: 20px; }
  .expertise-card {
    width: 100% !important;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    padding: 24px;
    border-radius: 20px;
  }
  .expertise-card__icon { width: 28px; height: 28px; }
  .Expertise h2 { font-size: clamp(36px, 8vw, 48px); }
  .experience {
    --experience-type-size: clamp(42px, 11.5vw, 58px);
    min-height: auto;
    padding: 88px 20px 104px;
    row-gap: 40px;
  }
  .experience > h2,
  .experience-content { grid-column: 1 / -1; }
  .experience-summary { margin-bottom: 52px; font-size: 16px; }
  .experience-stats { column-gap: 20px; row-gap: 36px; }
  .experience-stat p { font-size: 12px; }
  .career-history { --career-type-size: clamp(42px, 11.5vw, 58px); padding: 72px 0 48px; }
  .experience-list { margin-top: 72px; }
  .experience-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; padding: 22px 0; font-size: 16px; }
  .experience-role,
  .experience-company { grid-column: 1 / -1; }
  .experience-sector { grid-column: 1; }
  .experience-date { grid-column: 2; }
  .experience-company { white-space: normal; }
  .experience-date { white-space: normal; }
  .testimonials { padding: 170px 0 88px; }
  .testimonials > h2 { font-size: clamp(42px, 11.5vw, 58px); }
  .testimonial-grid { margin-top: 56px; }
  .testimonial-quote { font-size: 24px; line-height: 1.35; }
  .testimonial-person { margin-top: 40px; }
  .adplist-stats { flex-direction: column; min-height: 0; margin-top: 60px; }
  .adplist-stat { min-height: 210px; padding: 26px 24px 28px; }
  .adplist-stat + .adplist-stat { border-top: 1px solid rgb(0 0 0 / 6%); border-left: 0; }
  .adplist-stat__value { font-size: clamp(64px, 18vw, 80px); line-height: .95; }
  .adplist-stat__unit { margin: 2px 0 0 8px; font-size: 28px; line-height: 34px; }
  .adplist-booking { margin-top: 28px; }
  .site-footer { padding: 72px 20px 28px; border-radius: 0 0 18px 18px; }
  .site-footer__content h2 { font-size: clamp(42px, 11.5vw, 58px); }
  .site-footer__content > p { max-width: 40ch; margin: 22px auto 36px; font-size: 16px; line-height: 1.4; }
  .site-footer__content > p br { display: none; }
  .site-footer__cta { min-width: 240px; min-height: 48px; font-size: 16px; }
  .site-footer__bottom { flex-direction: column; align-items: center; }
  .site-footer__bottom { gap: 22px; font-size: 13px; }
  .site-footer__social { justify-content: center; flex-wrap: wrap; gap: 20px; }
  .logo-group { gap: 32px; padding-right: 32px; }
  .brand img { max-width: 115px; max-height: 30px; }
  .brand-overlay { gap: 8px; padding: 16px; border-radius: 16px; }
  .work { margin-top: 88px; row-gap: 16px; }
  .section-heading { grid-column: 1 / -1; }
  .section-heading h2 { font-size: 21px; }
  .work-note { grid-column: 1 / -1; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

.contact-overlay[hidden],
.nav-overlay[hidden] { display: none !important; }
html.contact-is-open { overflow: hidden; }
html.contact-is-open #page .bottom-dock { z-index: 24; }
html.contact-is-open body.archive-page .bottom-dock { z-index: 24; }
.contact-overlay,
.nav-overlay {
  position: fixed;
  z-index: 22;
  inset: 0;
  background: rgba(12, 12, 14, .1);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  visibility: hidden;
  pointer-events: auto;
}
.contact-overlay.is-open,
.nav-overlay.is-open { visibility: visible; }
.contact-overlay.is-closing { visibility: visible; }
.contact-card {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: min(480px, calc(100vw - 40px));
  height: auto;
  padding: 52px 24px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(43, 41, 42, .91), rgba(28, 27, 29, .9));
  box-shadow: 0 36px 100px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .12);
  color: #f7f6f6;
  -webkit-backdrop-filter: blur(28px) saturate(.78);
  backdrop-filter: blur(28px) saturate(.78);
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  transition: opacity 140ms ease;
}
.nav-card {
  position: absolute;
  top: 25px;
  right: max(92px, calc((100vw - var(--page-width)) / 2 + 60px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: min(360px, calc(100vw - 48px));
  height: min(574px, calc(100dvh - 50px));
  padding: 40px 20px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(43, 41, 42, .91), rgba(28, 27, 29, .9));
  box-shadow: 0 36px 100px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .12);
  color: #f7f6f6;
  -webkit-backdrop-filter: blur(28px) saturate(.78);
  backdrop-filter: blur(28px) saturate(.78);
  opacity: 0;
  pointer-events: auto;
  transition: opacity 140ms ease;
}
.contact-overlay.is-open:not(.is-animating) .contact-card { opacity: 1; }
.works-page .nav-card,
.archive-page .nav-card {
  transform: scale(.035);
  transform-origin: top right;
  transition: opacity 140ms ease, transform 640ms cubic-bezier(.2, .75, .25, 1);
}
.works-page .nav-card.nav-card--expanded,
.archive-page .nav-card.nav-card--expanded { transform: scale(1); }
.nav-overlay.is-open:not(.is-animating) .nav-card { opacity: 1; }
.contact-genie,
.nav-genie {
  position: fixed;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 2px 8px rgba(99, 99, 99, .2));
  opacity: 0;
  transition: opacity 140ms ease;
}
.contact-genie { filter: none; }
.contact-overlay.is-animating .contact-genie,
.nav-overlay.is-animating .nav-genie { opacity: 1; }
.contact-overlay.is-animating .contact-card { opacity: 0; }
.nav-overlay.is-animating .nav-card { opacity: 0; }
.contact-card__close {
  position: absolute;
  z-index: 1;
  top: -1px;
  right: -88px;
  display: grid;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #27272c;
  cursor: pointer;
}
.contact-card__close:focus-visible,
.contact-card__action:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.contact-card__close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.contact-card__content {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 40px;
  width: 100%;
  max-width: 489px;
  min-height: 0;
}
.nav-card__content { display: flex; flex: 0 0 auto; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; }
.nav-card .menu-panel__links { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.nav-card .menu-panel__link {
  display: block;
  width: 100%;
  min-height: 39px;
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  line-height: 140%;
  text-decoration: none;
  transition: color 180ms ease;
}
.nav-card .menu-panel__link:hover,
.nav-card .menu-panel__link[aria-current="page"] { color: rgba(255, 255, 255, .5); }
.nav-card .menu-panel__link:focus-visible { outline: 2px solid rgba(255, 255, 255, .75); outline-offset: 3px; }
.nav-card .menu-panel__divider { width: 100%; height: 1px; background: rgba(255, 255, 255, .3); }
.nav-card__list { width: 100%; margin: 0; padding: 0; list-style: none; }
.nav-card__resume {
  display: flex;
  flex: 0 0 46px;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .96);
  color: #171315;
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  text-decoration: none;
  transition: background-color 180ms ease, transform 180ms ease;
}
.nav-card__resume:hover { background: #fff; transform: translateY(-1px); }
.nav-card__resume:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.nav-card__row { display: flex; align-items: center; height: 79px; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.nav-card__link { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; min-height: 62px; color: inherit; text-decoration: none; }
.nav-card__label { flex: 0 0 auto; min-width: 0; color: rgba(255, 255, 255, .94); font-size: 16px; font-weight: 400; line-height: 22px; }
.nav-card__value { flex: 0 1 auto; min-width: 0; overflow: hidden; color: rgba(255, 255, 255, .67); font-size: 16px; font-weight: 400; line-height: 22px; text-overflow: ellipsis; white-space: nowrap; transition: color 180ms ease; }
.nav-card__link:hover .nav-card__value { color: #fff; }
.nav-card__action { display: grid; flex: 0 0 36px; width: 36px; height: 40px; place-items: center; color: rgba(255, 255, 255, .7); }
.nav-card__action svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contact-card__content h2 {
  margin: 0;
  color: #fff;
  font-size: 42px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -1.35px;
  text-align: center;
}
.contact-card__list { width: 100%; margin: 0; padding: 0; list-style: none; }
.contact-card__row {
  display: flex;
  align-items: center;
  height: 79px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.contact-card__link {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 78px;
  color: inherit;
  text-decoration: none;
}
.contact-card__label { flex: 0 0 auto; }
.contact-card__value { flex: 0 1 auto; }
.contact-card__label,
.contact-card__value { min-width: 0; font-size: 16px; line-height: 22px; }
.contact-card__label { color: rgba(255, 255, 255, .94); font-weight: 400; }
.contact-card__value { overflow: hidden; color: rgba(255, 255, 255, .67); font-weight: 400; text-overflow: ellipsis; white-space: nowrap; transition: color 180ms ease; }
.contact-card__link:hover .contact-card__value { color: #fff; }
.contact-card__action {
  position: relative;
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  height: 40px;
  margin-left: 0;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .7);
}
.contact-card__row > .contact-card__action + .contact-card__action { margin-left: 5px; }
.contact-card__action svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contact-card__copy { cursor: pointer; transition: color 180ms ease, transform 180ms ease; }
.contact-card__copy:hover { color: #fff; transform: scale(1.06); }
.contact-card__email-arrow { flex-basis: 24px; width: 24px; }
.contact-card__email-arrow svg { width: 20px; height: 20px; }
.contact-card__copy-label {
  position: absolute;
  right: calc(100% + 4px);
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.contact-card__copy.is-copied .contact-card__copy-label { opacity: 1; transform: translateX(0); }
.contact-card__note {
  width: 276px;
  max-width: 100%;
  margin: 0 auto;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
}

@media (max-width: 640px) {
  .contact-card {
    width: min(480px, calc(100vw - 24px));
    height: auto;
    padding: 30px 20px;
    border-radius: 28px;
  }
  .contact-card__close { top: 12px; right: 12px; width: 42px; height: 42px; }
  .nav-card {
    top: 16px;
    right: 80px;
    width: min(449px, calc(100vw - 112px));
    height: min(574px, calc(100dvh - 32px));
    padding: 36px 20px;
    border-radius: 28px;
  }
  .nav-card .menu-panel__links { gap: 12px; }
  .nav-card .menu-panel__link { min-height: 32px; font-size: clamp(22px, 6vw, 26px); }
  .nav-card__row { height: 72px; }
  .nav-card__link { gap: 8px; min-height: 71px; }
  .nav-card__label, .nav-card__value { font-size: 13px; }
  .nav-card__action { flex-basis: 24px; width: 24px; }
  .nav-card__action svg { width: 20px; height: 20px; }
  .contact-card__content { gap: 24px; }
  .contact-card__content h2 { font-size: clamp(30px, 8.5vw, 44px); line-height: 1.15; letter-spacing: -.055em; }
  .contact-card__row { height: 72px; }
  .contact-card__link {
    gap: 8px;
    min-height: 71px;
  }
  .contact-card__label { font-size: 13px; }
  .contact-card__value { font-size: 13px; }
  .contact-card__action { flex-basis: 24px; width: 24px; }
  .contact-card__action svg { width: 20px; height: 20px; }
  .contact-card__row > .contact-card__action + .contact-card__action { margin-left: 2px; }
  .contact-card__email-arrow { flex-basis: 20px; width: 20px; }
  .contact-card__note { font-size: 12px; line-height: 17px; }
}

@property --angle-1 {
  syntax: "<angle>";
  inherits: false;
  initial-value: -75deg;
}
@property --angle-2 {
  syntax: "<angle>";
  inherits: false;
  initial-value: -45deg;
}
:root {
  --anim--hover-time: 400ms;
  --anim--hover-ease: cubic-bezier(.25, 1, .5, 1);
}
.resume-action,
.contact-card__close,
.lightbox__arrow,
.lightbox__close {
  --border-width: 1px;
  --angle-1: -75deg;
  --angle-2: -45deg;
  background: linear-gradient(-75deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .2), rgba(255, 255, 255, .05));
  isolation: isolate;
  overflow: visible;
  border: 0;
  box-shadow:
    inset 0 .125em .125em rgba(0, 0, 0, .05),
    inset 0 -.125em .125em rgba(255, 255, 255, .5),
    0 .25em .125em -.125em rgba(0, 0, 0, .2),
    0 0 .1em .25em inset rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition:
    transform var(--anim--hover-time) var(--anim--hover-ease),
    box-shadow var(--anim--hover-time) var(--anim--hover-ease),
    background-position calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease),
    --angle-1 500ms ease,
    --angle-2 calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease);
}
.resume-action::before,
.contact-card__close::before,
.lightbox__arrow::before,
.lightbox__close::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(var(--angle-2), rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .5) 40% 50%, rgba(255, 255, 255, 0) 55%);
  background-size: 200% 200%;
  background-position: 0% 50%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: background-position calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease), --angle-2 calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease);
}
.resume-action::after,
.contact-card__close::after,
.lightbox__arrow::after,
.lightbox__close::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  padding: var(--border-width);
  box-sizing: border-box;
  border-radius: inherit;
  background:
    conic-gradient(from var(--angle-1) at 50% 50%, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 5% 40%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, 0) 60% 95%, rgba(0, 0, 0, .5)),
    linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgba(255, 255, 255, .5);
  transition: --angle-1 500ms ease;
}
.resume-action svg,
.contact-card__close svg { z-index: 3; }
.lightbox__arrow svg,
.lightbox__close svg { position: relative; z-index: 3; display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__arrow,
.lightbox__close { border-radius: 50%; }
.resume-action:hover,
.contact-card__close:hover,
.lightbox__arrow:hover,
.lightbox__close:hover {
  transform: scale(.975);
  box-shadow:
    inset 0 .125em .125em rgba(0, 0, 0, .05),
    inset 0 -.125em .125em rgba(255, 255, 255, .5),
    0 .15em .05em -.1em rgba(0, 0, 0, .25),
    0 0 .05em .1em inset rgba(255, 255, 255, .5);
}
.resume-action:hover::before,
.contact-card__close:hover::before,
.lightbox__arrow:hover::before,
.lightbox__close:hover::before { background-position: 25% 50%; }
.resume-action:active::before,
.contact-card__close:active::before,
.lightbox__arrow:active::before,
.lightbox__close:active::before { background-position: 50% 15%; --angle-2: -15deg; }
.resume-action:hover::after,
.contact-card__close:hover::after,
.lightbox__arrow:hover::after,
.lightbox__close:hover::after { --angle-1: -125deg; }
.resume-action:active::after,
.contact-card__close:active::after,
.lightbox__arrow:active::after,
.lightbox__close:active::after { --angle-1: -75deg; }
.resume-action:focus-visible,
.contact-card__close:focus-visible,
.lightbox__arrow:focus-visible,
.lightbox__close:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (hover: none) and (pointer: coarse) {
  .resume-action::before,
  .resume-action:active::before,
  .contact-card__close::before,
  .contact-card__close:active::before { --angle-2: -45deg; }
  .lightbox__arrow::before,
  .lightbox__arrow:active::before,
  .lightbox__close::before,
  .lightbox__close:active::before { --angle-2: -45deg; }
  .resume-action::after,
  .resume-action:hover::after,
  .resume-action:active::after,
  .contact-card__close::after,
  .contact-card__close:hover::after,
  .contact-card__close:active::after { --angle-1: -75deg; }
  .lightbox__arrow::after,
  .lightbox__arrow:hover::after,
  .lightbox__arrow:active::after,
  .lightbox__close::after,
  .lightbox__close:hover::after,
  .lightbox__close:active::after { --angle-1: -75deg; }
}

@media (max-width: 760px) {
  .site-header__menu { width: 36px; height: 36px; }
  .site-header__menu-dots,
  .site-header__menu-dots::before { width: 6px; height: 6px; }
  .site-header__menu-dots::before {
    box-shadow: -12px -12px currentColor, 0 -12px currentColor, 12px -12px currentColor,
      -12px 0 currentColor, 12px 0 currentColor, -12px 12px currentColor,
      0 12px currentColor, 12px 12px currentColor;
  }
  .site-header__menu:hover .site-header__menu-dots::before {
    box-shadow: 0 -18px currentColor, 0 -9px currentColor, 18px 0 currentColor,
      -9px 0 currentColor, 9px 0 currentColor, -18px 0 currentColor,
      0 9px currentColor, 0 18px currentColor;
  }
  .is-header-menu-open .site-header__menu-dots::before {
    box-shadow: -12px -12px currentColor, 6px -6px currentColor, 12px -12px currentColor,
      -6px -6px currentColor, 6px 6px currentColor, -12px 12px currentColor,
      -6px 6px currentColor, 12px 12px currentColor;
  }
  .nav-card {
    top: 88px;
    right: 20px;
    left: 20px;
    width: auto;
    height: min(574px, calc(100dvh - 108px));
    padding: 36px 20px;
    border-radius: 28px;
  }
}