/* ---------- Contact page ---------- */
:root { --accent: #ff4a12; }

/* ================= Title: heading + globe ================= */
.chero {
  position: relative;
  height: clamp(56rem, 94svh, 100rem);
  overflow: hidden;
  padding: 14rem 1.5rem 0;
  text-align: center;
  background:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 9rem 9rem,
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 9rem 9rem,
    #000;
}
/* the grid lines fade out at the bottom too, so nothing ends in a hard edge */
.chero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16rem; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000); }
.chero__title {
  position: relative; z-index: 2;
  margin: 0;
  font-size: clamp(4.2rem, 6.6vw, 13rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
  animation: wrise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

/* only the top half of the globe shows: the sheet covers the rest */
.globe {
  position: absolute; z-index: 1;
  left: 50%; bottom: 0;
  width: min(51vw, 115rem); aspect-ratio: 1;   /* the ball itself is 72% of this, the rest is room for the lines */
  transform: translate(-50%, 50%);
  cursor: grab;
  touch-action: pan-y;
  animation: gfade 1.2s ease 0.3s both;
  /* no hard edge: the lower part of the visible half fades away into the black */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 49.5%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 49.5%);
}
.globe.is-drag { cursor: grabbing; }
.globe canvas { display: block; width: 100%; height: 100%; }
@keyframes gfade { from { opacity: 0; } to { opacity: 1; } }

/* ================= The one call to action: email ================= */
.csheet {
  position: relative; z-index: 2;
  padding: 3rem 1.25rem 13rem;
  background: #000;
  color: #fff;
  text-align: center;
}
.cmail { max-width: 130rem; margin: 0 auto; }
.cmail__addr {
  display: inline-block;
  font-size: clamp(3.2rem, 7.4vw, 14rem); font-weight: 500; line-height: 1; letter-spacing: -0.055em;
  color: #fff; overflow-wrap: anywhere;
}
.cmail__text { max-width: 58rem; margin: 3.2rem auto 0; font-size: clamp(1.6rem, 1.3vw, 2.6rem); line-height: 1.4; letter-spacing: -0.01em; color: #a5a5a5; text-wrap: balance; }
.cmail .btn { margin-top: 3.2rem; }

/* reveal */
@keyframes wrise { from { opacity: 0; transform: translateY(1.8rem); } to { opacity: 1; transform: none; } }
.js-reveal .cmail { opacity: 0; transform: translateY(2rem); transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.js-reveal .cmail.in { opacity: 1; transform: none; }

@media (max-width: 820px) {
  .chero { height: auto; padding: 12rem 1rem calc(46vw + 5rem); }
  .chero__title { font-size: 11.2vw; }
  .globe { width: 118vw; }
  .csheet { padding: 2rem 1rem 8rem; }
  .cmail__addr { font-size: 9.4vw; }
  .cmail__text { font-size: 1.6rem; margin-top: 2.4rem; }
  .cmail .btn { margin-top: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .chero__title, .globe { animation: none; }
  .js-reveal .cmail { opacity: 1; transform: none; transition: none; }
}

/* no section letters on this page, so the footer does not need to leave room for them */
.footer .footer__brand { padding-left: 0; }
.footer .footer__copy { left: 0; }