/* Home — depends on tokens.css + global.css loaded before this file. */

.home {
  max-width: var(--layout-page-max);
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Main column — 576px centered; top padding from tokens */
.home__main {
  width: var(--layout-column);
  max-width: 100%;
  margin: 0 auto;
  padding: var(--layout-main-content-padding-top) var(--layout-main-inline-padding) 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sds-size-space-1600);
}

.home__intro-block {
  display: flex;
  flex-direction: column;
  gap: var(--sds-size-space-400);
}

.home__intro-text {
  display: flex;
  flex-direction: column;
  gap: var(--sds-size-space-200);
}

.home__name {
  margin: 0;
  font-family: var(--sds-typography-title-hero-font-family);
  font-weight: var(--sds-typography-title-hero-font-weight);
  font-size: var(--font-size-display);
  line-height: var(--line-height-tight);
  color: var(--sds-color-text-neutral-default);
}

.home__role {
  margin: 0;
  font-family: var(--font-family-sans);
  font-weight: 400;
  font-size: var(--font-size-label-uppercase);
  letter-spacing: var(--letter-spacing-subtitle);
  text-transform: uppercase;
  line-height: var(--line-height-tight);
  color: var(--sds-color-text-neutral-tertiary);
}

.home__bio {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-description);
}

.home__bio p {
  margin: 0 0 1em;
}

.home__bio p:last-child {
  margin-bottom: 0;
}

.home__contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sds-size-space-400);
  align-items: flex-start;
}

.home__contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sds-size-space-100);
  padding: var(--sds-size-space-200) 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  color: var(--sds-color-text-neutral-secondary);
  text-decoration: none;
}

.home__contact-link:hover {
  text-decoration: underline;
}

/* Intro — soft staged entrance */
@keyframes home-intro-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.home__intro-block .home__name {
  animation: home-intro-in 0.85s cubic-bezier(0.33, 1, 0.32, 1) backwards;
  animation-delay: 0.06s;
}

.home__intro-block .home__role {
  animation: home-intro-in 0.85s cubic-bezier(0.33, 1, 0.32, 1) backwards;
  animation-delay: 0.14s;
}

.home__intro-block .home__bio {
  animation: home-intro-in 0.88s cubic-bezier(0.33, 1, 0.32, 1) backwards;
  animation-delay: 0.26s;
}

.home__intro-block .home__contact-row {
  animation: home-intro-in 0.82s cubic-bezier(0.33, 1, 0.32, 1) backwards;
  animation-delay: 0.38s;
}

.home__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Work */
.home__section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.home__section-title {
  margin: 0 0 var(--sds-size-space-600);
  font-family: var(--sds-typography-title-hero-font-family);
  font-weight: var(--sds-typography-title-hero-font-weight);
  font-size: var(--font-size-section);
  line-height: var(--line-height-tight);
  color: var(--color-section-heading);
}

/* Work section — soft entrance (matches intro + project-row-enter; not .home__projects) */
.home__section:not(.home__projects) > .home__section-title {
  animation: home-intro-in 0.85s cubic-bezier(0.33, 1, 0.32, 1) backwards;
  animation-delay: 0.44s;
}

.home__work-list > .project-card {
  animation: project-row-enter 0.72s cubic-bezier(0.33, 1, 0.32, 1) backwards;
}

.home__work-list > .project-card:nth-child(1) {
  animation-delay: 0.5s;
}

.home__work-list > .project-card:nth-child(2) {
  animation-delay: 0.55s;
}

.home__work-list > .project-card:nth-child(3) {
  animation-delay: 0.6s;
}

.home__work-list > .project-card:nth-child(4) {
  animation-delay: 0.65s;
}

.home__work-list > .project-card:nth-child(5) {
  animation-delay: 0.7s;
}

/* Projects header row */
.home__projects-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--sds-size-space-400);
}

/* Unlock all button — same interaction pattern as project cards */
.unlock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sds-size-space-200);
  padding: var(--sds-size-space-100) var(--sds-size-space-200);
  border-radius: var(--sds-size-radius-100);
  background: transparent;
  border: none;
  font-family: var(--sds-typography-title-hero-font-family);
  font-weight: var(--sds-typography-title-hero-font-weight);
  font-size: var(--font-size-body);
  color: var(--sds-color-text-neutral-secondary);
  cursor: pointer;
  text-decoration: none;
}

.unlock-btn:focus-visible {
  outline: 2px solid var(--sds-color-text-neutral-tertiary);
  outline-offset: 2px;
}

.unlock-btn:hover,
.unlock-btn:focus-visible {
  background-color: var(--color-project-hover-fill);
  text-decoration: none;
}

.unlock-btn:active {
  background-color: var(--color-card-active-fill);
  box-shadow: var(--shadow-card-pressed);
}

.unlock-btn__icon {
  width: 16px;
  height: 16px;
}

/* [hidden] alone loses to author display rules (e.g. inline-flex) */
.unlock-btn[hidden] {
  display: none !important;
}

/* Project + work card lists */
.home__projects-list,
.home__work-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.project-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  padding: 0;
  border-radius: var(--sds-size-radius-200);
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-decoration: none;
  position: relative;
}

/* Hover/active fill: extend past text row into main gutter (same width as Work / section titles) */
.project-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--project-card-hover-bleed));
  right: calc(-1 * var(--project-card-hover-bleed));
  z-index: 0;
  border-radius: var(--sds-size-radius-200);
  background: transparent;
  pointer-events: none;
  transition:
    background-color 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.24s ease;
}

.project-card:focus-visible {
  outline: 2px solid var(--sds-color-text-neutral-tertiary);
  outline-offset: 2px;
}

.project-card__row {
  display: flex;
  gap: var(--sds-size-space-400);
  align-items: center;
  min-height: 75px;
  padding: var(--sds-size-space-400) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.project-card:hover .project-card__row,
.project-card:focus-within .project-card__row {
  border-bottom-color: transparent;
}

.project-card:hover::before,
.project-card:focus-within::before {
  background-color: var(--color-project-hover-fill);
}

.project-card:hover,
.project-card:focus-within {
  text-decoration: none;
}

.project-card:active::before {
  background-color: var(--color-card-active-fill);
  box-shadow: var(--shadow-card-pressed);
}

.project-card:active .project-card__row {
  border-bottom-color: transparent;
}

.project-card--locked .project-card__title,
.project-card--locked .project-card__meta,
.project-card--locked .project-card__desc {
  opacity: 0.5;
}

.project-card--locked:hover .project-card__title,
.project-card--locked:hover .project-card__meta,
.project-card--locked:hover .project-card__desc,
.project-card--locked:focus-within .project-card__title,
.project-card--locked:focus-within .project-card__meta,
.project-card--locked:focus-within .project-card__desc,
.project-card--locked:active .project-card__title,
.project-card--locked:active .project-card__meta,
.project-card--locked:active .project-card__desc {
  opacity: 1;
}

/* Modal unlock: titles go to full opacity while lock icon shakes and fades */
.project-card--locked.project-card--unlock-animating .project-card__title,
.project-card--locked.project-card--unlock-animating .project-card__meta,
.project-card--locked.project-card--unlock-animating .project-card__desc {
  opacity: 1;
  transition: opacity 0.58s cubic-bezier(0.22, 1, 0.36, 1) var(--unlock-stagger, 0s);
}

.project-card__logo {
  width: var(--sds-size-icon-medium);
  height: var(--sds-size-icon-medium);
  flex-shrink: 0;
  border-radius: var(--sds-size-radius-100);
  box-shadow: var(--shadow-logo-drop);
  overflow: hidden;
  position: relative;
  background: #fff;
}

.project-card__logo img {
  position: absolute;
  left: 5.7px;
  top: 5.04px;
  width: 20.59px;
  height: 21.921px;
}

.project-card__logo--singlecare-sc {
  background: #532b9f;
}

.project-card__logo--singlecare-sc img {
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
}

.project-card__logo--work-jg {
  background: var(--color-logo-jg-bg);
}

.project-card__logo--work-jg img {
  left: 5px;
  top: 7px;
  width: 21.333px;
  height: 16.692px;
}

.project-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sds-size-space-100);
}

.project-card__title-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sds-size-space-200);
  align-items: baseline;
}

.project-card__title {
  margin: 0;
  font-family: var(--sds-typography-title-hero-font-family);
  font-weight: var(--sds-typography-title-hero-font-weight);
  font-size: var(--font-size-body);
  color: var(--sds-color-text-neutral-default);
}

.project-card__meta {
  margin: 0;
  font-family: var(--font-family-sans);
  font-weight: 400;
  font-size: var(--font-size-body-small);
  letter-spacing: var(--letter-spacing-subtitle);
  text-transform: uppercase;
  color: var(--sds-color-text-neutral-tertiary);
}

.project-card__desc {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  color: var(--color-text-description);
}

.project-card__desc--muted {
  opacity: 0.92;
}

.project-card__trail-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transform: translateZ(0);
}

/* Locked: one-time pulse on load (delay via --lock-pulse-delay from JS) + hover pulse */
@keyframes lock-icon-pulse-once {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  45% {
    transform: scale(1.1);
    opacity: 0.82;
  }
}

@keyframes lock-icon-pulse-hover {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.85;
  }
}

.project-card--locked .project-card__trail-icon {
  animation: lock-icon-pulse-once 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--lock-pulse-delay, 0.65s) both;
}

.project-card--locked:hover .project-card__trail-icon,
.project-card--locked:focus-within .project-card__trail-icon {
  animation: lock-icon-pulse-hover 0.55s ease-out;
}

@keyframes lock-icon-unlock {
  0% {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
  14% {
    transform: translateX(-3px) rotate(-11deg);
  }
  28% {
    transform: translateX(3px) rotate(11deg);
  }
  42% {
    transform: translateX(-2px) rotate(-7deg);
  }
  56% {
    transform: translateX(2px) rotate(6deg);
  }
  70% {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateX(0) rotate(0deg);
    opacity: 0.12;
  }
}

.project-card--locked.project-card--unlock-animating .project-card__trail-icon {
  animation: lock-icon-unlock 0.88s cubic-bezier(0.34, 1, 0.36, 1) var(--unlock-stagger, 0s) forwards;
}

/* Unlocked: hover nudge + pulse */
@keyframes trail-chevron-care {
  0% {
    transform: translateX(0) scale(1);
  }
  40% {
    transform: translateX(5px) scale(1.08);
  }
  100% {
    transform: translateX(4px) scale(1);
  }
}

.project-card--unlocked .project-card__trail-icon {
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-card--unlocked:hover .project-card__trail-icon,
.project-card--unlocked:focus-within .project-card__trail-icon {
  animation: trail-chevron-care 0.58s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Unlocked state from server */
.project-card--unlocked {
  cursor: pointer;
}

.project-card--unlocked[href] {
  cursor: pointer;
}

/* Footer — aligned to main column width; links row above copyright, left-aligned */
.home__footer {
  width: 100%;
  max-width: var(--layout-content-width);
  /* Space above footer (main is a sibling, so this separates projects / case study from footer) */
  margin: var(--sds-size-space-1600) auto 0;
  padding: var(--sds-size-space-400);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--sds-size-space-400);
}

.home__footer-row--links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sds-size-space-200);
  justify-content: flex-start;
  width: 100%;
}

.home__footer-row--copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sds-size-space-200);
  justify-content: flex-start;
  width: 100%;
  margin-top: var(--sds-size-space-400);
  padding-top: var(--sds-size-space-400);
  border-top: 1px solid color-mix(in srgb, var(--color-border-subtle) 65%, transparent);
}

.home__footer-copy {
  margin: 0;
  font-family: var(--font-family-sans);
  font-weight: 400;
  font-size: var(--font-size-body-small);
  letter-spacing: 0.02em;
  color: var(--color-text-footer);
  opacity: 0.92;
}

.home__footer-icon {
  opacity: 0.85;
}

.home__footer-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sds-size-space-200);
  padding: var(--sds-size-space-100) var(--sds-size-space-200);
  border-radius: var(--sds-size-radius-100);
  font-family: var(--sds-typography-title-hero-font-family);
  font-weight: var(--sds-typography-title-hero-font-weight);
  font-size: var(--font-size-body);
  color: var(--sds-color-text-neutral-secondary);
  text-decoration: none;
}

.home__footer-item:hover {
  background-color: var(--sds-color-background-default-default-hover);
  text-decoration: none;
}

.home__footer-sep {
  margin: 0;
  font-family: var(--sds-typography-title-hero-font-family);
  font-size: var(--font-size-body);
  color: var(--sds-color-text-neutral-secondary);
  user-select: none;
}

/* Testing: reset unlock state (remove before shipping if desired) */
.home__footer-row--dev {
  margin-top: var(--sds-size-space-200);
  width: 100%;
}

.home__dev-lock-btn {
  border: none;
  background: transparent;
  padding: var(--sds-size-space-100) 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body);
  color: var(--color-text-footer);
  cursor: pointer;
  text-decoration: underline;
}

.home__dev-lock-btn:hover {
  color: var(--sds-color-text-neutral-secondary);
}

/* Modal — entrance / exit / success (JS toggles .modal--open) */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sds-size-space-400);
}

.modal[hidden] {
  display: none !important;
}

/* While opening/closing (no .modal--open), do not block clicks on the page */
.modal:not([hidden]):not(.modal--open) .modal__backdrop,
.modal:not([hidden]):not(.modal--open) .modal__panel {
  pointer-events: none;
}

/*
 * Must use .modal.modal--open:not([hidden]) — NOT .modal:not([hidden]) alone —
 * or the “closed but mounted” rule wins specificity over .modal--open and the panel stays invisible.
 */
.modal:not([hidden]):not(.modal--open) .modal__backdrop {
  opacity: 0;
  transition: opacity 0.38s ease;
}

.modal.modal--open:not([hidden]) .modal__backdrop {
  opacity: 1;
  transition: opacity 0.38s ease;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-modal-backdrop);
}

.modal:not([hidden]):not(.modal--open) .modal__panel {
  opacity: 0;
  transform: scale(0.985) translateY(8px);
  transition:
    opacity 0.4s cubic-bezier(0.33, 1, 0.32, 1),
    transform 0.42s cubic-bezier(0.33, 1, 0.32, 1),
    box-shadow 0.4s ease;
}

.modal.modal--open:not([hidden]) .modal__panel {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.4s cubic-bezier(0.33, 1, 0.32, 1),
    transform 0.42s cubic-bezier(0.33, 1, 0.32, 1),
    box-shadow 0.4s ease;
}

.modal.modal--success.modal--open:not([hidden]) .modal__panel {
  animation: modal-panel-success-nudge 0.6s cubic-bezier(0.33, 1, 0.32, 1) both;
  box-shadow:
    var(--shadow-logo-drop),
    0 0 0 1px color-mix(in srgb, var(--sds-color-text-neutral-tertiary) 18%, transparent);
}

@keyframes modal-panel-success-nudge {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.008) translateY(-1px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

.modal__panel {
  position: relative;
  z-index: 1;
  width: min(380px, 100%);
  background: var(--color-modal-surface);
  border-radius: var(--sds-size-radius-400);
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-logo-drop);
  padding: var(--sds-size-space-1200);
  display: flex;
  flex-direction: column;
  gap: var(--sds-size-space-200);
}

.modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--sds-size-space-400);
}

.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sds-size-space-200);
}

.modal__title {
  margin: 0;
  font-family: var(--sds-typography-title-hero-font-family);
  font-weight: var(--sds-typography-title-hero-font-weight);
  font-size: var(--font-size-section);
  color: var(--color-section-heading);
}

.modal__close {
  border: none;
  background: transparent;
  padding: var(--sds-size-space-100);
  line-height: 1;
  font-size: var(--font-size-section);
  color: var(--sds-color-text-neutral-secondary);
}

.modal__close:hover {
  color: var(--sds-color-text-neutral-default);
}

.modal__label {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body);
  color: var(--sds-color-text-neutral-secondary);
}

.modal__field-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sds-size-space-100);
}

.modal__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: var(--sds-size-space-200) var(--sds-size-space-400);
  border-radius: var(--sds-size-radius-100);
  border: 1px solid var(--color-border-subtle);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  background: #fff;
}

.modal__input::placeholder {
  color: var(--color-text-description);
  opacity: 1;
}

.modal__input--error {
  border-color: var(--color-error-border);
}

.modal__error {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body-small);
  color: var(--color-error-text);
}

.modal__error[hidden] {
  display: none;
}

.modal__success {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  color: var(--sds-color-text-neutral-tertiary);
}

.modal__success:not([hidden]) {
  animation: modal-success-text-in 0.55s cubic-bezier(0.33, 1, 0.32, 1) both;
}

@keyframes modal-success-text-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal__success[hidden] {
  display: none;
}

.modal__actions {
  display: flex;
  justify-content: stretch;
  gap: var(--sds-size-space-200);
}

.modal__submit {
  width: 100%;
  padding: var(--sds-size-space-200) var(--sds-size-space-400);
  border-radius: var(--sds-size-radius-100);
  border: none;
  background: var(--color-modal-submit-bg);
  color: var(--color-modal-submit-text);
  font-family: var(--sds-typography-title-hero-font-family);
  font-weight: var(--sds-typography-title-hero-font-weight);
  font-size: var(--font-size-body);
}

.modal__submit:hover {
  filter: brightness(0.95);
}

.modal__submit:active {
  filter: brightness(0.88);
}

/* Projects section — follows Work (header, then list; delays after last work row) */
.home__section.home__projects > .home__projects-header {
  animation: home-intro-in 0.85s cubic-bezier(0.33, 1, 0.32, 1) backwards;
  animation-delay: 0.68s;
}

/* Project list — soft staggered entrance (same motion, chained after Work) */
@keyframes project-row-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.home__projects-list > .project-card {
  animation: project-row-enter 0.72s cubic-bezier(0.33, 1, 0.32, 1) backwards;
}

.home__projects-list > .project-card:nth-child(1) {
  animation-delay: 0.76s;
}

.home__projects-list > .project-card:nth-child(2) {
  animation-delay: 0.81s;
}

.home__projects-list > .project-card:nth-child(3) {
  animation-delay: 0.86s;
}

.home__projects-list > .project-card:nth-child(4) {
  animation-delay: 0.91s;
}

.home__projects-list > .project-card:nth-child(5) {
  animation-delay: 0.96s;
}

.home__projects-list > .project-card:nth-child(6) {
  animation-delay: 1.01s;
}

.home__projects-list > .project-card:nth-child(7) {
  animation-delay: 1.06s;
}

/* Promoted from locked → link: do not replay staggered row entrance */
.home__projects-list > .project-card.project-card--no-entrance {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .home__intro-block .home__name,
  .home__intro-block .home__role,
  .home__intro-block .home__bio,
  .home__intro-block .home__contact-row {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .home__section:not(.home__projects) > .home__section-title,
  .home__work-list > .project-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .home__section.home__projects > .home__projects-header {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .home__projects-list > .project-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .project-card--locked .project-card__trail-icon {
    animation: none !important;
  }

  .project-card--locked:hover .project-card__trail-icon,
  .project-card--locked:focus-within .project-card__trail-icon {
    animation: none !important;
  }

  .project-card--locked.project-card--unlock-animating .project-card__trail-icon {
    animation: none !important;
    opacity: 0.12 !important;
  }

  .project-card--locked.project-card--unlock-animating .project-card__title,
  .project-card--locked.project-card--unlock-animating .project-card__meta,
  .project-card--locked.project-card--unlock-animating .project-card__desc {
    opacity: 1 !important;
    transition: none !important;
  }

  .project-card--unlocked:hover .project-card__trail-icon,
  .project-card--unlocked:focus-within .project-card__trail-icon {
    animation: none !important;
    transform: translateX(4px) !important;
  }

  .project-card::before {
    transition: none !important;
  }

  .modal:not([hidden]):not(.modal--open) .modal__backdrop,
  .modal.modal--open:not([hidden]) .modal__backdrop,
  .modal:not([hidden]):not(.modal--open) .modal__panel,
  .modal.modal--open:not([hidden]) .modal__panel {
    transition: none !important;
    animation: none !important;
  }

  .modal.modal--success.modal--open:not([hidden]) .modal__panel {
    box-shadow: var(--shadow-logo-drop) !important;
  }

  .modal__success:not([hidden]) {
    animation: none !important;
  }

}

@media (max-width: 768px) {
  .home__main {
    padding-top: var(--layout-main-content-padding-top);
  }
}

@media (max-width: 393px) {
  .home__main,
  .home__footer {
    padding-left: var(--layout-main-inline-padding);
    padding-right: var(--layout-main-inline-padding);
  }

  .home__main {
    padding-top: var(--layout-main-content-padding-top);
  }

  .home__contact-row {
    flex-direction: column;
    gap: var(--sds-size-space-200);
  }

  .project-card__row {
    width: 100%;
  }

  .home__projects-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sds-size-space-400);
  }

  .home__projects-header .unlock-btn {
    width: 100%;
    justify-content: center;
  }
}