/* Services page. Desktop measured at 1440px, mobile at 390px (same conventions as site.css). */

/* ---------- Hero ---------- */
.svc-hero__img { object-fit: cover; }
.svc-hero__title { max-width: 520px; }
.btn.svc-hero__btn { margin-top: 20px; width: 310px; height: 42px; }

/* ---------- Tried everything ---------- */
.svc-tried__title { max-width: 400px; }
.svc-tried__p { margin-top: 18px; max-width: 493px; }
.svc-tried__h5 { margin-top: 21px; max-width: 477px; }
.btn.svc-tried__btn { margin-top: 23px; width: 257px; height: 42px; }
.svc-tried__cloud { z-index: 2; }
.svc-tried__script { z-index: 3; }

/* ---------- Heart + tabs ---------- */
.svc-heart__script { z-index: 1; }
.svc-tabs { padding: 27px 81px 80px; }
.svc-tabs__list { display: grid; grid-template-columns: 378px 472px 398px; gap: 15px; }
.svc-tab { height: 100px; border-radius: 20px; background: var(--peach); font-size: 36.9px; line-height: 51.66px; transition: background-color .25s ease, transform .25s ease; }
.svc-tab:hover { transform: translateY(-2px); }
.svc-tab[aria-selected="true"] { background: var(--yellow); }
.svc-tab:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.svc-panel { margin-top: 45px; display: grid; grid-template-columns: 453px 1fr; column-gap: 78px; animation: svc-fade .45s ease; }
.svc-panel[hidden] { display: none; }
@keyframes svc-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.svc-panel__head { display: flex; align-items: flex-start; gap: 22px; }
.svc-panel__head img { flex: none; width: 162px; height: 162px; border-radius: 50%; object-fit: cover; }
.svc-panel__head h3 { margin-top: -4px; }
.svc-panel__intro { margin-top: 39px; }
.svc-panel__list { margin-top: 25px; padding-left: 31px; list-style: disc; columns: 2; column-gap: 50px; }
.svc-panel__closing { margin-top: 22px; }
.svc-panel__learn { margin-top: 38px; }
.btn.svc-panel__btn { margin-top: 23px; min-width: 228px; height: 42px; padding: 0 28px; }

/* ---------- Process ---------- */
.svc-process__wave { z-index: 0; object-fit: cover; }
.svc-step { z-index: 1; display: flex; align-items: flex-start; gap: 17px; }
.svc-step__num { flex: none; display: flex; align-items: center; justify-content: center; width: 41px; height: 41px; border-radius: 50%; color: var(--cream); font-size: 22.5px; line-height: 1; margin-top: 2px; }
.svc-step p { margin-top: 12px; max-width: 316px; }

/* ---------- Struggles ---------- */
.svc-types__title { margin-top: 4px; }
.svc-cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 303px); gap: 22px; }
.svc-card { height: 467px; padding: 33px 34px; border-radius: 30px; }
.svc-card p { margin-top: 23px; max-width: 235px; }
.btn.svc-types__btn { width: 267px; height: 42px; z-index: 1; }

/* ---------- Walks away with / roadmap ---------- */
.sec--svc-walk, .sec--svc-roadmap { background: var(--green); color: var(--cream); }
.svc-bullets { margin-top: 14px; padding-left: 29px; list-style: disc; }
.svc-roadmap__photo { border-radius: 30px; object-fit: cover; z-index: 1; }

/* ---------- Sturdy parent ---------- */
.svc-sturdy__photo .guide-photo__img { object-fit: cover; }
.svc-sturdy__title { max-width: 480px; }
.svc-sturdy__h5 { margin-top: 18px; max-width: 494px; }
.svc-sturdy__p { margin-top: 22px; max-width: 517px; }
.svc-sturdy__p2 { margin-top: 26px; max-width: 517px; }

/* ---------- Testimonial ---------- */
.svc-quote__title { max-width: 560px; }
.svc-quote__p { margin-top: 30px; max-width: 587px; }
.svc-quote__sig { margin: -8px 0 0 486px; width: 170px; }

/* ---------- Early intervention ---------- */
.svc-power__title { font-size: inherit; }
.svc-power__title .t-number { white-space: nowrap; }
.svc-power__photo .guide-photo__img { width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; }
.svc-power__p a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- FAQ ---------- */
.sec--svc-faq { position: relative; overflow: clip; }
.svc-faq__wave { position: absolute; left: 0; top: 0; width: 100%; height: 269px; object-fit: cover; z-index: 0; }
.svc-faq { position: relative; z-index: 1; padding: 46px 101px 100px; }
.faq { margin-top: 47px; display: grid; grid-template-columns: repeat(2, 602px); column-gap: 34px; align-items: start; }
.faq__col { display: flex; flex-direction: column; gap: 10px; }
.faq__item { border-radius: 20px; background: var(--peach); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 74px; padding: 21px 25px; font-size: 22.5px; line-height: 31.5px; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__chev { flex: none; width: 13px; height: 8px; fill: none; stroke: var(--green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.faq__item[open] .faq__chev { transform: rotate(180deg); }
.faq__a { padding: 0 25px 24px; font-size: 16.2px; line-height: 25.92px; }
.faq__a a { text-decoration: underline; }
.faq__item[open] .faq__a { animation: svc-fade .35s ease; }

/* ---------- Joy ---------- */
.btn.svc-joy__btn { width: 267px; height: 42px; }

/* =====================================================================
   MOBILE
   ===================================================================== */
@media (max-width: 1023px) {
  .sec--svc-hero .stage { padding-bottom: 50px; }
  .svc-hero__img { position: relative; display: block; margin: 0 0 0 calc((100% - var(--zw, 390px)) / 2); width: var(--zw, 100%); height: 470px; }
  .svc-hero__title { max-width: 310px; }
  .btn.svc-hero__btn { margin-top: 23px; width: 257px; height: 45px; font-size: 14.5px; }

  .sec--svc-tried .stage { padding-bottom: 47px; }
  .svc-tried__title { max-width: 330px; }
  .svc-tried__p { margin-top: 13px; }
  .svc-tried__h5 { margin-top: 14px; max-width: 315px; }
  .btn.svc-tried__btn { margin-top: 30px; width: 226px; height: 45px; }

  .svc-tabs { padding: 0 30px 50px; }
  .svc-tabs__list { grid-template-columns: 1fr; gap: 13px; }
  .svc-tab { height: 58px; font-size: 17px; line-height: 23.8px; }
  .svc-panel { margin-top: 33px; grid-template-columns: 1fr; }
  .svc-panel__head { gap: 12px; align-items: center; }
  .svc-panel__head img { width: 99px; height: 99px; }
  .svc-panel__head h3 { margin-top: 0; }
  .svc-panel__intro { margin-top: 19px; }
  .svc-panel__right { margin-top: 24px; }
  .svc-panel__list { margin-top: 18px; padding-left: 27px; columns: 1; }
  .svc-panel__closing { margin-top: 19px; }
  .svc-panel__learn { margin-top: 26px; }
  .btn.svc-panel__btn { margin-top: 15px; min-width: 212px; height: 45px; font-size: 16px; }

  .sec--svc-process-head .stage { padding-bottom: 12px; }
  .sec--svc-process .stage { padding-bottom: 60px; }
  .svc-step { gap: 11px; }
  .svc-step p { margin-top: 6px; max-width: 278px; }
  .svc-process__wave { z-index: 0; }

  .sec--svc-types-head .stage { padding-bottom: 0; }
  .svc-types__title { margin-top: 8px; max-width: 290px; }
  .sec--svc-types .stage { padding-bottom: 50px; }
  .svc-cards { grid-template-columns: 1fr; gap: 29px; width: 330px; }
  .svc-card { height: auto; padding: 19px 20px 24px; }
  .svc-card h3 { max-width: 230px; }
  .svc-card p { margin-top: 20px; max-width: 290px; }
  .btn.svc-types__btn { width: 212px; height: 45px; font-size: 14.5px; }

  .sec--svc-walk .stage { padding-bottom: 20px; }
  .svc-walk__copy h2 { max-width: 280px; }
  .svc-bullets { margin-top: 9px; padding-left: 27px; }
  .sec--svc-roadmap .stage { padding-bottom: 190px; }
  .svc-roadmap__photo { height: 268px; }
  .svc-roadmap__list .svc-bullets { margin-top: 17px; }
  .sec--svc-roadmap .stage { display: flex; flex-direction: column; }
  .svc-roadmap__copy { order: 1; }
  .svc-roadmap__photo { order: 2; }
  .svc-roadmap__list { order: 3; }

  .sec--svc-sturdy .stage { padding-bottom: 31px; }
  .sec--svc-sturdy .stage { display: flex; flex-direction: column; }
  .svc-sturdy__copy { order: 1; }
  .svc-sturdy__photo { order: 2; margin-left: 51px; width: 288px; height: 287px; }
  .svc-sturdy__photo .guide-photo__img { width: 286px; height: 286px; }
  .svc-sturdy__title { max-width: 280px; }
  .svc-sturdy__h5 { margin-top: 17px; }
  .svc-sturdy__p { margin-top: 21px; }
  .svc-sturdy__p2 { margin-top: 24px; }

  .sec--svc-quote .stage { padding-bottom: 50px; }
  .svc-quote__p { margin-top: 17px; }
  .svc-quote__sig { margin: 3px 0 0 223px; width: 100px; }

  .sec--svc-power { height: 597px; }
  .svc-power__photo { width: 94px; height: 94px; }

  .svc-faq__wave { top: 450px; height: 194px; }
  .svc-faq { padding: 49px 30px 49px; }
  .faq { margin-top: 56px; grid-template-columns: 1fr; row-gap: 10px; }
  .faq__item summary { min-height: 69px; padding: 21px 18px; font-size: 19px; line-height: 26.6px; }
  .faq__a { padding: 0 18px 20px; font-size: 15px; line-height: 24px; }

  .sec--joy.bg-white { height: 485px; }
  .btn.svc-joy__btn { width: 267px; height: 45px; }
}