/* c-alm home prototype — desktop-first, scales linearly above 93.75rem.
   All dimensions are in rem; 1rem = 1rem at 93.75rem viewport and grows with it
   (see the html font-size rule). Hairlines stay 1px for crispness. */

:root {
  --color-bg: #fdfdfb;
  --color-ink: #2c1736;
  --color-ink-soft: rgba(44, 23, 54, 0.7);
  --color-paper: #f5f6ea;
  --color-accent: #bbfdb8;
  --color-line: rgba(44, 23, 54, 0.1);
  --color-box: rgba(44, 23, 54, 0.05);
  --color-tint: rgba(44, 23, 54, 0.02);
  --color-overlay: rgba(44, 23, 54, 0.2);
  --color-overlay-dark: rgba(44, 23, 54, 0.8);

  /* grid: 3.5rem margins, 8 columns, no gutter → 10.84375rem/col at 1500 */
  --page-width: 93.75rem;
  --margin: 3.5rem;
  --col: 10.84375rem;

  --color-accent-hover: #a3f6a0; /* slightly darker mint for slide-over hovers */
  --color-box-hover: rgba(44, 23, 54, 0.12); /* slightly darker grey for the discover box */
  --color-cell-hover: rgba(44, 23, 54, 0.04); /* very subtle darker shade for Menu/DE cells */
  --color-tab-hover: rgba(44, 23, 54, 0.06); /* darkened slide-over for the insight tabs */
  --stage-2: #b6fcc6; /* stage tints sampled from the provided screenshots */
  --stage-3: #adf6d2;
  --stage-4: #b5f1f4;
  --outline-width: 0.09375rem; /* stroke of the outlined hero type (outside) */
  --arrow-swap: 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: max(16px, calc(100vw / 93.75));
}

@media (min-width: 1500px) {
  html { overflow-x: clip; }
}

html,
body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  font-feature-settings: "salt" 1;
}

body {
  width: var(--page-width);
  margin: 0 auto;
  overflow-x: clip; /* clip, not hidden — hidden would break position: sticky */
}

a {
  color: inherit;
  text-decoration: none;
}

.eyebrow {
  font-family: "DM Mono", monospace;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

/* ---------- draw-in hairlines ---------- */

.line {
  position: absolute;
  background: var(--color-line);
  pointer-events: none;
}

.line-h {
  left: 0;
  right: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left center;
}

.line-v {
  top: 0;
  bottom: 0;
  width: 1px;
  transform: scaleY(0);
  transform-origin: center top;
}

.line.at-top { top: 0; }
.line.at-bottom { bottom: 0; }
.line.at-left { left: 0; right: auto; }
.line.at-right { right: 0; left: auto; }

/* ---------- arrow boxes with swap-through hover ---------- */

.arrow-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 2rem;
  height: 2rem;
  background: color-mix(in srgb, var(--color-ink) 5%, var(--color-bg)); /* opaque over the halftone */
  font-size: 1.125rem;
  line-height: 1.4;
  transition: background 0.25s ease;
}

.arrow-a,
.arrow-b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--arrow-swap);
}

.arrow-b {
  transform: translateX(-100%);
}

.arrow-glyph-clip {
  position: relative;
  display: block;
  overflow: hidden;
  width: 1rem;
  height: 1.4rem;
}

.arrow-box-down .arrow-glyph-clip {
  /* the whole Kontakt swap, rotated: → points down, translateX runs downward */
  transform: rotate(90deg);
}

/* ---------- text links: hairline underline on hover ---------- */

.text-link {
  position: relative;
}

.text-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.125rem;
  height: 1px;
  background: var(--color-line);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--arrow-swap);
}

.discover-link:hover .text-link::after,
.insights-all:hover .text-link::after {
  transform: scaleX(1);
}

/* ---------- header: floating center bar (variant 4) ---------- */

.site-header-v4 {
  /* logo box, pinned top left */
  position: fixed;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 50;
  display: flex;
  align-items: center;
  height: 4rem;
  padding: 0 1.5rem;
  overflow: hidden;
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: 0.5rem;
}

/* same slide-over hover as the Kontakt card */
.site-header-v4::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--arrow-swap);
}

.site-header-v4:hover::before { transform: scaleX(1); }
.site-header-v4:hover .bar-logo { color: var(--color-ink); }

.burger-box {
  /* menu box, pinned top right — outermost, right of Kontakt */
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  width: 4rem;
  height: 4rem;
  overflow: hidden;
  background: var(--color-ink);
  border: 0;
  border-radius: 0.5rem;
  cursor: pointer;
}

/* same slide-over hover as the Kontakt card */
.burger-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--arrow-swap);
}

.burger-box span {
  position: relative;
  display: block;
  width: 1.375rem;
  height: 2px;
  background: var(--color-paper);
  transition: transform var(--arrow-swap), background 0.25s ease;
}

.burger-box:hover::before { transform: scaleX(1); }
.burger-box:hover span { background: var(--color-ink); }
.burger-box:hover span:first-child { transform: translateY(-1px); }
.burger-box:hover span:last-child { transform: translateY(1px); }

.contact-card {
  position: absolute; /* in the page flow — scrolls away, unlike the two pinned boxes */
  top: 1.5rem;
  right: 6.25rem; /* left of the pinned burger box: 1.5rem + 4rem + 0.75rem gap */
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 4rem;
  padding: 0 1.5rem;
  overflow: hidden;
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  transition: color 0.25s ease;
}

.contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--arrow-swap);
}

.contact-card > span {
  position: relative;
}

.contact-card .arrow-clip {
  position: relative;
  overflow: hidden;
  width: 1rem;
  height: 1.5rem;
}

.contact-card:hover {
  color: var(--color-ink);
}

.contact-card:hover::before {
  transform: scaleX(1);
}

.contact-card:hover .arrow-a { transform: translateX(100%); }
.contact-card:hover .arrow-b { transform: translateX(0); }

.bar-logo {
  position: relative; /* above the slide-over plane */
  display: flex;
  color: var(--color-paper);
  transition: color 0.25s ease;
}

.bar-logo-svg,
.bar-logo svg {
  width: 3.5rem;
  height: 1.65rem;
}

.bar-center {
  font-family: "DM Mono", monospace;
  font-size: 0.8125rem;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---------- mask reveal shared parts (used by hero AND quote) ---------- */

.mask {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: top;
}

.mask-inner,
.line-move {
  display: inline-block;
  will-change: transform;
}

.line-move {
  position: relative;
}

.line-outline {
  display: inline-block;
  -webkit-text-stroke: calc(var(--outline-width) * 2) var(--color-ink);
  color: var(--color-bg);
  paint-order: stroke fill;
}

.line-fill {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---------- hero (variant 4: ink panel with dot grid) ---------- */

.v4-hero {
  position: relative;
}

.dot-bg {
  /* the halftone ground: pinned while both text beats scroll over it,
     painted by the canvas engine in script.js */
  position: sticky;
  top: 0;
  height: 100vh;
  margin-bottom: -100vh;
  /* transparent — the body provides the page color; an opaque background
     here would paint over the document-space field canvas underneath */
  pointer-events: none;
  overflow: hidden;
}

.dot-canvas {
  position: absolute;
  inset: 0;
  display: block;
}

.dot-canvas-doc {
  /* the document-anchored field: scrolls with the page via the compositor —
     no per-scroll repaint, no lag */
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.hero-v4 {
  position: relative;
  height: 100vh;
  padding: 22rem var(--margin) 0; /* lower start — clear of the floating bar */
}

.cover-spacer {
  /* short breather + one viewport of covering — mint follows the hero closely */
  height: 112vh;
}

.hero-tag {
  font-family: "DM Mono", monospace;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: 1.5rem;
}

.hero-v4 .hero-lines {
  display: flex;
  flex-direction: column;
}

.hero-v4 .hero-row {
  position: relative;
  display: flex;
  font-size: 5.5rem;
  font-weight: 700;
  line-height: 1.12;
  white-space: nowrap;
}

.hero-aside {
  position: absolute;
  right: var(--margin);
  bottom: 8.5rem;
  width: 22rem;
  font-size: 1.125rem;
  line-height: 1.5;
}

.aside-link {
  display: inline-flex;
  align-items: center;
  gap: 1.0625rem;
  margin-top: 1.5rem;
  font-size: 1.125rem;
  line-height: 1.5;
}

.aside-link:hover .arrow-box { background: var(--color-accent); }
.aside-link:hover .arrow-a { transform: translateX(100%); }
.aside-link:hover .arrow-b { transform: translateX(0); }
.aside-link:hover .text-link::after { transform: scaleX(1); }

/* ---------- meta bar at the fold ---------- */

.hero-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 1.5rem var(--margin);
  font-family: "DM Mono", monospace;
  font-size: 0.8125rem;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.hero-meta p:nth-child(3) {
  margin-right: auto;
}


.meta-link {
  transition: color 0.25s ease;
}

.meta-link:hover {
  color: var(--color-ink);
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

.toggle-track {
  position: relative;
  display: inline-block;
  width: 1.75rem;
  height: 0.875rem;
  border-radius: 0.4375rem;
  background: color-mix(in srgb, var(--color-ink) 12%, var(--color-bg)); /* opaque over the halftone */
}

.toggle-dot {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--color-ink);
  transition: transform var(--arrow-swap);
}

.lang-toggle.is-en .toggle-dot {
  transform: translateX(0.875rem);
}

/* ---------- statement (green band) ---------- */

.statement {
  position: relative;
  z-index: 2;
  margin-top: -100vh; /* slides over the pinned image during the section's extra travel */
  display: flex;
  flex-direction: column;
  gap: 2rem;
  background: var(--color-accent);
  padding: 7.5rem 14.4375rem;
}

.statement h2 {
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.16rem;
}

/* ---------- about (green, two columns) ---------- */

.about-text {
  font-size: 1.125rem;
  line-height: 1.5;
  font-feature-settings: "case" 1;
}

.stages {
  position: relative;
  background: var(--color-accent); /* switches per stage via JS */
}

.stages-track {
  position: relative;
  margin-left: 36.0625rem;
}

.stage-block {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.5rem;
  padding: 5rem var(--margin);
}

.stage-image {
  position: relative;
  width: 50.6875rem;
  max-width: 100%;
  aspect-ratio: 811 / 456.1875;
  overflow: hidden;
}

.stage-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stage-image-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
  pointer-events: none;
}

.stage-block h3 {
  width: 50.6875rem;
  max-width: 100%;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.085rem;
  font-feature-settings: "case" 1;
}

.stages-left {
  position: absolute;
  inset: 0 auto 0 0;
  width: 36.0625rem;
  padding: 7.5rem var(--margin); /* bottom padding = where the sticky text stops before the edge */
  z-index: 5;
  pointer-events: none;
}

.stages-left-inner {
  position: sticky;
  top: 7.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* ---------- insights ---------- */

.insights {
  position: relative;
  padding: 7.5rem 0 4.5rem;
}

.insights-canvas {
  position: relative;
  height: 53.5625rem;
}

.insights-title {
  position: absolute;
  left: 3.4375rem;
  top: 4.765625rem;
  width: 32.5625rem;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.3;
  font-feature-settings: "case" 1;
}

.insights-tabs {
  position: absolute;
  left: 46.875rem;
  top: 4.75rem;
  display: flex;
}

.tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10.875rem;
  height: 3.5rem;
  font-size: 1.125rem;
  line-height: 1.5;
  background: var(--color-tint);
  transition: background 0.25s ease;
}

.tab.is-active {
  background: var(--color-ink);
  color: var(--color-paper);
}

.tab {
  overflow: hidden;
}

.tab::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-tab-hover);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--arrow-swap);
}

.tab > span {
  position: relative;
}

.tab:not(.is-active):hover::before {
  transform: scaleX(1);
}

.card {
  position: absolute;
  top: 11.6875rem;
  background: var(--color-tint);
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--arrow-swap);
}

.card:hover::before {
  transform: scaleX(1);
}

.card-large {
  left: 0;
  width: 46.875rem;
  height: 41.875rem;
}

.card-small {
  width: 21.6875rem;
  height: 19.4375rem;
}

.card-mid {
  left: 46.875rem;
}

.card-right {
  left: 68.5625rem;
}

.card-eyebrow {
  position: absolute;
  left: 3.5rem;
  top: 3.5rem;
}

.card-small .card-eyebrow {
  left: 2rem;
  top: 2rem;
}

.card-title-large {
  position: absolute;
  left: 3.5rem;
  bottom: 3.5rem;
  width: 39.875rem;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025rem;
  font-feature-settings: "case" 1;
}

.card-title-small {
  position: absolute;
  left: 2rem;
  bottom: 2rem;
  width: 17.6875rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}

.insights-all {
  position: absolute;
  right: var(--margin);
  top: 51.5625rem;
  display: flex;
  align-items: center;
  gap: 1.0625rem;
  font-size: 1.125rem;
  line-height: 1.5;
}

.insights-all:hover .arrow-box { background: var(--color-accent); }
.insights-all:hover .arrow-a { transform: translateX(100%); }
.insights-all:hover .arrow-b { transform: translateX(0); }

/* ---------- quote ---------- */

.quote {
  position: relative;
  height: 56.25rem;
  display: flex;
  align-items: center;
  background-image: linear-gradient(var(--color-overlay-dark), var(--color-overlay-dark)), url("assets/quote-bg.webp");
  background-size: cover;
  background-position: center;
}

.quote-inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 0 14.375rem;
  color: var(--color-accent);
}

.quote blockquote {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.07rem;
  text-indent: -1.5625rem; /* hanging opening quote */
  font-feature-settings: "case" 1, "dlig" 1;
}

.quote .line-outline {
  -webkit-text-stroke: var(--outline-width) var(--color-accent);
  color: transparent;
  paint-order: normal;
}

.quote blockquote .line-move {
  display: inline-block;
  position: relative;
  will-change: transform;
}

.quote blockquote .line-fill {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.quote-attribution {
  font-size: 1.125rem;
  line-height: 1.4;
}

/* ---------- faq ---------- */

.faq {
  position: relative;
  padding-bottom: 3.5rem;
}

.faq-head {
  position: relative;
  margin-left: var(--margin);
  width: 65.0625rem;
  padding: 7.5rem 0 3.5rem;
}

.faq-head h2 {
  width: 32.5625rem;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.3;
  font-feature-settings: "case" 1;
}

.faq-list {
  position: relative;
  display: flex;
  flex-direction: column;
}

.faq-item {
  position: relative;
}

.faq-row {
  position: relative;
  display: flex;
  align-items: stretch;
  transition: background 0.25s ease;
}

.faq-row:hover,
.faq-item.is-open .faq-row {
  background: var(--color-accent);
}

.faq-answer {
  height: 0;
  overflow: hidden;
}

.faq-answer-inner {
  padding: 3rem 12.125rem 3rem 12.4375rem; /* aligns with the question column */
  font-size: 1.125rem;
  line-height: 1.5;
}

.faq-arrow-glyph {
  display: inline-block;
  transition: transform 0.35s ease;
}

.faq-item.is-open .faq-arrow-glyph {
  transform: scaleY(-1);
}

.faq-num {
  position: relative;
  display: flex;
  align-items: center;
  width: 8.9375rem;
  flex-shrink: 0;
  padding: 0 var(--margin);
  font-family: "DM Mono", monospace;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.faq-question {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 2rem var(--margin);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.faq-arrow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8.625rem;
  flex-shrink: 0;
  background: var(--color-tint);
  font-size: 2.5rem;
  line-height: 1.3;
  transition: background 0.25s ease;
}

.faq-row:hover .faq-arrow,
.faq-item.is-open .faq-arrow { background: var(--color-accent); }