/* LUNARTECH footer, on every page (the bootcamp pages link this sheet too). Ultra-minimal: small light type (Geist 300), dim links that
   brighten on hover, hairline rules and plenty of air; no bold or large type.
   Left: LUNARTECH RISE ACADEMY logo, tagline, Connect. Right: eight link columns in one grid (so they line
   up), as two rows of four under a hairline each. Below them, a large LUNARTECH logo, then the fine print. */

/* The footer is black, always, on every page (the user's rule, 8 Nov 2026). It paints its own black instead of
   showing whatever is behind it: on 8 Nov the home page lost its black page colour and the footer came out white.
   !important so no page's stylesheet can turn it another colour. */
.footer-section { background-color: #000 !important; }

.lt-footer-top, .lt-footer-top a, .lt-footer-top p, .lt-footer-top div, .lt-footer-top li { font-family: 'Geist', sans-serif; }
.lt-footer-top ul { margin: 0; padding: 0; list-style: none; }
.footer-top.lt-footer-top { padding-top: 10rem; padding-bottom: 6rem; }

/* Brand: the LUNARTECH RISE ACADEMY logo, quiet tagline, Connect below */
.lt-footer-brand { flex: 0 0 auto; max-width: 17.5rem; }
.footer-text.lt-footer-tagline { max-width: none; margin: 0; font-size: 13px; font-weight: 300; line-height: 1.75; color: #6a6a6a; }
.lt-footer-connect { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 3rem; }
.lt-footer-socials { display: flex; gap: 8px; }
.lt-footer-social { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.1); color: #8a8a8a; transition: border-color 0.3s, color 0.3s; }
.lt-footer-social svg { width: 13px; height: 13px; }
.lt-footer-social:hover { border-color: rgba(255, 255, 255, 0.32); color: #e6e6e6; }

/* Link grid: column widths fit their longest link and are shared by both rows */
.lt-footer-grid { display: grid; grid-template-columns: repeat(4, max-content); justify-content: space-between; column-gap: 3.5rem; flex: 1 1 auto; max-width: 52rem; margin-left: 6rem; }
/* a hairline above each row of four */
.lt-footer-chapter { grid-column: 1 / -1; height: 1px; margin-bottom: 2.25rem; background-color: rgba(255, 255, 255, 0.07); }
.lt-footer-chapter ~ .lt-footer-chapter { margin-top: 4.5rem; }

.lt-footer-col-title { margin-bottom: 1.4rem; font-size: 11px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: #a3a3a3; }
.lt-footer-col li + li { margin-top: 0.85rem; }
.lt-footer-link { font-size: 13px; font-weight: 300; line-height: 1.5; color: #6a6a6a; text-decoration: none; white-space: nowrap; transition: color 0.3s; }
.lt-footer-link:hover { color: #e6e6e6; }

/* Fine print, in the same quiet scale */
.footer-section .footer-footer-bottom p, .footer-section .footer-footer-bottom .footer-bottom-text { font-family: 'Geist', sans-serif; font-size: 12px; font-weight: 300; letter-spacing: 0.02em; }
.footer-section .footer-footer-bottom p.font-dark-gray { color: #4f4f4f; }
.footer-section .footer-footer-bottom .footer-bottom-text { color: #7a7a7a; transition: color 0.3s; }
.footer-section .footer-footer-bottom a:hover .footer-bottom-text { color: #e6e6e6; }

/* LUNARTECH RISE ACADEMY logo at the head of the footer: the logo, a hairline and "RISE ACADEMY"
   sized to the wordmark's capitals, always on one line */
.lt-footer-rise { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 1.75rem; text-decoration: none; }
.lt-footer-rise-logo { display: block; width: auto; height: 28px; }
.lt-footer-rise-divider { width: 1px; height: 14px; background-color: rgba(255, 255, 255, 0.35); }
.lt-footer-rise-word { margin-right: -0.16em; font-size: 13.5px; font-weight: 300; line-height: 1; letter-spacing: 0.16em; color: #fff; white-space: nowrap; }

/* The large LUNARTECH logo below the links, above the fine print. It reaches past the footer's
   side padding (4.5rem here, 10% below 992px) to 1.5rem from the screen edges. The white logo is
   recoloured to a solid near-black grey (#1a1a1a, not a see-through white) that fades down into
   the footer from 30% of its height. */
.lt-footer-mark { margin: 0 -3rem; padding-bottom: 5rem; }
.lt-footer-mark img {
  display: block; width: 100%; height: auto; filter: brightness(0.1);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, rgba(0, 0, 0, 0.3) 85%);
  mask-image: linear-gradient(to bottom, #000 30%, rgba(0, 0, 0, 0.3) 85%);
}

/* The logo block above the links once the two no longer fit side by side */
@media (max-width: 1199px) {
  .lt-footer-top { flex-direction: column; align-items: flex-start; gap: 4.5rem; }
  .lt-footer-brand { max-width: none; }
  .lt-footer-grid { width: 100%; max-width: none; margin-left: 0; }
}

/* Origin centres the footer from here down */
@media (max-width: 991px) {
  .lt-footer-top { align-items: center; }
  .lt-footer-connect { align-items: center; }
  .lt-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: stretch; column-gap: 2rem; }
  .lt-footer-link { white-space: normal; }
  /* the side padding is 10% of the footer, i.e. 12.5% of its content width */
  .lt-footer-mark { margin: 0 calc(-12.5% + 1rem); }
}

/* Phones: two columns per row */
@media (max-width: 767px) {
  .footer-top.lt-footer-top { padding-top: 7rem; padding-bottom: 4rem; }
  .lt-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 2.75rem; }
  .lt-footer-chapter { margin-bottom: 0; }
  .lt-footer-chapter ~ .lt-footer-chapter { margin-top: 1.5rem; }
}

/* The smallest phones: a slightly smaller logo keeps the footer logo and "RISE ACADEMY" inside the padding */
@media (max-width: 359px) {
  .lt-footer-rise { gap: 10px; }
  .lt-footer-rise-logo { height: 24px; }
}

/* The CTA above the footer, "Be the One Who Understands.", stays on one line at every width.
   It is about 14em wide, so 6vw keeps it inside the viewport (Origin steps between 6.67vw and 14vw). */
.cta-title { font-size: 6vw; white-space: nowrap; }