/* Get Involved, on top of css/lunartech-contact.css (same type and form). White on black.
   One vertical line runs down the page, the left edge of the right-hand column: the title and the five ways stand beside the picture, the form's heading and links beside the form.
   Hierarchy comes from size and space, not grey. Nothing moves at rest: only the row and the picture answer the pointer, and only with opacity and a small shift. */

.ab { --ab-gap: clamp(3rem, 6vw, 6rem); }

/* ---------- The title, the five ways and the picture ---------- */

.ab-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "head art" "ways art"; column-gap: var(--ab-gap); }

.ab-head { grid-area: head; }
.ab-head .ct-title { margin-top: -0.11em; } /* the letters, not their line box, meet the top of the picture */
.ab-head .ct-lede { margin: 1.1rem 0 0; }

.ab-ways { grid-area: ways; align-self: end; display: flex; flex-direction: column; margin-top: clamp(2.5rem, 4vw, 4rem); }
.ab-way { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; align-items: center; padding: clamp(0.95rem, 1.2vw, 1.3rem) 0; color: #fff; text-decoration: none; }
.ab-way:last-child { padding-bottom: 0; } /* the last line of text ends level with the picture */
.ab-way:hover { color: #fff; }
.ab-way-name { grid-column: 1; font-family: Inter, sans-serif; font-size: clamp(1.2rem, 1.35vw, 1.55rem); font-weight: 300; line-height: 1.25; letter-spacing: -0.012em; color: inherit; }
.ab-way-text { grid-column: 1; margin-top: 0.4rem; font-family: Geist, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.5; color: inherit; }
.ab-way svg { grid-column: 2; grid-row: 1 / span 2; flex: none; }

/* The way under the pointer stays; the others step back. Lifted out of the page's no-transition rule on purpose. */
.ct a.ab-way { transition: opacity 0.28s ease !important; }
.ct a.ab-way svg { transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) !important; }
@media (hover: hover) {
  .ct .ab-ways:hover a.ab-way:not(:hover) { opacity: 0.36; }
  .ct a.ab-way:hover svg { transform: translateX(4px); }
}
.ct a.ab-way:focus-visible { outline-offset: 6px; }

/* The picture: one at a time, in pure black and silver. It takes its height from the column beside it. */
.ab-art { grid-area: art; position: relative; overflow: hidden; border-radius: 16px; background: #000; }
.ab-art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: grayscale(1); }
.ab-art img.is-on { opacity: 1; }
.ct .ab-art img { transition: opacity 0.6s ease !important; }
/* Some pictures are pure black to their edges: this keeps the same frame around all five, so none reads as cut off. */
.ab-art::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); pointer-events: none; }

/* ---------- The form ---------- */

.ab-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "title form" "more form"; column-gap: var(--ab-gap); margin-top: clamp(5.5rem, 10vw, 10rem); scroll-margin-top: 120px; }

/* .lt-paths-title, held to what fits its column on very wide and narrow desktops */
.ab-h2 { grid-area: title; margin: -0.13em 0 0; font-family: Inter, sans-serif; font-size: clamp(1.7rem, 2.2vw, 2.65rem); font-weight: 300; line-height: 1.14; letter-spacing: -0.01em; text-transform: none; color: #fff; }
.ab-form { grid-area: form; padding: 0; }

/* Level with the button across the way */
.ab-more { grid-area: more; align-self: end; display: flex; flex-wrap: wrap; gap: 1.8rem clamp(2.5rem, 5vw, 5rem); margin-top: 3rem; }
.ab-more .ct-item > a { display: block; }

/* ---------- Smaller screens ---------- */

@media (min-width: 992px) {
  .ab { padding-top: 152px; }
  .ab-head .ct-title { font-size: clamp(2.4rem, 3.33vw, 4rem); }
}
@media (max-width: 991px) {
  .ab-top { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "art" "ways"; }
  .ab-head .ct-title { margin-top: 0; }
  .ab-art { aspect-ratio: 16 / 9; margin-top: 2.2rem; }
  .ab-ways { margin-top: 1.4rem; }
  .ab-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "title" "form" "more"; margin-top: clamp(4.5rem, 12vw, 6.5rem); }
  .ab-h2 { margin: 0 0 2.2rem; font-size: clamp(1.5rem, 4.4vw, 2.2rem); }
}
@media (max-width: 479px) {
  .ab-art { aspect-ratio: 4 / 3; }
  .ab-way { column-gap: 1.25rem; }
  .ab-more { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .ct a.ab-way, .ct a.ab-way svg, .ct .ab-art img { transition: none !important; }
  .ct a.ab-way:hover svg { transform: none; }
}