/* Apple-tree footer: self-contained (own colors, fonts, class names prefixed "af-").
   Your old .footer* and .scroll-up-btn rules in index.css are no longer used and can be deleted. */
.apple-footer {
  --af-bg: #fffbfb;
  --af-ink: #1c1c1c;
  --af-grey: #585858;
  --af-light: #a29fa0;
  --af-pink: #d3a0a0;
  --af-red: #d9272e;
  --af-green: #70b074;
  position: relative;
  margin-top: 4rem;
  background: var(--af-bg);
  color: var(--af-ink);
  font-family: "Larsseit", "Figtree", -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.apple-footer *, .apple-footer *::before, .apple-footer *::after { box-sizing: border-box; }
.apple-footer a { color: inherit; text-decoration: none; }

#footer-scene { display: block; width: 100%; height: 220px; }   /* the orchard floor: ground, grass, apples, cat */
.af-scene { position: relative; }
.af-warning {
  position: absolute;
  top: 1rem;
  left: 3rem;
  margin: 0;
  color: var(--af-grey);
  font-size: 14px;
}

.af-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 3rem 4rem;
  align-items: end;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem 3rem 2.5rem;
}

/* big thank-you */
.af-thanks {
  margin: 0;
  font-size: clamp(2.4rem, 6.4vw, 5.6rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

/* contact + links (pink on hover), labelled like the hero's EDUCATION label */
.af-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.af-col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; }
.af-label {
  margin-bottom: 0.35rem;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--af-light);
}
.af-col a {
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  color: var(--af-grey);
  overflow-wrap: anywhere;
  transition: color 0.2s ease;
}
.af-col a:hover { color: var(--af-pink); }
.af-col a:not(.af-email)::after { content: "↗"; margin-left: 6px; font-size: 14px; color: var(--af-light); }
.af-col a.af-email { color: var(--af-ink); }
.af-col a.af-email:hover { color: var(--af-pink); }
.af-email {
  padding-bottom: 3px;
  border-bottom: 2px solid var(--af-pink);
  transition: border-color 0.2s ease;
}

/* bottom row: dotted line like the soil */
.af-bottom {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 2px dotted rgba(28, 28, 28, 0.18);
}
.af-copy { font-size: 15px; font-weight: 300; color: var(--af-light); }
.af-up {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border: 1.5px solid #d6d1d1;
  border-radius: 16px;
  background: none;
  color: var(--af-grey);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.af-up:hover {
  background: rgba(112, 176, 116, 0.18);
  border: var(--af-green);
  color: var(--af-green);
  transform: translateY(-2px);
}

@media (min-width: 821px) {
  .af-cols {
    grid-template-columns: minmax(0, max-content) max-content;
    justify-self: end;
    width: max-content;
    max-width: 100%;
    column-gap: 4rem;
  }
  .af-col { align-items: flex-end; }
  .af-label { align-self: flex-start; }
}

@media (max-width: 820px) {
  #footer-scene { height: 170px; }
  .af-warning { left: 1.5rem; }
  .af-inner { grid-template-columns: 1fr; padding: 1rem 1.5rem 2rem; gap: 2.25rem; }
  .af-bottom { grid-column: 1; }
}