/* GlorySmile — contact page (body[data-page='contact']).
   One bold moment: the giant "Пиши ни" next to the round mirror photo inside a halo.
   Below: three giant channel rows, then the facts strip. */

/* ---------- Hero ---------- */
.ct-hero {
  display: grid; gap: clamp(2rem, 6vw, 3rem);
  padding-block: clamp(2.5rem, 7vw, 6rem) clamp(4rem, 10vw, 8rem);
}
.ct-hero__title {
  font-size: clamp(4.5rem, 25vw, 16rem);
  font-weight: 200; line-height: 0.86; letter-spacing: -0.055em;
}
.ct-hero__title span { display: block; }
.ct-hero__title span + span { padding-left: 0.9em; }

.ct-hero__media { position: relative; width: min(100%, 640px); aspect-ratio: 1; justify-self: end; }
.ct-hero__img { position: absolute; inset: 6%; }
.ct-hero__img > img { object-position: 60% 40%; }
.ct-hero__halo { --size: 100%; --ring: 3px; position: absolute; inset: 0; }

@media (min-width: 900px) {
  .ct-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; }
  .ct-hero__title { font-size: clamp(5rem, 14.5vw, 17rem); }
}

/* ---------- Channel rows ---------- */
.ct-list { list-style: none; padding: 0; border-top: 1px solid var(--mist); }
.ct-list li { border-bottom: 1px solid var(--mist); }
.ct-row {
  display: flex; align-items: center; gap: 1rem;
  min-height: 88px; padding-block: clamp(1.4rem, 3.5vw, 3rem);
  text-decoration: none;
}
.ct-row__value {
  font-family: var(--f-display); font-weight: 300; letter-spacing: -0.04em; line-height: 1;
  font-size: clamp(1.5rem, 6.4vw, 5.25rem);
  margin-right: auto; min-width: 0; overflow-wrap: anywhere;
  transition: color 0.3s var(--ease), transform 0.5s var(--ease);
}
.ct-row__go {
  display: grid; place-items: center; flex: none;
  width: clamp(44px, 6vw, 84px); aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid var(--mist); background: var(--pearl); color: var(--ink);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.5s var(--ease);
}
.ct-row__go svg { width: 42%; height: 42%; }
.ct-row:hover .ct-row__value { color: var(--ultra); transform: translateX(0.12em); }
.ct-row:hover .ct-row__go { background: var(--ultra); border-color: var(--ultra); color: var(--pearl); transform: rotate(-45deg); }

/* ---------- Facts strip ---------- */
.ct-facts { margin-top: var(--section); }