/* LUNARTECH Academy: Success stories (/about/success-stories), generated by tools/stories/build.mjs. Pure black surfaces; the type, text colours, edges and spacing are the home page's, measured from it.
   Parts in page order: header, one image, logos, numbers, testimonials, fellows, press, what we build, logo wall. Where the home page has the part, its own stylesheet does the work and this file only
   changes what the page needs: logos (lunartech-logo-strip), numbers (lunartech-metrics), testimonials (lunartech-voices), what we build (lunartech-programs). Fellows is lunartech-fellows-slider, copied from lunartech.ai/fellows.
   The header's glass is shared (lunartech-header-hero.css): don't restyle it here. Nothing here uses 100vw for layout, so the page never scrolls sideways. */

html:has(body.ss-body) { background-color: #000; }
body.ss-body { margin: 0; background-color: #000; color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body.ss-body ::selection { background: #fff; color: #000; }

/* --ss-text: where the home page's text sections start (.container.padding-9rem, 10% on small screens), eased on small laptops so three columns of testimonials still fit.
   --ss-gut: where the home page's stage sits (.lt-programs, min(88vw, 1640px)). */
.ss-main { --ss-text: min(10vw, 9rem); --ss-gut: calc((var(--ss-w, 100vw) - min(88vw, 1640px)) / 2); position: relative; display: block; overflow-x: clip; background-color: #000; color: #fff; font-family: 'Inter', sans-serif; font-weight: 300; padding-bottom: clamp(5rem, 9vw, 9rem); }
.ss-main :focus-visible { outline: 1px solid #fff; outline-offset: 3px; }
.ss-wrap { width: 100%; padding-right: var(--ss-text); padding-left: var(--ss-text); box-sizing: border-box; }
.ss-sec { padding-top: var(--lt-space-10); } /* the spacer that opens each section on the home page */

/* ───────────── type: the home page's. Titles are .lt-voices-title in two tones, with the template's .highlight; short text is .lt-prog-lede ───────────── */
.ss-main h2.ss-title { margin: 0; font-family: 'Inter', sans-serif; font-size: 3.33vw; font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; text-transform: none; color: #f5f5f5; text-wrap: balance; }
.ss-main h2.ss-center { max-width: 62vw; margin: 0 auto; text-align: center; }
.ss-main .ss-sub { max-width: 34rem; margin: 0; font-family: 'Geist', sans-serif; font-size: 15px; font-weight: 300; line-height: 1.6; color: #9a9a9a; }
.ss-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.2rem clamp(2rem, 6vw, 7rem); align-items: end; }

/* ───────────── the header: a giant wordmark moving through a full-height section, three columns along the bottom ───────────── */
.ss-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100vh; padding-bottom: 4rem; overflow: hidden; box-sizing: border-box; background-color: #000; }
.ss-hero-mark { position: absolute; top: 50%; left: 0; z-index: 1; display: flex; width: 200%; transform: translateY(-50%); }
.ss-hero-run { flex: none; display: inline-block; white-space: nowrap; animation: ss-hero-run 30s linear infinite; will-change: transform; }
@keyframes ss-hero-run { to { transform: translateX(-50%); } }
.ss-main .ss-hero-words { margin: 0; font-family: 'Inter', sans-serif; font-size: 10rem; font-weight: 200; line-height: 1; letter-spacing: -0.01em; text-transform: none; white-space: nowrap; color: #fff; } /* the home page's largest section heading: .intro-text, Inter 200, -0.01em */
@media (min-width: 768px) { .ss-main .ss-hero-words { font-size: 16rem; } }
@media (min-width: 1024px) { .ss-main .ss-hero-words { font-size: 20rem; } }
@media (min-width: 1280px) { .ss-main .ss-hero-words { font-size: 24rem; } }

.ss-hero-row { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; margin-top: auto; }
.ss-hero-desc { justify-self: start; max-width: 65ch; padding-right: 4rem; padding-left: var(--ss-text); }
.ss-main .ss-hero-text { margin: 0; font-family: 'Geist', sans-serif; font-size: 14px; font-weight: 300; line-height: 1.6; letter-spacing: 1px; text-transform: uppercase; color: #fff; }
.ss-hero-year { display: flex; align-items: center; justify-content: center; padding-right: 4rem; padding-left: 4rem; }
.ss-year { font-family: 'Inter', sans-serif; font-size: 4rem; font-weight: 300; color: #fff; opacity: 0.16; }
.ss-hero-feature { display: flex; align-items: center; justify-content: flex-end; justify-self: end; padding-right: var(--ss-text); padding-left: 4rem; }
.ss-feature { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1rem; }
.ss-feature-head { display: flex; align-items: center; justify-content: flex-start; gap: 1rem; }
.ss-dot { flex-shrink: 0; width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: #fff; }
.ss-feature-title { font-family: 'Geist', sans-serif; font-size: 14px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; color: #fff; }
.ss-feature-text { max-width: 26ch; font-family: 'Geist', sans-serif; font-size: 14px; font-weight: 300; line-height: 1.6; letter-spacing: 1px; text-transform: uppercase; color: #fff; }

/* ───────────── one video, the home page's: grows to full width as you scroll to it ───────────── */
.ss-reveal { --ss-t: 0; height: 150vh; }
.ss-reveal-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; clip-path: inset(calc(9% * (1 - var(--ss-t))) calc(15% * (1 - var(--ss-t))) calc(9% * (1 - var(--ss-t))) calc(15% * (1 - var(--ss-t))) round calc(22px * (1 - var(--ss-t)))); }
.ss-reveal-video { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; background-color: #000; }

/* ───────────── the logos: the home page's rolling strip, running the full width of the page, with its own soft edges ─────────────
   --ss-logo: the home page's 184px box, growing only past about 1720px so a large screen keeps the same proportions.
   --ss-logo-gap: no doubles at any width. A logo and its copy are one row and its margin apart, 5 * (logo + gap), and that must be at least the page plus one logo,
   so a logo has fully left before its copy arrives: gap = (page - 4 logos) / 5, never under the home page's 74px. */
.ss-body .lt-logos { --ss-logo: clamp(184px, calc(var(--ss-w, 100vw) * 0.107), 320px); --ss-logo-gap: max(74px, calc((var(--ss-w, 100vw) - 4 * var(--ss-logo)) / 5)); --lt-logos-bg: #000; padding: 0; background-color: #000; }
.ss-body .lt-logos .container-default-home { max-width: none; padding-right: 0; padding-left: 0; }
.ss-body .lt-logos .logo-strip-wrapper-2 { column-gap: 0; } /* the template's 16px between rows would make the loop jump by that much each time it restarts */
/* 60s keeps the home page's speed, about 32px a second, now that a row is longer. The loop is one row and its margin, so it closes exactly: the home page's -100% leaves a small jump. */
.ss-body .lt-logos .logo-strip-row.logo-strip-large { flex: none; grid-template-columns: repeat(5, var(--ss-logo)); column-gap: var(--ss-logo-gap); min-width: 0; margin-right: var(--ss-logo-gap); animation-name: ss-logos; animation-duration: 60s; }
@keyframes ss-logos { to { transform: translateX(calc(-100% - var(--ss-logo-gap))); } }

/* ───────────── numbers: the home component with its hairlines and its spacing ─────────────
   Centred in each column, under the centred heading: left-aligned text capped at 24ch left the row sitting up to 183px left of centre. */
.ss-body #numbers { padding-bottom: var(--lt-space-10); }
.ss-body .ss-metrics { margin-top: max(3rem, 8.89vw); text-align: center; }
.ss-body .ss-metrics .lt-metric { align-items: center; }
.ss-body .ss-metrics .lt-metric-roll { justify-content: center; }

/* ───────────── testimonials: every review on the home page's card (lunartech-voices), in three columns moving up, down, up, pausing under the pointer ───────────── */
.ss-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: var(--lt-space-4); }
.ss-col .lt-voice { width: auto; margin: 0 0 16px; background-color: #000; } /* a margin rather than a gap, so half the track is exactly one set of cards */
.ss-col { height: clamp(36rem, 82vh, 50rem); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }
.ss-col-track { animation: ss-col-up var(--d, 105s) linear infinite; will-change: transform; }
.ss-col-track--down { animation-name: ss-col-down; }
.ss-col-track:hover { animation-play-state: paused; }
@keyframes ss-col-up { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }
@keyframes ss-col-down { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(0, 0, 0); } }

/* ───────────── fellows: the slider from lunartech.ai/fellows, on black, in the home page's fonts ───────────── */
.ss-body {
  --lt-fellows-section-bg: #000;
  --lt-fellows-black: #fff;
  --lt-fellows-white: #fff;
  --lt-fellows-card-bg: #000;
}
.ss-body .lt-fellows-section { font-family: 'Geist', sans-serif; font-weight: 300; }
.ss-body .lt-fellows-section .padding-global { padding-right: var(--ss-text); padding-left: var(--ss-text); }
.ss-body .lt-fellows-section .container { max-width: none; overflow: visible; } /* the template clips every .container, which cut the row short of the screen's edges */
.ss-body .lt-fellows-section .about-home-component { margin-top: var(--lt-space-4); margin-bottom: 0; }
.ss-body .lt-fellows-section .slider-component.wrapper { padding: 0 0 6rem; }
.ss-body [data-lt-slider] [data-lt-slider-rail] { padding-right: var(--ss-text); padding-left: var(--ss-text); }
/* the arrows are the home page's (.lt-prog-arrow) */
.ss-body [data-lt-slider] [data-lt-slider-prev],
.ss-body [data-lt-slider] [data-lt-slider-next] { width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.16); background: transparent; color: #e6e6e6; }
.ss-body [data-lt-slider] [data-lt-slider-next] { left: calc(44px + 0.6rem); }
.ss-body [data-lt-slider] .slider-arrow-icon { width: 16px; height: 16px; }
.ss-body [data-lt-slider] [data-lt-slider-prev]:hover,
.ss-body [data-lt-slider] [data-lt-slider-next]:hover { border-color: rgba(255, 255, 255, 0.34); background: rgba(255, 255, 255, 0.08); }
.ss-body [data-lt-slider] [data-lt-slider-prev]:focus-visible,
.ss-body [data-lt-slider] [data-lt-slider-next]:focus-visible { box-shadow: none; outline: 1px solid rgba(255, 255, 255, 0.6); outline-offset: 3px; }
.ss-body .fellow-card-media { background: #000; }
/* a little shade at the top, so the pill stays readable on the portraits with white walls */
.ss-body .fellow-card-media::after { content: ''; position: absolute; inset: 0 0 auto 0; z-index: 1; height: 30%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0)); pointer-events: none; transition: opacity 180ms ease; }
.ss-body .fellow-card.is-playing .fellow-card-media::after { opacity: 0; }
/* opened wide, a portrait crops to its forehead at the original 20%: slide to the face as the card opens. --open-y is each fellow's own, from the build */
.ss-body .fellow-card-thumb { transition: transform 2200ms var(--lt-ease-prestige), opacity 620ms ease, object-position 1500ms var(--lt-ease-prestige); }
.ss-body .fellow-card.is-expanded .fellow-card-thumb { object-position: center var(--open-y, 38%); }
.ss-body .fellow-card-rank { font-weight: 400; }
/* text-align: end in the original puts the name under the pill at the top; this starts it at the bottom, on the card's shade */
.ss-body .fellow-card-name-vertical { text-align: start; }
.ss-main .fellow-card-name { font-family: 'Inter', sans-serif; font-weight: 300; letter-spacing: -0.01em; color: #fff; }
.ss-main .fellow-card-role { font-weight: 300; }
.ss-body .fellow-card-tag { font-weight: 300; }
.ss-body .fellow-card-name-vertical { font-weight: 400; }

/* ───────────── press: a moving row of white logos and the coverage itself. Six cells, each at least a fifth of the showing width, so a set is always wider than the screen by more than a cell: nothing is on screen twice ───────────── */
.ss-press { max-width: 1700px; margin: var(--lt-space-4) auto 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } /* the same soft edge as the home page's moving rows */
.ss-press-track { display: flex; align-items: stretch; width: max-content; animation: ss-press 60s linear infinite; will-change: transform; }
.ss-press:hover .ss-press-track, .ss-press:focus-within .ss-press-track { animation-play-state: paused; }
@keyframes ss-press { to { transform: translate3d(-50%, 0, 0); } }
.ss-press-cell { display: flex; flex: none; flex-direction: column; width: max(300px, calc(min(var(--ss-w, 100vw), 1700px) / 4)); min-height: 13rem; padding: 0.4rem clamp(1.5rem, 2.4vw, 2.5rem); box-sizing: border-box; border-left: 1px solid rgba(255, 255, 255, 0.07); color: #fff; text-decoration: none; }
.ss-press-cell--logo { justify-content: center; }
.ss-press-mark { display: flex; flex: none; align-items: center; height: 40px; }
.ss-press-mark img { display: block; width: auto; max-width: 170px; max-height: 30px; filter: brightness(0) invert(1); } /* dark files, turned white */
.ss-press-word { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 300; letter-spacing: -0.01em; white-space: nowrap; color: #f5f5f5; }
/* the home page's quote and small print (.lt-voice-quote p, .lt-voice-role) */
.ss-press-head { display: block; margin-top: 1.3rem; font-family: 'Geist', sans-serif; font-size: 15px; font-weight: 300; line-height: 1.65; color: #b5b5b5; }
.ss-press-src { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: auto; padding-top: 1.2rem; font-family: 'Geist', sans-serif; font-size: 11px; font-weight: 300; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: #6a6a6a; }
.ss-press-src svg { flex: none; width: 13px; height: 13px; }
a.ss-press-cell:hover .ss-press-head { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ───────────── what we build: the home page's stage as it is (width, height, type and text colours are lunartech-programs), on this page's black ───────────── */
.ss-body .lt-programs { padding-top: var(--lt-space-10); background-color: #000; }
.ss-body .lt-prog-card { background-color: #000; }
/* heavier than the home page, because these pictures are far brighter: solid black under the words at the bottom left, and under the 58px of tabs, with the picture rising out of it */
.ss-body .lt-prog-media::after { background:
  radial-gradient(70% 90% at 0% 100%, #000 55%, rgba(0, 0, 0, 0) 100%),
  linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.97) 22%, rgba(0, 0, 0, 0.78) 38%, rgba(0, 0, 0, 0.2) 56%, rgba(0, 0, 0, 0) 68%),
  linear-gradient(0deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0) 34%),
  linear-gradient(180deg, #000 58px, rgba(0, 0, 0, 0) 170px); }
/* the panel stays smoked black over these colours: without this it takes on the tint of whatever is behind it */
.ss-body .lt-prog-panel { background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 42%), rgba(6, 6, 8, 0.72); -webkit-backdrop-filter: blur(22px) saturate(45%) brightness(0.5); backdrop-filter: blur(22px) saturate(45%) brightness(0.5); }
@media (min-width: 992px) {
  .ss-body .lt-prog-rail { grid-template-columns: repeat(10, minmax(0, 1fr)); } /* ten tabs on one line; the home page has six */
  .ss-body .lt-prog-tab b { display: none; } /* no room for the numbers beside ten names */
}
/* the pictures: the user's light ribbons on black, shown at full strength. The home page dims each of its own. */
.ss-body .lt-prog-card .lt-prog-img { object-position: 50% 50%; filter: brightness(1); }
/* the stats: up to four on a slide, and their labels carry the before and after, so they wrap in a narrow column rather than run on under the panel. Two by two on a phone. */
.ss-body .lt-prog-stat { flex: 0 1 auto; min-width: 0; }
.ss-body .lt-prog-stat span { max-width: 15ch; white-space: normal; }
@media (max-width: 767px) {
  .ss-body .lt-prog-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1rem; }
  .ss-body .lt-prog-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
}
/* the button: transparent, a hairline with a dim glow around and inside it, and an arrow that turns over when you point at the slide. Nothing fills it, including on hover, where the home page's turns white. */
.ss-body .lt-prog-go { gap: 0.75rem; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.2); background-color: transparent; box-shadow: 0 0 22px rgba(255, 255, 255, 0.06), inset 0 0 14px rgba(255, 255, 255, 0.04); font-weight: 300; color: #f5f5f5; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.ss-body .lt-prog-card:hover .lt-prog-go, .ss-body .lt-prog-card:focus-visible .lt-prog-go { border-color: rgba(255, 255, 255, 0.36); background-color: transparent; box-shadow: 0 0 28px rgba(255, 255, 255, 0.11), inset 0 0 18px rgba(255, 255, 255, 0.07); }
.ss-body .lt-prog-go-label { white-space: nowrap; }
.ss-body .lt-prog-go-arrow { position: relative; flex: none; width: 16px; height: 16px; overflow: hidden; }
.ss-body .lt-prog-go-arrow svg { position: absolute; top: 0; left: 0; width: 16px; height: 16px; transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ss-body .lt-prog-go-arrow svg:last-child { transform: translateX(-24px); }
@media (hover: hover) {
  .ss-body .lt-prog-card:hover .lt-prog-go-arrow svg:first-child { transform: translateX(24px); }
  .ss-body .lt-prog-card:hover .lt-prog-go-arrow svg:last-child { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-body .lt-prog-go, .ss-body .lt-prog-go-arrow svg { transition: none; }
}

/* ───────────── the logo wall: their pasted layout, five rows of white logos moving sideways. Seven columns, each at least a fifth of the showing width, so a set is wider than the screen by a column: no logo is ever on screen twice ───────────── */
.ss-wall { max-width: 1700px; margin: var(--lt-space-4) auto 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ss-wall-track { display: grid; grid-template-rows: repeat(5, auto); grid-auto-flow: column; grid-auto-columns: max(220px, calc(min(var(--ss-w, 100vw), 1700px) / 5)); width: max-content; animation: ss-wall 60s linear infinite; will-change: transform; }
@keyframes ss-wall { to { transform: translate3d(-50%, 0, 0); } }
.ss-wall-cell { display: flex; align-items: center; justify-content: center; gap: 0.6rem; height: clamp(88px, 8.4vw, 132px); padding: 0 1rem; box-sizing: border-box; }
.ss-wall-cell img { display: block; flex: none; width: auto; height: auto; max-width: 140px; max-height: 30px; filter: brightness(0) invert(1); } /* every file turned white */
.ss-wall-word { font-family: 'Inter', sans-serif; font-size: clamp(15px, 1.25vw, 19px); font-weight: 400; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; color: #fff; }
/* square and two-line marks read smaller than wordmarks at the same height */
.ss-wall-cell img[src*="/american-express."] { max-height: 50px; }
.ss-wall-cell img[src*="/ey."] { max-height: 44px; }
.ss-wall-cell img[src*="/ibm."], .ss-wall-cell img[src*="/aws."], .ss-wall-cell img[src*="/cisco."] { max-height: 38px; }
.ss-wall-cell img[src*="/linux-foundation."] { max-height: 42px; }

/* ───────────── narrower screens ───────────── */
/* Small laptops: the header's two text columns give up their wide gutters, so the description keeps to a few lines and stays clear of the big word. */
@media (min-width: 992px) and (max-width: 1439px) {
  .ss-hero-desc { padding-right: 1.5rem; }
  .ss-hero-year { padding-right: 1rem; padding-left: 1rem; }
  .ss-hero-feature { padding-left: 1.5rem; }
}
@media (max-width: 991px) {
  .ss-main h2.ss-title { font-size: 5vw; }
  .ss-main h2.ss-center { max-width: none; }
  .ss-split { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ss-hero-row { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .ss-hero-year { display: none; }
  .ss-hero-feature { justify-content: flex-start; justify-self: start; padding-right: var(--ss-text); padding-left: var(--ss-text); }
  .ss-cols { grid-template-columns: minmax(0, 1fr); }
  .ss-col { height: 26rem; }
  .ss-body .lt-prog-media::after { background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 62%); }
}
@media (max-width: 767px) {
  .ss-main h2.ss-title { font-size: 8vw; }
  .ss-press, .ss-wall { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .ss-hero { padding-bottom: 2.5rem; }
  .ss-hero-desc { padding-right: var(--ss-text); }
  .ss-main .ss-hero-text, .ss-feature-title, .ss-feature-text { font-size: 12.5px; }
  .ss-reveal { height: auto; }
  .ss-reveal-pin { position: relative; height: auto; aspect-ratio: 4 / 3; clip-path: none; }
  /* an opened card is wider than a phone and centred on it, so the name moves in from the card's edge to the screen's */
  .ss-body .fellow-card-meta { right: calc(50% - var(--ss-w, 100vw) / 2 + var(--ss-gut)); left: calc(50% - var(--ss-w, 100vw) / 2 + var(--ss-gut)); }
  /* the same for the playing video: the whole picture and its controls on the screen, not running off its edges */
  .ss-body .fellow-card.is-playing .fellow-card-media video { right: auto; left: calc(50% - var(--ss-w, 100vw) / 2); width: var(--ss-w, 100vw); }
}
@media (prefers-reduced-motion: reduce) {
  .ss-hero-run, .ss-col-track, .ss-press-track, .ss-wall-track { animation: none; }
  .ss-press, .ss-wall { overflow-x: auto; }
  [aria-hidden="true"].ss-press-cell, [aria-hidden="true"].ss-wall-cell { display: none; }
  .ss-reveal { height: auto; }
  .ss-reveal-pin { position: relative; clip-path: none; }
  .ss-col { height: auto; -webkit-mask-image: none; mask-image: none; }
  [aria-hidden="true"].lt-voice { display: none; }
}