/* LUNARTECH RISE Academy: the base every page stands on. Written for this site on 2026-11-08 to replace the stylesheet that came with
   the Origin Studio template (archived in SUNRISE/archive/template-base-2026-11-08), so no page loads the template's code any more.
   It holds only what was measured to change something on the site's pages, at desktop, tablet and phone widths.
   The page stylesheets (css/lunartech-*.css) load after it and refine it. tools/bootcamps/build.mjs reads it too: it copies the
   header and footer parts, scoped, onto the bootcamp and fellowship pages, so keep it plain CSS (no nesting, no layers).
   Order matters in a few places, noted where it does. */

/* ---------- Reset: the same starting point in every browser ---------- */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-family: sans-serif;
  height: 100%;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
[hidden] { display: none; }
a:active, a:hover { outline: 0; }
b, strong { font-weight: bold; }
sub, sup { position: relative; }
svg:not(:root) { overflow: hidden; }

/* Form controls take the text around them. Number and search fields lose the browser's own buttons. */
button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }
button, select { text-transform: none; }
button, input[type="button"], input[type="reset"] { -webkit-appearance: button; }
button[disabled], html input[disabled] { cursor: default; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
input { line-height: normal; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
optgroup { font-weight: bold; }
table { border-spacing: 0; }

* { box-sizing: border-box; }
body { min-height: 100%; margin: 0; }
img { display: inline-block; max-width: 100%; vertical-align: middle; }
p { margin-top: 0; }
button, [type="button"], [type="reset"] { border: 0; cursor: pointer; }
label { font-weight: bold; }

/* ---------- Layout helpers the page builds share ---------- */

.lt-inline-block { max-width: 100%; }
.lt-container { max-width: 940px; margin-left: auto; margin-right: auto; }
.lt-container::before, .lt-container::after { content: " "; display: table; grid-area: 1 / 1 / 2 / 2; }
.lt-container::after { clear: both; }
@media screen and (max-width: 991px) { .lt-container { max-width: 728px; } }
@media screen and (max-width: 479px) { .lt-container { max-width: none; } }

/* A video that fills its box and never shows the phone's play button. */
.lt-background-video { overflow: hidden; }
.lt-background-video > video { width: 100%; height: 100%; object-fit: cover; }
.lt-background-video > video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }

.lt-blockcontainer { max-width: 940px; margin-left: auto; margin-right: auto; }
@media screen and (max-width: 991px) { .lt-blockcontainer { max-width: 728px; } }
@media screen and (max-width: 767px) { .lt-blockcontainer { max-width: none; } }

/* ---------- Tokens ---------- */

:root {
  --black: #050505;
  --white: whitesmoke;
  --transparent: transparent;
  --lt-font: Inter, sans-serif;
  --lt-grey: #aaa;
  --lt-highlight: var(--lt-grey);   /* words lit as you scroll (js/lunartech-home-motion.js reads it) */
  --lt-quiet: #999;                 /* words before they light up */
  --lt-red: #f9452d;
  --lt-line: #ffffff0d;             /* hairlines */
  --lt-veil: #ffffff05;             /* the faint fill behind the moving label */
  --lt-radius: 8px;
  /* Sizes that grow with the window on a desktop and step down on smaller screens (set again on body below, per screen). */
  --lt-h2: 4.44vw;
  --lt-h3: 3.33vw;
  --lt-space-1: 1.1vw;
  --lt-space-4: 4.4vw;
  --lt-space-10: 11.11vw;
}
/* The steps go on body, not :root, so the bootcamp pages' copy of the header and footer keeps the desktop sizes, as it always has. */
@media screen and (max-width: 991px) { body { --lt-h2: 3.5rem; --lt-h3: 3rem; --lt-space-1: 1rem; --lt-space-4: 4rem; --lt-space-10: 10rem; } }
@media screen and (max-width: 767px) { body { --lt-h2: 3rem; --lt-h3: 2.5rem; --lt-space-10: 8rem; } }
@media screen and (max-width: 479px) { body { --lt-h2: 12vw; --lt-h3: 2rem; --lt-space-10: 6rem; } }

/* ---------- Type ---------- */

body {
  background-color: var(--black); /* the template's page colour; only the home page relies on it (the others set their own), and without it home turned white behind the footer */
  font-family: var(--lt-font);
  font-size: 1rem;
  font-weight: 200;
  line-height: 1.7;
  color: var(--white);
}
h1 { font-family: var(--lt-font); }
h2 { margin-top: 0; margin-bottom: 0; font-size: var(--lt-h2); font-weight: 300; line-height: 1.1; letter-spacing: -.01em; text-transform: capitalize; }
h3 { margin-top: 0; margin-bottom: 0; font-family: var(--lt-font); font-size: var(--lt-h3); font-weight: 300; line-height: 1.1; letter-spacing: -.05em; text-transform: capitalize; }
p { margin-bottom: 0; font-family: var(--lt-font); font-size: 1rem; font-weight: 300; line-height: 1.6; }
a { color: var(--white); text-decoration: none; transition: color .3s; }
ul, ol { display: flex; flex-direction: column; }
li { font-size: 1rem; font-weight: 200; line-height: 1.6; }
img { display: inline-block; object-fit: cover; }
sup { top: -.33vw; vertical-align: super; font-size: 2.78vw; line-height: 2.22vw; }
blockquote { border-left: 4px solid var(--white); font-size: 1rem; line-height: 1.6; }

/* ---------- Page frame ---------- */

/* .container comes after .lt-container and .lt-blockcontainer on purpose: the footer's box carries all three, and this one wins. */
.container { width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; overflow: hidden; }
.container.padding-4-5rem { padding-left: 4.5rem; padding-right: 4.5rem; }
.container.padding-9rem { padding-left: 9rem; padding-right: 9rem; }
.section { position: relative; z-index: 1; background-color: var(--black); }
.space-1rem { min-height: var(--lt-space-1); }
.space-4rem { min-height: var(--lt-space-4); }
.space-10rem { min-height: var(--lt-space-10); }

/* ---------- Footer ---------- */

.footer-flex-bottom { display: flex; justify-content: flex-start; align-items: flex-start; }
.footer-block { display: flex; flex-direction: column; align-items: flex-start; gap: .6vw; }
.footer-flex { display: flex; justify-content: flex-start; align-items: flex-start; gap: 1rem; }
.footer-footer-bottom { display: flex; justify-content: space-between; align-items: flex-start; padding-top: 2.2vw; padding-bottom: 2.2vw; }
.footer-line { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2.2vw; height: .07vw; background-color: var(--lt-line); text-align: center; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; }
.title-container { display: flex; flex-direction: column; justify-content: center; align-items: center; max-width: none; text-align: center; }
.footer-section { position: relative; z-index: 1001; }

/* Hidden until the page's script brings it in. */
.fade-in-on-load { visibility: hidden; }

/* ---------- Numbers (home, Our Story, Success Stories, the catalogues) ---------- */

.metrics-line { min-width: 100%; max-width: 100%; min-height: 1px; max-height: 1px; background-color: var(--lt-line); }
.metrics-title { max-width: 38vw; text-transform: none; }
.relative-trigger { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: stretch; width: 80%; margin-left: auto; }
.metrics-block { display: flex; flex-direction: column; gap: 8.89vw; margin-bottom: 1.11vw; }
.highlight { color: var(--lt-highlight); }

/* ---------- The button with the arrow square ---------- */

.button-with-icon { display: flex; justify-content: flex-start; align-items: center; gap: 1px; text-transform: uppercase; text-shadow: 0 1.1rem 0 var(--white); }
.button-flex { position: relative; display: flex; justify-content: center; align-items: center; gap: 1rem; min-height: 2.8rem; padding: .1rem 2rem; border: .06rem solid var(--white); border-radius: var(--lt-radius); overflow: hidden; }
.button-text { line-height: 1.1rem; }
.button-arrow-wrapper { position: relative; display: flex; justify-content: center; align-items: center; min-width: 2.8rem; max-width: 2.8rem; min-height: 2.8rem; max-height: 2.8rem; border-radius: var(--lt-radius); background-color: var(--white); overflow: hidden; }
.button-icon { min-width: .8rem; max-width: .8rem; min-height: .8rem; max-height: .8rem; }

/* ---------- Home: the opening words ---------- */

.intro-text { max-width: 64vw; font-weight: 200; text-transform: none; }
.gsap-text-highlight { color: var(--lt-quiet); }
.intro-block { position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: .56vw; }
.about-paragraph { align-self: flex-end; max-width: 32.5rem; color: var(--lt-quiet); }

/* ---------- Home: the turning cube ---------- */

/* Six faces of one size, --lt-face; each stands half a face away from the centre. The pictures inside take the face's size.
   On desktop the face is --lt-cube: 20rem up to 1280px wide, then growing with the screen to 28rem (user, 2026-11-08: "the images should be
   bigger"), held under 48vh so the turning cube stays inside its 100vh box. The spacer between the word and the text grows with it
   (36rem at 20rem, 2.1rem more per rem of face), so at its widest, turned 45°, the cube still clears both; measured at 1280 to 1920. */
.services-container { --lt-cube: clamp(20rem, min(20rem + (100vw - 76rem) / 2.1, 48vh), 28rem); }
.front, .back, .left, .right, .top, .bottom {
  --lt-face: var(--lt-cube, 20rem);
  position: absolute;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  min-width: var(--lt-face);
  max-width: var(--lt-face);
  min-height: var(--lt-face);
  max-height: var(--lt-face);
  transform-style: preserve-3d;
  overflow: hidden;
}
.front { z-index: 2; transform: translate3d(0, 0, calc(var(--lt-face) / 2)); }
.back { z-index: 2; transform: translate3d(0, 0, calc(var(--lt-face) / -2)); }
.right { transform-origin: 100% center; transform: translate3d(0, 0, calc(var(--lt-face) / -2)) rotateY(90deg); }
.left { transform-origin: 0% center; transform: translate3d(0, 0, calc(var(--lt-face) / -2)) rotateY(-90deg); }
.top { transform-origin: 50% 0; transform: translate3d(0, 0, calc(var(--lt-face) / -2)) rotateX(90deg); }
.bottom { transform-origin: 50% 100%; transform: translate3d(0, 0, calc(var(--lt-face) / -2)) rotateX(-90deg); }
.cube-image { min-width: var(--lt-face); max-width: var(--lt-face); min-height: var(--lt-face); max-height: var(--lt-face); }

.cube-wrapper { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; perspective: 100vh; overflow: hidden; }
.cube-core { position: absolute; min-width: 3rem; max-width: 3rem; min-height: 3rem; max-height: 3rem; transform-style: preserve-3d; transform: rotateX(-45deg); filter: hue-rotate(220deg) brightness(200%) blur(4rem); }
.cube-core.rotate-45deg { transform: rotateX(45deg); }
.box-cube { position: relative; display: flex; justify-content: center; align-items: center; transform-style: preserve-3d; transform: rotateX(.0001deg); }

/* The words that roll past the cube */
.services-text-block, .features-title-wrapper, .button-text-block { display: flex; justify-content: center; align-items: center; overflow: hidden; }
.services-text-block { height: 8rem; }
.features-title-wrapper { height: 5rem; }
.button-text-block { height: 1rem; }
.services-sticky { position: sticky; top: 0; display: flex; justify-content: center; align-items: center; width: 100%; overflow: hidden; }
.services-text { max-width: 18rem; }
.service-title { position: relative; z-index: 7; width: 20rem; font-size: 4rem; font-weight: 400; line-height: 4rem; text-align: right; white-space: nowrap; }
.services-container { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; max-width: 100%; min-height: 500vh; }
.services-wrapper { position: absolute; inset: 0%; z-index: 10; display: flex; justify-content: center; align-items: center; gap: 1rem; width: 100vw; height: 100vh; text-align: left; mix-blend-mode: exclusion; }
.spacer { width: calc(36rem + (var(--lt-cube, 20rem) - 20rem) * 2.1); height: calc(36rem + (var(--lt-cube, 20rem) - 20rem) * 2.1); }

/* ---------- Home: the closing grid of pictures ---------- */

.cta-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-auto-columns: 1fr; align-content: space-between; align-items: center; justify-items: center; gap: 1vw; height: 100vh; }
.cta-grid-overlay { position: absolute; width: 100%; height: 100%; background-color: var(--black); opacity: .8; }
.cta-grid-image { width: 100%; height: 49.5vh; border-radius: var(--lt-radius); transform-style: preserve-3d; transform: translate3d(0, 0, .1px); }
.cta-title-block { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.11vw; }
.cta-title { font-weight: 500; line-height: 1.1; letter-spacing: -.01em; text-align: center; }

/* ---------- Home: the small moving label ---------- */

.marquee-wrapper {
  position: relative;
  z-index: -1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 15rem;
  height: 2rem;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius);
  background-color: var(--lt-veil);
  -webkit-backdrop-filter: blur(2rem);
  backdrop-filter: blur(2rem);
  overflow: hidden;
}
.marquee-text { font-size: .8rem; line-height: 1.1rem; letter-spacing: .05rem; text-transform: capitalize; white-space: nowrap; }
.marquee-text.smaller { color: var(--lt-red); font-size: .7rem; }
.marquee-flex { display: flex; justify-content: flex-start; align-items: center; gap: .5rem; }

/* ---------- Home: the soft blur along the bottom edge ---------- */

/* Ten stacked layers, each a band of the edge. Layer n blurs --blur divided by --ratio (n - 1) times: --lt-div. Both are set on the page. */
.progressive-blur {
  --lt-div: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(calc(var(--blur) / var(--lt-div)));
  backdrop-filter: blur(calc(var(--blur) / var(--lt-div)));
}
.progressive-blur._01 { -webkit-mask-image: linear-gradient(#000 0% 10%, #0000 30%); mask-image: linear-gradient(#000 0% 10%, #0000 30%); }
.progressive-blur._02 { --lt-div: var(--ratio); -webkit-mask-image: linear-gradient(#0000 0%, #000 10% 20%, #0000 40%); mask-image: linear-gradient(#0000 0%, #000 10% 20%, #0000 40%); }
.progressive-blur._03 { --lt-div: calc(var(--ratio) * var(--ratio)); -webkit-mask-image: linear-gradient(#0000 0%, #000 20% 30%, #0000 50%); mask-image: linear-gradient(#0000 0%, #000 20% 30%, #0000 50%); }
.progressive-blur._04 { --lt-div: calc(var(--ratio) * var(--ratio) * var(--ratio)); -webkit-mask-image: linear-gradient(#0000 10%, #000 30% 40%, #0000 60%); mask-image: linear-gradient(#0000 10%, #000 30% 40%, #0000 60%); }
.progressive-blur._05 { --lt-div: calc(var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)); -webkit-mask-image: linear-gradient(#0000 20%, #000 40% 50%, #0000 70%); mask-image: linear-gradient(#0000 20%, #000 40% 50%, #0000 70%); }
.progressive-blur._06 { --lt-div: calc(var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)); -webkit-mask-image: linear-gradient(#0000 30%, #000 50% 60%, #0000 80%); mask-image: linear-gradient(#0000 30%, #000 50% 60%, #0000 80%); }
.progressive-blur._07 { --lt-div: calc(var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)); -webkit-mask-image: linear-gradient(#0000 40%, #000 60% 70%, #0000 90%); mask-image: linear-gradient(#0000 40%, #000 60% 70%, #0000 90%); }
.progressive-blur._08 { --lt-div: calc(var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)); -webkit-mask-image: linear-gradient(#0000 50%, #000 70% 80%, #0000 100%); mask-image: linear-gradient(#0000 50%, #000 70% 80%, #0000 100%); }
.progressive-blur._09 { --lt-div: calc(var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)); -webkit-mask-image: linear-gradient(#0000 60%, #000 80% 90%, #0000 100%); mask-image: linear-gradient(#0000 60%, #000 80% 90%, #0000 100%); }
.progressive-blur._10 { --lt-div: calc(var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)); -webkit-mask-image: linear-gradient(#0000 70%, #000 90%, #0000 100%); mask-image: linear-gradient(#0000 70%, #000 90%, #0000 100%); }
.progressive-blur-wrapper { position: fixed; inset: auto 0% 0%; z-index: 1000; min-height: 16vh; pointer-events: none; overflow: clip; transform: rotate(180deg); }

/* ---------- Pricing halves, and a word that keeps its own case ---------- */

.pricing-grid-half { display: flex; grid-template-columns: .5fr; grid-template-rows: auto; grid-auto-columns: 1fr; justify-content: center; }
/* Last of the class rules on purpose: it undoes the capitals the rules above give their text. */
.no-caps { text-transform: none; }

/* ---------- Tablet and below ---------- */

@media screen and (max-width: 991px) {
  sup { top: -.3rem; font-size: 2.5rem; line-height: 2rem; }
  blockquote { line-height: 1.7rem; }
  .container { max-width: 100%; }
  .container.padding-4-5rem, .container.padding-9rem, .container.padding-13-5rem { padding-left: 10%; padding-right: 10%; }
  .footer-block { justify-content: flex-start; align-items: center; gap: .5rem; text-align: center; }
  .footer-footer-bottom { flex-direction: column; align-items: center; padding-top: 2rem; padding-bottom: 2rem; text-align: center; }
  .footer-line { gap: 2rem; height: .06rem; }
  .footer-top { max-width: 100%; }
  .metrics-title { max-width: 32.5rem; }
  .metrics-block { gap: 8rem; margin-bottom: .7rem; }
  .button-with-icon { right: -.5rem; justify-content: center; }
  .intro-text { max-width: 40rem; }
  .intro-block { gap: .5rem; }
  .about-paragraph { max-width: 28rem; }
  .front, .back, .left, .right, .top, .bottom { --lt-face: 16rem; }
  .services-text-block { justify-content: flex-start; width: 100%; }
  .services-text { margin-left: auto; text-align: right; }
  .service-title { text-align: left; }
  .services-wrapper { flex-direction: column; align-items: flex-start; width: 80vw; margin-left: auto; margin-right: auto; }
  .spacer { align-self: center; height: 24rem; }
  .box-cube { height: 70vh; }
  .cta-grid { column-gap: 1rem; }
  .cta-grid-image { border-radius: .25rem; }
  .cta-title-block { gap: 1rem; }
  .marquee-text { flex-direction: column; justify-content: center; align-items: center; }
  .progressive-blur-wrapper { display: none; }
  .features-title-wrapper { justify-content: flex-start; width: 100%; }
  .pricing-grid-half { flex-direction: column; margin-left: auto; margin-right: auto; }
}

/* ---------- Large phones and below ---------- */

@media screen and (max-width: 767px) {
  .container { max-width: 100%; }
  .footer-block { justify-content: center; }
  .metrics-title { max-width: 27rem; line-height: 3rem; }
  .relative-trigger, .metrics-text-wrapper { align-items: flex-end; }
  .intro-text { max-width: 22rem; }
  .about-paragraph { max-width: 18rem; }
  .service-title { font-size: 3.5rem; }
  .spacer { width: 24rem; }
}

/* ---------- Phones ---------- */

@media screen and (max-width: 479px) {
  .footer-flex { flex-direction: column; align-items: center; row-gap: 0; }
  .metrics-title { font-size: 10vw; line-height: 15vw; text-align: center; }
  .metrics-block { width: 90%; margin-left: auto; margin-right: auto; }
  .intro-text { max-width: 100%; text-align: left; }
  .intro-block { align-items: center; text-align: center; }
  .about-paragraph { max-width: 81%; margin-left: auto; text-align: right; }
  .front, .back, .left, .right, .top, .bottom { --lt-face: 12rem; }
  .service-title { font-size: 14vw; }
  .spacer { width: 15rem; }
  .cta-grid { grid-template-columns: 1fr 1fr 1fr; }
  .cta-title { max-width: 90vw; }
  .cta-grid-image.hide-on-mobile { display: none; }
  .pricing-grid-half { grid-template-columns: 1fr; }
}