/* TalkWise expert refinement — consistent scale, calm hierarchy and reliable motion. */

:root {
  --tw-reading-size: 1.125rem;
  --tw-reading-line: 1.72;
  --tw-reading-measure: 66ch;
}

html,
body {
  overflow-x: clip;
}

/* The opening proposition is read as one uninterrupted sentence. Every word
   follows the same timeline, so the second line continues naturally rather
   than restarting or pausing. Lettering stays crisp throughout. */
@media (prefers-reduced-motion: no-preference) {
  .home-page .scroll-scrub__title.tw-heading-visible.tw-opening-cycle .tw-heading-word {
    transition: none;
    animation: tw-opening-word-arrive .68s cubic-bezier(.2, .72, .22, 1)
      calc(90ms + var(--tw-word-index, 0) * 145ms) both;
  }
}

@keyframes tw-opening-word-arrive {
  from {
    opacity: 0;
    filter: none;
    transform: translate3d(0, .12em, 0);
    text-shadow: none;
  }
  to {
    opacity: 1;
    filter: none;
    transform: translate3d(0, 0, 0);
    text-shadow: none;
  }
}

/* A slightly tighter cadence keeps the same natural reading order on phones. */
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .home-page .scroll-scrub__title.tw-heading-visible.tw-opening-cycle .tw-heading-word {
    animation-duration: .62s;
    animation-delay: calc(70ms + var(--tw-word-index, 0) * 125ms);
  }
}

@keyframes tw-opening-forest-light {
  0%, 76%, 100% {
    color: #293b2c;
    text-shadow: none;
  }
  85% {
    color: #3b5946;
    text-shadow: 0 6px 20px rgba(52, 84, 64, .11);
  }
  93% {
    color: #304636;
    text-shadow: 0 2px 10px rgba(52, 84, 64, .05);
  }
}

@keyframes tw-opening-bronze-light {
  0%, 76%, 100% {
    color: #9b704f;
    text-shadow: none;
  }
  85% {
    color: #b78755;
    text-shadow: 0 7px 22px rgba(184, 132, 69, .16);
  }
  93% {
    color: #a56f45;
    text-shadow: 0 3px 12px rgba(155, 112, 79, .07);
  }
}

/* Readable prose without flattening the existing editorial hierarchy. */
.talkwise-site section p:not(.section-label):not(.scroll-scrub__kicker):not(.tw-clock__label):not(.phase2-section2__trust):not(.phase2-section2__choice):not(.phase2-section3__turn):not(.phase2-section3__experience):not(.phase2-section3__final):not(.phase2-section4__intro):not(.phase2-section5__lead) {
  font-size: var(--tw-reading-size);
  line-height: var(--tw-reading-line);
}

.talkwise-site .page-intro p,
.talkwise-site .page-lead,
.talkwise-site .about-intro-layout .page-lead {
  font-size: clamp(1.22rem, 1.65vw, 1.48rem);
  line-height: 1.58;
}

.talkwise-site .talkwise-section > p,
.talkwise-site .talkwise-section > div > p,
.talkwise-site .therapy-article p,
.talkwise-site .culture-page p {
  max-width: var(--tw-reading-measure);
}

/* Long invitations should feel gracious rather than overpowering. */
.home-page #therapist-become-title {
  max-width: 15ch;
  font-size: clamp(2.35rem, 3.7vw, 2.9rem);
  line-height: 1.12;
  text-wrap: balance;
}

.home-page .home-about-copy > p:not(.home-about-statement),
.home-page .home-about-content > p:not(.home-about-statement),
.home-page #therapist-i-have-become p:not(.home-about-statement) {
  font-size: 1.125rem;
  line-height: 1.72;
}

/* The opening conversation now has one unambiguous reading path. */
.home-page .phase2-section2__inner {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  grid-template-areas:
    "opening exploration"
    "opening challenge"
    "art autonomy";
  column-gap: clamp(3rem, 7vw, 6.5rem);
  row-gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.home-page .phase2-section2__opening { grid-area: opening; }
.home-page .phase2-section2__exploration { grid-area: exploration; }
.home-page .phase2-section2__challenge { grid-area: challenge; }
.home-page .phase2-section2__awareness-art { grid-area: art; }
.home-page .phase2-section2__autonomy { grid-area: autonomy; }

.home-page .phase2-section2::before {
  display: none;
}

.home-page .phase2-section2__opening,
.home-page .phase2-section2__exploration,
.home-page .phase2-section2__challenge,
.home-page .phase2-section2__autonomy {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

.home-page .phase2-section2__opening .section-label {
  position: static;
  display: block;
  margin: 0 0 .85rem;
  font-size: .92rem;
  line-height: 1.4;
  letter-spacing: .11em;
}

.home-page .phase2-section2__opening h2 {
  max-width: 11ch;
  margin-top: 0;
}

.home-page .phase2-section2__exploration {
  padding-bottom: clamp(1.5rem, 3vw, 2.4rem);
  border-bottom: 1px solid rgba(112, 86, 61, .2);
}

.home-page .phase2-section2__challenge h3 {
  max-width: 19ch;
  margin-top: 0;
}

.home-page .phase2-section2__awareness-art {
  width: min(100%, 23rem);
  justify-self: center;
}

/* Keep the reflective conclusion and the route onward visually distinct. */
.home-page .phase2-section5__closing-statement {
  display: grid;
  gap: 1.15rem;
  align-items: start;
}

.home-page .phase2-section5__closing-statement > p {
  margin: 0;
}

.home-page .phase2-section5__closing-statement .therapy-ownership-statement {
  max-width: 34ch;
  color: var(--tw-copper, #8f5c45);
  font-family: Lora, Georgia, serif;
  font-size: clamp(1.8rem, 3vw, 2.45rem);
  line-height: 1.32;
}

.home-page .phase2-section5__closing-statement .therapy-ownership-link {
  width: fit-content;
  max-width: 38ch;
  color: #294638;
  font-size: clamp(1.2rem, 1.7vw, 1.48rem);
  line-height: 1.45;
  text-decoration-thickness: .055em;
  text-underline-offset: .22em;
}

/* A touchscreen user must always be told that the room image is illustrative. */
.talkwise-site .room-disclaimer {
  opacity: 1;
  visibility: visible;
  font-size: .72rem;
  background: rgba(29, 43, 36, .62);
}

/* Practical pages need confidence and clarity, not billboard-scale headings. */
.talkwise-site .meaning-title--private,
.confidentiality-page .meaning-title,
.talkwise-site .meaning-title--support,
.payment-page .page-intro h1 {
  max-width: 15ch;
  font-size: clamp(3.15rem, 5.25vw, 4rem);
  line-height: 1.05;
  text-wrap: balance;
}

.booking-page .page-intro h1,
.confidentiality-page .page-intro h1,
.support-page .page-intro h1,
.payment-page .page-intro h1 {
  font-size: clamp(3.15rem, 5.25vw, 4rem) !important;
  line-height: 1.05 !important;
}

.therapy-approach-page h2,
.culture-page h2,
.confidentiality-page h2 {
  text-wrap: balance;
}

/* Pull statements share one deliberate scale. */
.talkwise-site .phase2-section3__turn,
.talkwise-site .phase2-section3__experience,
.talkwise-site .phase2-section3__final,
.talkwise-site .home-about-statement,
.talkwise-site .listening-editorial__line {
  font-size: clamp(1.72rem, 2.7vw, 2.22rem) !important;
  line-height: 1.42;
}

.talkwise-site .phase2-section3__final {
  max-width: 32ch;
}

.talkwise-site #professional-background-title {
  font-size: clamp(1.5rem, 2.1vw, 1.78rem);
  line-height: 1.25;
}

/* Reflections remain literary while the two works carry equal visual weight. */
.talkwise-site .reflections-piece h2,
.talkwise-site #genesis-title,
.talkwise-site #mask-title {
  font-size: clamp(2.7rem, 5vw, 3.75rem);
  line-height: 1.08;
  text-wrap: balance;
}

.talkwise-site .reflection-mask-art,
.talkwise-site .reflection-mask-figure,
.talkwise-site .mask-reflection figure {
  width: min(100%, 47.5rem);
}

/* Support and safety information is intentionally still and highly legible. */
.talkwise-site .urgent-strip,
main.support-page,
main.payment-page,
.confidentiality-page {
  --tw-reading-size: 1.1rem;
}

.booking-page .tw-heading-word,
.confidentiality-page .tw-heading-word,
.payment-page .tw-heading-word,
.support-page .tw-heading-word {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

@media (max-width: 760px) {
  :root {
    --tw-reading-size: 1.075rem;
    --tw-reading-line: 1.7;
  }

  .talkwise-site section p:not(.section-label):not(.scroll-scrub__kicker):not(.tw-clock__label) {
    font-size: var(--tw-reading-size);
    line-height: var(--tw-reading-line);
  }

  .home-page .phase2-section2__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "opening"
      "exploration"
      "challenge"
      "art"
      "autonomy";
    gap: 2.25rem;
  }

  .home-page .phase2-section2__opening h2 {
    max-width: 13ch;
  }

  .home-page .phase2-section2__awareness-art {
    width: min(82vw, 19rem);
  }

  .home-page #therapist-become-title {
    max-width: 14ch;
    font-size: clamp(2.2rem, 9.5vw, 2.4rem);
    line-height: 1.1;
  }

  .therapy-approach-page h2,
  .culture-page h2,
  .confidentiality-page h2,
  .talkwise-site .sessions-page h2 {
    font-size: clamp(1.92rem, 8.25vw, 2.12rem);
    line-height: 1.18;
  }

  .talkwise-site .meaning-title--private,
  .confidentiality-page .meaning-title,
  .talkwise-site .meaning-title--support,
  .payment-page .page-intro h1 {
    font-size: clamp(2.7rem, 12vw, 3.1rem);
  }

  .booking-page .page-intro h1,
  .confidentiality-page .page-intro h1,
  .support-page .page-intro h1,
  .payment-page .page-intro h1 {
    font-size: clamp(2.7rem, 12vw, 3.1rem) !important;
  }

  .talkwise-site .reflections-piece h2,
  .talkwise-site #genesis-title,
  .talkwise-site #mask-title {
    font-size: clamp(2.45rem, 11vw, 2.85rem);
  }

  .talkwise-site .about-imran-illustration {
    width: min(92%, 25rem);
    margin-inline: auto;
  }
}

/* Anchored sections must clear the persistent navigation rather than hide beneath it. */
.talkwise-site section[id],
.talkwise-site h1[id],
.talkwise-site h2[id],
.talkwise-site h3[id] {
  scroll-margin-top: 8.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .talkwise-site *,
  .talkwise-site *::before,
  .talkwise-site *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    opacity: 1;
  }
}