/* =========================================
   1. GLOBAL STYLES
========================================= */

:root {
  /* Semantic color aliases */
  --hero-accent: var(--color-green-500, #70e317);
  --text-primary: var(--color-foundation-black, #161616);
  --surface-primary: var(--color-foundation-white, #ffffff);
  --border-color: var(--color-grey-300, #cccccc);

  /* Layout tokens */
  --layout-margin: 20px;
  --layout-gutter: 20px;
  

  /* Hero dimensions */
  --hero-height: 708px;
  --hero-image-width: 525px;
  --hero-image-height: 707px;
  --hero-content-width: 370px;
}

* {
  box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface-primary);
  color: var(--text-primary);
  font-family: var(--font-body), sans-serif;
  position: relative;
}



img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: calc(100% - 2 * var(--layout-margin));
  max-width: 1240px;
  margin-inline: auto;
}


/* =========================================
   2. HERO SECTION
========================================= */

.hero {
  height: var(--hero-height);
  min-height: var(--hero-height);
  position: relative;
  isolation: isolate;
  overflow: visible;
}

/* Vertical line */

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -500px; /* Extends line 500px further down */
  left: 17%;
  width: 1px;
  background: #000;
  pointer-events: none;
  z-index: 0;
}

/* Horizontal line — full viewport width */
.hero::after {
  content: "";
  position: absolute;

  bottom: 0;
  left: 50%;
  transform: translateX(-50%);

  width: 100vw;
  height: 1px;
  background: #000;

  pointer-events: none;
  z-index: 0;
}

/* =========================================
   3. NAVIGATION
========================================= */

.navbar {
  position: fixed;
  z-index: 1000;

  top: 28px;
  left: 50%;
  transform: translateX(-50%);

  width: min(420px, calc(100% - 26px));
  max-width: 420px;
  height: 72px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding-left: 20px;
  padding-right: 20px;
  padding-top: 12px;
  padding-bottom: 12px;

  background: var(--surface-primary);
  border: 1px solid var(--color-grey-200, #eeeeee);
  border-radius: 40px;

  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.10);
}

.navbar nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  padding: 0 16px 0 8px;
  min-width: 0;
}

.navbar a {
  font: var(--type-desktop-paragraph-medium-medium);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.nav-home {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* JT stays circular; section links use padded rounded rectangles. */
.nav-home.active,
.navbar nav > a:not(.nav-home).active {
  background-color: var(--color-green-500);
  color: var(--color-foundation-black);
}

.navbar nav > a:not(.nav-home).active {
  border-radius: 14px;
}

.nav-link {
  transition: background-color 0.3s ease,
              color 0.3s ease;
}

.navbar nav > a.active:hover {
  background-color: var(--color-green-400);
}

.navbar nav > a:not(.nav-home) {
  padding: 10px 12px;
  border-radius: 16px;
}

.navbar nav > a:not(.nav-home):hover {
  color: var(--color-green-700, #438d0e);
}

.navbar a:focus-visible {
  outline: 2px solid var(--hero-accent);
  outline-offset: 4px;
}


/* =========================================
   4. ID CARD IMAGE
========================================= */

.hero-visual {
  position: absolute;

  top: -10px;
  left: -20px;

  width: var(--hero-image-width);
  height: var(--hero-image-height);

  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.hero-visual img {
 width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;

  transform-origin: 40% 3%;
  animation:  card-swing 3s ease-in-out infinite alternate;
}


/* =========================================
   5. ID CARD SWING
========================================= */

@keyframes card-swing {
 from {
    transform: rotate(-0.5deg);
  }

  to {
    transform: rotate(5deg);
  }
}

/* =========================================
   6. HERO CONTENT
========================================= */

.hero-content {
  position: absolute;
  left: 45%;
  top: 60%;
  width: 31%;
  max-width: var(--hero-content-width);
  transform: translateY(-50%);
}


/* Heading */

.hero-content h1,
.hero-title {
  margin: 0;
  font-family: 'Sora', sans-serif;
  font-size: 76px;
  font-weight: 900;
  line-height: 0.85;
  color: var(--color-green-500, #70e317);
}

.hero-heading {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
}


/* =========================================
   HERO SECONDARY HEADING — TICKING ANIMATION
========================================= */

.hero-heading-secondary {
  display: flex;
  align-items: center;
  font-family: 'Sora', sans-serif;
  font-size: 40px;
  font-weight: 200;
  color: var(--color-dark-blue-900);
}

/* Vertical words */
.word-ticker-track {
  display: flex;
  flex-direction: column;
  animation: word-tick 6s infinite;
  will-change: transform;
}

.word-ticker-track span {
  height: 48px;
  line-height: 48px;
  flex-shrink: 0;
}

.word-ticker {
  height: 144px;
  overflow: hidden;

  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.2) 18%,
    black 38%,
    black 62%,
    rgba(0, 0, 0, 0.2) 82%,
    transparent 100%
  );

  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.2) 18%,
    black 38%,
    black 62%,
    rgba(0, 0, 0, 0.2) 82%,
    transparent 100%
  );
}

/* Three positions, with a 200ms upward tick */
@keyframes word-tick {
  0%, 30% {
    transform: translateY(0);
  }

  33.333%, 63.333% {
    transform: translateY(-48px);
  }

  66.667%, 96.667% {
    transform: translateY(-96px);
  }

  100% {
    transform: translateY(-144px);
  }
}

/* Mobile */
@media (max-width: 500px) {
  .word-ticker {
    height: 144px;
  }

  .word-ticker-track span {
    height: 48px;
    line-height: 48px;
  }

  .word-ticker-track {
    animation-name: word-tick;
  }

}

/* Description */

.hero-description {
  margin: 24px 0 0;

  font: var(--type-desktop-paragraph-medium-regular);
  color: var(--text-primary);
}


/* =========================================
   7. HIRE ME BUTTON
========================================= */

.button {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 48px;

  margin-top: 40px;

  background: var(--surface-primary);
  color: var(--text-primary);

  border: 1px solid var(--color-grey-800, #999999);
  border-radius: 20px;

  font: var(--type-desktop-paragraph-medium-regular);

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.button:hover {
  background: var(--hero-accent);
  border-color: var(--hero-accent);
  color: var(--text-primary);
}


/* =========================================
   7b. HERO ACTIONS + RESUME BUTTON
========================================= */

.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
}

.hero-actions .button {
  flex: 1;
  width: auto;
  min-width: 0;
  margin-top: 0;
}

.resume-button {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  background: var(--surface-primary);
  color: var(--text-primary);
  border: 1px solid transparent;
  border-radius: 20px;

  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.resume-icon {
  display: block;
  overflow: visible;
}

.resume-button:hover,
.resume-button:focus-visible {
  background: var(--hero-accent);
  border-color: var(--hero-accent);
  transform: translateY(-2px);
}

.resume-button:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 3px;
}

.resume-button:hover .resume-arrow,
.resume-button:focus-visible .resume-arrow {
  animation: resume-arrow-bounce 0.9s ease-in-out infinite;
}

@keyframes resume-arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(2.5px); }
}

/* Tooltip */
.resume-button::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  transform: translateY(4px);

  padding: 6px 12px;
  border-radius: 8px;
  background: var(--text-primary);
  color: var(--surface-primary);

  font: var(--type-desktop-paragraph-large-regular);
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.resume-button:hover::after,
.resume-button:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 500px) {
  .hero-actions { margin-top: 28px; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .resume-button:hover .resume-arrow,
  .resume-button:focus-visible .resume-arrow { animation: none; }
  .resume-button, .resume-button::after { transition: none; }
}

/* =========================================
   8. ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {
  .hero-visual img {
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }
}

@media (max-width: 1080px) {
  .hero {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding-bottom: 80px;
    
  }

  .hero-visual {
    position: relative;
    top: auto;
    left: auto;

    width: min(90vw, 525px);
    height: auto;
    aspect-ratio: 525 / 707;

    margin: -130px auto 0;
  }

  .hero-content {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 500px;
    transform: none;
  }

  .hero::before {
    display: none;
  }
}

/* =========================================
   9. MOBILE — 500PX AND BELOW
========================================= */

@media (max-width: 500px) {

  .hero {
    height: auto;
    min-height: 0;

    padding-top: 110px;
    padding-bottom: 40px;
    gap : 4px;
  }

  .navbar {
    top: 16px;
    width: calc(100% - 20px);
    max-width: 420px;
    height: 72px;
    padding: 12px;
  }

  .navbar nav {
    width: 100%;
    gap: 4px;
    padding: 0 12px 0 4px;
  }

  .navbar a {
    font-size: clamp(0.86rem, 3.8vw, 1rem);
    line-height: 1.2;
    white-space: nowrap;
  }

  .nav-home {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
  }

  
   .hero-content {
    box-sizing: border-box;
    width: 100%;
    max-width: 390px;
    padding: 0 10px;
    margin: 30px auto 0;
  }

  .hero-content h1 {
    font-size: 68px;
    line-height: 0.85;
  }

  .hero-heading-secondary {
    font-size: clamp(28px, 8vw, 40px);
  }

  .button {
    margin-top: 28px;
    font: var(--type-desktop-paragraph-large-regular);
  }

  /* Fix hero heading overflow */
  .hero-heading {
    width: 100%;
    gap: 8px;
    min-width: 0;
  }

  .hero-heading-secondary {
    flex: 1;
    min-width: 0;
  }

  .word-ticker {
    min-width: 0;
    max-width: 100%;
  }

}

@media (max-width: 380px) {
  .hero-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .hero-heading-secondary {
    width: 100%;
    min-width: 0;
    line-height: 1;
    padding-left: 8px;
  }

  .word-ticker {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 120px;
    padding-left: 8px;
  }
}

/* Hero layout guide lines */
.hero {
  position: relative;
  isolation: isolate;
}


.hero-content,
.hero-visual{
  z-index: 1;
}


/* =========================================
   10. PROJECTS SECTION
========================================= */

.projects {
  width: min(820px, calc(100% - 40px));
  max-width: 820px;
  margin-inline: auto;

  padding-top: 80px;
  padding-bottom: 80px;
}

/* Section heading */

.projects-heading {
  margin: 0 0 40px;
  font: var(--type-desktop-h1-extra-bold);
  text-align: center;
  color: var(--color-grey-500);
}

/* Projects grid */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}


/* Project card */

.project-card {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  grid-row: auto;
  overflow: hidden;
  background: #eeeeee;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Gradient overlay */
.project-card::after {
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 100%
  );

  opacity: 0.6;
  transition: opacity 0.3s ease;

  pointer-events: none;
  z-index: 1;
}

.project-card:hover::after {
  opacity: 0.1;
}

/* Project image */

.project-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.4s ease;
}

/* Information panel */

.project-info {
  position: absolute;
  bottom: 0;
  left: 0;

  width: 100%;
  padding: 32px 16px;
  border: 1px solid var(--border-color);
  background: var(--surface-primary);
  color: var(--text-primary);

  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 2;
}

/* Project title — Desktop H5 Medium */

.project-title {
 margin: 0;
  font: var(--type-desktop-h5-medium);
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.project-subtitle {
  font: var(--type-desktop-paragraph-medium-regular);
  color: var(--color-grey-700);
}


/* Project metadata */

.project-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;

  margin-top: 6px;
}


/* Project category — Desktop Paragraph Medium Regular */

.project-category {
  font: var(--type-desktop-paragraph-medium-regular);
}

/* Hover interaction */

.project-card:hover .project-info,
.project-card:focus-visible .project-info {
  transform: translateY(0);
}

.project-card:hover .project-image {
  transform: scale(1.02);
}

.project-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

/* Cursor-following View button */
.project-view-cursor {
  width: 90px;
  height: 90px;
  border-radius: 50%;

  /* Glass effect */
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border: 1px solid rgba(255, 255, 255, 0.4);

  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.3);

  color: white;

  display: flex;
  align-items: center;
  justify-content: center;

  position: absolute;
  pointer-events: none;
  z-index: 10;

  opacity: 0;
  scale: 0.7;
  transform: translate(-50%, -50%);

  transition:
    opacity 0.3s ease,
    scale 0.3s ease;
}

.cursor-text {
  color: white;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Show on hover */
.project-card:hover .project-view-cursor {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}


/* Hide on touch devices */
@media (hover: none) {
  .project-view-cursor {
    display: none;
  }
}

/* Keyboard focus */

.project-card:focus-visible {
  outline: 2px solid var(--hero-accent);
  outline-offset: 4px;
}

/* Current project shown in the related projects grid */
.project-card--current {
  cursor: not-allowed;
  filter: grayscale(0.65);
}

.project-card--current::after {
  background: rgba(20, 30, 45, 0.38);
  opacity: 1;
}

.project-card--current .project-view-cursor {
  display: none;
}

.project-card--current:hover,
.project-card--current:focus-visible {
  box-shadow: none;
  outline: none;
}

.project-card--current:hover::after {
  opacity: 1;
}

.project-card--current:hover .project-image {
  transform: none;
}

.project-card--current:hover .project-info,
.project-card--current:focus-visible .project-info {
  transform: translateY(100%);
}

.project-current-label {
  position: absolute;
  z-index: 3;
  top: 16px;
  left: 16px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-grey-900);
  font: var(--type-desktop-caption-regular);
}

/* =========================================
   PROJECTS — MOBILE
========================================= */

@media (max-width: 600px) {

  .projects {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .projects-title {
    font-size: 32px;
    margin-bottom: 24px;
  }

  .projects-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }


}

/* Devices without hover — touch screens */
@media (hover: none) {
  .project-info {
    transform: translateY(0);
  }
}

/* =========================================
   PROJECTS — REDUCED MOTION
========================================= */

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

  .project-info,
  .project-image {
    transition: none;
  }

}



/* Card 1 — square */
.project-card {
  aspect-ratio: 1 / 1;
}


/* Projects layout */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

/* Independent columns */
.projects-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* Cards 1 and 3 — same square size */
.projects-column .project-card {
  width: 100%;
  aspect-ratio: 1 / 1;
}

/* Card 2 — taller */
.projects-column .project-card--two {
  aspect-ratio: 0.72 / 1;
}

/* Card 4 — text box */
.project-text-box {
  width: 100%;
  aspect-ratio: 1.6 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: #f5f5f5;
  border: 1px solid #999;
  overflow: hidden;
}

.project-text-box h2 span1 {
  margin: 0;
 font : var( --type-desktop-paragraph-large-regular);
  line-height: 1.2;
  
  color:var(--color-grey-900);
}

.project-text-box h2 span2 {
  color: var(--color-orange-500);
  font: var(--type-desktop-h4-bold);
}

.project-text-box h2 span3 {
  color: var(--color-grey-900);
  font: var(--type-desktop-h3-bold);
}

.project-text-box h2 span4 {
  color: var(--color-grey-700);
  font: var(--type-desktop-h3-bold);
}
/* Card 5 — full width */
.project-card--five {
  grid-column: 1 / -1;
  width: 100%;
  aspect-ratio: 2.2 / 1;
}

.project-card--five picture {
  display: block;
  width: 100%;
  height: 100%;
}

.project-card--five .project-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile */
@media (max-width: 600px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }

  .projects-column {
    gap: 20px;
  }

  .projects-column .project-card,
  .projects-column .project-card--two {
    aspect-ratio: 1 / 1;
  }

  .project-text-box {
    aspect-ratio: 1.5 / 1;
  }

  .project-card--five {
    grid-column: auto;
    aspect-ratio: 1 / 1;
  }
}



/* =========================================
   CONTACT SECTION
========================================= */

.contact-section {
  width: 100%;
  position: relative;
  box-sizing: border-box;

  background: var(--color-foundation-white);

  /* Horizontal frame lines */
  border-top: 1px solid var(--color-grey-700);
  border-bottom: 1px solid var(--color-grey-700);
}


/* =========================================
   CONTACT CONTAINER
========================================= */


.contact-container {
  width: 100%;
  max-width: 820px;
  box-sizing: border-box;

  margin: 0 auto;
  padding: 80px 24px;

  position: relative;

  /* Remove the previous border-right */
  border-right: none;
}

/* Extend vertical line above the contact section */

.contact-container::after {
  content: "";

  position: absolute;

  right: 0;
  top: -120px; /* How far the line extends upward */

  width: .5px;
  height: calc(100% + 120px);

  background: var(--color-grey-900);

  pointer-events: none;
}


/* =========================================
   CONTACT HEADER
========================================= */

.contact-header {
  margin-bottom: 40px;
}

.contact-header h2 {
  margin: 0 0 8px;

  font: var(--type-desktop-h4-medium);

  color: var(--color-foundation-black);
}

.contact-header p {
  margin: 0;

  font: var(--type-desktop-paragraph-large-regular);

  color: var(--color-foundation-black);
}


/* =========================================
   CONTACT FORM
========================================= */

.contact-form {
  width: 100%;

  display: flex;
  flex-direction: column;
  gap: 20px;
}


/* Name and email row */

.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
}


/* Individual form fields */

.form-field {
  width: 100%;
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 6px;
}


/* =========================================
   FORM LABELS
========================================= */

.form-field label {
  font: var(--type-desktop-paragraph-small-medium);

  color: var(--color-grey-700);
}


/* =========================================
   INPUTS, DROPDOWN AND TEXTAREA
========================================= */

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  box-sizing: border-box;

  font: var(--type-desktop-paragraph-small-medium);

  color: var(--color-foundation-black);
  background: var(--color-foundation-white);

  border: 1px solid var(--color-grey-700);
  border-radius: 0;

  outline: none;

  transition: border-color 0.2s ease;
}


/* Text and email inputs */

.form-field input {
  height: 44px;
  padding: 0 12px;
}


/* Project type dropdown */

.form-field select {
  height: 44px;
  padding: 0 12px;

  cursor: pointer;
}


/* Project description */

.form-field textarea {
  min-height: 120px;
  padding: 12px;

  resize: vertical;
}


/* Placeholder text */

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--color-grey-700);
  opacity: 1;
}


/* Input focus state */

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  border-color: var(--color-foundation-black);
}


/* =========================================
   SUBMIT BUTTON
========================================= */

.contact-submit {
  width: 100%;
  max-width: 320px;
  min-height: 48px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  margin-top: 4px;
  padding: 12px 20px;

  font: var(--type-desktop-paragraph-medium-medium);

  color: var(--color-foundation-black);
  background: var(--color-green-500);

  border: 1px solid var(--color-grey-700);
  border-radius: 24px;

  cursor: pointer;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}


/* Button hover */

.contact-submit:hover {
  background: var(--color-green-600);
}


/* Button active */

.contact-submit:active {
  transform: scale(0.98);
}


/* Button keyboard focus */

.contact-submit:focus-visible {
  outline: 2px solid var(--color-foundation-black);
  outline-offset: 4px;
}



/* =========================================
   TABLET
========================================= */

@media (max-width: 820px) {

  .contact-container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .contact-form-row {
    gap: 24px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

  .contact-container {
    padding: 48px 20px;
  }

  .contact-header {
    margin-bottom: 32px;
  }

  /* Stack name and email */

  .contact-form-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Full-width button */

  .contact-submit {
    max-width: 100%;
  }

}

.site-footer {
  width: 100%;
  border-top: 1px solid var(--color-grey-700);
  background: var(--color-foundation-white);
  box-sizing: border-box;
}

.footer-container {
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
  padding: 60px 24px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  box-sizing: border-box;
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 40px;
}

.footer-container a {
  color: #2458ed;
  text-decoration: none;
}

.footer-email {
  margin: 0;
  font: var(--type-desktop-paragraph-medium-regular);
}

.social-link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.social-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Mobile Footer */

@media (max-width: 600px) {

  .footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 24px 16px;
  }

  .footer-socials {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 40px;
  }

  .social-link {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .footer-email {
    margin: 0;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
  }

}

/* Top fade */

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;

  background: linear-gradient(
    to bottom,
    var(--color-foundation-white) 0%,
    rgba(255, 255, 255, 0) 100%
  );

  opacity: 0;
  pointer-events: none;
  z-index: 500;

  transition: opacity 0.5s ease;

  body:not(.scrolled)::before {
  transition: none;
  opacity: 0;
}
}

/* Show fade after scrolling */

body.scrolled::before {
  opacity: 1;
}


.contact-success,
.contact-error {
  display: none;
}

.contact-success[data-fs-active],
.contact-error[data-fs-active] {
  display: block;
}

.contact-submit.is-submitted {
  cursor: default;
}