/*
 * client-org.css: designs of the ORG documents of the namespace; in d1 the simulated Org, the homepage A.0.Org.1.1.
 * Free CSS loaded after the generated LowestCode CSS and outside its compatibility guarantee (230). The four client
 * files load in the rollout order client-sys, client-pro, client-org, client-user; each is owned by its layer.
 * Owned by the ORG namespace; a SYS rollout never delivers or overwrites it.
 * A class carries the prefix .<smaCode>-<docId>- of the document it styles (410).
 */

/* WHY: hero, login card and contact page are client widgets on a fixed dark backdrop; they carry their own palette as
   local values of the governed theme variables, so they look the same in every theme (2026-09-29). */
.org-1-hero {
  --text: #f8fbff;
  --muted: rgb(248 251 255 / 0.82);
  --accent: #6ee7c8;
}

.org-1-shell {
  width: min(100%, 120rem);
  margin: 0 auto;
}

/* Hero */

.org-1-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 82% 18%, rgb(45 212 191 / 0.32), transparent 28rem),
    radial-gradient(circle at 15% 82%, rgb(34 197 94 / 0.28), transparent 31rem),
    linear-gradient(135deg, #102a54 0%, #0f4f6a 48%, #11223c 100%);
  color: var(--text);
  /* WHY: the bottom padding leaves room for the absolutely positioned scroll control below the last line on a phone. */
  padding: clamp(4rem, 8vw, 7rem) 1rem clamp(5.5rem, 8vw, 7rem);
}

.org-1-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.5) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
  z-index: -2;
}

.org-1-glow {
  position: absolute;
  width: clamp(14rem, 26vw, 24rem);
  aspect-ratio: 1;
  border-radius: 9999px;
  filter: blur(4rem);
  opacity: 0.78;
  z-index: -1;
  animation: homeFloat 7s ease-in-out infinite;
}

.org-1-glow.accent {
  top: 8%;
  right: 8%;
  background: rgb(110 231 200 / 0.24);
}

.org-1-glow.success {
  bottom: 8%;
  left: 8%;
  width: clamp(16rem, 32vw, 30rem);
  background: rgb(34 197 94 / 0.22);
  animation-delay: -2s;
}

.org-1-container {
  position: relative;
  z-index: 1;
  width: min(100%, 72rem);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
  text-align: center;
}

.org-1-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  padding: 0.5rem 1rem;
  margin-bottom: 2rem;
  color: var(--text);
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 9999px;
  backdrop-filter: blur(12px);
  font-size: 0.875rem;
  font-weight: 600;
}

.org-1-status-dot {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 9999px;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgb(34 197 94 / 0.55);
  animation: homePulse 1.8s ease-out infinite;
}

/* WHY: the lockup is LowestCode by RSaccess (operator decision 2026-09-28): the RSaccess logo is the smaller by-line under the title. A plain row, not the framework t-1.logo container, because fun.css widens every .flex.row img to the full width under 36rem and centers div.img.logo2. */
.org-1-brand-by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 0 0 1.4rem;
}

.org-1-brand-by-logo {
  display: block;
  width: auto;
  height: clamp(3.4rem, 6vw, 5rem); /* WHY: double the text-height size, operator decision 2026-09-28 */
  padding: 0; /* WHY: format-0 gives every img a 1rem padding, which would eat the logo */
  margin: 0;
  border-radius: 0.4rem;
}

.org-1-brand-by-text {
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  font-weight: 650;
  color: var(--muted);
}

.org-1-title {
  margin: 0 0 1.4rem;
  color: var(--text);
  font-size: clamp(3.1rem, 8vw, 7rem);
  line-height: 0.96;
  font-weight: 800;
  letter-spacing: 0;
}

.org-1-title span {
  display: inline-block;
  color: transparent;
  background: linear-gradient(90deg, #67e8f9 0%, #6ee7c8 52%, #bef264 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.org-1-title .org-1-title-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.18em;
  max-width: 100%;
  color: inherit;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  white-space: nowrap;
}

.org-1-product-mark {
  flex: 0 0 auto;
  width: 1.17em;
  height: 1.17em;
  padding: 0;
  margin: 0;
  object-fit: contain;
}

.org-1-title .org-1-title-detail {
  display: block;
  margin-top: 0.7rem;
  font-size: clamp(1.5rem, 2.9vw, 2.6rem);
  line-height: 1.08;
  font-weight: 750;
}

.org-1-subtitle {
  margin: 0 0 1rem;
  color: rgb(248 251 255 / 0.92);
  font-size: clamp(1.45rem, 3.4vw, 2.25rem);
  line-height: 1.2;
  font-weight: 650;
}

.org-1-copy {
  max-width: 48rem;
  margin: 0 auto 3rem;
  color: var(--muted);
  font-size: clamp(1.06rem, 2vw, 1.35rem);
  line-height: 1.58;
}

/* WHY: the Quest statement stands at copy size since 2026-10-23 and keeps its weight as the page's primary statement. */
.org-1-copy .org-1-copy-statement {
  color: rgb(248 251 255 / 0.92);
  font-weight: 650;
}

/* WHY: the intro under the hero headline carries the Quest statement's element and class for its font and size, and
   one line of space separates it from the Quest paragraph at every width (operator layout 2026-10-23). */
.org-1-hero .org-1-copy.org-1-intro {
  margin-bottom: 1.5em;
}

/* WHY: the green revolution sentence is a paragraph of its own since 2026-10-23 (operator request); half a line between
   the two intro paragraphs keeps them one block, a whole line separates the block from the Quest. */
.org-1-hero .org-1-copy.org-1-intro:has(+ .org-1-intro) {
  margin-bottom: 0.75em;
}

.org-1-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  width: min(100%, 58rem);
  margin: 0 auto 2.6rem;
}

.org-1-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  min-width: 11rem;
  padding: 0.75rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  font: inherit;
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.org-1-action-primary {
  color: #102033;
  background: linear-gradient(135deg, #a7f3d0, #67e8f9);
  box-shadow: 0 18px 35px rgb(12 25 50 / 0.24);
}

.org-1-action-primary:hover,
.org-1-action-primary:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 22px 42px rgb(12 25 50 / 0.32);
}

/* WHY: the hero carries two secondary actions beside the primary one, Follow the Quest and Summary (operator proposal 2026-10-01); an outline on the dark hero keeps the filled primary button the leading action. */
.org-1-action-secondary {
  color: #e6fbff;
  border-color: rgb(167 243 208 / 0.55);
  background: rgb(255 255 255 / 0.06);
}

.org-1-action-secondary:hover,
.org-1-action-secondary:focus-visible {
  transform: translateY(-1px);
  border-color: #a7f3d0;
  background: rgb(255 255 255 / 0.12);
}

/* Hero proposition under the four buttons since 2026-10-03 (operator text and placement): one heading line and three short paragraphs between the buttons and the four tiles, in the width and the muted colour of the hero copy, the trademark line small. */
.org-1-proposition {
  width: min(100%, 48rem);
  margin: clamp(1.7rem, 4vw, 2.6rem) auto 0;
  text-align: center;
}

.org-1-proposition-head {
  margin: 0 0 0.9rem;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.25;
}

.org-1-proposition p {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.9vw, 1.2rem);
  line-height: 1.5;
}

.org-1-proposition .org-1-proposition-note {
  margin-top: 0.4rem;
  font-size: 0.85rem;
}

/* WHY: hero gallery above the button row (operator requests 2026-10-01): a horizontal track that snaps to each picture and moves by swipe, trackpad or keyboard without script; each slide links to its section. Dots and auto-advance follow with the second picture; the Quest slide is a picture rendered once a month by render-quest-slide.py (operator decision 2026-10-01). */
.org-1-gallery {
  width: min(100%, 48rem);
  margin: 0 auto 2.4rem;
}

/* Why: the governed themes give `.gallery` a light panel background; the hero gallery stands on the dark hero without one. */
.org-1-gallery.gallery {
  background: none;
}

.org-1-gallery-track {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.org-1-gallery-track::-webkit-scrollbar {
  display: none;
}

.org-1-gallery-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

.org-1-gallery-slide a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.org-1-gallery-slide img {
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  /* Why: every slide keeps the gallery frame 1200 x 638, so the gallery does not change height between pictures; a
     picture of another shape is cut to the frame, never stretched. */
  aspect-ratio: 1200 / 638;
  object-fit: cover;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 0.75rem;
  box-shadow: 0 18px 35px rgb(12 25 50 / 0.3);
}

.org-1-gallery-caption {
  display: block;
  margin-top: 0.65rem;
  color: rgb(248 251 255 / 0.72);
  font-size: clamp(0.92rem, 1.6vw, 1.02rem);
  font-weight: 650;
  line-height: 1.4;
}

.org-1-gallery-slide a:hover .org-1-gallery-caption,
.org-1-gallery-slide a:focus-visible .org-1-gallery-caption {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

@media (prefers-reduced-motion: reduce) {
  .org-1-gallery-track {
    scroll-behavior: auto;
  }
}

.org-1-copy a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.16em;
  text-decoration-thickness: 1px;
}

.org-1-copy a:hover,
.org-1-copy a:focus-visible {
  color: var(--text);
}

.org-1-scroll {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  width: 1.5rem;
  height: 2.5rem;
  border: 2px solid color-mix(in srgb, var(--text) 34%, transparent);
  border-radius: 9999px;
  display: flex;
  justify-content: center;
  padding-top: 0.45rem;
  opacity: 0.9;
  animation: homeBounce 1.6s infinite;
  text-decoration: none;
}

.org-1-scroll::before {
  content: "";
  width: 0.25rem;
  height: 0.75rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--text) 58%, transparent);
}

.org-1-scroll:focus-visible {
  /* Keep the icon-only section control visible during keyboard navigation. */
  outline: 3px solid var(--accent);
  outline-offset: 0.35rem;
}

/* WHY: a jump from the hero hint lands in a section and the browser's back does not scroll the inner board, so every section carries its way back to the hero as a second pill beside the arrow, in the arrow's design (operator layout 2026-09-28). */
.section .org-1-scroll {
  left: calc(50% - 1.35rem);
}

.org-1-top {
  position: absolute;
  left: calc(50% + 1.35rem);
  bottom: 2rem;
  transform: translateX(-50%);
  width: 1.5rem;
  height: 2.5rem;
  border: 2px solid color-mix(in srgb, var(--text) 34%, transparent);
  border-radius: 9999px;
  display: flex;
  justify-content: center;
  padding-top: 0.72rem;
  opacity: 0.9;
  text-decoration: none;
}

.org-1-top::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-top: 2px solid color-mix(in srgb, var(--text) 58%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--text) 58%, transparent);
  transform: rotate(45deg);
}

.org-1-top:hover {
  opacity: 1;
  border-color: color-mix(in srgb, var(--text) 55%, transparent);
}

.org-1-top:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 0.35rem;
}

.org-1-top-alone {
  left: 50%;
}

.org-1-inner {
  width: min(100%, 82rem);
  margin: 0 auto;
}

/* WHY: a two-column section aligns heading and cards as one row and lead and note box as the next, so the proof sits beside its claim; an aside without a thesis spans both rows. */
.org-1-columns {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
  column-gap: clamp(2rem, 5vw, 4rem);
  /* WHY: the row gap is the only distance between the cards and the note box below them; the label and heading margins give it back, so the left column keeps its spacing. */
  row-gap: 1rem;
  align-items: start;
}

.org-1-columns > .sectionLabel {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0;
}

.org-1-columns > h2 {
  grid-column: 1;
  grid-row: 2;
  margin-bottom: 0.2rem;
  /* WHY: beside the cards the heading has a narrow column; one size step down keeps long headings under six lines at laptop widths. */
  font-size: clamp(2.1rem, 3.9vw, 3.5rem);
}

.org-1-columns > .lead {
  grid-column: 1;
  grid-row: 3;
  margin-bottom: 0;
}

.org-1-columns > .org-1-aside {
  grid-column: 2;
  grid-row: 2;
}

.org-1-columns > .org-1-aside-tall {
  grid-row: 2 / span 2;
}

/* WHY: the closing action of a two-column section spans both columns under the text and the aside; without a placement the grid would drop it into the first free cell beside the heading. */
.org-1-columns > .org-1-actions {
  grid-column: 1 / -1;
  grid-row: 4;
  justify-content: center;
}

.org-1-columns > .note {
  grid-column: 2;
  grid-row: 3;
}

.org-1-aside > h3 {
  margin: 0 0 0.75rem;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0;
}

.org-1-aside .note {
  margin-top: 0.75rem;
}
/* A row break inside a term list: the planned projects show the ERP row and the Office row (operator layout 2026-09-28). */
.term .org-1-term-break {
  flex-basis: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
/* Team section: a lead paragraph followed by a chain keeps a short gap, and the rollout and contribution chains are rows of
   button-like chips joined by arrows so the chain stands out (operator layout 2026-09-28). Non-adaptive homepage colors, as
   the primary action above. */
.org-1-lead-tight {
  margin-bottom: 1.1rem;
}
/* Energy section since 2026-10-09: the web shop line follows the five stat buttons, which carry no bottom margin; the gap
   keeps the line apart from the buttons as the actions below are (homepage design check). */
.org-1-stat + .lead {
  margin-top: 1.1rem;
}
/* Summary since 2026-10-17: the closing line of the roll-up follows the last cards, centered as on the roll-up, with the
   gap the cards keep to the group heading (operator decision). */
.org-1-summary + .lead {
  margin-top: clamp(1.4rem, 3.5vw, 2.2rem);
  text-align: center;
}
.org-1-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.55rem;
  margin: 0 0 clamp(1.6rem, 4vw, 2.6rem);
  padding: 0;
  list-style: none;
}
.org-1-chain li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.org-1-chain li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  color: #102033;
  background: linear-gradient(135deg, #a7f3d0, #67e8f9);
  box-shadow: 0 14px 28px rgb(12 25 50 / 0.24);
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.org-1-chain li:not(:last-child)::after {
  content: "\2192";
  color: var(--muted);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}
.org-1-chain-up li span {
  color: #1f1305;
  background: linear-gradient(135deg, #fcd34d, #fb923c);
}
/* Team section: each chain carries its name, Rollout or Contribution, in the chain's accent color left of the chips,
   right-aligned against a thin divider; both labels share one width so the two chains line up, and on a phone the label
   stands above its chain (operator request 2026-09-29). */
.org-1-chain-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin: 0 0 clamp(1.6rem, 4vw, 2.6rem);
}
.org-1-chain-row .org-1-chain {
  margin: 0;
}
.org-1-chain-label {
  min-width: 8.5rem;
  padding: 0.4rem 1rem 0.4rem 0;
  border-right: 2px solid rgb(103 232 249 / 0.7);
  color: #67e8f9;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-align: right;
  text-transform: uppercase;
}
.org-1-chain-label-up {
  border-right-color: rgb(251 146 60 / 0.7);
  color: #fdba74;
}
@media (max-width: 760px) {
  .org-1-chain-label {
    flex-basis: 100%;
    min-width: 0;
    padding: 0;
    border-right: 0;
    text-align: left;
  }
}

.section .org-1-actions {
  justify-content: center;
  width: auto;
  margin: clamp(1.5rem, 4vw, 2.4rem) 0 0;
}

/* Energy section: a full-width note box (operator request 2026-09-28). */
.org-1-note-wide {
  max-width: 58rem;
  margin: clamp(1.5rem, 4vw, 2.4rem) 0 0;
}
/* Energy section: the five load test buttons under the comparison picture, the value large and the explanation
   small, four in dark blue and the energy figure in green (operator design of the post picture, on the page since
   2026-10-01). WHY text and not the picture: the page text is translated, read aloud and wraps on a phone. Each
   button is a link to the load test report, since a button has to do something. The buttons follow the picture
   directly, at the distance they keep among themselves. */
.section figure.org-1-figure-tight {
  margin-bottom: 0.35rem;
}
.org-1-stat {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.org-1-stat-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 100%;
  min-height: 7.2rem;
  padding: 0.9rem 0.8rem;
  border: 1px solid rgb(103 232 249 / 0.7);
  border-radius: 0.85rem;
  background: linear-gradient(135deg, #102a54, #10395d);
  color: #f8fbff;
  text-align: center;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.org-1-stat-link strong {
  color: #67e8f9;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
}
.org-1-stat-link span {
  font-size: 0.9rem;
  line-height: 1.35;
}
.org-1-stat-green {
  border-color: rgb(110 231 200 / 0.7);
  background: linear-gradient(135deg, #136e64, #157a63);
}
.org-1-stat-green strong {
  color: #a8ef80;
}
.org-1-stat-link:hover,
.org-1-stat-link:focus-visible {
  transform: translateY(-1px);
  border-color: #a7f3d0;
}
@media (max-width: 980px) {
  .org-1-stat {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .org-1-stat > li:last-child {
    grid-column: 1 / -1;
  }
}
/* Hero tiles since 2026-10-17 in place of the section jump list (operator decision): the four heads of the roll-up and,
   since 2026-10-20, the workplace and the summary, each a link to its section, built on the stat tiles above; two
   columns, one on a phone, and no last tile across the row. */
.org-1-stat.org-1-glance {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 56rem);
  margin: clamp(1.7rem, 4vw, 2.6rem) auto 0;
}
.org-1-stat.org-1-glance > li:last-child {
  grid-column: auto;
}
.org-1-glance .org-1-stat-link {
  justify-content: flex-start;
}
.org-1-glance .org-1-stat-link strong {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
}
/* WHY: no word stands alone on a line (operator rule); the fragment joins the last two words of every line, and
   pretty wrapping balances the lines where the browser supports it. */
.org-1-glance .org-1-stat-link span {
  font-size: 0.95rem;
  line-height: 1.5;
  text-wrap: pretty;
}
@media (max-width: 760px) {
  .org-1-stat.org-1-glance {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Summary: three groups of cards, each card one link to its section or page, its symbol a tile on the left
   (operator request 2026-10-01: wider icons, clickable). WHY the whole card is the link: the tile alone is a small
   touch target, and a card that looks clickable has to be clickable. The tile replaces the mark line of the card. */
.org-1-summary-head {
  margin: clamp(1.4rem, 3.5vw, 2.2rem) 0 0.8rem;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.02em;
}
.org-1-summary > li {
  padding: 0;
}
.org-1-summary > li::before {
  display: none;
}
.org-1-card-link {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  height: 100%;
  padding: 0.85rem 1rem;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
  transition: background 0.18s ease;
}
.org-1-card-icon {
  display: grid;
  flex: 0 0 3.2rem;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border: 1px solid rgb(167 243 208 / 0.55);
  border-radius: 0.6rem;
  background: rgb(255 255 255 / 0.06);
  font-size: 1.6rem;
  line-height: 1;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.org-1-card-text {
  color: var(--muted);
  font-size: 0.92em;
  line-height: 1.45;
}
.org-1-card-link:hover,
.org-1-card-link:focus-visible {
  background: rgb(255 255 255 / 0.05);
}
.org-1-card-link:hover .org-1-card-icon,
.org-1-card-link:focus-visible .org-1-card-icon {
  border-color: #a7f3d0;
  background: rgb(255 255 255 / 0.12);
}
/* Workplace section: three note boxes across the full width, one column on narrow screens (operator layout 2026-09-28). */
.org-1-note-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 clamp(1.5rem, 4vw, 2.4rem);
}
/* Workplace section since 2026-10-03: two note boxes, the Office note moved into the Office section (operator decision). */
.org-1-note-row-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 980px) {
  .org-1-note-row {
    grid-template-columns: minmax(0, 1fr);
  }
}
.org-1-projects-note {
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.48;
}
/* Project table legend since 2026-10-03: a legend item keeps its mark and its word on one line, so no word stands alone on a phone (design check). */
.org-1-nowrap { white-space: nowrap; }

/* WHY: the project heading stays on one line (operator request 2026-09-29): its text is 11.75em wide in the site font
   plus 1em heading padding, so below the governed size of format-0 `.section h2` it shrinks with the viewport; 6.6vw fits
   down to 320px and under every font scale. */
h2.org-1-one-line {
  max-width: none;
  white-space: nowrap;
  font-size: min(clamp(2.2rem, 5vw, 4.5rem), 6.6vw);
}

.org-1-reveal {
  opacity: 0;
  animation: homeReveal 0.7s ease forwards;
}

.org-1-reveal.delay-1 { animation-delay: 0.12s; }
.org-1-reveal.delay-2 { animation-delay: 0.22s; }
.org-1-reveal.delay-3 { animation-delay: 0.32s; }
.org-1-reveal.delay-4 { animation-delay: 0.42s; }
.org-1-reveal.delay-5 { animation-delay: 0.52s; }
.org-1-reveal.delay-6 { animation-delay: 0.62s; }

@media (prefers-reduced-motion: reduce) {
  /* Respect system motion preferences without hiding reveal content. */
  .org-1-glow,
  .org-1-status-dot,
  .org-1-scroll,
  .org-1-reveal {
    animation: none;
  }

  .org-1-reveal {
    opacity: 1;
    transform: none;
  }

  .org-1-action {
    transition: none;
  }

  .org-1-action-primary:hover,
  .org-1-action-primary:focus-visible {
    transform: none;
  }
}

/* WHY: desktop card groups center against their large left-hand headings instead of aligning to the heading row's top edge. */
@media (min-width: 981px) {
  .org-1-columns > .org-1-aside {
    align-self: center;
  }

  /* WHY: a second note box closes a two-column section across both columns, under the text and the cards; on a narrow
     screen it follows the cards in the page order (the Kotlin and Python box, operator 2026-09-30). */
  .org-1-columns > .note.org-1-note-below {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  /* WHY: the shell's navigation and footer take about 6rem of the viewport; the hero fills the visible board instead of the full viewport, so its last line and the scroll control are in the first screen. */
  .org-1-hero {
    min-height: calc(100vh - 6rem);
  }
}

/* WHY: the hero fits the first screen on every desktop size, statement, buttons, hint and scroll control (operator
   request 2026-10-01). Measured before: the hint lay 45 to 156 px below the board from 1280x800 to 1920x1080, and at
   1536x864 the buttons too, because type and spacing followed the width alone. The unit is one percent of the board
   height, the viewport less the shell's navigation and footer (92 px, 4.6rem); type and spacing take the smaller of
   their width step and their height step, with the former minimum sizes as the floor. */
@media (min-width: 981px) {
  .org-1-hero {
    --org-1-u: calc((100vh - 4.6rem) / 100);
    /* WHY: the bottom padding keeps the scroll control (1.2rem + 2.5rem) off the last line with 0.7rem between them. */
    padding-block: calc(2.2 * var(--org-1-u)) 4.4rem;
  }

  .org-1-hero .org-1-scroll {
    bottom: 1.2rem;
  }

  .org-1-hero .org-1-badge {
    margin-bottom: calc(1.5 * var(--org-1-u));
  }

  .org-1-hero .org-1-title {
    margin-bottom: calc(1.6 * var(--org-1-u));
    font-size: clamp(3.1rem, min(6.5vw, calc(9.2 * var(--org-1-u))), 6rem);
  }

  /* WHY: the title line stays on one line on large screens (operator decision 2026-10-23): the column stops at 68rem,
     the generated h1 padding of 0.5em of the title size (6rem at most) takes 6rem of it, and the line needs 28.9 times
     its font size, so the size stops at 2.1rem instead of 2.6rem, the size it has at 1440 x 900 already. Below 1270 px
     with a tall viewport the width sets the size, and at 2.9vw the line needed the column exactly (two lines at
     1000 x 1000); 2.7vw leaves it about 7 % room. */
  .org-1-hero .org-1-title-detail {
    margin-top: var(--org-1-u);
    font-size: clamp(1.4rem, min(2.7vw, calc(4 * var(--org-1-u))), 2.1rem);
  }

  .org-1-hero .org-1-brand-by {
    margin-bottom: calc(1.4 * var(--org-1-u));
  }

  .org-1-hero .org-1-brand-by-logo {
    height: clamp(2.6rem, min(6vw, calc(7.5 * var(--org-1-u))), 5rem);
  }

  .org-1-hero .org-1-subtitle {
    margin-bottom: calc(1.4 * var(--org-1-u));
    font-size: clamp(1.3rem, min(2.4vw, calc(3.5 * var(--org-1-u))), 2.25rem);
  }

  .org-1-hero .org-1-copy {
    max-width: 56rem;
    margin-bottom: calc(2 * var(--org-1-u));
    font-size: clamp(1rem, calc(2.4 * var(--org-1-u)), 1.25rem);
    line-height: 1.45;
  }

  .org-1-hero .org-1-actions {
    margin-bottom: calc(1.6 * var(--org-1-u));
  }
}

@media (max-width: 980px) {
  .org-1-columns {
    grid-template-columns: 1fr;
  }

  .org-1-columns > .sectionLabel,
  .org-1-columns > h2,
  .org-1-columns > .lead,
  .org-1-columns > .note,
  .org-1-columns > .org-1-aside,
  .org-1-columns > .org-1-aside-tall,
  .org-1-columns > .org-1-actions {
    grid-column: 1;
    grid-row: auto;
  }

  .org-1-columns > .note,
  .org-1-columns > .org-1-aside {
    margin-top: 0.5rem;
  }
}

@media (max-width: 760px) {
  .org-1-title {
    font-size: clamp(2.15rem, 10vw, 3.1rem);
  }

  .org-1-title .org-1-title-line {
    gap: 0.14em;
  }

  .org-1-badge {
    border-radius: 0.5rem;
    white-space: normal;
  }

  .org-1-actions {
    align-items: stretch;
  }

  .org-1-action {
    width: min(100%, 23rem);
  }
}

/* Website bar and footer */

/* WHY: on the visitor page the shell's top bar and footer looked like application chrome beside the flat page, tiles
   with icons in the bar and a lavender link color in the footer (finding of the rapiddweller partners, operator
   decision 2026-10-29, variant B of the two shown): one flat band in the hero's navy for both, the items as plain text
   in the page's weight, no icons, the submenu toggle a chevron after its label, Login as a pill in the accent at the
   right, the LC mark before the items, the footer with the copyright at the left and the three links grouped at the
   right, and no frame around the single window. Scoped to the website display, which the workplace after login never
   carries; the folded bar only, the open submenu keeps the shell's look. The colors are the hero's local values. */
/* WHY: the bands carry the blue-green of the page, the hero's gradient laid across them, not a flat navy (operator
   request 2026-10-29). */
body.website #a.header,
body.website #z.footer {
  --text: #f8fbff;
  --muted: rgb(248 251 255 / 0.72);
  --accent: #6ee7c8;
  background: linear-gradient(90deg, #102a54 0%, #0f4f6a 55%, #11223c 100%);
  box-shadow: none;
}

body.website #a.header {
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}

/* WHY: the shell gives the top navigation a bottom padding of 1em below 48rem, which added two thirds to the band
   on a phone (operator finding 2026-10-29); the band is its row and nothing under it. */
body.website #a2,
body.website #navTop {
  background: none;
  border: 0;
  padding: 0;
}

body.website #navTop .navLevel-1 {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.4rem;
  margin: 0;
  padding: 0 1.1rem;
}

/* WHY: the LC mark before the items, as a website carries its brand in the bar; the hero keeps the lockup. */
body.website #navTop .navLevel-1::before {
  content: "";
  flex: 0 0 auto;
  width: 1.3rem;
  height: 1.3rem;
  margin-right: 0.35rem;
  border-radius: 0.28rem;
  background: url("/static/o2/auto/sma1/_binary/logo/common/lc_logo.svg") center / contain no-repeat;
}

body.website #navTop li.root {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

body.website #navTop li.root > a.linkNav-1 {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem;
  border: 0;
  border-radius: 999px;
  background: none;
  box-shadow: none;
  color: rgb(248 251 255 / 0.88);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
}

body.website #navTop li.root > a.linkNav-1:hover,
body.website #navTop li.root > a.linkNav-1:focus-visible {
  color: var(--text);
  background: rgb(255 255 255 / 0.08);
}

body.website #navTop li.root > a.linkNav-1 > i {
  display: none;
}

body.website #navTop li.root > a.linkNav-1 > .navToggle {
  order: 2;
  width: 0.8rem;
  min-width: 0;
  height: 0.8rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  line-height: 0.8rem;
  text-align: center;
  overflow: hidden;
  opacity: 0.8;
}

body.website #navTop li.root > a.linkNav-1 > .navToggle::before {
  content: "\25BE";
  font-family: inherit;
  font-size: 0.7rem;
}

body.website #navTop li.root > a.linkNav-1 > .navToggle::after {
  content: none;
}

body.website #navTop li.root:last-child {
  margin-left: auto;
}

body.website #navTop li.root:last-child > a.linkNav-1 {
  padding: 0.28rem 0.95rem;
  border: 1px solid rgb(110 231 200 / 0.55);
  color: var(--accent);
}

body.website #navTop li.root:last-child > a.linkNav-1:hover,
body.website #navTop li.root:last-child > a.linkNav-1:focus-visible {
  color: #a7f3d0;
  background: rgb(110 231 200 / 0.12);
}

body.website #z.footer {
  border-top: 1px solid rgb(255 255 255 / 0.08);
}

body.website #z4 {
  padding: 0;
}

body.website #z4 > .flex.row {
  align-items: center;
  justify-content: flex-end;
  gap: 0.2rem;
  min-height: 2.3rem;
  padding: 0 1.1rem;
}

body.website #pageFooterCompany {
  margin-right: auto;
  padding: 0.3rem 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

/* WHY: the wrapper of a footer link is a block whose line box stands in the shell's 20 px script around the small
   inline link, and the link carries the shell's margin, half the footer's height on a phone (operator finding
   2026-10-29); as a flex row the wrapper takes the link's height and the link no margin. */
body.website .pageFooter.web {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  width: auto;
  text-align: start;
}

body.website .pageFooter.web a.link {
  display: inline-block;
  margin: 0;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  color: rgb(248 251 255 / 0.78);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}

body.website .pageFooter.web a.link:hover,
body.website .pageFooter.web a.link:focus-visible {
  color: var(--accent);
  background: rgb(255 255 255 / 0.06);
}

/* WHY: the shell's submenus inherit the background of the bar, which this design removes, so an open menu stood
   transparent over the page (found by the operator on 2026-10-29, the second time an open menu lost its background
   with a bar restyle): every open menu carries the band's navy of its own, and its items take the script and size of
   the folded bar, so the two no longer differ (operator request of the same day); the folded bar's own frame off. */
body.website #navTop > ul {
  border: 0;
}

/* WHY: the shell widens an open root item to the width of its menu, which wraps the bar on a phone; the menu keeps its
   own width and the bar its row. */
body.website #navTop li.root.toggleBtnFlag {
  min-width: 0;
}

body.website #navTop li.root > ul,
body.website #navTop li.root ul ul {
  padding: 0.35rem 0.4rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #102a54 0%, #0f4f6a 100%);
  box-shadow: 0 0.6rem 1.6rem rgb(2 12 27 / 0.5);
}

body.website #navTop li.root ul li {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

body.website #navTop li.root ul a.link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
  padding: 0.35rem 0.6rem;
  border: 0;
  border-radius: 0.4rem;
  background: none;
  box-shadow: none;
  color: rgb(248 251 255 / 0.9);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.25;
  text-decoration: none;
}

body.website #navTop li.root ul a.link:hover,
body.website #navTop li.root ul a.link:focus-visible {
  color: var(--text);
  background: rgb(255 255 255 / 0.08);
}

body.website #navTop li.root ul a.link > i {
  display: none;
}

body.website #navTop li.root ul a.link > .navToggle {
  order: 2;
  width: 0.8rem;
  min-width: 0;
  height: 0.8rem;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  line-height: 0.8rem;
  text-align: center;
  overflow: hidden;
  opacity: 0.8;
}

body.website #navTop li.root ul a.link > .navToggle::before {
  content: "\25BE";
  font-family: inherit;
  font-size: 0.7rem;
}

body.website #navTop li.root ul a.link > .navToggle::after {
  content: none;
}

/* WHY: the single window of the visitor page keeps its frame for the layout and loses its color; the active window
   of the theme carries its own rule, so both are named. */
body.website .winRows .win,
body.website .winRows .win.active {
  border-color: transparent;
}

/* WHY: the area behind the window frame and under the bar is the shell's black; on the visitor page it takes the
   band's navy, so the edges of the window and the gap under the bar disappear into the bands. */
body.website main.main {
  background: #102a54;
}

@media (max-width: 480px) {
  body.website #navTop .navLevel-1 {
    gap: 0.1rem;
    padding: 0 0.5rem;
  }

  /* WHY: the font scale sets the root to 12 px on a phone, so the rem sizes meant for the desktop band shrank to a
     9 px script there (found with the band heights, 2026-10-29); the items keep the root's 12 px, the footer 11 px. */
  body.website #navTop li.root > a.linkNav-1 {
    padding: 0.3rem 0.45rem;
    font-size: 1rem;
  }

  body.website #navTop li.root:last-child > a.linkNav-1 {
    padding: 0.26rem 0.7rem;
  }

  body.website #navTop li.root ul a.link {
    font-size: 1rem;
  }

  /* WHY: the copyright and the three links fit one row of a phone's width; the row wraps only on a narrower screen,
     the links centered under the copyright then. */
  body.website #z4 > .flex.row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 0.2rem;
    padding: 0 0.5rem;
  }

  body.website #pageFooterCompany {
    font-size: 0.9rem;
  }

  body.website .pageFooter.web a.link {
    padding: 0.25rem 0.45rem;
    font-size: 0.9rem;
  }

  /* WHY: the shell's menu is 18em wide and opens under its item, so on a phone it ran off the right edge; it spans
     the screen with a margin instead, and a nested menu opens inside it. */
  body.website #navTop li.root > ul {
    left: 0.5rem;
    right: 0.5rem;
    width: auto;
    min-width: 0;
  }

  body.website #navTop li.root ul ul {
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
  }
}