/* Let the four service previews keep their natural height after the cloud arrival. */
:root {
  --services-top: max(115px, 15svh);
  --stage-height: max(100svh, calc(var(--services-top) + var(--services-height, 560px) + 90px));
  --transition-length: 115svh;
}
.journey { height: calc(var(--stage-height) + var(--transition-length)); }
.stage { height: var(--stage-height); }
.hero { height: 100svh; bottom: auto; }
.services { top: var(--services-top); width: min(1160px, 88%); }
.cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.service-card { display: flex; flex-direction: column; padding: 26px 24px 24px; min-width: 0; }
.card-top { height: 86px; flex-shrink: 0; }
.card-top > span:first-child { font-size: 8px; letter-spacing: 1.3px; }
.orb { position: relative; flex-shrink: 0; width: 60px; height: 60px; }
.service-card h3 { font-size: 24px; line-height: 1.2; min-height: 2.4em; margin: 15px 0 12px; }
.service-card p { flex: 1; font-size: 13px; line-height: 1.7; margin: 0 0 24px; max-width: none; }
.card-link { gap: 8px; align-items: center; font-size: 11px; }

/* A quiet ripple: the same frosted material as the original therapy/coaching orbs. */
.calm-orb { transform: rotate(-12deg) scaleY(.82); }
.calm-orb::before, .calm-orb::after {
  content: ''; position: absolute; border-radius: 50%;
  border: 1px solid #fff9; box-shadow: inset 1px 2px 6px #fff9, 0 2px 5px #65598024;
}
.calm-orb::before { inset: 10%; background: linear-gradient(135deg, #fff3, #a699c340); }
.calm-orb::after { inset: 30%; background: radial-gradient(circle at 30% 25%, #fff9, #c3b6d560); }

/* Two connected lenses, representing the same human connection in two settings. */
.connection-orb { border: 0; background: none; box-shadow: none; transform: rotate(-18deg); }
.connection-orb::before, .connection-orb::after {
  content: ''; position: absolute; width: 68%; height: 86%; top: 8%;
  border-radius: 46%; border: 1px solid #fff9;
  background: radial-gradient(circle at 28% 22%, #fffb, #e3d4ea6b 42%, #827bb855 72%, #fff9);
  box-shadow: inset 2px 3px 8px #fff9, inset -4px -5px 8px #807ca333, 0 7px 14px #54446314;
}
.connection-orb::before { left: -5%; transform: rotate(-12deg); }
.connection-orb::after { right: -5%; top: 20%; transform: rotate(12deg); }

@media (max-width: 1050px) and (min-width: 701px) {
  .services { width: min(850px, 88%); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-card { padding: 22px 26px; }
  .card-top { height: 56px; }
  .orb { width: 48px; height: 48px; }
  .therapy-orb::after { width: 32px; height: 32px; margin: 24px 0 0 -15px; }
  .service-card h3 { min-height: 0; font-size: 24px; }
  .service-card p { margin-bottom: 18px; }
}
@media (max-height: 740px) and (min-width: 701px) {
  :root { --services-top: 95px; }
  .card-top { height: 55px; }
  .orb { width: 45px; height: 45px; }
  .service-card { padding: 20px 22px; }
  .service-card h3 { font-size: 22px; margin-top: 12px; }
}
@media (max-width: 700px) {
  :root { --services-top: 95px; --transition-length: 100svh; }
  .services { width: calc(100% - 40px); }
  .cards { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .service-card { padding: 20px 22px 18px; min-height: 155px; }
  .card-top { position: absolute; top: 22px; right: 23px; height: auto; }
  .orb { width: 38px; height: 38px; }
  .therapy-orb::after { width: 25px; height: 25px; margin: 19px 0 0 -12px; }
  .service-card h3 { min-height: 0; font-size: 23px; margin: 0 60px 8px 0; }
  .service-card p { font-size: 12px; line-height: 1.6; margin: 0 30px 14px 0; }
  .service-card:nth-child(-n+2) p { margin-right: 60px; }
  .card-link { font-size: 11px; }
}
@media (max-width: 360px) {
  .services { width: calc(100% - 36px); }
  .service-card { padding: 18px; }
  .service-card h3 { font-size: 21px; margin-right: 52px; }
  .service-card p { margin-right: 12px; }
  .orb { width: 33px; height: 33px; }
  .card-top { right: 20px; }
}
body.reduced .hero { height: auto; }