/* Sarah / Franklyn feedback pass — 2026-08-19
   Keep content architecture; sharpen rhythm: dark hero → light therapy → dark team → light news → dark contact.
*/

/* 1) Hero becomes one coherent dark first act instead of a dark/light split */
.hero{
  background:var(--dark);
  border-radius:var(--radius);
  overflow:hidden;
  grid-template-columns:1.02fr .98fr;
}
.hero .panel{
  border-color:rgba(246,243,237,.16);
}
.hero-dark{
  border-radius:0;
  border-right:0;
}
.hero-light{
  border-radius:0;
  border-left:1px solid rgba(246,243,237,.16);
  background:var(--dark);
  color:var(--paper);
}
.hero-light .dark-label,
.hero-light .orientation-status,
.hero-light .orientation-item .num{
  color:rgba(246,243,237,.56);
}
.hero-light .orientation-list,
.hero-light .orientation-item,
.hero-light .orientation-answer{
  border-color:rgba(246,243,237,.16);
}
.hero-light .orientation-item{
  color:rgba(246,243,237,.8);
}
.hero-light .orientation-item:hover{
  background:rgba(255,255,255,.045);
  color:var(--paper);
}
.hero-light .orientation-item.is-active{
  background:var(--paper);
  color:var(--ink);
}
.hero-light .orientation-item.is-active .num{
  color:var(--ci-gold);
}
.hero-light .orientation-answer p{
  color:rgba(246,243,237,.72);
}
.hero-light .orientation-answer a{
  color:var(--paper);
}
.hero-light .answer-kicker{
  color:var(--ci-coral);
}

/* 2) Therapy remains the bright counterpoint, but the visual becomes the Raum-&-Zeit signature moment */
.therapy{
  background:var(--paper);
}
.therapy-visual{
  background:var(--paper-2);
}
.therapy-visual:before{
  inset:10%;
  border-color:rgba(22,24,23,.14);
  border-radius:50%;
}
.therapy-visual:after{
  content:"Z";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:clamp(180px,24vw,360px);
  line-height:.7;
  font-weight:500;
  letter-spacing:-.16em;
  color:rgba(22,24,23,.055);
  transform:scaleX(.82);
  pointer-events:none;
}
.body-line{
  background:rgba(22,24,23,.16);
  z-index:2;
}
.node{
  border-color:var(--paper);
  box-shadow:0 0 0 6px rgba(22,24,23,.035);
  z-index:3;
}
.hourglass-large{
  opacity:.95;
  z-index:4;
  right:5%;
  bottom:-7%;
  width:64%;
}
.hourglass-large path{
  stroke:rgba(22,24,23,.52);
  stroke-width:1.1;
}

/* 3) Wordmark: let the Z itself echo an hourglass, while keeping the existing mark */
.brand-wordmark{
  display:inline-flex;
  align-items:baseline;
  gap:.05em;
  white-space:nowrap;
}
.zeit-z{
  position:relative;
  display:inline-block;
  width:.72em;
  margin-right:.01em;
  text-align:center;
  font-weight:600;
}
.zeit-z::before,
.zeit-z::after{
  content:"";
  position:absolute;
  left:50%;
  width:.72em;
  height:1px;
  background:currentColor;
  transform-origin:center;
  opacity:.42;
}
.zeit-z::before{top:.18em;transform:translateX(-50%) rotate(28deg)}
.zeit-z::after{bottom:.12em;transform:translateX(-50%) rotate(-28deg)}
.brand:hover .zeit-z::before,
.brand:hover .zeit-z::after{opacity:.8}

/* 4) Contact closes the sequence in the same dark colour world as hero/team */
.contact-card{
  background:var(--dark);
}
.map-placeholder{
  background:#252e2a;
  border-left:1px solid rgba(246,243,237,.12);
}
.map-grid{
  background-image:
    linear-gradient(rgba(246,243,237,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(246,243,237,.08) 1px,transparent 1px);
}
.map-grid:after{
  background:var(--ci-blue);
  opacity:.7;
}
.map-pin{
  background:var(--paper);
  border-color:rgba(246,243,237,.14);
}

/* Alternating sectional rhythm: white stays white, dark stays dark. */
.news{background:var(--paper)}

@media(max-width:980px){
  .hero{grid-template-columns:1fr}
  .hero-dark{border-radius:0;min-height:560px}
  .hero-light{border-left:0;border-top:1px solid rgba(246,243,237,.16);border-radius:0;min-height:620px}
  .map-placeholder{border-left:0;border-top:1px solid rgba(246,243,237,.12)}
}

@media(max-width:680px){
  .hero{border-radius:16px}
  .therapy-visual:after{font-size:210px}
  .hourglass-large{width:72%;right:-2%}
}