/*--- OH LOOK AT YOU, CHECKING OUT MY CSS ---*/

/* =====================================
   RESET
===================================== */

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

/* =====================================
   DESIGN TOKENS
===================================== */

:root {
  /* Spacing scale */
  --space-0: 0;
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-30: 30px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-60: 60px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;

  /* Semantic spacing aliases */
  --space-xs: var(--space-8);
  --space-sm: var(--space-16);
  --space-md: var(--space-24);
  --space-lg: var(--space-36);
  --space-xl: var(--space-48);

  /* Radius scale */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-2xl: 20px;
  --radius-3xl: 22px;
  --radius-4xl: 28px;
  --radius-round: 50%;

  /* Layout */
  --container-max: 1280px;
}

/* Base */
html {
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body {
  font-family: Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}

a {
  color: #2b2b2b;
  text-decoration: none;
  transition: color 300ms ease-in-out;
}

a:hover,
.article {
  color: #0A66C2;
}

h1,
h2,
h3,
h4,
h5,
h6,
#logo a {
  margin: 0 0 var(--space-10);
  color: #2b2b2b;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

p {
  margin: 0 0 var(--space-20);
}

::selection {
  color: #555;
  background: #d3d3d3;
}

.wrapper {
  position: relative;
  width: 960px;
  margin: 0 auto;
}

.standard-section {
  padding: var(--space-xl) 0 var(--space-lg);
}

  #portfolio.standard-section {
    padding-top: var(--space-sm);
  }

  .intro-hero {
    margin-bottom: var(--space-sm);
  }
}

.standard-section.no-bottom {
  padding-bottom: 0;
}

.section-title {
  max-width: 60%;
  margin: 0 auto var(--space-32);
  text-align: center;
}

.section-title h1,
.section-title h2,
.section-title h3 {
  margin-bottom: var(--space-12);
}

.section-title p {
  font-size: 14px;
}

/* Header */
header#main {
  position: relative;
  z-index: 9999;
  padding: var(--space-24) 0 var(--space-18)!important;
  background: #fff;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: padding 220ms cubic-bezier(0.22, 1, 0.36, 1), background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

body.is-loaded header#main {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
}

header#main .wrapper {
  display: flex!important;
  align-items: center!important;
  justify-content: space-between!important;
}

#logo {
  display: flex;
  align-items: center;
  width: auto;
  margin: 0!important;
  float: none!important;
}

#logo a.logo {
  display: inline-block;
  margin: 0;
  padding: var(--space-2) 0;
  color: #111;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.2px;
  line-height: 1;
  text-decoration: none;
  transition: opacity 200ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

#logo a.logo:hover {
  opacity: 0.65;
}

.site-nav {
  margin: 0;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav li {
  display: block;
  margin: 0;
}

.site-nav li a {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: var(--space-2) 0;
  color: #000;
  font-size: 14px;
  font-weight: 550;
  letter-spacing: 0.3px;
  line-height: 1;
  text-transform: uppercase;
  opacity: 0.8;
  transition: opacity 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms ease;
}

.site-nav li a:hover,
.site-nav li a.active {
  opacity: 1;
}

.site-nav li a::after {
  position: absolute;
  left: 0;
  bottom: calc(var(--space-6) * -1);
  width: 100%;
  height: 1.5px;
  content: "";
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.7);
  transform-origin: center center;
  transition: opacity 200ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.header-fixed .offset {
  display: block;
}

.offset,
#burger,
#menu-backdrop {
  display: none;
}

.header-fixed header#main {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

body.header-fixed header#main {
  padding: var(--space-8) 0!important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

body.header-fixed #logo a.logo,
body.header-fixed .site-nav li a {
  transform: translateY(1px);
}

/* Intro */
#portfolio.standard-section {
  padding-top: var(--space-sm);
}

.intro-hero {
  max-width: 720px;
  margin: 0 auto var(--space-80);
  padding: var(--space-8) 0 0;
}

.profile-link {
  display: inline-block;
}

.profile-image-wrap {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin-bottom: var(--space-32);
}

@media (max-width: 768px) {
  .profile-image-wrap {
    margin-bottom: var(--space-16);
  }
}

.intro-hero img,
.intro-hero .profile-image-wrap img {
  width: 190px;
  height: 190px;
  max-width: 190px;
  object-fit: cover;
  border-radius: var(--radius-round);
}

.intro-hero h1 {
  margin-bottom: var(--space-28);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.2px;
  text-transform: none;
}

.intro-hero p {
  max-width: 680px;
  margin: 0 auto;
  color: #4a4a4a;
  font-size: 16px;
  font-weight: 450;
  line-height: 1.75;
  letter-spacing: 0;
}

.intro-hero p + p {
  margin-top: var(--space-16);
}

.intro-hero img,
.intro-hero h1,
.intro-hero p {
  opacity: 0;
  will-change: opacity, transform, filter;
}

.intro-hero img {
  transform: translateY(140px) scale(0.8);
  filter: blur(16px);
}

.intro-hero h1 {
  transform: translateY(40px);
  filter: blur(6px);
}

.intro-hero p {
  transform: translateY(30px);
  filter: blur(4px);
}

body.is-loaded .intro-hero img {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition: opacity 1400ms cubic-bezier(0.22, 1, 0.36, 1) 200ms, transform 1600ms cubic-bezier(0.22, 1, 0.36, 1) 200ms, filter 1300ms ease 200ms;
}

body.is-loaded .intro-hero h1 {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition: opacity 1000ms cubic-bezier(0.22, 1, 0.36, 1) 700ms, transform 1000ms cubic-bezier(0.22, 1, 0.36, 1) 700ms, filter 900ms ease 700ms;
}

body.is-loaded .intro-hero p {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition: opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1) 1200ms, transform 1100ms cubic-bezier(0.22, 1, 0.36, 1) 1200ms, filter 900ms ease 1200ms;
}

.linkedin-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 300ms ease, visibility 300ms ease;
}

.linkedin-icon {
  padding: var(--space-8) var(--space-10);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  background: #0A66C2;
  border-radius: var(--radius-xs);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: all 300ms ease;
}

/* Portfolio */
#portfolio #container,
#portfolio #loader {
  width: 100%;
  max-width: none;
  margin-right: auto;
  margin-left: auto;
}

#container {
  margin: 0 calc(var(--space-6) * -1);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.show-portfolio #container {
  opacity: 1;
  transform: translateY(0);
}

#container .item {
  width: 25%;
}

.js-reveal #container .item {
  padding: var(--space-6);
  overflow: visible;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.js-reveal #container .item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js-reveal #container .item:nth-child(1) { transition-delay: 40ms; }
.js-reveal #container .item:nth-child(2) { transition-delay: 80ms; }
.js-reveal #container .item:nth-child(3) { transition-delay: 120ms; }
.js-reveal #container .item:nth-child(4) { transition-delay: 160ms; }

#container .item .item-inner {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  transform: translateY(0);
  transform-origin: center center;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

#container .item a {
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

#container .item img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
  opacity: 0.92;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
  will-change: transform;
}

#container .item .item-inner::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.12) 100%);
  transition: opacity 400ms ease;
}

.project-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 118px;
  min-height: 118px;
  max-height: 118px;
  padding: var(--space-18) var(--space-16);
  overflow: hidden;
  text-align: center;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  opacity: 1;
  user-select: none;
  -webkit-user-select: none;
  transition: background 220ms ease, transform 220ms ease;
}

.project-title h2 {
  display: -webkit-box;
  margin-bottom: var(--space-6);
  overflow: hidden;
  color: #2b2b2b;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.3px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.project-title span {
  display: -webkit-box;
  overflow: hidden;
  color: #333!important;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.75;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Contact and footer */
#contact .section-title {
  margin-bottom: var(--space-28);
}

#contact .section-title p {
  max-width: 720px;
  margin-right: auto;
  margin-left: auto;
  color: #4a4a4a;
  font-size: 15px;
  line-height: 1.75;
}

#contact .social {
  margin-top: var(--space-24);
}

#contact .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-round);
  margin-left: var(--space-3);
  color: #f9f9f9;
  font-size: 16px;
  text-align: center;
  background: rgba(50, 50, 50, 0.9);
  transition: background 300ms ease-in-out;
}

#contact .social a:hover {
  background: #0A66C2!important;
}

#contact .social i {
  position: static;
}

#sub-footer {
  padding: var(--space-20) 0 var(--space-4);
  color: #f9f9f9;
  text-align: center;
  background: #2b2b2b;
}

/* Motion */
.wave {
  display: inline-block;
  transform-origin: 70% 70%;
  will-change: transform;
}

body.show-portfolio .wave {
  opacity: 1;
  animation: waveAnimation 8s ease-in-out 1s infinite;
}

@keyframes waveAnimation {
  0% { transform: rotate(0deg); }
  5% { transform: rotate(14deg); }
  10% { transform: rotate(-8deg); }
  15% { transform: rotate(14deg); }
  20% { transform: rotate(-4deg); }
  25% { transform: rotate(10deg); }
  30%, 100% { transform: rotate(0deg); }
}

@keyframes waveMobile {
  0% { transform: rotate(0deg); }
  6% { transform: rotate(14deg); }
  12% { transform: rotate(-6deg); }
  18% { transform: rotate(12deg); }
  24% { transform: rotate(-4deg); }
  30% { transform: rotate(10deg); }
  36% { transform: rotate(-2deg); }
  42% { transform: rotate(6deg); }
  48%, 100% { transform: rotate(0deg); }
}

@keyframes dotPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.6); }
  100% { transform: scale(1.45); }
}

/* Hover-capable devices */
@media (hover: hover) and (pointer: fine) {
  .site-nav li a:hover {
    opacity: 1;
    transform: translateY(-1px);
  }

  .site-nav li a:hover::after,
  .site-nav li a.active::after {
    opacity: 0.9;
    transform: scaleX(1);
  }

  body.is-loaded .profile-link:hover .linkedin-overlay {
    opacity: 1;
    visibility: visible;
  }

  body.is-loaded .profile-link:hover .linkedin-icon {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  body.is-loaded .profile-link:hover img {
    transform: translateY(0) scale(1.04);
    filter: brightness(1.05);
  }

  #container .item {
    cursor: pointer;
  }

  #container .item:hover,
  #container .item:focus-within  {
    z-index: 999;
    transform: scale(1.025);
  }

  #container .item:hover .item-inner,
  #container .item:focus-within .item-inner {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.10);
  }

  #container .item:hover img,
  #container .item:focus-within img {
    opacity: 1;
    transform: scale(1.02);
  }

  #container .item:hover .project-title,
  #container .item:focus-within .project-title {
    padding: var(--space-18) var(--space-16)!important;
    background: #fff;
    transform: none;
  }

  #container .item:hover .project-title h2,
  #container .item:focus-within .project-title h2 {
    letter-spacing: 0.2px;
  }

  #container .item:hover .item-inner::after,
  #container .item:focus-within .item-inner::after {
    opacity: 1;
  }

  #container .item a:focus-visible {
  outline: 3px solid #111;
  outline-offset: var(--space-4);
  border-radius: var(--radius-lg);
  }

  #container .item:focus-within .item-inner {
  box-shadow: 0 0 0 3px #0a84ff,
    0 16px 34px rgba(0, 0, 0, 0.10);
  }
}

/* Responsive */
@media only screen and (min-width: 1180px) {
  .wrapper {
    width: 1180px;
  }
}

@media only screen and (min-width: 768px) {
  header#main .wrapper {
    width: calc(100% - var(--space-64))!important;
    max-width: 1440px!important;
  }

  #burger {
    display: none!important;
  }

  #main nav,
  .site-nav {
    display: block!important;
    position: static!important;
    width: auto!important;
    margin: 0 0 0 auto!important;
    padding: 0!important;
    background: transparent!important;
    border: 0!important;
    box-shadow: none!important;
    opacity: 1!important;
    pointer-events: auto!important;
    transform: none!important;
  }

  .site-nav ul {
    display: block!important;
  }

  .site-nav li {
    display: inline-block!important;
    margin-left: var(--space-30)!important;
  }
}

@media only screen and (max-width: 959px) {
  .wrapper {
    width: 768px;
  }

  #container .item {
    width: 33.1%;
  }

  .section-title {
    max-width: 75%;
  }
}

@media only screen and (max-width: 767px) {
  .wrapper {
    width: 479px;
    margin: 0 auto;
  }

  #quote.standard-section,
  #contact.standard-section {
    padding-top: var(--space-56);
    padding-bottom: var(--space-56);
  }

  header#main {
    padding: var(--space-16) 0!important;
  }

  #main .wrapper {
    display: flex!important;
    flex-wrap: wrap!important;
    align-items: center!important;
    justify-content: space-between!important;
    width: calc(100% - var(--space-32))!important;
    max-width: none!important;
  }

  header#main .header-row {
    min-height: 60px;
  }

  #logo {
    flex: 0 1 auto!important;
    max-width: calc(100% - var(--space-72))!important;
  }

  #logo a.logo {
    display: block!important;
    font-size: 18px;
    font-weight: 700;
    line-height: 0.95!important;
    transform: translateY(1px);
  }

  #burger {
    position: relative!important;
    top: 0!important;
    right: 0!important;
    display: inline-flex!important;
    align-items: center!important;
    justify-content: center!important;
    flex: 0 0 auto!important;
    width: 44px!important;
    height: 44px!important;
    margin: 0 0 0 auto!important;
    padding: 0!important;
    color: #f9f9f9!important;
    font-size: 0!important;
    text-align: center!important;
    cursor: pointer;
    background: #2b2b2b!important;
    border: 0;
    border-radius: var(--radius-lg)!important;
  }

  #burger span {
    position: absolute!important;
    left: 50%!important;
    display: block!important;
    width: 20px!important;
    height: 2px!important;
    margin-left: calc(var(--space-10) * -1)!important;
    background: #f9f9f9!important;
    border-radius: 2px!important;
    opacity: 1!important;
    transition: transform 250ms ease, opacity 250ms ease, top 250ms ease!important;
  }

  #burger span:nth-child(1) { top: 15px!important; }
  #burger span:nth-child(2) { top: 21px!important; }
  #burger span:nth-child(3) { top: 27px!important; }

  #burger[aria-expanded="true"] span:nth-child(1) {
    top: 21px!important;
    transform: rotate(45deg)!important;
  }

  #burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0!important;
    transform: scaleX(0)!important;
  }

  #burger[aria-expanded="true"] span:nth-child(3) {
    top: 21px!important;
    transform: rotate(-45deg)!important;
  }

  #main nav,
  .site-nav {
    display: none!important;
    order: 3!important;
    clear: both!important;
    width: 100%!important;
    margin: var(--space-14) 0 0!important;
    padding: 0!important;
    background: transparent!important;
    border: 0!important;
    box-shadow: none!important;
  }

  body.menu-open #main nav,
  body.menu-open .site-nav {
    display: block!important;
  }

  body.menu-open .site-nav > ul {
    display: block!important;
    margin: 0!important;
    padding: var(--space-14) var(--space-24)!important;
    background: #fff!important;
    border: 1px solid #e5e5e5!important;
    border-radius: var(--radius-xl)!important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08)!important;
  }

  body.menu-open .site-nav li {
    display: block!important;
    margin: 0!important;
  }

  body.menu-open .site-nav li a {
    display: block!important;
    margin: 0!important;
    padding: var(--space-18) 0!important;
    line-height: 1.2!important;
    border-bottom: 1px solid #e5e5e5!important;
    opacity: 1!important;
  }

  body.menu-open .site-nav li:last-child a {
    border-bottom: 0!important;
  }

  #menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9997;
    display: block;
    visibility: hidden;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.22);
    opacity: 0;
    transition: opacity 220ms ease, visibility 220ms ease;
  }

  body.menu-open #menu-backdrop {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
  }

  .intro-hero {
    max-width: 100%;
    margin-bottom: var(--space-sm);
    padding: var(--space-4) var(--space-10) 0;
  }

  .intro-hero img,
  .intro-hero .profile-image-wrap img {
    width: 170px;
    height: 170px;
    max-width: 170px;
    margin-bottom: var(--space-18);
    transform: translateY(40px) scale(0.94);
    filter: blur(6px);
  }

  .intro-hero h1 {
    margin-bottom: var(--space-12);
    font-size: 26px;
    line-height: 1.2;
    transform: translateY(20px);
    filter: blur(2px);
  }

  .intro-hero p {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.7;
    transform: translateY(16px);
    filter: blur(1px);
  }

  body.is-loaded .intro-hero img {
    transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1) 150ms, transform 1000ms cubic-bezier(0.22, 1, 0.36, 1) 150ms, filter 800ms ease 150ms;
  }

  body.is-loaded .intro-hero h1 {
    transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) 500ms, transform 700ms cubic-bezier(0.22, 1, 0.36, 1) 500ms, filter 600ms ease 500ms;
  }

  body.is-loaded .intro-hero p {
    transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1) 850ms, transform 800ms cubic-bezier(0.22, 1, 0.36, 1) 850ms, filter 700ms ease 850ms;
  }

  #container .item {
    width: 50%;
  }

  #container .item img {
    height: 220px;
  }

  .project-title {
    height: 110px;
    min-height: 110px;
    max-height: 110px;
    padding: var(--space-16) var(--space-14);
  }

  #container .item:hover .project-title {
    padding: var(--space-16) var(--space-14)!important;
  }

  body.show-portfolio .wave {
    animation: waveMobile 3.6s ease-in-out 0.6s 2;
  }

  .flexslider.quotes .flex-control-nav {
    margin-top: var(--space-12)!important;
    margin-bottom: var(--space-24)!important;
  }

  #contact .social {
    margin-top: var(--space-20);
  }

  #sub-footer {
    padding: var(--space-32) 0 var(--space-16);
  }
}

@media only screen and (max-width: 479px) {
  .wrapper {
    width: 300px;
  }

  .section-title {
    max-width: 100%;
  }

  #container .item {
    width: 100%;
  }
}

/* Touch and accessibility */
@media (hover: none), (pointer: coarse) {
  .linkedin-overlay,
  .linkedin-icon {
    display: none!important;
    visibility: hidden!important;
    opacity: 0!important;
  }

  #container .item .item-inner {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  }

  #container .item img,
  .project-title {
    opacity: 1;
  }
}

@media only screen and (max-width: 767px) {
  .profile-image-wrap {
    margin-bottom: var(--space-6);
  }
}

@media only screen and (max-width: 767px) {
  .intro-hero h1 {
    padding-bottom: var(--space-14)!important;
  }
}

@media (prefers-reduced-motion: reduce) {

  * {
    animation: none!important;
    transition: none!important;
    scroll-behavior: auto!important;
  }

}

@media (prefers-reduced-motion: reduce) {
  .section-title img,
  .section-title h1,
  .section-title h2,
  .section-title h3,
  .section-title p,
  #container,
  #container .item,
  .linkedin-overlay,
  .linkedin-icon {
    animation: none!important;
    opacity: 1!important;
    transform: none!important;
    filter: none!important;
    transition: none!important;
  }
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid #0A66C2;
  outline-offset: var(--space-4);
  border-radius: var(--radius-xs);
}

#burger:focus-visible {
  outline: 3px solid #0A66C2;
  outline-offset: var(--space-3);
}

.skip-link {
  position: absolute;
  top: var(--space-12);
  left: -9999px;
  z-index: 10000;
  padding: var(--space-10) var(--space-14);
  color: #fff;
  background: #0A66C2;
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  left: var(--space-20);
  top: var(--space-20);
  z-index: 10000;
}

.article {
  display: inline-block;
  transition: color 200ms ease,
    transform 200ms ease;
}

.article:hover {
  transform: scale(1.03);
}

#contact .social a {
  transition: background 300ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

#contact .social a:hover {
  background: #0A66C2!important;
  transform: translateY(-2px) scale(1.06);
}

.article:hover,
.article:focus-visible {
  transform: scale(1.03);
}

#contact .social a:hover,
#contact .social a:focus-visible {
  transform: translateY(-2px) scale(1.06);
}

.impact-metrics {
  width: 100%;
  margin: 1.5rem auto 1.5rem;
  padding: 2rem 2rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-4xl);
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 34%),
    rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(20px);
}

.impact-metrics__intro {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.impact-metrics h2 {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  font-weight: 500;
}

.impact-metrics__heading {
  margin: 0;
  font-size: clamp(1.125rem, 1.5vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-weight: 500;
  text-align: center;
}

.impact-metrics__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-1);
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: rgba(255, 255, 255, 0.12);
}

.impact-metric {
  min-height: 160px;
  padding: 1.5rem;
  background: #f2f3f5;
  transition: transform 180ms ease,
    background-color 180ms ease;
}

.impact-metric:hover {
  transform: translateY(-2px);
  background: #e9eaec;
}

.impact-metric__value {
  display: block;
  margin-bottom: 0.75rem;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: #111111;
}

.impact-metric__label {
  margin: 0;
  max-width: 24ch;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #444444;
  opacity: 1;
}

@media (max-width: 960px) {
  .impact-metrics__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .impact-metrics {
    padding: 1.25rem;
    border-radius: var(--radius-3xl);
  }

  .impact-metrics__grid {
    grid-template-columns: 1fr;
  }

  .impact-metric {
    min-height: auto;
  }
}

@media only screen and (max-width: 767px) {
  .standard-section,
  #portfolio.standard-section,
  #quote.standard-section,
  #contact.standard-section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }
}