/* =========================================================================
   SERVICES PAGE — matches "Service Page" design
   Loaded only on the Services template (see inc/enqueue.php).
   ========================================================================= */

.svc-page { background: #f5f5f5; overflow-x: clip; }

/* Shared heading + lead styles ------------------------------------------- */
.svc-h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.12;
  color: #2e3030;
  margin: 14px 0 0;
}
.svc-lead {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.6;
  color: #5c4a48;
  margin: 18px 0 0;
}
.svc-caps { text-transform: capitalize; }
.svc-page .eyebrow { color: #4c4c4c; }

/* Buttons: arrow + sizing ------------------------------------------------ */
.svc-btn { padding: 1.0625rem 1.875rem; font-weight: 600; border-radius: 6px; }
.svc-arrow { width: 20px; height: 20px; flex-shrink: 0; }
.svc-page .btn--primary { background: #6da8a3; border-color: #6da8a3; }
.svc-page .btn--primary:hover { background: #5c9490; border-color: #5c9490; }

/* Section dividers ------------------------------------------------------- */
.svc-divider { line-height: 0; width: 100%; pointer-events: none; }
.svc-divider--ribbon .svc-ribbon { display: block; width: 100%; height: clamp(70px, 7vw, 110px); }
.svc-divider--blob img { display: block; width: 100%; height: auto; }

/* =========================================================================
   1. HERO
   ========================================================================= */
.svc-hero { position: relative; padding-top: clamp(36px, 5vw, 72px); }
.svc-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: center;
  min-height: clamp(420px, 44vw, 600px);
}
.svc-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700;
  line-height: 1.04;
  color: #2e3030;
  margin: 18px 0 0;
}
.svc-hero__body {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.65;
  color: #4f4f4f;
  margin: 26px 0 0;
  max-width: 460px;
}
.svc-hero__text .svc-btn { margin-top: 36px; }
/* Photo bleeds to the right viewport edge */
.svc-hero__media { margin-right: calc(-50vw + 50% - var(--space-6)); }
.svc-hero__media img { display: block; width: 100%; height: auto; }

/* =========================================================================
   2. SERVICES OVERVIEW
   ========================================================================= */
.svc-overview { padding-top: clamp(40px, 5vw, 80px); }
.svc-overview__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  margin-bottom: clamp(48px, 6vw, 88px);
}
.svc-overview__intro { max-width: 540px; }
.svc-overview__illus img { display: block; width: 100%; max-width: 620px; height: auto; margin-inline: auto; }

/* 4-card row */
.svc-cards-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.svc-card {
  background: #ffffff;
  border: 1px solid #ececec;
  border-radius: 18px;
  padding: 40px 30px;
  text-align: center;
  box-shadow: 0 18px 36px rgba(0,0,0,0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.svc-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(0,0,0,0.09); }
.svc-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #e3f0ee;
  color: #5a9b93;
  margin-bottom: 22px;
}
.svc-card__icon svg { width: 30px; height: 30px; }
.svc-card__title {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  color: #2e3030;
  margin: 0 0 12px;
  line-height: 1.3;
}
.svc-card__body { font-size: 0.9375rem; line-height: 1.55; color: #6f6f6f; margin: 0; }

/* Centered note band + cta */
.svc-note {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 720px;
  margin: clamp(56px, 7vw, 96px) auto 0;
  padding: 22px 32px;
  background: rgba(255,255,255,0.5);
  border: 1px solid #efe3df;
  border-radius: 18px;
  text-align: center;
}
.svc-note__leaf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #f7e7e4;
  flex-shrink: 0;
}
.svc-note p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: #3a3a3a;
}
.svc-note em { font-style: normal; color: #098083; font-weight: 600; }
.svc-note--sm { max-width: 600px; }
.svc-note--sm p { font-family: var(--font-body); font-size: 0.875rem; color: #6a6a6a; }
.svc-note--sm .svc-note__leaf { width: 44px; height: 44px; }
.svc-note-cta { text-align: center; margin-top: 30px; }

/* =========================================================================
   3. DETAILED SERVICES
   ========================================================================= */
.svc-detailed { position: relative; padding-top: clamp(56px, 6vw, 96px); overflow: hidden; }
.svc-detailed__leaf {
  position: absolute;
  top: 40px;
  right: -40px;
  width: clamp(220px, 28vw, 460px);
  opacity: 0.5;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.svc-detailed .section-header { max-width: 620px; margin-bottom: clamp(40px, 5vw, 64px); }

.svc-cards-6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.svc-dcard {
  position: relative;
  background: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 22px;
  padding: 34px 32px 32px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.svc-dcard:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(0,0,0,0.10); }
.svc-dcard__star {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #6da8a3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.svc-dcard__star svg { width: 20px; height: 20px; }
.svc-dcard__head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.svc-dcard__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
}
.svc-dcard__icon svg { width: 30px; height: 30px; }
.svc-dcard__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
}
.svc-dcard__title {
  font-family: var(--font-display);
  font-size: 1.4375rem;
  font-weight: 700;
  color: #2e3030;
  line-height: 1.2;
  margin: 0 0 14px;
}
.svc-dcard__body { font-size: 0.9375rem; line-height: 1.55; color: #6a6a6a; margin: 0 0 22px; }
.svc-dcard__ideal {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 12px;
  padding: 14px 18px;
}
.svc-dcard__ideal-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; flex-shrink: 0; }
.svc-dcard__ideal-text { font-size: 0.8125rem; line-height: 1.4; color: #5f5f5f; }

/* Detailed card tones (icon circle / number / ideal pill) */
.svc-dcard--teal  .svc-dcard__icon { background: #e3f0ee; color: #5a9b93; }
.svc-dcard--teal  .svc-dcard__num  { color: #6da8a3; }
.svc-dcard--teal  .svc-dcard__ideal { background: #e9f3f1; }
.svc-dcard--teal  .svc-dcard__ideal-label { color: #4f9089; }

.svc-dcard--gray  .svc-dcard__icon { background: #ededed; color: #8a8a8a; }
.svc-dcard--gray  .svc-dcard__num  { color: #9a9a9a; }
.svc-dcard--gray  .svc-dcard__ideal { background: #efefef; }
.svc-dcard--gray  .svc-dcard__ideal-label { color: #7d7d7d; }

.svc-dcard--amber .svc-dcard__icon { background: #fbf0db; color: #c79a55; }
.svc-dcard--amber .svc-dcard__num  { color: #d0a45e; }
.svc-dcard--amber .svc-dcard__ideal { background: #fbf2e0; }
.svc-dcard--amber .svc-dcard__ideal-label { color: #bd934f; }

.svc-dcard--pink  .svc-dcard__icon { background: #fbe4e1; color: #cf8579; }
.svc-dcard--pink  .svc-dcard__num  { color: #d4938a; }
.svc-dcard--pink  .svc-dcard__ideal { background: #fbe9e6; }
.svc-dcard--pink  .svc-dcard__ideal-label { color: #c67d72; }

.svc-dcard--blue  .svc-dcard__icon { background: #e4ebf6; color: #7d9fc9; }
.svc-dcard--blue  .svc-dcard__num  { color: #8aa6d0; }
.svc-dcard--blue  .svc-dcard__ideal { background: #e8eef8; }
.svc-dcard--blue  .svc-dcard__ideal-label { color: #7392c0; }

/* =========================================================================
   4. WHO WE HELP
   ========================================================================= */
.svc-audience { position: relative; padding-top: clamp(56px, 6vw, 96px); }
.svc-audience__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.svc-audience__left { max-width: 560px; }
.svc-audience__photo { margin-top: 36px; }
.svc-audience__photo img { display: block; width: 100%; max-width: 560px; height: auto; }

.svc-audience__card {
  background: #ffffff;
  border: 1px solid #ededed;
  border-radius: 24px;
  padding: 20px 36px 36px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.05);
}
.svc-checklist { list-style: none; margin: 0; padding: 0; }
.svc-checklist li {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid #eee;
}
.svc-checklist li:last-child { border-bottom: none; }
.svc-checklist__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #e7efed;
  color: #6da8a3;
  flex-shrink: 0;
}
.svc-checklist__mark svg { width: 24px; height: 24px; }
.svc-checklist li span:last-child { font-size: 1.0625rem; line-height: 1.45; color: #3f3f3f; }

.svc-audience__fit {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: 8px;
  padding-top: 24px;
}
.svc-audience__fit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #f7e7e4;
  color: #c98b88;
  flex-shrink: 0;
}
.svc-audience__fit-icon svg { width: 26px; height: 26px; }
.svc-audience__fit p { margin: 0; font-size: 1rem; line-height: 1.5; color: #4f4f4f; }
.svc-audience__cta { width: 100%; justify-content: center; margin-top: 28px; }

/* =========================================================================
   5. CARE APPROACH
   ========================================================================= */
.svc-approach { padding-top: clamp(56px, 6vw, 96px); }
.svc-approach .section-header { max-width: 760px; margin-inline: auto; margin-bottom: clamp(48px, 6vw, 80px); }

.svc-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
/* Horizontal connector behind the number circles */
.svc-steps__rail {
  position: absolute;
  top: 29px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: repeating-linear-gradient(90deg, #ccd6d4 0 8px, transparent 8px 16px);
  z-index: 0;
}
.svc-step { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
.svc-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #f5f5f5;
  border: 2px solid currentColor;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
}
.svc-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin: 34px 0 20px;
}
.svc-step__icon svg { width: 42px; height: 42px; }
.svc-step__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: #2e3030;
  margin: 0 0 10px;
}
.svc-step__body { font-size: 0.9375rem; line-height: 1.5; color: #6a6a6a; margin: 0; max-width: 210px; }

/* Step tones (number ring color + soft icon circle) */
.svc-step--green .svc-step__num { color: #7aa886; }
.svc-step--green .svc-step__icon { background: #e6f0e8; color: #6aa17e; }
.svc-step--blue  .svc-step__num { color: #8aa6d0; }
.svc-step--blue  .svc-step__icon { background: #e6eef8; color: #7d9fc9; }
.svc-step--amber .svc-step__num { color: #d3a85a; }
.svc-step--amber .svc-step__icon { background: #fbf3e0; color: #cb9c4f; }
.svc-step--pink  .svc-step__num { color: #d4938a; }
.svc-step--pink  .svc-step__icon { background: #fbe8e6; color: #cf8579; }
.svc-step--sage  .svc-step__num { color: #84a892; }
.svc-step--sage  .svc-step__icon { background: #e9f0eb; color: #7fa890; }

/* =========================================================================
   6. READY TO BEGIN
   ========================================================================= */
.svc-ready { position: relative; padding: clamp(40px, 5vw, 80px) 0 clamp(60px, 7vw, 120px); }
.svc-ready__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.svc-ready__text { max-width: 520px; }
.svc-ready__actions { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 36px; }
.svc-ready__faq { background: #9a9a9a; border-color: #9a9a9a; color: #fff; }
.svc-ready__faq:hover { background: #828282; border-color: #828282; color: #fff; }
.svc-ready__media { margin-right: calc(-50vw + 50% - var(--space-6)); }
.svc-ready__media img { display: block; width: 100%; height: auto; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
  .svc-cards-4 { grid-template-columns: repeat(2, 1fr); }
  .svc-cards-6 { grid-template-columns: repeat(2, 1fr); }
  .svc-steps { grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .svc-step__icon { width: 78px; height: 78px; }
  .svc-step__body { font-size: 0.875rem; }
}

@media (max-width: 880px) {
  .svc-hero__inner { grid-template-columns: 1fr; gap: 8px; min-height: 0; }
  .svc-hero__media { margin-right: calc(-1 * var(--space-6)); margin-top: 16px; }
  .svc-hero__body { max-width: none; }
  .svc-overview__head { grid-template-columns: 1fr; gap: 32px; }
  .svc-overview__intro { max-width: none; }
  .svc-overview__illus { order: -1; }
  .svc-audience__inner { grid-template-columns: 1fr; gap: 40px; }
  .svc-audience__left { max-width: none; }
  .svc-ready__inner { grid-template-columns: 1fr; gap: 32px; }
  .svc-ready__media { margin-right: calc(-1 * var(--space-6)); order: -1; }
  .svc-ready__text { max-width: none; }
  /* Approach: wrap the 5 steps into a flexible grid */
  .svc-steps { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
  .svc-steps__rail { display: none; }
  .svc-step__icon { margin-top: 22px; }
}

@media (max-width: 560px) {
  .svc-cards-4 { grid-template-columns: 1fr; }
  .svc-cards-6 { grid-template-columns: 1fr; }
  .svc-steps { grid-template-columns: 1fr; }
  .svc-note { flex-direction: column; gap: 12px; padding: 24px; }
  .svc-ready__actions .svc-btn { width: 100%; justify-content: center; }
  .svc-audience__card { padding: 16px 22px 28px; }
  .svc-checklist li { gap: 14px; }
}