/* ===== Work With Me page styles ===== */

/* ----- Hero ----- */
.wwm-hero {
  padding: var(--s-9) 0 var(--s-8);
  background: var(--cream);
  position: relative;
}

.wwm-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(92, 107, 92, 0.05) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.wwm-hero__inner {
  text-align: center;
  max-width: var(--measure-wide);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.wwm-hero__eyebrow {
  margin-bottom: var(--s-5);
}

.wwm-hero__headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: var(--w-light);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 auto var(--s-6);
  max-width: 32ch;
}

.wwm-hero__headline em {
  font-style: italic;
  color: var(--sage);
  font-weight: var(--w-light);
}

.wwm-hero__sub {
  font-family: var(--font-body);
  font-size: var(--t-lead);
  font-weight: var(--w-regular);
  font-style: italic;
  line-height: 1.5;
  color: var(--muted);
  max-width: 56ch;
  margin: 0 auto var(--s-7);
}

.wwm-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
}

/* ----- Assurance ----- */
.wwm-assurance {
  background: var(--cream-deep);
  border-top: 1px solid var(--whisper);
  border-bottom: 1px solid var(--whisper);
}

.wwm-assurance__inner {
  max-width: var(--measure-wide);
  margin: 0 auto;
  text-align: center;
}

.wwm-assurance__heading {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: var(--w-light);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: var(--s-4) auto var(--s-7);
  color: var(--ink);
  max-width: 24ch;
}

.wwm-assurance__heading em {
  font-style: italic;
  color: var(--sage);
}

.wwm-assurance__body {
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  color: var(--ink);
  max-width: 50rem;
  margin: 0 auto;
  text-align: left;
}

.wwm-assurance__body p + p {
  margin-top: var(--s-4);
}

/* ----- Who this is for ----- */
.wwm-who__header {
  text-align: center;
  margin-bottom: var(--s-8);
}

.wwm-who__heading {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: var(--w-light);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin-top: var(--s-3);
  color: var(--ink);
}

.wwm-who__heading em {
  font-style: italic;
  color: var(--sage);
}

.wwm-who__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  max-width: 60rem;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .wwm-who__columns {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8);
  }
}

.wwm-who__col-title {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: var(--w-regular);
  font-style: italic;
  color: var(--sage);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}

.wwm-who__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wwm-who__list li {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  color: var(--ink);
  padding: var(--s-3) 0;
  padding-left: var(--s-4);
  position: relative;
  border-bottom: 1px dashed var(--whisper);
}

.wwm-who__list li:last-child {
  border-bottom: none;
}

.wwm-who__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.5rem;
  width: 8px;
  height: 1px;
  background: var(--sage);
}

/* ----- The Container ----- */
.wwm-container {
  background: var(--cream-deep);
  border-top: 1px solid var(--whisper);
  border-bottom: 1px solid var(--whisper);
}

.wwm-container__header {
  text-align: center;
  margin-bottom: var(--s-8);
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}

.wwm-container__heading {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: var(--w-light);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin-top: var(--s-3);
  margin-bottom: var(--s-4);
  color: var(--ink);
}

.wwm-container__heading em {
  font-style: italic;
  color: var(--sage);
}

.wwm-container__intro {
  font-family: var(--font-body);
  font-size: var(--t-lead);
  font-style: italic;
  color: var(--muted);
  line-height: var(--lh-relaxed);
}

.wwm-container__detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  max-width: 64rem;
  margin: 0 auto;
  align-items: start;
  width: 100%;
}

.wwm-container__detail > * {
  min-width: 0;
  width: 100%;
}

@media (min-width: 900px) {
  .wwm-container__detail {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--s-8);
  }
}

.wwm-container__h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--w-regular);
  font-style: italic;
  color: var(--ink);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}

.wwm-container__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wwm-container__list li {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  color: var(--ink);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--whisper);
}

.wwm-container__list li:last-child {
  border-bottom: none;
}

.wwm-container__list li strong {
  font-weight: var(--w-semibold);
  color: var(--ink);
}

/* Investment / price card */
.wwm-container__price-card {
  background: var(--paper);
  padding: var(--s-7) var(--s-6);
  border: 1px solid var(--whisper);
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 900px) {
  .wwm-container__price-card {
    position: sticky;
    top: var(--s-8);
  }
}

.wwm-container__price-label {
  display: block;
  font-family: var(--font-eyebrow);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: var(--s-4);
}

.wwm-container__price-amount {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: var(--w-regular);
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
}

.wwm-container__price-detail {
  display: block;
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-style: italic;
  color: var(--muted);
  margin-top: var(--s-2);
}

.wwm-container__price-conversion {
  display: block;
  font-family: var(--font-body);
  font-size: var(--t-tiny);
  font-style: italic;
  color: var(--muted);
  margin-top: var(--s-3);
  opacity: 0.85;
  line-height: 1.5;
}

.wwm-container__includes-mini {
  margin: var(--s-5) 0;
  padding: var(--s-3) var(--s-4);
  background: var(--cream);
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-style: italic;
  color: var(--sage);
  border-left: 2px solid var(--sage);
  text-align: left;
}

.wwm-container__cta {
  width: 100%;
  margin-bottom: var(--s-3);
}

.wwm-container__note {
  font-family: var(--font-body);
  font-size: var(--t-tiny);
  font-style: italic;
  color: var(--muted);
  line-height: var(--lh-relaxed);
}

/* ----- Session ----- */
.wwm-session__inner {
  max-width: var(--measure-wide);
  margin: 0 auto;
  text-align: center;
}

.wwm-session__heading {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: var(--w-light);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: var(--s-4) auto var(--s-7);
  color: var(--ink);
}

.wwm-session__heading em {
  font-style: italic;
  color: var(--sage);
}

.wwm-session__body {
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  color: var(--ink);
  max-width: 50rem;
  margin: 0 auto;
  text-align: left;
}

.wwm-session__body p + p {
  margin-top: var(--s-4);
}

/* ----- Why 1:1 (indirect critique of mass programs) ----- */
.wwm-why-one {
  background: var(--cream);
}

.wwm-why-one__inner {
  max-width: var(--measure-wide);
  margin: 0 auto;
  text-align: center;
}

.wwm-why-one__heading {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: var(--w-light);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: var(--s-4) auto var(--s-7);
  color: var(--ink);
  max-width: 32ch;
}

.wwm-why-one__heading em {
  font-style: italic;
  color: var(--sage);
}

.wwm-why-one__body {
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  color: var(--ink);
  max-width: 50rem;
  margin: 0 auto;
  text-align: left;
}

.wwm-why-one__body p + p {
  margin-top: var(--s-4);
}

.wwm-why-one__body em {
  font-style: italic;
  color: var(--sage);
  font-weight: var(--w-medium);
}

/* ----- Why 1:1 ends ----- */
.wwm-paths {
  background: var(--cream-deep);
  border-top: 1px solid var(--whisper);
  border-bottom: 1px solid var(--whisper);
}

.wwm-paths__header {
  text-align: center;
  margin-bottom: var(--s-8);
}

.wwm-paths__heading {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: var(--w-light);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin-top: var(--s-3);
  color: var(--ink);
}

.wwm-paths__heading em {
  font-style: italic;
  color: var(--sage);
}

.wwm-paths__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  max-width: 64rem;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .wwm-paths__cards {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
  }
}

.wwm-path-card {
  background: var(--paper);
  border: 1px solid var(--whisper);
  padding: var(--s-7) var(--s-6);
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.wwm-path-card--primary {
  border-color: var(--sage);
  background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
}

.wwm-path-card__label {
  font-family: var(--font-eyebrow);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: var(--s-4);
}

.wwm-path-card__title {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--w-regular);
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: var(--s-5);
  letter-spacing: -0.01em;
}

.wwm-path-card__desc {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  color: var(--ink);
  margin-bottom: var(--s-4);
}

.wwm-path-card__points {
  list-style: none;
  padding: 0;
  margin: var(--s-5) 0;
  border-top: 1px solid var(--whisper);
  border-bottom: 1px solid var(--whisper);
  padding: var(--s-4) 0;
}

.wwm-path-card__points li {
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-style: italic;
  color: var(--muted);
  padding: var(--s-1) 0;
  position: relative;
  padding-left: var(--s-4);
}

.wwm-path-card__points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85rem;
  width: 6px;
  height: 1px;
  background: var(--sage);
}

.wwm-path-card__cta {
  margin-top: auto;
  align-self: stretch;
  text-align: center;
}

/* ----- Group coaching ----- */
.wwm-group__inner {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}

.wwm-group__heading {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: var(--w-light);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: var(--s-4) auto var(--s-5);
  color: var(--ink);
}

.wwm-group__heading em {
  font-style: italic;
  color: var(--sage);
}

.wwm-group__body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  color: var(--ink);
  margin-bottom: var(--s-4);
  text-align: left;
}

.wwm-group__form {
  margin-top: var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.wwm-group__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.wwm-group__label {
  font-family: var(--font-eyebrow);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--sage);
}

.wwm-group__input {
  font-family: var(--font-body);
  font-size: var(--t-body);
  padding: var(--s-3) var(--s-4);
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  transition: border-color var(--d-base) var(--ease-out);
}

.wwm-group__input:focus {
  outline: none;
  border-color: var(--sage);
}

.wwm-group__submit {
  margin-top: var(--s-3);
}

.wwm-group__privacy {
  font-family: var(--font-body);
  font-size: var(--t-tiny);
  font-style: italic;
  color: var(--muted);
  text-align: center;
  margin-top: var(--s-2);
}

/* ----- About (short) ----- */
.wwm-about {
  background: var(--cream-deep);
  border-top: 1px solid var(--whisper);
  border-bottom: 1px solid var(--whisper);
}

.wwm-about__inner {
  max-width: var(--measure-wide);
  margin: 0 auto;
  text-align: center;
}

.wwm-about__heading {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: var(--w-light);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: var(--s-4) auto var(--s-6);
  color: var(--ink);
}

.wwm-about__heading em {
  font-style: italic;
  color: var(--sage);
}

.wwm-about__body {
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  color: var(--ink);
  max-width: 50rem;
  margin: 0 auto;
  text-align: left;
}

.wwm-about__body p + p {
  margin-top: var(--s-4);
}

/* ----- FAQ ----- */
.wwm-faq__header {
  text-align: center;
  margin-bottom: var(--s-7);
}

.wwm-faq__heading {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: var(--w-light);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin-top: var(--s-3);
  color: var(--ink);
}

.wwm-faq__heading em {
  font-style: italic;
  color: var(--sage);
}

.wwm-faq__items {
  max-width: 50rem;
  margin: 0 auto;
}

.wwm-faq__item {
  border-bottom: 1px solid var(--whisper);
  padding: var(--s-4) 0;
}

.wwm-faq__item:first-child {
  border-top: 1px solid var(--whisper);
}

.wwm-faq__q {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-weight: var(--w-regular);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  padding: var(--s-2) 0;
  position: relative;
  padding-right: var(--s-7);
}

.wwm-faq__q::-webkit-details-marker {
  display: none;
}

.wwm-faq__q::after {
  content: '+';
  position: absolute;
  right: var(--s-2);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: var(--t-h3);
  color: var(--sage);
  transition: transform var(--d-base) var(--ease-out);
  font-weight: var(--w-light);
}

.wwm-faq__item[open] .wwm-faq__q::after {
  transform: translateY(-50%) rotate(45deg);
}

.wwm-faq__a {
  padding-top: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  color: var(--ink);
}

.wwm-faq__a p {
  max-width: 56ch;
}

/* ----- Final invitation ----- */
.wwm-close {
  background: var(--ink);
  color: var(--cream);
  padding: var(--s-9) 0;
}

.wwm-close__inner {
  max-width: var(--measure);
  margin: 0 auto;
  text-align: center;
}

.wwm-close__heading {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: var(--w-light);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin-bottom: var(--s-5);
  color: var(--cream);
}

.wwm-close__heading em {
  font-style: italic;
  color: var(--sage);
}

.wwm-close__body {
  font-family: var(--font-body);
  font-size: var(--t-lead);
  font-style: italic;
  line-height: var(--lh-relaxed);
  color: var(--cream-deep);
  max-width: 44ch;
  margin: 0 auto var(--s-7);
  opacity: 0.85;
}

.wwm-close__cta .btn {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}

.wwm-close__cta .btn:hover {
  background: var(--paper);
  color: var(--ink);
}