/* Consultations page (core/consultations.html). Green and white slides alternate;
   cards keep dark text on a light surface; the price comes from CRM site settings. */

.cs { --cs-line: rgb(255 255 255 / .16); --cs-soft: rgb(255 255 255 / .08); overflow-x: clip; }
.cs .jn-slide--white .jn-section-heading h2 { color: var(--jn-green); }
.cs .jn-section-heading { margin-bottom: 2.25rem; }
.cs .jn-section-heading h2 { letter-spacing: -.02em; }
.cs h3 { font-size: 1.0625rem; line-height: 1.35; }
.cs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.cs-button--ghost { color: #fff; border-color: rgb(255 255 255 / .35); background: transparent; }
.cs-button--ghost:hover { border-color: var(--jn-orange); color: #fff; }
.cs-link { color: var(--jn-orange); font-size: .9375rem; font-weight: 700; text-decoration: none; }
.cs-link:hover { text-decoration: underline; }

/* Hero */
.cs-hero { display: flex; align-items: center; }
.cs-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: 4rem; align-items: center; }
.cs-hero__tags { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0 0 1.5rem; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .7); }
.cs-badge { padding: .4rem .85rem; border-radius: .4rem; background: var(--jn-orange); color: #fff; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; }
.cs-hero h1 { max-width: 40rem; font-size: clamp(1.75rem, 3.2vw, 2.25rem); line-height: 1.15; letter-spacing: -.02em; color: #fff; }
.cs-hero h1 span { color: var(--jn-orange); }
.cs-hero__lead { max-width: 38rem; margin-top: 1rem; font-size: clamp(.9375rem, 1.6vw, 1.125rem); line-height: 1.75; color: rgb(255 255 255 / .78); }
.cs-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; max-width: 38rem; margin: 2rem 0; }
.cs-stats div { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem; border: 1px solid var(--cs-line); border-radius: var(--jn-radius-sm); background: var(--cs-soft); }
.cs-stats dt { font-size: 1.5rem; font-weight: 700; line-height: 1.15; color: #fff; white-space: nowrap; }
.cs-stats dd { margin: 0; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; color: rgb(255 255 255 / .6); }
.cs-hero__expert { display: grid; justify-items: center; gap: 1.25rem; margin: 0; }
.cs-hero__photo { position: relative; width: 100%; aspect-ratio: 1; padding: .9rem; border: 1px solid var(--cs-line); border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgb(255 255 255 / .09), transparent 70%); }
.cs-hero__photo::after { content: ""; position: absolute; inset: -.6rem; border: 2px solid transparent; border-top-color: var(--jn-orange); border-right-color: var(--jn-orange); border-radius: 50%; rotate: 20deg; }
.cs-hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: 50%; }
.cs-hero__expert figcaption { display: grid; gap: .2rem; text-align: center; }
.cs-hero__expert strong { color: #fff; font-size: 1rem; }
.cs-hero__expert figcaption span { color: rgb(255 255 255 / .65); font-size: .8125rem; }

/* Formats */
.cs-formats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.cs-format { display: flex; flex-direction: column; gap: 1rem; padding: 2rem; border: 1px solid var(--jn-border); border-radius: var(--jn-radius); background: var(--jn-cream); transition: translate .3s ease, box-shadow .3s ease, border-color .2s ease; }
.cs-format:hover { translate: 0 -4px; border-color: var(--jn-orange); box-shadow: 0 18px 40px rgb(1 60 53 / .12); }
.cs-format--accent { border: 2px solid var(--jn-orange); background: #fff; }
.cs-format__label { font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--jn-orange-dark); }
.cs-format h3 { font-size: 1.25rem; color: var(--jn-green); }
.cs-format .jn-checks { flex: 1; }
.cs-format__price { display: grid; gap: .25rem; padding-top: 1rem; border-top: 1px solid var(--jn-border); }
.cs-format__price strong { font-size: 1.5rem; line-height: 1.2; color: var(--jn-green); }
.cs-format__price span { font-size: .8125rem; color: var(--jn-muted); }
.cs-format .jn-button { align-self: flex-start; }
.cs-aside { margin-top: 1.5rem; font-size: .9375rem; color: var(--jn-muted); }
.cs-aside a { color: var(--jn-orange-dark); font-weight: 700; text-decoration: none; }
.cs-aside a:hover { text-decoration: underline; }

/* Expert */
.cs-expert { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 4rem; align-items: center; }
.cs-expert .jn-section-heading { margin-bottom: 1.25rem; }
.cs-expert__text { max-width: 36rem; margin-bottom: 1.5rem; font-size: 1rem; line-height: 1.75; color: rgb(255 255 255 / .78); }
.cs-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; }
.cs-facts div { display: grid; gap: .3rem; padding: 1.25rem; border: 1px solid var(--cs-line); border-radius: var(--jn-radius-sm); background: var(--cs-soft); }
.cs-facts dt { font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: var(--jn-orange); }
.cs-facts dd { margin: 0; font-size: .875rem; color: rgb(255 255 255 / .75); }

/* Steps use the shared .jn-steps component. */
.cs-note { margin-top: 2rem; padding: 1rem 1.25rem; border-left: 3px solid var(--jn-orange); border-radius: var(--jn-radius-sm); background: var(--jn-cream); font-size: .9375rem; color: #444; }

/* Request */
.cs-request { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; align-items: start; }
.cs-request__intro h2 { margin: .75rem 0 1rem; font-size: var(--jn-h2); line-height: 1.12; letter-spacing: -.02em; color: #fff; }
.cs-request__lead { font-size: var(--jn-text-lead); line-height: 1.75; color: rgb(255 255 255 / .75); }
.cs-telegram { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; padding: 1.1rem 1.25rem; border: 1px solid var(--cs-line); border-radius: var(--jn-radius-sm); background: var(--cs-soft); }
.cs-telegram svg { flex-shrink: 0; width: 2.5rem; height: 2.5rem; padding: .55rem; border-radius: 50%; background: #fff; color: var(--jn-green); }
.cs-telegram div { display: grid; gap: .15rem; font-size: .9375rem; }
.cs-telegram strong { color: #fff; }
.cs-telegram a { color: var(--jn-orange); font-weight: 700; text-decoration: none; }
.cs-telegram a:hover { text-decoration: underline; }
.cs-panel { --jn-text: #111; --jn-muted: #666; padding: 2rem; border-radius: var(--jn-radius); background: #fff; color: #111; box-shadow: 0 24px 60px rgb(0 0 0 / .18); }
.cs-kind { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 0; padding: 0; border: 0; }
.cs-kind legend { margin-bottom: .5rem; padding: 0; font-size: .8125rem; font-weight: 600; }
.cs-kind__option { position: relative; display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .65rem .85rem; border: 1px solid var(--jn-border); border-radius: .5rem; font-size: .875rem; font-weight: 600; line-height: 1.35; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.cs-kind__option input { flex-shrink: 0; accent-color: var(--jn-orange); }
.cs-kind__option span { display: grid; gap: .1rem; }
.cs-kind__option small { font-size: .75rem; font-weight: 500; color: var(--jn-muted); }
.cs-kind__option:has(input:checked) { border-color: var(--jn-orange); background: rgb(255 111 63 / .07); }
.cs-kind__option:has(input:focus-visible) { outline: 2px solid var(--jn-orange); outline-offset: 2px; }
.cs-kind .errorlist { grid-column: 1 / -1; }
.cs-panel .jn-button[type=submit] { width: 100%; }
.cs-success { display: grid; gap: .75rem; }
.cs-success h3 { color: var(--jn-green); font-size: 1.25rem; }
.cs-success a { color: var(--jn-orange-dark); font-weight: 700; }

/* Motion: entrance for the first screen, reveals only where scroll timelines exist.
   The shared reduced-motion rule in system.css disables all of it. */
@keyframes cs-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes cs-turn { from { rotate: -70deg; opacity: 0; } to { rotate: 20deg; opacity: 1; } }
.cs-hero__copy > * { animation: cs-in .7s cubic-bezier(.2, .7, .2, 1) both; }
.cs-hero__copy > :nth-child(2) { animation-delay: .08s; }
.cs-hero__copy > :nth-child(3) { animation-delay: .16s; }
.cs-hero__copy > :nth-child(4) { animation-delay: .24s; }
.cs-hero__copy > :nth-child(5) { animation-delay: .32s; }
.cs-hero__expert { animation: cs-in 1s cubic-bezier(.2, .7, .2, 1) .25s both; }
.cs-hero__photo::after { animation: cs-turn 1.4s cubic-bezier(.2, .7, .2, 1) .5s both; }
@supports (animation-timeline: view()) {
  .cs :is(.cs-format, .cs-facts div, .cs-panel) {
    animation: cs-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
  .cs :is(.cs-format, .cs-facts div):nth-child(2n) { animation-range: entry 8% entry 63%; }
}

/* Responsive */
@media (min-width: 901px) {
  .cs > .cs-hero { min-height: calc(100svh - var(--jn-header-height)); }
}
@media (max-width: 900px) {
  .cs-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .cs-hero__expert { grid-row: 1; grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: 1rem; }
  .cs-hero__photo { width: 5.5rem; padding: .3rem; }
  .cs-hero__photo::after { inset: -.3rem; }
  .cs-hero__expert figcaption { text-align: left; }
  .cs-expert, .cs-request { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
}
@media (max-width: 40rem) {
  .cs-formats { grid-template-columns: minmax(0, 1fr); }
  .cs-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cs-stats div:first-child { grid-column: 1 / -1; }
  .cs-format, .cs-panel { padding: 1.5rem 1.25rem; }
  .cs-format .jn-button, .cs-actions .jn-button { align-self: stretch; flex: 1 1 100%; text-align: center; }
  .cs-kind { grid-template-columns: minmax(0, 1fr); }
}