/* ============================================================
   CONSULTATIONS — "the transcript"

   This division sells a conversation, so the page is set like one:
   an asymmetric editorial column, questions rendered as pulled
   quotes with speaker rules, and a session clock instead of a
   feature grid. Warmest palette on the site — coral over a brown-
   black rather than the corporate blue-black — because a $250 call
   with one person should not look like a $10k/mo engagement.

   Deliberately the quietest page here. It's the cheapest thing
   Kellstar sells and the easiest to say yes to; loading it with
   machinery would misrepresent what you're buying.
   ============================================================ */

html { background: #0a0807; }   /* on <html>: an opaque <body> would bury the star canvas */

/* Warm wash from the top rather than the shared cold scrim. */
main > section:not(.hero) { background: rgba(10, 8, 7, 0.91); }
.foot { background: rgba(10, 8, 7, 0.92); }

/* ---------- hero ---------- */

.conshero {
  min-height: auto;
  padding: clamp(7rem, 13vw, 10rem) var(--pad) clamp(3rem, 7vw, 5rem);
}
.conshero::before {
  background: radial-gradient(70% 70% at 22% 40%, rgba(255, 138, 115, 0.09), transparent 70%);
}
.conshero .wrap { max-width: 60rem; }
.conshero .hero__h1 { font-size: clamp(2.8rem, 8vw, 7rem); }
.conshero .hero__h1 i { color: var(--accent); font-style: italic; }
.conshero .hero__sub { max-width: 32rem; font-size: clamp(1.02rem, 1.5vw, 1.18rem); }

/* A hairline rule under the hero that runs the full bleed — the page's
   one structural gesture, borrowed from a printed masthead. */
.conshero::after {
  content: "";
  position: absolute;
  left: var(--pad); right: var(--pad); bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), rgba(255, 138, 115, 0.08) 60%, transparent);
}

/* ---------- the session clock ---------- */

.dialsec { padding-top: clamp(3rem, 7vw, 5rem); }
.dialsec .wrap { max-width: 60rem; }

.dial { max-width: 46rem; margin: 4rem auto 0; padding: 0 var(--pad); }
.dial__track { position: relative; height: 1px; background: rgba(255, 138, 115, 0.22); margin: 0 0.5rem; }
.dial__fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 220% 100%;
  animation: dialshine 5s ease-in-out infinite;
}
@keyframes dialshine { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

.dial__mark { position: absolute; top: -0.5rem; transform: translateX(-50%); text-align: center; padding-top: 2.4rem; }
.dial__mark::before {
  content: "";
  position: absolute;
  top: 0.5rem; left: 50%;
  width: 7px; height: 7px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--accent);
}
.dial__mark:first-child { transform: translateX(0); text-align: left; }
.dial__mark:first-child::before { left: 0; }
.dial__mark:last-child { transform: translateX(-100%); text-align: right; }
.dial__mark:last-child::before { left: 100%; }
.dial__mark b { display: block; font-family: var(--serif); font-size: 1.25rem; color: var(--white); }
.dial__mark i { display: block; font-style: normal; color: var(--mute); font-size: 0.8rem; margin-top: 0.3rem; max-width: 11rem; }

.dial__price {
  text-align: center;
  margin-top: 5rem;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1;
  color: var(--accent);
}
.dial__price span {
  display: block;
  font-family: var(--sans);
  font-size: 0.92rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mute);
  margin-top: 0.9rem;
}

/* ---------- questions as pulled quotes ---------- */

.qlist { max-width: 52rem; margin: 3.5rem auto 0; padding: 0 var(--pad); display: grid; gap: 2.4rem; }
.q {
  position: relative;
  padding-left: 1.6rem;
  border-left: 2px solid rgba(255, 138, 115, 0.28);
  transition: border-color 0.4s;
}
.q:hover { border-left-color: var(--accent); }
.q__who {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.7rem;
}
.q__ask {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--white);
}
.q__ans { color: var(--mute); margin-top: 0.8rem; max-width: 34rem; font-size: 0.96rem; }

.fits__note {
  max-width: 40rem;
  margin: 3.2rem auto 0;
  padding: 1.4rem var(--pad) 0;
  border-top: 1px solid rgba(255, 138, 115, 0.18);
  color: var(--mute);
  font-size: 0.95rem;
}

/* ---------- limits ---------- */

.fit__cols--single { grid-template-columns: 1fr; max-width: 46rem; }
.fit__cols--single .fitcol { border: 0; background: none; padding: 0; }
.fit__cols--single .crit { border-top-color: rgba(255, 138, 115, 0.14); }
.fit__cols--single .crit__n { color: var(--accent); }

/* ---------- checkout, warm ---------- */

.cksum { background: radial-gradient(90% 60% at 50% 0%, rgba(255, 138, 115, 0.1), transparent 65%), #120e0d; }
.ckpick { background: #120e0d; }
.fld input, .fld select, .fld textarea { background: #0a0807; }

@media (max-width: 640px) {
  .dial__track { margin: 0; }
  .dial__mark { position: static; transform: none; text-align: left; padding: 1.5rem 0 0 1.5rem; border-left: 1px solid rgba(255, 138, 115, 0.2); }
  .dial__mark::before { top: 1.8rem; left: -4px; }
  .dial__mark:first-child, .dial__mark:last-child { transform: none; text-align: left; }
  .dial__mark:first-child::before, .dial__mark:last-child::before { left: -4px; }
  .dial__mark i { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dial__fill { animation: none; background-position: 50% 0; }
}