/* index.html – interactive point cloud behind the claim */
.home-intro { position: relative; overflow: hidden; }
.claim-cloud { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.claim-box { z-index: 1; }

/* dimension lines off here – the point cloud is the decoration of this section */
.claim-box .dim { display: none; }

/* project cards in the typographic line of the page:
   big mono number (like the chapter numbers on the project pages) + tight Figtree title (like the hero),
   and the meta as a dimension line across the image width (the motif of the claim on the main page) */
.project-header { justify-content: flex-start; align-items: baseline; gap: clamp(1rem, 2vw, 2rem); margin-bottom: 1.75rem; padding-bottom: 0; }
.project-header.reversed { flex-direction: row; justify-content: flex-end; }   /* title on the right: number still comes first ("02 Salzgitter AG") */
.project-num { font-family: var(--mono); font-weight: 400; font-size: clamp(56px, 7vw, 112px); line-height: 0.75; letter-spacing: -0.06em; color: #262626; }
.project-title { line-height: 0.88; letter-spacing: -0.05em; }

.project-dim { position: relative; height: 1px; background: #2e2e2e; margin-bottom: 1.75rem; }
.project-dim::before, .project-dim::after { content: ''; position: absolute; top: -6px; width: 1px; height: 13px; background: #4a4a4a; }
.project-dim::before { left: 0; } .project-dim::after { right: 0; }
.project-dim span { position: absolute; left: 22px; top: 0; transform: translateY(-50%); padding: 0 12px; background: var(--bg);   /* label on the title's side – nothing on the page is centred */
  font: 400 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #555; white-space: nowrap; }
.project-header.reversed + .project-dim span { left: auto; right: 22px; }
.project .project-dim { opacity: 0; transition: opacity 0.7s ease; }
.project.is-active .project-dim { opacity: 1; }

@media (max-width: 768px) {
  .project-header, .project-header.reversed { flex-direction: row; gap: 0.75rem; }
  .project-dim span { font-size: 9px; padding: 0 8px; }
}

/* claim left-aligned with the project cards (same left edge as .project-section), the point cloud takes the right side */
.home-intro { justify-content: flex-start; padding-left: max(2.5rem, calc((100% - var(--max)) / 2 + 2.5rem)); padding-right: max(2.5rem, calc((100% - var(--max)) / 2 + 2.5rem)); }
@media (max-width: 768px) { .home-intro { padding-left: 1rem; padding-right: 1rem; } }

/* ── ABOUT: big portrait as the visual anchor (like image + type on the cards), the statement large beside it ── */
.about2 { max-width: var(--max); margin: 0 auto; padding: clamp(5rem, 12vh, 9rem) 2.5rem clamp(3rem, 8vh, 6rem);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; align-items: start; }
.about2-photo { grid-column: 1 / span 3; aspect-ratio: 1; max-height: 44svh; overflow: hidden; background: #111; }
.about2-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; filter: brightness(0.8) saturate(0) contrast(1.1); transition: filter 0.6s ease; }
.about2-photo:hover img { filter: brightness(0.95) saturate(1) contrast(1); }
.about2-text { grid-column: 5 / span 7; display: grid; gap: clamp(1rem, 2.5vh, 1.75rem); }
.about2-lead { margin-top: -0.18em; font-size: clamp(28px, 3.1vw, 50px);   /* cap height of the first line meets the top of the photo */
  font-weight: 500; line-height: 1.08; letter-spacing: -0.035em; color: #4a4a4a; }
.about2-lead strong { font-weight: 500; color: var(--text); }
.about2-facts { font: 400 11px/1.6 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #555; }
.about2-body { font-size: 16px; line-height: 1.75; color: #666; max-width: 34em; }
@media (max-width: 900px) {
  .about2 { padding-left: 1rem; padding-right: 1rem; row-gap: 2.5rem; }
  .about2-photo { grid-column: 1 / span 8; }
  .about2-text { grid-column: 1 / -1; }
}

.about2 { padding-top: 12rem; padding-bottom: clamp(2rem, 5vh, 3.5rem); }   /* about + contact read as one closing block: section gap above (= gap between projects), tight inside */
.bottom-section { opacity: 1; }   /* no dimming of about / contact */
.contact-xl { padding-bottom: clamp(3rem, 9vh, 7rem); }   /* more air between the contact row and the footer */

/* hero: the digital step (Doto) is the focus and white, the physical "Build." steps back */
.hero-title .accent { color: var(--text); }
.hero-title .soft { color: rgba(255,255,255,0.45); }
/* claim: "when it counts." always on its own last line */
.home-lead .lead-end { display: block; }
/* fixed lines on wider screens: "From precise 3D models to finished" / "renders – and physical objects" / "when it counts." */
@media (min-width: 900px) { .home-lead .lead-l { display: block; } .claim-box { max-width: none; width: auto; } }
/* Doto has no left side bearing, Figtree ~0.07em: shift Doto that starts a line so all lines share one edge */
.hero-title .accent, .home-lead .accent.line-start { margin-left: 0.073em; }

/* Doto's period is a plus of five pixels – replaced by a single Doto pixel (0.08em square on the baseline, 0.1em grid) */
.px-dot { display: inline-block; width: 0.08em; height: 0.08em; margin-left: 0;   /* kerned: the r is open at the bottom */ background: currentColor; vertical-align: baseline; }
.sr-dot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* real "." kept for screen readers / copy */


/* Solitude card: four film frames side by side, like the cover of the project page (the rover alone is already the hero) */
.card-strip { display: grid; grid-template-columns: repeat(4, 1fr); }
.card-strip img { min-width: 0; }
@media (max-width: 768px) { .card-strip { grid-template-columns: 1fr 1fr; } .card-strip img:nth-child(n+3) { display: none; } }

/* project cards without numbers (they carried no information: the order is neither ranking nor chronology) –
   the title stands alone and is a bit larger so the header keeps its weight */
.project-title { font-size: clamp(60px, 9vw, 132px); }